/* === editorial.css — журнальная вёрстка контентных страниц =====================
 *
 * Дизайн-система «Полевой журнал филолога». Спроектирована на «Предисловии»
 * и рассчитана на перенос на остальные 18 контентных разделов.
 * Документация системы: docs/design/editorial-system.md
 *
 * Всё скоупится под `.slide--editorial`, классы с префиксом `ed-`.
 * Прежняя система контентных слайдов (`.ch-banner`, `.sl-body`, `.card`,
 * `.grid-*`) не затрагивается: slides.css не редактируется вообще, поэтому
 * оставшиеся 18 страниц продолжают работать как работали.
 *
 * Осознанные запреты этой системы: карточек нет, стекла нет, скруглений на
 * контентных блоках нет, теней нет. Иерархия строится масштабом, ритмом и
 * волосяными линейками — приёмами набора, а не контейнерами.
 */

.slide--editorial {
  /* ── Сетка разворота ──
     12 колонок. Текст занимает 3–9 (полоса набора), 10–12 отданы под поле:
     маргиналии, подписи, номера. Асимметрия здесь конструктивная: она даёт
     журнальность и место для комментария, а не декоративный сдвиг. */
  --ed-cols: 12;
  --ed-gap: clamp(16px, 2vw, 28px);
  --ed-page: 1180px;                 /* предельная ширина разворота */
  /* 68ch, а не 64: единица ch считается по ширине нуля, а кириллица в Literata
     заметно уже — при 64ch фактическое измерение выходило 59 знаков. */
  --ed-measure: 68ch;                /* полоса набора: фактически 62–64 знака */

  /* ── Вертикальный ритм ──
     Всё кратно шагу. Разные паузы между блоками берутся умножением шага,
     а не произвольными числами — отсюда ощущение выверенности. */
  --ed-rhythm: 8px;
  --ed-space-xs: calc(var(--ed-rhythm) * 2);   /* 16 */
  --ed-space-s:  calc(var(--ed-rhythm) * 3);   /* 24 */
  --ed-space-m:  calc(var(--ed-rhythm) * 5);   /* 40 */
  --ed-space-l:  calc(var(--ed-rhythm) * 8);   /* 64 */
  --ed-space-xl: calc(var(--ed-rhythm) * 13);  /* 104 — пауза перед сменой темы */

  /* ── Типографическая шкала (1.25 от 17px) ── */
  --ed-display: clamp(44px, 7.2vw, 92px);
  --ed-h2: clamp(27px, 3vw, 33px);
  --ed-h3: 21px;
  --ed-lead: clamp(19px, 1.6vw, 22px);
  --ed-body: 17px;
  --ed-small: 13px;

  /* ── Материал ── */
  --ed-rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --ed-rule-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  /* 72%, а не 62%: на 62% маргиналии, подписи и сноски давали 4.42:1 — ниже порога
     WCAG AA для мелкого текста. Служебный уровень должен быть тише основного,
     но не за счёт читаемости. */
  --ed-ink-margin: color-mix(in srgb, var(--ink) 72%, transparent);

  position: absolute;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  padding: 0 0 var(--ed-space-xl);
}

/* Слой бумаги поверх всей полосы. Один элемент на страницу — в отличие от
   «Содержания», где 17 размытий душили композитор, здесь это статичный
   оверлей без blur и без will-change. */
.slide--editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--content-bg-texture);
  background-size: 640px auto;
  opacity: .05;
  mix-blend-mode: multiply;
}

.slide--editorial > * { position: relative; z-index: 1; }

/* ── Акцент главы ───────────────────────────────────────────────────────────
   Переопределяется на корне слайда и наследуется вниз: инициал, крупные числа,
   номер главы, линейки врезок и определений, номера сносок (.ed-ref, 11px) и
   подпись возврата (.ed-back, 13px).

   Акцентом набирается мелкий текст, поэтому порог 4.5:1 обязателен —
   послабление «крупный дисплейный ≥ 3:1» здесь неприменимо. Замерено к --paper
   #F5F3EF: терракота 5.40, бронза 5.37, сталь 5.50. Все три равно громкие,
   главы различаются оттенком, а не силой.

   --gold #A9741A как акцент использовать НЕЛЬЗЯ: 3.64:1. Бронза — это он же,
   затемнённый до проходного значения: издание получает не новый тон, а рабочую
   версию тона, который у него уже есть. */
.slide--editorial.ed-ch--bronze { --accent: #8A5A0F; }
.slide--editorial.ed-ch--steel  { --accent: #35678A; }
/* Слива, 5.72:1. Связывает главу с её же пурпурной карточкой в «Содержании». */
.slide--editorial.ed-ch--plum   { --accent: #7B4E8C; }
/* Зелень, 5.27:1. Не чужая системе: это затемнённый --good #14795E из tokens.css. */
.slide--editorial.ed-ch--forest { --accent: #1B7259; }

/* Морская волна, 5.73:1. Седьмая глава — первая контентная, и ей нужен тон,
   которого нет ни у одной методической. Сине-зелёный стоит между сталью #35678A
   и зеленью #1B7259 и не спорит ни с той, ни с другой: у стали нет жёлтой
   составляющей, у зелени нет синей. Выбран не по вкусу, а по смыслу — глава о
   звуке, а звук в издании читается волной (её же чертит разделитель ниже). */
.slide--editorial.ed-ch--marine { --accent: #0F6A6E; }

/* Чернильный индиго, 5.69:1. Восьмая глава — о слове, и цвет у неё цвет чернил
   словарной статьи. От стали #35678A отличается фиолетовой составляющей и
   насыщенностью: сталь — приглушённый серо-синий, индиго — синий с лиловым
   уклоном. От сливы #7B4E8C отличается тем же в обратную сторону. */
.slide--editorial.ed-ch--indigo { --accent: #4A5CA0; }

/* Краплак, 5.71:1. Девятая глава — о выражениях, которые пришли из быта: из
   ткани, верёвки, торгового дня. Её тон взят оттуда же — это цвет марены,
   которой красили ткань до появления анилиновых красителей.

   От терракоты #B23A16 отличается стороной, в которую уходит красный:
   терракота оранжевая (жжёная глина), краплак — холодный, с синей
   составляющей. Рядом на развороте их не бывает: глава 01 и глава 09 стоят
   через семь разделов. От сливы #7B4E8C отличается тем, что остаётся
   красным, а не переходит в фиолетовый. */
.slide--editorial.ed-ch--madder { --accent: #A93553; }

/* Мох, 5.40:1. Десятая глава — о том, как слово собирается из частей и растёт
   из корня, и тон взят оттуда же: жёлто-зелёный, цвет живой древесины и
   молодого побега.

   От бронзы #8A5A0F отличается тем, что уходит в зелёную сторону, а не в
   коричневую: у бронзы синей составляющей почти нет (0F), у мха её столько же,
   но зелёная вдвое выше красной. От зелени #1B7259 отличается стороной круга:
   зелень сине-зелёная (163°), мох жёлто-зелёный (79°) — между ними 84°.
   Глава 05 и глава 10 стоят через пять разделов и на развороте не встречаются. */
.slide--editorial.ed-ch--moss   { --accent: #556B1F; }

/* Тирский пурпур, 5.43:1. Одиннадцатая глава — о системе форм, и ей нужен был
   тон, которого в издании нет ни в одном виде. К этому моменту заняты девять,
   и свободных участков круга осталось три: чистая зелень (100–140°), сине-
   фиолетовый (250–270°) и пурпур (300–330°). Первые два отпали сразу: зелень
   становилась третьей после мха #556B1F и зелени #1B7259 и встала бы прямо
   рядом с главой 10, сине-фиолетовый лежит в 30° от индиго #4A5CA0 и читался
   бы его оттенком.

   Пурпур 314° стоит в 30° от сливы #7B4E8C и в 31° от краплака #A93553 —
   единственный оставшийся участок с равным зазором с обеих сторон. От сливы
   отличается тем, что уходит в красную сторону, а не в синюю; от краплака —
   тем, что перестаёт быть красным.

   ⚠ Свободных тонов с зазором ≥ 25° после этого не осталось. Главам 12–18
   система расширяется парой «тон + светлота» (тот же тон в другой ступени),
   а не новым тоном. Разбор — в editorial-system.md. */
.slide--editorial.ed-ch--tyrian { --accent: #8E4A7E; }

/* Лавр, 5.54:1. Двенадцатая глава берёт тот самый зелёный коридор 100–140°,
   который был отклонён при выборе тона для главы 11, — и это не отмена решения,
   а следствие того, что условия изменились. Тогда выбор шёл из трёх участков, и
   пурпур 314° выигрывал равным зазором с обеих сторон. Пурпур потрачен, и из
   оставшегося считается так:

     сине-фиолетовый 241° — 14° до индиго #4A5CA0 (227°), отпадает;
     лавр 132°       — 54° до мха #556B1F (77°) и 31° до зелени #1B7259 (163°).

   Минимальный зазор 31° — единственный оставшийся выше порога 25°. Третья
   зелень издания опознаётся не тоном, а ступенью: мох жёлто-оливковый, зелень
   RAFT сине-зелёная, лавр — чистый лист. Главы 10 и 12 стоят через морфологию,
   и на «Содержании» пара олива/лист различается, а пара лист/бирюза — тем более.

   ⚠ После лавра свободных участков круга не осталось совсем. Главам 13–18
   система расширяется парой «тон + светлота»: тот же тон в другой ступени
   светлоты при том же диапазоне контраста. Разбор — в editorial-system.md. */
.slide--editorial.ed-ch--laurel { --accent: #306E3C; }

/* Бордо, 8.47:1 — первый акцент издания, взятый ПАРОЙ «тон + светлота», а не
   новым участком круга. Механизм объявлен после лавра и здесь применяется
   впервые, поэтому расчёт приводится целиком:

     краплак #A93553 (глава 09) — тон 344°, светлота 0.44, контраст 5.71
     бордо   #7B2A3B (глава 13) — тон 347°, светлота 0.32, контраст 8.47

   Тон практически тот же — 3° разницы, ниже любого порога различения. Главы
   различает ступень светлоты: краплак звонкий и средний, бордо тёмное и
   глухое. На «Содержании» они стоят через три главы и не соседствуют.

   Контраст выходит за полосу издания 5.27–5.73 вверх, и это не промах, а плата
   за механизм: тон закреплён, светлоту двигать больше некуда, кроме как вниз,
   а вниз — значит темнее и контрастнее. Порог 4.5 выдержан с запасом; проверять
   пришлось обратное — не слишком ли акцент тёмен, чтобы читаться цветом.
   На инициале и крупных числах бордо опознаётся как цвет, а не как чёрный:
   насыщенность 0.49 держит его хроматическим.

   Выбор именно бордо предметный, а не свободный: глава о стилистике, её
   предметный ряд — типографская краска, редакторская правка и переплёт, и
   ни один из оставшихся тонов этот ряд не называет. */
.slide--editorial.ed-ch--claret { --accent: #7B2A3B; }

/* Прусская синь, 8.50:1 — второй акцент, взятый ПАРОЙ «тон + светлота». Пара
   к стали главы 03:

     сталь          #35678A (глава 03) — тон 205°, светлота 0.37, контраст 5.48
     прусская синь  #1F4A66 (глава 14) — тон 204°, светлота 0.26, контраст 8.50

   Три проверочных числа механизма выдержаны: контраст 8.50 ≥ 4.5, разница
   светлоты с парой 0.11 ≥ 0.10, насыщенность 0.53 ≥ 0.30 — синь остаётся
   хроматической и на инициале читается цветом, а не чёрным.

   Пара выбрана не наугад. Из тринадцати занятых тонов у стали самая большая
   свобода хода вниз: у морской волны #0F6A6E светлота уже 0.25, у индиго
   #4A5CA0 сдвиг вниз даёт ночной синий, неотличимый от чернил основного
   текста. Сталь при этом стоит у главы 03 «Методы» — от главы 14 её отделяет
   одиннадцать разделов, и на развороте пара не встречается ни разу.

   Выбор предметный: глава о норме, а норма живёт в документе — в протоколе,
   в словарной помете, в штемпеле. Прусская синь и есть цвет канцелярских
   чернил, которыми такие решения записывались. */
.slide--editorial.ed-ch--prussian { --accent: #1F4A66; }

/* Умбра, 10.49:1 — третий акцент, взятый ПАРОЙ «тон + светлота». Пара
   к бронзе главы 02:

     бронза #8A5A0F (глава 02) — тон  37°, светлота 0.30, контраст  5.34
     умбра  #54300F (глава 15) — тон  29°, светлота 0.19, контраст 10.49

   Три проверочных числа механизма выдержаны: контраст 10.49 ≥ 4.5, разница
   светлоты с парой 0.11 ≥ 0.10, насыщенность 0.70 ≥ 0.30. Вторая близкая
   пара — терракота #B23A16 главы 01 (тон 14°, светлота 0.39): разница
   светлоты 0.20, вдвое выше порога, так что умбра различается с обеими.

   Контраст самый высокий в издании, выше бордо (8.47) и прусской сини (8.50),
   и это тот же случай: тон закреплён парой, светлоту двигать некуда, кроме
   как вниз. Проверять пришлось обратное — не читается ли акцент чёрным.
   Не читается: насыщенность 0.70 держит его хроматическим и на инициале,
   и на крупных числах титула, где умбра опознаётся коричневой, а не тёмной.

   Свободные участки круга формально ещё есть — около 105° и около 255°, —
   но оба дали бы повтор, а не новый тон: 105° встал бы четвёртой зеленью
   между мхом #556B1F и лавром #306E3C, 255° — сине-фиолетовым между индиго
   #4A5CA0 и сливой #7B4E8C. Пара к бронзе честнее.

   Выбор предметный: практикум — мастерская и полевая работа, его предметный
   ряд это картотека, коробка образцов, полевая сумка. Умбра и есть цвет
   земляного пигмента, которым эти вещи окрашены. */
.slide--editorial.ed-ch--umber { --accent: #54300F; }

/* Вайда, 10.43:1 — четвёртый акцент, взятый ПАРОЙ «тон + светлота». Пара
   к индиго главы 08:

     индиго #4A5CA0 (глава 08) — тон 227°, светлота 0.46, контраст  5.69
     вайда  #2C3568 (глава 16) — тон 231°, светлота 0.29, контраст 10.43

   Три проверочных числа механизма выдержаны: контраст 10.43 ≥ 4.5, разница
   светлоты с парой 0.17 ≥ 0.10 (самая большая из четырёх пар издания),
   насыщенность 0.41 ≥ 0.30. Проверялось, как и у бордо, обратное — не читается
   ли акцент чёрным: не читается, на инициале и на числах титула вайда
   опознаётся синей.

   Почему пара, а не свободный участок круга. Формально свободны те же два
   коридора, что были отклонены при выборе умбры, — около 105° и около 255°.
   105° встал бы ЧЕТВЁРТОЙ зеленью между мхом #556B1F и лавром #306E3C;
   255° лёг бы ровно между индиго #4A5CA0 (227°) и сливой #7B4E8C (284°),
   в 28° от каждого, и на «Содержании» читался бы оттенком одного из них.
   Пара честнее: она объявляет родство, вместо того чтобы его маскировать.

   Различение с прусской синью #1F4A66 главы 14 проверено отдельно — это
   единственный другой тёмно-синий издания: тон 204° против 231°, разница 27°,
   выше порога 25°. Синь зеленоватая (канцелярские чернила), вайда уходит
   в фиолетовую сторону. Главы 14 и 16 стоят через практикум.

   Выбор предметный: глава о проверке, а проверка живёт в бланке и в отметке.
   Вайда — историческая красильная трава, дававшая ту же синь, что индиго,
   но из другого сырья; пара тонов и пара растений здесь совпадают буквально. */
.slide--editorial.ed-ch--woad { --accent: #2C3568; }

/* Тёрн #4A2A5C, 10.66:1 — семнадцатый акцент издания и ПЯТАЯ пара «тон +
   светлота» после бордо, прусской сини, умбры и вайды. Пара — слива #7B4E8C
   главы 04. Замерено:

     слива  #7B4E8C   тон 283.5°   светлота 0.427   насыщ. 0.284   контраст 5.72
     тёрн   #4A2A5C   тон 278.4°   светлота 0.263   насыщ. 0.373   контраст 10.66

   Три проверочных числа главы 13 и далее: контраст ≥ 4.5 — 10.66 ✓; разница
   светлоты с парой ≥ 0.10 — 0.164 ✓; насыщенность ≥ 0.30 — 0.373 ✓.
   Тон отличается от сливы на 5.1°, и это сделано намеренно: пара опознаётся
   ступенью, а не оттенком (тот же приём, что у краплака и бордо с их 3°).

   Различение с двумя соседями по фиолетовому участку круга проверено отдельно:
   до тирского пурпура #8E4A7E (314°) — 35.7°, до вайды #2C3568 (231°) — 47.4°,
   оба выше порога 25°. Главы 04 и 18 стоят на «Содержании» через четырнадцать
   разделов и на развороте не встречаются ни разу.

   Выбор предметный: указатель — концевой аппарат издания, самая тихая его
   часть. Тёрн темнее всех фиолетовых тонов набора и не звенит; на девяноста
   строках списка звонкий акцент читался бы шумом, а не ориентиром. */
.slide--editorial.ed-ch--damson { --accent: #4A2A5C; }

/* Графит, 5.71:1 — единственный нейтральный акцент в издании, и это не
   вкусовое решение. Глава «Шесть шляп» несёт шесть собственных цветов:
   любой шестой ХРОМАТИЧЕСКИЙ акцент спорил бы с ними за внимание. Обвязка
   уходит в нейтраль, и единственный цвет на странице принадлежит шляпам.

   Сами цвета шляп берутся из палитры издания, а не изобретаются: читатель
   видит их как шляпы, а не как акценты глав, и шесть новых оттенков сделали
   бы систему рыхлой. Белая шляпа заливки не получает — белое на бумаге не
   читается, у неё кольцо, и это честнее: «чистый лист» и есть её символика.
   Жёлтая по необходимости янтарная: солнечно-жёлтый на бумаге даёт 2.9. */
.slide--editorial.ed-ch--graphite {
  --accent: #5C6166;
  --hat-white:  var(--surface);
  --hat-yellow: #96520A;
  --hat-black:  var(--ink);
  --hat-red:    #B23A16;
  --hat-green:  #1B7259;
  --hat-blue:   #35678A;
}

/* ── Полоса набора ────────────────────────────────────────────────────────── */
/* Сетка объявляется один раз на контейнере; блоки внутри выбирают, сколько
   колонок занять. Так их можно переставлять, не пересчитывая отступы. */
.slide--editorial .ed-body {
  max-width: var(--ed-page);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}

/* По умолчанию блок встаёт на полосу набора: колонки 1–9 из 12. */
.slide--editorial .ed-body > * { grid-column: 1 / 10; }

/* ── Титульный разворот ───────────────────────────────────────────────────── */
.slide--editorial .ed-hero {
  position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ed-space-l) clamp(20px, 5vw, 64px) var(--ed-space-m);
  margin-bottom: var(--ed-space-xl);
  overflow: hidden;
  color: #fff;
  background: var(--ink);   /* подложка, пока фото не подгрузилось */
}
/* Фото отдельным <img>, а не CSS-фоном: так работает ленивая загрузка через
   lazy-media.js и корректный резолв пути от document.baseURI.
   `display: contents` — чтобы обёртка <picture> не создавала собственный бокс
   и не ломала абсолютное позиционирование картинки внутри hero. */
.slide--editorial .ed-hero picture { display: contents; }
.slide--editorial .ed-figure picture { display: block; }
.slide--editorial .ed-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Затемнение снизу под текст. Градиент, а не сплошная плашка: фото остаётся
   видимым сверху, а контраст под титулом набирается там, где он нужен. */
.slide--editorial .ed-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,14,10,.20) 0%, rgba(18,14,10,.34) 42%, rgba(18,14,10,.82) 100%);
}
.slide--editorial .ed-hero::after { z-index: 1; }
.slide--editorial .ed-hero__inner { position: relative; z-index: 2; max-width: var(--ed-page); width: 100%; margin-inline: auto; }

/* ── Общее для бестекстурных титулов глав 02, 03 и 04 ───────────────────────
   Базовый титул держит горизонтальный padding на себе и растянут во всю
   ширину окна, а .ed-body — это центрированный бокс max-width 1180px, внутри
   которого свой padding. Из-за этого сетки титула и полосы НЕ совпадают:
   замер показывал левый край номера главы на 64px против 106px у текстовой
   колонки. Переносим бокс-модель полосы на титул один в один — тогда 12
   колонок титула ложатся ровно на 12 колонок .ed-body. */
.slide--editorial .ed-hero--type,
.slide--editorial .ed-hero--split,
.slide--editorial .ed-hero--axis,
.slide--editorial .ed-hero--band,
.slide--editorial .ed-hero--atlas,
.slide--editorial .ed-hero--entry,
.slide--editorial .ed-hero--diptych,
.slide--editorial .ed-hero--morph,
.slide--editorial .ed-hero--matrix,
.slide--editorial .ed-hero--verdict,
.slide--editorial .ed-hero--tally,
.slide--editorial .ed-hero--marks,
.slide--editorial .ed-hero--alphabet,
.slide--editorial .ed-hero--spectrum { padding-inline: 0; }
.slide--editorial .ed-hero--type .ed-hero__inner,
.slide--editorial .ed-hero--split .ed-hero__inner,
.slide--editorial .ed-hero--axis .ed-hero__inner,
.slide--editorial .ed-hero--band .ed-hero__inner,
.slide--editorial .ed-hero--atlas .ed-hero__inner,
.slide--editorial .ed-hero--entry .ed-hero__inner,
.slide--editorial .ed-hero--diptych .ed-hero__inner,
.slide--editorial .ed-hero--morph .ed-hero__inner,
.slide--editorial .ed-hero--matrix .ed-hero__inner,
.slide--editorial .ed-hero--verdict .ed-hero__inner,
.slide--editorial .ed-hero--tally .ed-hero__inner,
.slide--editorial .ed-hero--marks .ed-hero__inner,
.slide--editorial .ed-hero--alphabet .ed-hero__inner,
.slide--editorial .ed-hero--spectrum .ed-hero__inner {
  max-width: var(--ed-page);
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ── Титул-шмуцтитул: только набор (глава 02) ───────────────────────────────
   Фотографии нет — значит нет ни подложки под неё, ни затемняющего градиента:
   текст лежит на бумаге страницы тем же чернилом, что и полоса, и вопрос
   читаемости текста на фото здесь не возникает вообще. Высоту задаёт
   содержимое, а не min-height, зарезервированный под картинку.

   Линейка снизу идёт во всю ширину окна, в отличие от всего остального на
   странице: это отбивка шмуцтитула от полосы, а не элемент полосы. */
.slide--editorial .ed-hero--type {
  min-height: 0;
  display: block;                /* снимает flex базового титула */
  background: none;              /* базовый держит --ink как подложку под фото */
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--type::after { content: none; }

.slide--editorial .ed-hero--type .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
}

/* Номер главы — единственное дисплейное событие первого экрана. Он же
   заменяет буквицу: два крупных знака антиквой на одном экране спорили бы,
   поэтому .ed-drop в этой главе не используется вовсе. */
.slide--editorial .ed-numeral {
  grid-column: 1 / 13;
  font-family: var(--font-display);
  font-size: clamp(72px, 13vw, 168px);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--accent);
  padding-bottom: var(--ed-space-s);
  border-bottom: 1px solid var(--ed-rule);
  margin-bottom: var(--ed-space-m);
}
.slide--editorial .ed-hero--type .ed-eyebrow    { grid-column: 1 / 13; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--type .ed-title      { grid-column: 1 / 8; }
.slide--editorial .ed-hero--type .ed-standfirst { grid-column: 8 / 13; margin-top: 0; max-width: none; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--type .ed-hero-meta  { grid-column: 1 / 13; border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }

/* ── Титул в разворот: изображение — колонка, а не фон (глава 03) ────────────
   Картинка стоит боксом в сетке, титул — на бумаге рядом. Текст и фотография
   не пересекаются ни в одной точке, поэтому затемнения нет и здесь. */
.slide--editorial .ed-hero--split {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-m);
  padding-bottom: 0;
}
.slide--editorial .ed-hero--split::after { content: none; }
/* Базовый титул держит picture { display: contents } ради абсолютной картинки.
   В разрезном титуле картинка обычная — обёртка обязана быть боксом. */
.slide--editorial .ed-hero--split picture { display: block; }

.slide--editorial .ed-hero--split .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
}
.slide--editorial .ed-hero__figure { grid-column: 1 / 7; margin: 0; }
.slide--editorial .ed-hero__figure img,
.slide--editorial .ed-hero__figure .ed-figure__placeholder { display: block; width: 100%; height: auto; }
.slide--editorial .ed-hero__text { grid-column: 7 / 13; padding-bottom: var(--ed-space-m); }

/* Титул живёт в половине ширины — дисплейная ступень опускается, иначе
   «Методы и приёмы обучения» встаёт в пять строк. */
.slide--editorial .ed-hero--split .ed-title      { font-size: clamp(40px, 5.2vw, 68px); }
.slide--editorial .ed-hero--split .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--split .ed-standfirst { max-width: none; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--split .ed-hero-meta  { border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }

/* ── Титул по центральной оси (глава 04) ────────────────────────────────────
   Единственный симметричный титул в издании, и это не вкусовое решение:
   диаманта — семь строк, расширяющихся к четвёртой и сужающихся обратно,
   то есть буквальный ромб. Глава объявляет собственную форму первым экраном.
   От типографского титула главы 02 отличается осью: там левый край и
   гигантский номер, здесь центр и симметрия.

   Сетка внутри не нужна — блок линейный, всё выстраивается по одной оси. */
.slide--editorial .ed-hero--axis {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  text-align: center;
}
.slide--editorial .ed-hero--axis::after { content: none; }
.slide--editorial .ed-hero--axis .ed-eyebrow { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--axis .ed-standfirst {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--ed-ink-margin);
}
/* Мета собирается к центру и отбивается короткой линейкой, а не полосой во всю
   ширину: широкая линейка спорила бы с осевой композицией. */
.slide--editorial .ed-hero--axis .ed-hero-meta {
  justify-content: center;
  max-width: 46ch;
  margin-inline: auto;
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* ── Титул кинополосой: текст на фотографии (глава 05) ──────────────────────
   Пятый тип титула в издании. Кадр 21:9 занимает всю ширину окна, титул лежит
   на нём внизу слева. Отличие от главы 01 не в положении текста, а в пропорции
   и в скриме: там портальный кадр 62vh и вертикальное затемнение снизу, здесь
   кинематографичная полоса и затемнение по двум осям — снизу и слева, — так
   что правая половина фотографии остаётся открытой.

   Высота задаётся пропорцией. max-height страхует широкие экраны, где 21:9
   съело бы весь экран, min-height — низкие, где полоса стала бы ниже титульного
   блока и обрезала его (.ed-hero наследует overflow: hidden). В CSS min-height
   имеет приоритет над max-height, поэтому текст защищён при любой высоте окна.

   width: 100% обязателен и не декоративен. Без явной ширины `aspect-ratio`
   вместе с `max-height` пересчитывает ШИРИНУ от высоты, как только потолок
   срабатывает: при окне 1280×620 hero выходил 1099px вместо 1265 и прижимался
   к левому краю (замерено). С определённой шириной высота считается от неё,
   а max-height ограничивает только высоту — фотография внутри кадрируется
   через object-fit: cover, а не сжимается. */
.slide--editorial .ed-hero--band {
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 480px;
  max-height: 76vh;
  padding-top: var(--ed-space-l);
  padding-bottom: var(--ed-space-l);
}
/* Затемнение по двум осям. Текст белый, поэтому проверяется не «на глаз»:
   пиксели кадра под титулом сэмплируются канвасом, композитятся со скримом и
   контраст считается по WCAG. Значения ниже подобраны по этому замеру. */
.slide--editorial .ed-hero--band::after {
  background:
    linear-gradient(to top,
      rgba(14,18,13,.94) 0%,
      rgba(14,18,13,.84) 26%,
      rgba(14,18,13,.62) 52%,
      rgba(14,18,13,.44) 78%,
      rgba(14,18,13,.30) 100%),
    linear-gradient(to right,
      rgba(14,18,13,.50) 0%,
      rgba(14,18,13,.22) 44%,
      rgba(14,18,13,.06) 74%,
      rgba(14,18,13,.06) 100%);
}
/* Кадр — подложка титула, а не блок в потоке. */
.slide--editorial .ed-hero__band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  z-index: 0;
}
/* Титул держится левой половины: правая отдана фотографии. Дисплейная ступень
   опущена относительно главы 01 — полный кегль в полосе 21:9 поднимал блок в
   светлую верхнюю треть кадра, где скрим уже погашен и контраст падал до 1.6
   (замерено). Меньший кегль удерживает весь титул в нижней половине. */
.slide--editorial .ed-hero--band .ed-title {
  font-size: clamp(38px, 4.4vw, 60px);
  /* Заголовок обязан идти одной строкой: дефис в «RAFT-технология» —
     точка переноса, и при max-width строка рвалась на «RAFT-» и «технология»,
     которые читались как два слова разного начертания. Естественная ширина
     411px при кегле 56px, внутри титула доступно 971px — помещается с запасом. */
  max-width: none;
  white-space: nowrap;
}
.slide--editorial .ed-hero--band .ed-standfirst { max-width: 42ch; }

/* ── Титул-спектр: шесть полос вместо фотографии (глава 06) ─────────────────
   Шестой тип титула. Фотографии нет: глава объявляет свою структуру цветом,
   а не снимком — шесть режимов мышления стоят столбцом справа от титула.
   Геометрия здесь работает на смысл, а не украшает: читатель видит состав
   метода до первого абзаца. Скрима нет, контраст тривиален — чернила по бумаге. */
.slide--editorial .ed-hero--spectrum {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--spectrum::after { content: none; }
.slide--editorial .ed-hero--spectrum .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
}
.slide--editorial .ed-hero--spectrum .ed-eyebrow    { grid-column: 1 / 8; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--spectrum .ed-title      { grid-column: 1 / 8; }
.slide--editorial .ed-hero--spectrum .ed-standfirst { grid-column: 1 / 8; max-width: none; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--spectrum .ed-hero-meta  { grid-column: 1 / 8; border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--spectrum .ed-spectrum   { grid-column: 8 / 13; grid-row: 1 / 5; }

/* ── Спектр: шесть цветов метода ────────────────────────────────────────────
   Открывает главу и замыкает её же — итоговая инфографика повторяет то, чем
   глава началась. В титуле идёт столбцом, в конце — лентой (--row).
   Цвет берётся из локальной --hat, объявленной на каждой строке разметкой,
   поэтому шесть цветов живут в одном наборе правил. */
.slide--editorial .ed-spectrum {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ed-space-xs);
}
.slide--editorial .ed-spectrum li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: var(--ed-space-s);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: var(--ed-ink-margin);
}
/* Плашка цвета. У белой шляпы вместо заливки кольцо: белое на бумаге не
   читается, а «чистый лист» — её собственная символика. */
.slide--editorial .ed-spectrum li::before {
  content: '';
  display: block;
  height: 10px;
  background: var(--hat, var(--accent));
  border: 1px solid transparent;
}
.slide--editorial .ed-spectrum li[data-hat="white"]::before {
  background: var(--surface);
  border-color: var(--ed-rule-strong);
}
/* Лентой: шесть колонок, подпись под плашкой. */
.slide--editorial .ed-spectrum--row {
  grid-column: 1 / 13;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-spectrum--row li {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--ed-space-xs);
}

/* ── Титул-атлас: кадр в край, титул на шве (глава 07) ─────────────────────
   Седьмой тип титула. Отличие от главы 01 (текст поверх фотографии) и от
   главы 05 (кинополоса, текст на кадре внизу слева) принципиальное: здесь
   текст на кадре НЕ лежит вовсе. Кадр 2.4:1 идёт во всю ширину окна и
   обрывается, а титульная плита выезжает на него снизу и перекрывает шов.

   Приём взят из атласов и научных изданий: пластина и подпись к ней —
   два разных объекта, подпись не пишут поверх пластины. Отсюда и вся
   остальная глава: одиннадцать нумерованных пластин с подписями на линейке.

   Побочная выгода — контраст. Титул набирается чернилами по бумаге, поэтому
   ни скрима, ни канвас-замера контраста по пикселям кадра здесь не нужно.

   width: 100% при aspect-ratio обязателен: без явной ширины браузер считает
   ширину от высоты, как только срабатывает max-height, и кадр отъезжает от
   левого края (глава 05 ловила это дважды). */
.slide--editorial .ed-hero--atlas {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: 0;
  padding-bottom: var(--ed-space-m);
}
.slide--editorial .ed-hero--atlas::after { content: none; }
.slide--editorial .ed-hero--atlas picture { display: block; }
.slide--editorial .ed-hero__plate {
  display: block;
  width: 100%;
  /* height: auto обязателен и не декоративен. У <img> стоят атрибуты
     width/height размера файла — браузер отображает их презентационной
     подсказкой, и высота получает конкретное значение в пикселях. А
     `aspect-ratio` управляет высотой ТОЛЬКО когда высота автоматическая:
     при height: 1067px пропорция игнорируется целиком. На широком экране
     дефект был скрыт потолком max-height, на 480px кадр вышел 480×1067
     вместо 480×270 (замерено). */
  height: auto;
  aspect-ratio: 2.4 / 1;
  max-height: 58vh;
  object-fit: cover;
  margin: 0;
}
/* Плита титула наезжает на кадр на 64px. Собственная заливка бумагой нужна:
   без неё нижняя полоса фотографии просвечивала бы сквозь набор. */
.slide--editorial .ed-hero--atlas .ed-hero__inner {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--ed-space-l) * -1);
  padding-top: var(--ed-space-m);
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
}
.slide--editorial .ed-hero--atlas .ed-eyebrow    { grid-column: 1 / 9; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--atlas .ed-title      { grid-column: 1 / 9; }
.slide--editorial .ed-hero--atlas .ed-standfirst { grid-column: 1 / 9; max-width: none; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--atlas .ed-hero-meta  { grid-column: 1 / 13; border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--atlas .ed-index      { grid-column: 9 / 13; grid-row: 1 / 4; }

/* Указатель пластин: оглавление визуального аппарата главы до первого абзаца.
   Читатель сразу видит, что глава устроена как атлас, а не как текст с
   картинками. Роль та же, что у спектра в главе 06, — объявить состав, — но
   средство другое: там цвет, здесь нумерация и линейки. */
.slide--editorial .ed-index {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: end;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.4;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-index li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: var(--ed-space-xs);
  padding: 5px 0;
  border-top: 1px solid var(--ed-rule);
  margin-bottom: 0;
}
.slide--editorial .ed-index li:first-child { border-top-color: var(--ed-rule-strong); }
.slide--editorial .ed-index b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Титул-словарная статья (глава 08) ──────────────────────────────────────
   Восьмой тип титула. Отличие от всех предыдущих не в раскладке, а в жанре:
   титул набран как статья словаря — заглавное слово с ударением, грамматическая
   помета, три пронумерованных значения. Ни одна другая глава не объявляет тему
   структурой самого набора; глава о слове объявляет.

   Фотография — вертикальная колонка справа, уходящая ВВЕРХ за край дека.
   От разрезного титула главы 03 отличается всем: там фото слева, 1–6, ровно по
   нижнему краю; здесь справа, 8–12, пропорция 3:4 и обрез сверху.

   Отрицательный margin ровно на --chrome-top: под шапкой у слайда
   зарезервировано 76px, и колонка занимает их, подныривая под стекло. Это не
   трюк, а штатная модель проекта — панели плавают поверх дека именно затем. */
.slide--editorial .ed-hero--entry {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: 0;
  padding-bottom: var(--ed-space-m);
}
.slide--editorial .ed-hero--entry::after { content: none; }
.slide--editorial .ed-hero--entry picture { display: block; }
.slide--editorial .ed-hero--entry .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  /* xl, как у остальных бестекстурных титулов (главы 02, 04, 06). Меньше нельзя:
     .slide--editorial обнуляет padding-top слайда, зарезервированный под шапку,
     и при 64px строка «Раздел II» вставала на y = 64 — под стеклом панели.
     Замерено: при xl верх надстрочника выходит на 104, панель кончается на 76. */
  padding-top: var(--ed-space-xl);
}
.slide--editorial .ed-hero--entry .ed-eyebrow    { grid-column: 1 / 8; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--entry .ed-title      { grid-column: 1 / 8; }
.slide--editorial .ed-hero--entry .ed-hero-meta  { grid-column: 1 / 8; border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--entry .ed-hero__column {
  grid-column: 8 / 13;
  grid-row: 1 / 6;
  /* Колонка поднимается выше верхней кромки дека: она съедает и отступ титула,
     и полосу под шапкой. Замерено: верх колонки выходит на −76, то есть 76px
     кадра уходит в обрез. Это и есть приём — фотография не начинается на
     странице, она в неё входит. Значимое в кадре держать ниже верхней трети. */
  margin: calc(var(--ed-space-xl) * -1 - var(--chrome-top)) 0 0;
}
.slide--editorial .ed-hero__column img,
.slide--editorial .ed-hero__column .ed-figure__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Грамматическая помета под заглавным словом. Курсив и служебный цвет —
   так её ставят в словарях, и так она не спорит с дисплейным кеглем. */
.slide--editorial .ed-gram {
  grid-column: 1 / 8;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--ed-lead);
  line-height: 1.4;
  color: var(--ed-ink-margin);
  margin-top: var(--ed-space-xs);
  padding-bottom: var(--ed-space-s);
  border-bottom: 1px solid var(--ed-rule);
}
/* Значения заглавного слова прямо в титуле. Это и есть стандфирст главы:
   вместо описательной фразы читатель получает саму структуру словарной статьи. */
.slide--editorial .ed-senses {
  grid-column: 1 / 8;
  list-style: none;
  padding: 0;
  margin: var(--ed-space-s) 0 0;
  counter-reset: ed-sense;
}
.slide--editorial .ed-senses li {
  counter-increment: ed-sense;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--ed-space-xs);
  align-items: baseline;
  font-size: var(--ed-body);
  line-height: 1.6;
  margin-bottom: var(--ed-space-xs);
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-senses li::before {
  content: counter(ed-sense) '.';
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── Титул-диптих: два кадра, титул плитой на левом (глава 09) ──────────────
   Девятый тип титула и первый в издании, который держит ДВА кадра. Это не
   приём ради разнообразия: глава о том, что у фразеологизма два чтения —
   буквальное («что делали руками») и переносное («что это значит сегодня»).
   Титул объявляет тему устройством, а не словами: слева предмет, из которого
   выражение выросло, справа сегодняшняя ситуация, в которой оно работает.
   Между кадрами — вертикальная линейка, шов диптиха.

   Текста на фотографии нет: титульная плита набирается чернилами по бумаге и
   наезжает на нижнюю кромку ЛЕВОГО кадра. Правый остаётся открытым до низа —
   иначе диптих читался бы как одна широкая фотография с подписью.
   Канвас-замер контраста по пикселям кадра здесь, как и в главе 07, не нужен.

   Дисплейный кегль опущен: «Фразеология» в 92px не помещается в шесть колонок
   и переносится по слогам. */
.slide--editorial .ed-hero--diptych {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: 0;
  padding-bottom: var(--ed-space-m);
}
.slide--editorial .ed-hero--diptych::after { content: none; }
.slide--editorial .ed-hero--diptych picture { display: block; }
.slide--editorial .ed-hero--diptych .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  /* xl, как у титулов глав 02, 04, 06 и 08. Меньше нельзя: .slide--editorial
     обнуляет padding-top слайда, зарезервированный под шапку, и верхняя кромка
     кадров уходит под стеклянную панель, которая кончается на 76px. */
  padding-top: var(--ed-space-xl);
}
.slide--editorial .ed-hero__frame { margin: 0; }
.slide--editorial .ed-hero__frame:first-of-type { grid-column: 1 / 7; grid-row: 1; }
.slide--editorial .ed-hero__frame:last-of-type  { grid-column: 7 / 13; grid-row: 1; position: relative; }
/* Шов диптиха. Линейка живёт в межколоннике и идёт на всю высоту пары вместе
   с подписями — так она читается сгибом разворота, а не рамкой кадра. */
.slide--editorial .ed-hero__frame:last-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ed-gap) / -2);
  border-left: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero__frame img,
.slide--editorial .ed-hero__frame .ed-figure__placeholder {
  display: block;
  width: 100%;
  /* height: auto — атрибуты width/height у <img> дают высоте конкретное
     значение в пикселях, а aspect-ratio управляет высотой только когда она
     автоматическая (та же ловушка, что у .ed-hero__plate в главе 07). */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.slide--editorial .ed-hero__frame figcaption {
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}
/* Служебная метка над подписью: «Буквально» / «Переносно». Акцентом и
   капителью — она называет не кадр, а способ чтения. */
.slide--editorial .ed-hero__frame figcaption b {
  display: block;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 2px;
}
/* Плита титула наезжает на левый кадр. Подъём (40px) заведомо меньше высоты
   самого надстрочника вместе с его верхним полем (24 + ~18 = 42), иначе между
   надстрочником и заголовком проглядывала бы полоса фотографии. */
.slide--editorial .ed-hero--diptych .ed-eyebrow {
  grid-column: 1 / 7;
  grid-row: 2;
  color: var(--ed-ink-margin);
  background: var(--paper);
  margin-top: calc(var(--ed-space-m) * -1);
  padding: var(--ed-space-s) var(--ed-space-s) 0 0;
}
.slide--editorial .ed-hero--diptych .ed-title {
  grid-column: 1 / 7;
  grid-row: 3;
  font-size: clamp(34px, 4.4vw, 60px);
}
.slide--editorial .ed-hero--diptych .ed-standfirst {
  grid-column: 1 / 7;
  grid-row: 4;
  max-width: none;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-hero--diptych .ed-hero-meta {
  grid-column: 1 / 13;
  grid-row: 5;
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* ── Титул-разбор: заглавие разобрано по составу (глава 10) ──────────────────
   Десятый тип титула. Единственный в издании, где заголовок не называет
   предмет главы, а показывает его: слово «Словообразование» набрано
   дисплейным кеглем и разложено на морфемы, под каждой — волосяная скобка и
   подпись роли. Читатель видит приём раньше, чем прочитает о нём.

   Фотографии в титуле нет, и это четвёртый бестекстурный титул издания
   (02 — цифра главы, 04 — осевая симметрия, 06 — цветные полосы). Геометрия у
   всех четырёх разная, а работу открывающего кадра здесь берёт полноширинная
   пластина сразу под титулом — такого порядка нет ни у одного из девяти
   существующих типов.

   padding-top обязателен: .slide--editorial обнуляет padding-top: var(--chrome-top)
   из base.css, и без него надстрочник уезжает под стеклянную панель. */
.slide--editorial .ed-hero--morph {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--morph::after { content: none; }

.slide--editorial .ed-hero--morph .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
}
.slide--editorial .ed-hero--morph .ed-eyebrow {
  grid-column: 1 / 13;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-hero--morph .ed-title {
  grid-column: 1 / 13;
  max-width: none;
  margin-bottom: var(--ed-space-m);
}
.slide--editorial .ed-hero--morph .ed-standfirst {
  grid-column: 1 / 9;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-hero--morph .ed-hero-meta {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-m);
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* ── Сегмент разбора ────────────────────────────────────────────────────────
   Общий элемент титула и блока .ed-morph: часть слова со скобкой и подписью
   роли. Сделан inline-grid в две строки — буквы сверху, подпись снизу, — а не
   абсолютным позиционированием: у сегмента «о» (интерфикс) подпись шире самих
   букв, и при absolute соседние подписи наезжали бы друг на друга. В сетке
   сегмент просто расширяется до ширины своей подписи, и столкновение
   невозможно ни при какой ширине окна.

   Скобка — это border-top у подписи, а не отдельный элемент: она всегда ровно
   по ширине своего сегмента. Разрыв между скобками соседних морфем даёт
   margin-inline: 1px — шов виден, слово продолжает читаться словом.

   Перенос строки внутри слова разрешён и происходит по границам морфем, то
   есть ровно там, где его сделал бы разбор. Поэтому переполнения на узком
   окне у титула не возникает. */
.slide--editorial .ed-morph__part {
  display: inline-grid;
  justify-items: center;
  margin-inline: 1px;
  vertical-align: top;
}
.slide--editorial .ed-morph__part::after {
  content: attr(data-role);
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1.5px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--ed-ink-margin);
}
/* Нулевое окончание букв не имеет, но существует и работает. Набирается
   принятым в разборе знаком ⌀ приглушённым тоном, скобка под ним — пунктиром:
   морфема есть, материального выражения у неё нет. */
.slide--editorial .ed-morph__part--zero { color: var(--ed-ink-margin); }
.slide--editorial .ed-morph__part--zero::after {
  border-top-style: dashed;
  /* Подпись здесь в две строки, а не в одну: сегмент расширяется до ширины
     своей подписи, и «нулевое окончание» одной строкой давало 114px против
     78px у самого широкого буквенного сегмента — пустое место оказывалось
     крупнее морфем. Перенос возвращает слот на место. */
  white-space: normal;
  max-width: 7em;
}

.slide--editorial .ed-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-title {
  font-family: var(--font-display);
  font-size: var(--ed-display);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.slide--editorial .ed-standfirst {
  font-family: var(--font-serif);
  font-size: var(--ed-lead);
  font-style: italic;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
  max-width: 46ch;
  margin-top: var(--ed-space-s);
}
.slide--editorial .ed-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ed-space-xs) var(--ed-space-m);
  margin-top: var(--ed-space-m);
  padding-top: var(--ed-space-xs);
  border-top: 1px solid rgba(255,255,255,.28);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: rgba(255,255,255,.78);
}

/* ── Лид ──────────────────────────────────────────────────────────────────── */
/* Селектор включает `.ed-body p`, иначе правило основного текста ниже перебивает
   его по специфичности и лид набирается тем же кеглем, что и абзацы. */
.slide--editorial .ed-body p.ed-lead {
  font-size: var(--ed-lead);
  line-height: 1.55;
  max-width: 60ch;              /* на 54ch лид ложился в 7 строк — тяжело для вводного абзаца */
  margin-bottom: var(--ed-space-m);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

/* ── Основной текст ───────────────────────────────────────────────────────── */
.slide--editorial .ed-body p {
  font-size: var(--ed-body);
  line-height: 1.7;
  max-width: var(--ed-measure);
  margin-bottom: var(--ed-space-s);
}

/* Инициал на ::first-letter — без лишней разметки и без риска, что буква
   уедет в буфер обмена отдельным символом при копировании абзаца. */
.slide--editorial .ed-drop::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: .82;
  font-weight: 600;
  margin: .06em .09em 0 0;
  color: var(--accent);
}

/* ── Маргиналия на боковом поле ───────────────────────────────────────────── */
.slide--editorial .ed-note {
  grid-column: 10 / 13;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  padding-top: 6px;
  border-top: 1px solid var(--ed-rule-strong);
  margin-bottom: var(--ed-space-s);
}

/* ── Полноширинная цитата ─────────────────────────────────────────────────── */
/* Цитата раскладывается по той же сетке, что и полоса: сама реплика занимает
   колонки 1–8, атрибуция уходит на боковое поле (10–12). При max-width:26ch
   блок схлопывался в узкий столбец на 10 строк, а справа оставалось больше
   половины ширины пустой — пауза читалась как дырка, а не как приём. */
.slide--editorial .ed-quote {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
  margin: var(--ed-space-xl) 0;
  padding: var(--ed-space-m) 0;
  border-top: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-quote blockquote {
  grid-column: 1 / 9;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* Стихотворный отрывок. Строки заданы автором: их нельзя ни переносить, ни
   балансировать, поэтому text-wrap сбрасывается, а кегль опускается на ступень —
   набор стиха традиционно тише пулл-квота. Без этого на узком экране блок
   остаётся в 1/9 собственной подсетки (~210px на 375px) и каждая строка
   ломается посередине. */
.slide--editorial .ed-quote--verse blockquote {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.5;
  text-wrap: initial;
}
.slide--editorial .ed-quote cite {
  grid-column: 10 / 13;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  padding-top: 6px;
  border-top: 1px solid var(--ed-rule-strong);
}

/* ── Блок цифр ────────────────────────────────────────────────────────────── */
.slide--editorial .ed-figures {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-figures > div { break-inside: avoid; }
.slide--editorial .ed-figures dt {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
.slide--editorial .ed-figures dd {
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
  max-width: 22ch;
}

/* ── Иллюстрации ──────────────────────────────────────────────────────────── */
.slide--editorial .ed-figure { margin: var(--ed-space-l) 0; }
.slide--editorial .ed-figure--wide { grid-column: 1 / 13; }
.slide--editorial .ed-figure--margin { grid-column: 10 / 13; margin-top: 0; }
/* Плита по центральной оси (глава 04). Пятый способ подачи изображения в
   издании: 01 — полоса и поле, 02 — врезка с обтеканием, 03 — колонка титула
   и полоса, 04 — центрированная плита. Ширина меньше полосы набора: плита
   должна читаться как объект на оси, а не как полоса во всю ширину. */
.slide--editorial .ed-figure--plate {
  grid-column: 1 / 13;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.slide--editorial .ed-figure--plate .ed-caption { margin-inline: auto; }
.slide--editorial .ed-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Скруглений нет намеренно: край изображения в журнальной вёрстке —
     это край полосы, а не карточка. */
}
/* Место под ещё не сгенерированную иллюстрацию: держит пропорцию, чтобы
   вёрстка не поехала после подстановки файла. Промпты — в
   docs/design/preface-image-prompts.md */
.slide--editorial .ed-figure__placeholder {
  /* width обязателен вместе с aspect-ratio: без определённой ширины браузер
     вправе считать ширину ОТ высоты, как только сработает max-height или
     min-height (см. разбор в editorial-system.md). */
  width: 100%;
  aspect-ratio: var(--ed-ratio, 3 / 2);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--ink) 5%, transparent) 11px 12px),
    color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--ed-rule);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: var(--ed-ink-margin);
  text-align: center;
  padding: var(--ed-space-s);
}
/* Врезка с обтеканием (глава 02). Элементы грида друг друга не обтекают: float
   внутри одного grid-item не влияет на соседний item. Поэтому обтекание живёт
   в собственном контейнере — .ed-wrap и есть элемент сетки, а картинка с
   абзацами лежат в нём одним потоком.

   flow-root, а не overflow:hidden — контейнер обязан вместить флоат, но не
   должен обрезать надстрочные знаки сносок.

   Рядом с врезкой строка идёт 45–48 знаков вместо 68 и возвращается к полной
   ширине ниже неё. Это нормальное поведение обтекания в журнальной вёрстке;
   в чек-листе измерения .ed-wrap p считается исключением. */
.slide--editorial .ed-wrap {
  display: flow-root;
  max-width: var(--ed-measure);
  margin-bottom: var(--ed-space-s);
}
.slide--editorial .ed-wrap p:last-child { margin-bottom: 0; }
/* Ставится ПОСЛЕ --wide/--margin: специфичность равная, решает порядок в файле.
   8px сверху — оптическое выравнивание по высоте прописной первой строки. */
.slide--editorial .ed-figure--inset {
  float: left;
  width: clamp(150px, 30%, 200px);
  margin: 8px var(--ed-space-s) var(--ed-space-xs) 0;
}

/* Селектор включает `.ed-body p` по той же причине, что и лид: подпись,
   стоящая абзацем в полосе (примечание к схеме), иначе набирается кеглем
   основного текста — правило `.ed-body p` перебивает её по специфичности. */
.slide--editorial .ed-body p.ed-caption { font-size: var(--ed-small); line-height: 1.5; }
.slide--editorial .ed-caption {
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  max-width: 44ch;
}

/* ── Заголовки разделов внутри полосы ─────────────────────────────────────── */
.slide--editorial .ed-h2 {
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: var(--ed-space-xl) 0 var(--ed-space-s);
  text-wrap: balance;
}
.slide--editorial .ed-h3 {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--ed-space-m) 0 var(--ed-space-xs);
}

/* ── Нумерованный разбор ──────────────────────────────────────────────────── */
/* Счётчик, а не <ol>: номер набирается дисплейной антиквой и живёт в поле
   слева, как в научном издании. */
.slide--editorial .ed-steps { counter-reset: ed-step; list-style: none; margin-bottom: var(--ed-space-m); }
.slide--editorial .ed-steps li {
  counter-increment: ed-step;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--ed-gap);
  padding: var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
  max-width: var(--ed-measure);
}
.slide--editorial .ed-steps li::before {
  content: counter(ed-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ed-rule-strong);
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-steps b { font-weight: 600; }
.slide--editorial .ed-steps p { margin: 4px 0 0; font-size: 15px; color: var(--ed-ink-margin); max-width: none; }

/* ── Врезка ───────────────────────────────────────────────────────────────── */
/* Волосяная линейка слева вместо заливки и рамки — врезка остаётся частью
   полосы, а не отдельным блоком поверх неё. */
.slide--editorial .ed-panel {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-panel section { padding-left: var(--ed-space-s); border-left: 2px solid var(--accent); }
.slide--editorial .ed-panel h3 {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-panel ul { list-style: none; }
.slide--editorial .ed-panel li {
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-panel li:last-child { border-bottom: 0; }

/* ── Сноски ───────────────────────────────────────────────────────────────── */
.slide--editorial .ed-ref {
  font-family: var(--font-sans);
  /* Нижняя граница нужна: относительный .72em внутри 13px-подписи давал 9px —
     ниже порога читаемости. */
  font-size: max(11px, .72em);
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  margin-left: 1px;
}
.slide--editorial .ed-footnotes {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-l);
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
  columns: 2;
  column-gap: var(--ed-space-l);
}
.slide--editorial .ed-footnotes li { margin-bottom: var(--ed-space-xs); break-inside: avoid; }

/* ── Разделитель ──────────────────────────────────────────────────────────── */
.slide--editorial .ed-rule {
  grid-column: 1 / 13;
  border: 0;
  border-top: 1px solid var(--ed-rule);
  margin: var(--ed-space-xl) 0;
}

/* ── Колофон ──────────────────────────────────────────────────────────────── */
.slide--editorial .ed-colophon {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-xl);
  padding-top: var(--ed-space-m);
  border-top: 2px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.6;
  color: var(--ed-ink-margin);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
}
.slide--editorial .ed-colophon br { line-height: 1.9; }
.slide--editorial .ed-colophon dt {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: .02em;
}

/* Возврат к содержанию — редакционной подписью, а не плавающей кнопкой поверх фото */
.slide--editorial .ed-back {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 2px 0;
  cursor: pointer;
  transition: border-color .2s var(--ease-glass), color .2s var(--ease-glass);
}
.slide--editorial .ed-back:hover { border-bottom-color: var(--accent); }
.slide--editorial .ed-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Выделенное определение (глава 03) ──────────────────────────────────────
   Словарная статья, а не карточка: термин висит в колонках 1–3 под акцентной
   линейкой, толкование — в 4–9 под волосяной, поле 10–12 остаётся пустым.
   От .ed-panel (столбцы с линейкой слева) и от .ed-quote (реплика 1–8 плюс
   атрибуция на поле) отличается и левым краем, и распределением веса.

   Пауза m (40px), а не l: определений на странице пять, они должны читаться
   повторяющимся тактом внутри раздела, а не разрывом между разделами.

   Несколько пар в одном <dl> сами встают следующими строками — блок годится и
   под будущий глоссарий без правок. */
.slide--editorial .ed-def {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-m) 0;
}
.slide--editorial .ed-def dt {
  grid-column: 1 / 4;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--accent);
  padding-top: var(--ed-space-xs);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-def dd {
  grid-column: 4 / 10;
  margin: 0;
  font-size: var(--ed-body);
  line-height: 1.7;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
}

/* ── Диаманта: семистрочная форма (глава 04) ────────────────────────────────
   Сигнатурный блок главы и единственное симметричное построение в издании.

   Ромб получается ЦЕНТРИРОВАНИЕМ строк естественной длины, а не заданными
   ширинами. Источник сам даёт нарастание 1 → 2 → 3 → 4 → 3 → 2 → 1 слова,
   и центрирование превращает его в форму. Принудительные width сломались бы
   на любом другом стихотворении и на узком экране — не добавлять.

   Первая и седьмая строки — полюса: они набраны антиквой акцентом, остальные
   пять держат книжную гарнитуру. Разрядка на полюсах компенсирует прописные. */
.slide--editorial .ed-diamond {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
  text-align: center;
}
.slide--editorial .ed-diamond ol { list-style: none; padding: 0; margin: 0; }
.slide--editorial .ed-diamond li {
  font-family: var(--font-serif);
  font-size: var(--ed-lead);
  line-height: 1.9;
  max-width: 46ch;
  margin: 0 auto;
}
.slide--editorial .ed-diamond li:first-child,
.slide--editorial .ed-diamond li:last-child {
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--accent);
}
/* Четвёртая строка — точка перехода: в ней оба понятия сходятся. Отмечена
   курсивом, а не шириной. Замер показал, почему: силуэт ромба складывается
   из длин слов, и по-русски он получается только иногда («Ад / Рай» — да,
   «Онегин / Ленский» — нет, там пятая строка длиннее четвёртой). Форма
   диаманты концептуальная (1→2→3→4→3→2→1 слова), а не типографская;
   подпирать её заданными width — получить блок, который ломается на любом
   следующем стихотворении. Курсив держит середину без вранья о геометрии. */
.slide--editorial .ed-diamond li:nth-child(4) { font-style: italic; }

.slide--editorial .ed-diamond figcaption {
  margin: var(--ed-space-s) auto 0;
  text-align: center;
}

/* Абстрактная схема формы. Звучит тише заполненной диаманты: кегль книжный,
   цвет служебный, слева висят номера строк. Счётчик, а не <ol> по умолчанию —
   маркеры списка сбили бы центрирование. */
.slide--editorial .ed-diamond--scheme ol { counter-reset: ed-dia; }
.slide--editorial .ed-diamond--scheme li {
  counter-increment: ed-dia;
  font-size: var(--ed-body);
  line-height: 2.2;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-diamond--scheme li::before {
  content: counter(ed-dia);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: var(--ed-rule-strong);
  margin-right: var(--ed-space-xs);
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-diamond--scheme li:first-child,
.slide--editorial .ed-diamond--scheme li:last-child {
  font-size: var(--ed-h3);
  color: var(--accent);
}

/* Вариант с пропусками — диаманта как проверочное задание. Пропуск рисуется
   линейкой, а не многоточием: студент видит место для вписывания. */
.slide--editorial .ed-blank {
  display: inline-block;
  min-width: 5ch;
  border-bottom: 1px solid var(--ed-rule-strong);
  vertical-align: baseline;
}

/* ── Ключ RAFT: четыре элемента (глава 05) ──────────────────────────────────
   Сигнатурный блок главы. Источник подаёт четыре элемента таблицей; таблицы
   в системе нет и заводить её не нужно — четыре колонки под волосяной
   линейкой читаются тем же, но без вёрстки в тегах таблицы.

   Буква — единственное дисплейное событие блока. Английское слово капителью
   служебной гарнитурой, русское — книжной, пояснение — цветом маргиналий:
   три ступени тише буквы, поэтому блок не спорит с заголовками раздела. */
.slide--editorial .ed-raft {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-raft > div {
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-raft b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--accent);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-raft i {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--ed-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-raft strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  font-weight: 600;
  margin-top: 2px;
}
.slide--editorial .ed-raft p {
  margin: var(--ed-space-xs) 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}
/* Заполненный ключ: в примере английских слов нет, буква служит только
   якорем — кегль опускается, чтобы содержимое примера читалось первым. */
.slide--editorial .ed-raft--filled b { font-size: clamp(26px, 2.6vw, 34px); }
.slide--editorial .ed-raft--filled strong { font-size: var(--ed-lead); line-height: 1.3; }

/* ── Схема процесса: пять шагов в ряд (глава 05) ────────────────────────────
   Это диаграмма, а не список: у .ed-steps строки с описаниями и висячие
   номера слева, здесь — колонки равной ширины без описаний. Разные объекты,
   поэтому перечисление остаётся за главой 02. */
.slide--editorial .ed-flow {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
  list-style: none;
  counter-reset: ed-flow;
}
.slide--editorial .ed-flow li {
  counter-increment: ed-flow;
  padding: 0 var(--ed-space-s);
  border-left: 1px solid var(--ed-rule);
}
.slide--editorial .ed-flow li:first-child { padding-left: 0; border-left: 0; }
.slide--editorial .ed-flow li::before {
  content: counter(ed-flow, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-flow li > span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ink);
}

/* ── Галерея: ряд иллюстраций (глава 05) ────────────────────────────────────
   Три кадра одной съёмки, показывающие фазы работы. Единственное место в
   издании, где изображения стоят рядом: везде остальное — одиночная полоса,
   краевая фигура, врезка, колонка титула или плита по оси. */
.slide--editorial .ed-gallery {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-gallery figure { margin: 0; }
.slide--editorial .ed-gallery img { display: block; width: 100%; height: auto; }

/* ── Шесть шляп: секция на режим мышления (глава 06) ────────────────────────
   Сигнатурный блок главы. Каждая секция — цветной маркер, номер, название,
   символика цвета и фотография. Стороны чередуются: у нечётных фото справа,
   у чётных слева. Асимметрия здесь не приём ради приёма — она задаёт ритм
   листания: шесть одинаково расположенных секций читались бы как таблица.

   Цвет секции приходит из локальной --hat в разметке. Один набор правил на
   шесть цветов вместо шести наборов. */
.slide--editorial .ed-hats {
  grid-column: 1 / 13;
  display: grid;
  gap: var(--ed-space-xl) 0;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-hats > section {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
.slide--editorial .ed-hats__text   { grid-column: 1 / 8; grid-row: 1; }
.slide--editorial .ed-hats__figure { grid-column: 8 / 13; grid-row: 1; margin: 0; }
/* Чётные — зеркально. */
.slide--editorial .ed-hats > section:nth-child(even) .ed-hats__text   { grid-column: 6 / 13; }
.slide--editorial .ed-hats > section:nth-child(even) .ed-hats__figure { grid-column: 1 / 6; }

.slide--editorial .ed-hats__figure img,
.slide--editorial .ed-hats__figure .ed-figure__placeholder { display: block; width: 100%; height: auto; }

/* Шапка секции: маркер, номер, название на одной линии. */
.slide--editorial .ed-hats__head {
  display: flex;
  align-items: baseline;
  gap: var(--ed-space-s);
  padding-bottom: var(--ed-space-xs);
  border-bottom: 2px solid var(--hat, var(--accent));
  margin-bottom: var(--ed-space-s);
}
.slide--editorial .ed-hats__dot {
  flex: none;
  width: clamp(28px, 3vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hat, var(--accent));
  align-self: center;
}
/* Белая шляпа: всё, что красилось бы белым по бумаге, переводится в нейтраль.
   Маркер получает кольцо вместо заливки, номер и линейка — служебный цвет:
   белый на #F5F3EF даёт 1.11 и не виден вовсе (замерено). Опознавательный
   знак белой шляпы — контур, а не цвет краски. */
.slide--editorial .ed-hats [data-hat="white"] .ed-hats__dot {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ed-rule-strong);
}
.slide--editorial .ed-hats [data-hat="white"] .ed-hats__num { color: var(--ed-ink-margin); }
.slide--editorial .ed-hats [data-hat="white"] .ed-hats__head { border-bottom-color: var(--ed-rule-strong); }
.slide--editorial .ed-hats__num {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  line-height: 1;
  color: var(--hat, var(--accent));
}
.slide--editorial .ed-hats h3 {
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  margin: 0;
}
.slide--editorial .ed-hats p { margin: 0 0 var(--ed-space-s); }
.slide--editorial .ed-hats p:last-child { margin-bottom: 0; }
/* Символика цвета — голосом маргиналий: это не описание режима, а его образ. */
.slide--editorial .ed-hats__symbol {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* Второй проход по тем же шести цветам — разбор занятия. Фотографий нет,
   шаг сжат: читатель уже знает шляпы, ему нужен только ответ команды. */
.slide--editorial .ed-hats--compact { gap: var(--ed-space-m) 0; }
.slide--editorial .ed-hats--compact .ed-hats__text,
.slide--editorial .ed-hats--compact > section:nth-child(even) .ed-hats__text { grid-column: 1 / 10; }
.slide--editorial .ed-hats--compact .ed-hats__num { font-size: clamp(24px, 2.2vw, 30px); }
.slide--editorial .ed-hats--compact .ed-hats__dot { width: clamp(20px, 2vw, 26px); }

/* ═══ Глава 07 «Фонетика»: атлас звучащей речи ═══════════════════════════════
 *
 * Сигнатура главы — четыре блока, которые не используются больше нигде:
 *   .ed-plate   — нумерованная пластина атласа (несёт все 11 изображений)
 *   .ed-organs  — путь воздушной струи: одиннадцать органов на оси
 *   .ed-pair    — минимальные пары: одна фонема — другое слово
 *   .ed-tract   — три условия звучания как схема потока
 *
 * Почему именно они: раздел описывает УСТРОЙСТВО — органы, полости, потоки
 * воздуха, — а устройство показывают атласом и схемой, а не перечислением.
 * Перечисление принадлежит главе 02, определение — главе 03, схема-колонками
 * (.ed-flow) — главе 05; .ed-tract отличается от неё связями между модулями,
 * а не только именем: у .ed-flow колонки равны и независимы, здесь они
 * соединены и читаются как одна цепь.
 */

/* ── Пластина атласа ────────────────────────────────────────────────────────
   Шапка пластины — два псевдоэлемента на одной линейке: номер слева, формат
   кадра справа. Отсюда grid-template-columns: 1fr auto, а изображение и
   подпись растягиваются на обе колонки.

   Формат вынесен в разметку атрибутом, а не подставляется из --ed-ratio:
   пропорция нужна не только машине, но и читателю — в атласе она часть
   подписи к пластине, как масштаб на карте. */
.slide--editorial .ed-plate {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-plate::before,
.slide--editorial .ed-plate::after {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-plate::before {
  content: attr(data-plate);
  grid-column: 1;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .03em;
}
.slide--editorial .ed-plate::after {
  content: attr(data-format);
  grid-column: 2;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-plate > picture,
.slide--editorial .ed-plate > img,
.slide--editorial .ed-plate > .ed-figure__placeholder {
  grid-column: 1 / -1;
  margin-top: var(--ed-space-xs);
}
.slide--editorial .ed-plate > img,
.slide--editorial .ed-plate picture img { display: block; width: 100%; height: auto; }
.slide--editorial .ed-plate > .ed-figure__placeholder { width: 100%; }
.slide--editorial .ed-plate > figcaption { grid-column: 1 / -1; }

.slide--editorial .ed-plate--wide   { grid-column: 1 / 13; }
.slide--editorial .ed-plate--margin,
.slide--editorial .ed-plate--square { grid-column: 10 / 13; margin-top: 0; }
/* Врезка с обтеканием: ставится ПОСЛЕ --wide/--margin — специфичность равная,
   решает порядок в файле (то же правило, что у .ed-figure--inset). */
.slide--editorial .ed-plate--inset {
  float: left;
  width: clamp(150px, 32%, 210px);
  margin: 8px var(--ed-space-s) var(--ed-space-xs) 0;
}
/* Две пластины в разворот. Отдельный контейнер нужен потому, что сами
   пластины — элементы сетки .ed-body и рядом друг с другом не встают. */
.slide--editorial .ed-plates {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ed-gap);
}
.slide--editorial .ed-plates .ed-plate { margin: var(--ed-space-l) 0; }

/* Пластина-бланк: задание практикума подаётся тем же аппаратом, что и кадр,
   только вместо изображения — текст задания. Так практикум не выпадает из
   логики главы в отдельный «блок с упражнениями». */
.slide--editorial .ed-plate--task { margin: var(--ed-space-m) 0; }
.slide--editorial .ed-plate--task > * { grid-column: 1 / -1; }
.slide--editorial .ed-plate--task h3 {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--ed-space-xs) 0 6px;
}
.slide--editorial .ed-plate--task p { margin-bottom: 0; }
.slide--editorial .ed-plate--task ul { list-style: none; margin-top: 6px; }
.slide--editorial .ed-plate--task li {
  font-size: 15px;
  line-height: 1.6;
  padding-left: var(--ed-space-s);
  position: relative;
}
.slide--editorial .ed-plate--task li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 10px;
  border-top: 1px solid var(--accent);
}

/* ── Путь воздушной струи ───────────────────────────────────────────────────
   В источнике одиннадцать органов речи перечислены списком. Список ничего не
   объясняет: он не показывает, что органы стоят на одном пути и работают по
   очереди. Здесь тот же состав выстроен снизу вверх — от лёгких до губ, — и
   становится схемой, а не перечнем. Порядок изменён осознанно и оговорён
   подписью; ни один орган не добавлен и не убран.

   Ось — обычный левый бордер, точки — псевдоэлементы. SVG не нужен:
   вертикальная линия с засечками рисуется бордером, а лишний ресурс на
   странице с одиннадцатью изображениями ни к чему. */
.slide--editorial .ed-organs {
  grid-column: 1 / 13;
  list-style: none;
  margin: var(--ed-space-l) 0;
  padding: 0 0 0 var(--ed-space-m);
  border-left: 1px solid var(--accent);
  counter-reset: ed-organ;
}
.slide--editorial .ed-organs li {
  counter-increment: ed-organ;
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 15rem) 1fr;
  align-items: baseline;
  gap: var(--ed-space-xs) var(--ed-gap);
  padding: var(--ed-space-xs) 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-organs li:last-child { border-bottom: 0; }
/* Точка на оси. Кольцо, а не заливка: заливка на волосяной линии читается
   утолщением, кольцо — узлом. */
.slide--editorial .ed-organs li::before {
  content: '';
  position: absolute;
  left: calc(var(--ed-space-m) * -1 - 4px);
  top: calc(var(--ed-space-xs) + .55em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.slide--editorial .ed-organs b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-organs strong { font-weight: 600; font-size: var(--ed-body); }
.slide--editorial .ed-organs span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Минимальные пары ───────────────────────────────────────────────────────
   Сравнительная схема: три ряда по три слова, в каждом меняется одна буква.
   Меняемая буква — единственное, что набрано акцентом, и этого достаточно:
   различие видно до того, как прочитан комментарий. Ни рамок, ни заливок —
   ряды разделены волосяными линейками, как графы таблицы в научном издании. */
.slide--editorial .ed-pair {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-pair > section { break-inside: avoid; }
/* Блок, а не flex, и это не косметика. Во flex-контейнере каждый inline-элемент
   становится отдельным flex-элементом, а текст между ними — анонимным: строка
   «д<b>о</b>м · д<b>ы</b>м · д<b>а</b>м» распадалась на семь элементов, и
   flex-wrap рвал её между ними. Замерено: «м» уезжала на следующую строку
   отдельной буквой. В обычном потоке перенос возможен только по пробелам,
   то есть между словами, а слово не делится никогда.

   Двухколоночная сетка вместо auto-fit по той же причине: при четырёх колонках
   на ряд «дом · дым · дам» не помещался в строку целиком. */
.slide--editorial .ed-pair__words {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-pair__words b { font-weight: 600; color: var(--accent); }
.slide--editorial .ed-pair p {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  max-width: 30ch;
  margin-bottom: 0;
  padding-top: 6px;
  border-top: 1px solid var(--ed-rule-strong);
}

/* ── Три условия звучания ───────────────────────────────────────────────────
   Схема потока, а не столбцы: модули соединены пунктиром, потому что в
   источнике это цепь — воздух проходит через связки и уходит в резонатор.
   Этим блок отличается от .ed-flow главы 05, где четыре равноправные фазы
   стоят рядом и связи между ними нет. */
.slide--editorial .ed-tract {
  grid-column: 1 / 13;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
  counter-reset: ed-tract;
}
.slide--editorial .ed-tract li {
  counter-increment: ed-tract;
  position: relative;
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
  margin-bottom: 0;
}
/* Соединитель между модулями. Живёт в зазоре сетки, поэтому у последнего
   модуля его нет — иначе линия ушла бы за правый край полосы. */
.slide--editorial .ed-tract li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -2px;
  right: calc(var(--ed-gap) * -1);
  width: var(--ed-gap);
  border-top: 2px dotted var(--accent);
}
.slide--editorial .ed-tract li::before {
  content: counter(ed-tract, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-tract strong {
  display: block;
  font-size: var(--ed-body);
  font-weight: 600;
  margin-bottom: 6px;
}
.slide--editorial .ed-tract span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ── Разделитель-осциллограмма ──────────────────────────────────────────────
   .ed-rule существует в системе с самого начала и до сих пор не был
   использован ни в одной главе. Здесь он включается впервые и только здесь:
   в главе о звуке волнистая линейка — не украшение, а рефрен темы.
   Цвет в data-URI приходится записывать литералом: var() внутри URL не
   резолвится. Значение то же, что и у --accent этой главы. */
.slide--editorial.ed-ch--marine .ed-rule {
  border-top: 0;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6q6-5 12 0t12 0 12 0 12 0' fill='none' stroke='%230F6A6E' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
}

/* ── Интерактив на журнальной странице ──────────────────────────────────────
   Виджеты («найди пару», мини-тест, медиа) написаны для легаси-системы:
   карточки, скругления, тени, заливки состояний. Разметку править нельзя —
   движки цепляются за data-match, data-quiz-inline, .mc-option[data-idx],
   .match-item и .media-embed. Поэтому оформление переопределяется целиком
   здесь, и только внутри editorial-слайда: легаси-страницы 10–20 продолжают
   работать как работали.

   Правило перевода: заливка → волосяная линейка, скругление → прямой угол,
   тень → ничего, кегль → шкала системы. Верно/неверно остаются цветными:
   это единственная обратная связь, которую студент получает, и гасить её
   ради единообразия нельзя.

   backdrop-filter гасится отдельным правилом и не по вкусовым соображениям:
   widgets.css ставит его на каждую кнопку варианта и каждую карточку пары —
   на этой странице замер давал 46 композитных буферов на одном экране. Под
   ними ничего не проезжает, стекло там не работает, а прокрутка рвётся. */
.slide--editorial .match-game,
.slide--editorial .inline-quiz,
.slide--editorial .media-embed,
.slide--editorial .match-item,
.slide--editorial .mc-option,
.slide--editorial .match-game__reset,
.slide--editorial .media-embed__label {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.slide--editorial .match-game,
.slide--editorial .inline-quiz,
.slide--editorial .media-embed {
  grid-column: 1 / 10;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  padding: var(--ed-space-s) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  box-shadow: none;
}
.slide--editorial .match-game__hint,
.slide--editorial .media-embed__note {
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  margin: 0 0 var(--ed-space-s);
}
.slide--editorial .media-embed__label {
  background: none;
  padding: 0 0 var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--accent);
  border: 0;
}
.slide--editorial .media-ph {
  padding: var(--ed-space-m) var(--ed-space-s);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--ed-rule);
  border-radius: 0;
  text-align: center;
}
.slide--editorial .media-ph__title {
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  font-weight: 600;
  margin: var(--ed-space-xs) 0 6px;
}
.slide--editorial .media-ph__hint {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  max-width: 46ch;
  margin-inline: auto;
}

.slide--editorial .match-item,
.slide--editorial .mc-option {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ed-rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--ed-space-xs) 0;
  text-align: left;
  transition: color .18s var(--ease-glass), border-color .18s var(--ease-glass);
}
.slide--editorial .match-item:hover:not(:disabled),
.slide--editorial .mc-option:hover:not(:disabled) {
  background: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.slide--editorial .match-item.is-selected {
  background: none;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.slide--editorial .match-item.is-correct,
.slide--editorial .mc-option.is-correct {
  background: none;
  color: var(--good);
  border-bottom-color: var(--good);
}
.slide--editorial .match-item.is-wrong,
.slide--editorial .mc-option.is-wrong {
  background: none;
  color: var(--bad);
  border-bottom-color: var(--bad);
}
.slide--editorial .mc-letter {
  background: none;
  color: var(--ed-ink-margin);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 1.6em;
}
.slide--editorial .mc-option.is-correct .mc-letter { background: none; color: var(--good); }
.slide--editorial .mc-option.is-wrong   .mc-letter { background: none; color: var(--bad); }
.slide--editorial .mc-question__text {
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  font-weight: 600;
  line-height: 1.5;
}
.slide--editorial .mc-feedback {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
}
.slide--editorial .match-game__reset {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 0;
  padding: 2px 0;
  margin-top: var(--ed-space-s);
}
.slide--editorial .match-game__reset:hover { background: none; border-bottom-color: var(--accent); }
.slide--editorial .match-game.is-complete .match-game__reset { color: var(--good); border-bottom-color: var(--good); }

/* Фокус с клавиатуры. Правило обязательное, а не косметическое: в легаси-системе
   кнопку в фокусе выдавали рамка и заливка, здесь и то и другое снято — без
   явного кольца обход табом становится слепым. Обводка та же, что у .ed-back,
   чтобы фокус читался одинаково на всей странице. */
.slide--editorial .mc-option:focus-visible,
.slide--editorial .match-item:focus-visible,
.slide--editorial .match-game__reset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ═══ Глава 08 «Лексикология»: биография слова ═══════════════════════════════
 *
 * Сигнатура главы — четыре блока, которые не используются больше нигде:
 *   .ed-entry     — словарная статья: заглавное слово, помета, значения, примеры
 *   .ed-shift     — ось времени: одно слово, меняющееся толкование
 *   .ed-relations — четыре отношения между словами, показанные геометрией
 *   .ed-strata    — разрез словарного состава от ядра к периферии
 *
 * Глава 07 описывала УСТРОЙСТВО — её показали атласом пластин. Здесь предмет
 * другой: изменение во времени и отношения между единицами. Их показывают
 * статьёй, осью и схемой связей, а не пронумерованными кадрами.
 *
 * .ed-def главы 03 сюда особенно просится — глава ведь про определения. Не
 * берётся, и не только из-за закрепления за главой: .ed-def даёт термин и одно
 * толкование, .ed-entry — многозначную статью с пометами и примерами. Это
 * разные объекты, а не два имени одного.
 */

/* ── Словарная статья ───────────────────────────────────────────────────────
   Заглавное слово в колонках 1–4, значения в 5–12. Поле 10–12 здесь занято
   намеренно: статья должна читаться разворотом словаря, а не врезкой на полосе.
   Несколько статей подряд дают повторяющийся такт — это и есть приём. */
.slide--editorial .ed-entry {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-m) 0;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-entry__word {
  grid-column: 1 / 5;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}
.slide--editorial .ed-entry__gram {
  grid-column: 1 / 5;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  margin-top: 6px;
}
.slide--editorial .ed-entry__senses {
  grid-column: 5 / 13;
  grid-row: 1 / 3;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ed-entry-sense;
}
/* Обычный поток с висячим номером, а НЕ grid. Значение состоит из нескольких
   инлайновых кусков — помета, толкование, пример, — и в grid каждый из них
   становится отдельным элементом сетки: при двух колонках помета уходила в
   первую, толкование во вторую, а пример начинал вторую строку в колонке
   номера шириной 1.6rem и ложился поверх соседнего примера. Замерено:
   пересечение боксов двух <i> до 559×25px. В потоке пример — блок внутри
   строки значения, и наложиться ему не на что. */
.slide--editorial .ed-entry__senses > li {
  counter-increment: ed-entry-sense;
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--ed-body);
  line-height: 1.6;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-entry__senses > li:last-child { margin-bottom: 0; }
.slide--editorial .ed-entry__senses > li::before {
  content: counter(ed-entry-sense);
  position: absolute;
  left: 0;
  top: .35em;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Помета при значении: перен., устар., спец. Малые прописные не используются —
   Literata их не несёт, и подделка через font-size ломает ритм строки. */
.slide--editorial .ed-entry__mark {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-style: normal;
  color: var(--accent);
  margin-right: 6px;
  letter-spacing: .02em;
}
/* Пример употребления. Курсив и отбивка — как в словаре: пример не продолжает
   толкование, а иллюстрирует его. */
.slide--editorial .ed-entry__ex {
  display: block;
  font-style: italic;
  color: var(--ed-ink-margin);
  margin-top: 4px;
}

/* ── Биография слова на оси времени ─────────────────────────────────────────
   Одно слово повторяется на каждой станции, толкование под ним меняется.
   Ось непрерывная — она принадлежит контейнеру, а станции отмечены точками.
   Этим блок отличается от .ed-tract главы 07, где линейки принадлежат самим
   модулям, и от .ed-flow главы 05, где колонки разделены вертикалями. */
.slide--editorial .ed-shift {
  grid-column: 1 / 13;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-shift li {
  position: relative;
  margin-bottom: 0;
}
/* Станция на оси. Заливка, а не кольцо: у .ed-organs главы 07 узлы кольцевые,
   и повторять их приём здесь нельзя — блоки должны различаться и вблизи. */
.slide--editorial .ed-shift li::before {
  content: '';
  position: absolute;
  top: calc(var(--ed-space-s) * -1 - 5px);
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.slide--editorial .ed-shift b {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent);
  margin-bottom: 6px;
}
.slide--editorial .ed-shift strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 6px;
}
.slide--editorial .ed-shift span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ── Четыре отношения между словами ─────────────────────────────────────────
   Источник говорит: «слова похожи на людей: одни имеют близкие черты, другие
   противоположны, а некоторые внешне похожи». Это описание геометрии, и она
   рисуется двумя кругами в четырёх положениях: пересечение, удаление,
   наложение, касание. Схема заменяет четыре абзаца объяснения.

   Положения заданы атрибутом data-rel, а не инлайновым стилем: набор конечный
   и принадлежит системе, а не разметке. */
.slide--editorial .ed-relations {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-relations > section { break-inside: avoid; }
.slide--editorial .ed-relations__fig {
  position: relative;
  height: 88px;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-relations__fig::before,
.slide--editorial .ed-relations__fig::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
/* Синонимы: круги пересекаются — часть значения общая. */
.slide--editorial [data-rel="syn"] .ed-relations__fig::before { left: 34px; }
.slide--editorial [data-rel="syn"] .ed-relations__fig::after  { left: 82px; }
/* Антонимы: круги разведены по одной оси, между ними линейка-связь. */
.slide--editorial [data-rel="ant"] .ed-relations__fig::before { left: 0; }
.slide--editorial [data-rel="ant"] .ed-relations__fig::after  { left: 116px; }
.slide--editorial [data-rel="ant"] .ed-relations__fig {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 64px 43px / 52px 1.5px;
}
/* Омонимы: форма совпала, значения разные — круги почти наложены. */
.slide--editorial [data-rel="omo"] .ed-relations__fig::before { left: 56px; }
.slide--editorial [data-rel="omo"] .ed-relations__fig::after  { left: 62px; }
/* Паронимы: круги касаются, но не пересекаются — сходство без общего значения. */
.slide--editorial [data-rel="par"] .ed-relations__fig::before { left: 26px; }
.slide--editorial [data-rel="par"] .ed-relations__fig::after  { left: 90px; }
.slide--editorial .ed-relations h3 {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 6px;
}
.slide--editorial .ed-relations p {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
  max-width: 32ch;
  margin-bottom: 0;
}

/* ── Разрез словарного состава ──────────────────────────────────────────────
   Слои идут от ядра к периферии, и каждый следующий отступает вправо. Отступ
   кодирует ПОРЯДОК, а не долю: долей словарного состава в источнике нет, и
   рисовать ширину полос «на глаз» значило бы выдумать данные. Уступ честен —
   он показывает удалённость от общеупотребительного ядра, и только её. */
.slide--editorial .ed-strata {
  grid-column: 1 / 13;
  list-style: none;
  padding: 0;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-strata li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr;
  align-items: baseline;
  gap: var(--ed-space-xs) var(--ed-gap);
  padding: var(--ed-space-xs) 0 var(--ed-space-xs) var(--ed-space-s);
  margin-bottom: 0;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-strata li:last-child { border-bottom: 0; }
.slide--editorial .ed-strata li:nth-child(2) { margin-left: var(--ed-space-m); }
.slide--editorial .ed-strata li:nth-child(3) { margin-left: calc(var(--ed-space-m) * 2); }
.slide--editorial .ed-strata li:nth-child(4) { margin-left: calc(var(--ed-space-m) * 3); }
.slide--editorial .ed-strata li:nth-child(5) { margin-left: calc(var(--ed-space-m) * 4); }
.slide--editorial .ed-strata li:nth-child(6) { margin-left: calc(var(--ed-space-m) * 5); }
/* Глубже пятого уступа полоса ушла бы за правый край: слоёв в главе шесть,
   и это потолок блока. Опора на границу зафиксирована здесь, а не в разметке. */
.slide--editorial .ed-strata li:nth-child(n + 7) { margin-left: calc(var(--ed-space-m) * 5); }
.slide--editorial .ed-strata strong {
  font-size: var(--ed-body);
  font-weight: 600;
}
.slide--editorial .ed-strata span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ── Карточки-перевёртыши на журнальной странице ────────────────────────────
   Продолжение правила главы 07: разметку виджета править нельзя (flashcards.js
   цепляется за .flashcard и .is-flipped), оформление переопределяется здесь.
   Переворот сохраняется — он и есть смысл виджета, и это единственная
   микроанимация на странице. Стекло, скругления и тени снимаются.

   backdrop-filter гасится явно: widgets.css ставит его на контейнер карточек
   так же, как ставил на кнопки вариантов. */
.slide--editorial .flashcards {
  grid-column: 1 / 13;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  padding: var(--ed-space-s) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-rule-strong);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.slide--editorial .flashcards__hint {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  margin: 0 0 var(--ed-space-s);
}
.slide--editorial .flashcards__grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--ed-gap);
}
/* 160px, а не 128. Самое длинное определение — 68 знаков; при поле 24px и
   кегле 15px оно вставало в пять строк и вылезало за нижнюю кромку карточки.
   Замерено: scrollHeight грани 122 против clientHeight 80. Высота поднята до
   160, поле уменьшено до 16 — теперь в карточке помещается пять строк, а самое
   длинное определение занимает три. Проверять при добавлении новых карточек:
   грань не должна прокручиваться. */
.slide--editorial .flashcard { height: 160px; }
.slide--editorial .flashcard__face {
  border-radius: 0;
  box-shadow: none;
  padding: var(--ed-space-xs);
  line-height: 1.45;
}
.slide--editorial .flashcard__front {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
}
.slide--editorial .flashcard__front::after { opacity: .55; }
.slide--editorial .flashcard__back {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ed-rule-strong);
  font-family: var(--font-serif);
  font-size: 15px;
}
.slide--editorial .flashcard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ═══ Глава 09 «Фразеология» ═════════════════════════════════════════════════
 *
 * Ключ главы: у фразеологизма два чтения. Буквальное — что делали руками, пока
 * предмет был в обиходе. Переносное — что выражение значит сегодня, когда
 * предмета давно нет. Из этой двойственности выведены все четыре блока главы,
 * титул-диптих и сама последовательность страницы.
 *
 * Ни один блок предыдущих глав здесь не появляется, и ни один из этих четырёх
 * не уйдёт дальше: словарь главы принадлежит главе (docs/design/editorial-system.md,
 * раздел «Различение глав»).
 *
 * Промпты изображений: docs/design/phraseology-image-prompts.md
 */

/* ── Двойное чтение — сигнатура главы ───────────────────────────────────────
   Выражение, под ним два толкования в двух колонках, справа предмет.
   Вертикальная линейка между толкованиями — та же линия, что шов диптиха в
   титуле: буквальное и переносное разделены, но стоят рядом и на одном уровне.

   От минимальных пар главы 07 отличается всем, кроме идеи сравнения: там два
   слова в строку, разница в одной букве, ни колонок, ни фотографии. Здесь
   сравниваются не формы, а два значения одной формы. */
.slide--editorial .ed-idiom {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-idiom__phrase {
  grid-column: 1 / 9;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--ed-space-s);
  text-wrap: balance;
}
.slide--editorial .ed-idiom__read { grid-row: 2; }
.slide--editorial .ed-idiom__read:first-of-type { grid-column: 1 / 5; }
.slide--editorial .ed-idiom__read:last-of-type {
  grid-column: 5 / 9;
  padding-left: var(--ed-space-s);
  border-left: 1px solid var(--ed-rule-strong);
}
/* Метка чтения берётся из data-атрибута, а не набирается в разметке: подписи
   «Буквально» и «Переносно» повторяются в каждом блоке и являются частью
   конструкции, а не содержанием. */
.slide--editorial .ed-idiom__read::before {
  content: attr(data-read);
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--ed-space-xs);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-body .ed-idiom__read p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}
.slide--editorial .ed-idiom__figure {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  margin: 0;
}
.slide--editorial .ed-idiom__figure img,
.slide--editorial .ed-idiom__figure .ed-figure__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ── Реестр происхождения: «Расшифруй послание времени» ─────────────────────
   Четыре колонки в строке: выражение — предмет — откуда взялось — что значит.
   Геометрия таблицы, а не схемы: у пяти выражений нет ни общей
   последовательности, ни общего направления, они просто пять независимых
   случаев. Схема с соединителями (глава 05) или ось времени (глава 08)
   утверждали бы связь, которой нет.

   Кадр стоит ВНУТРИ строки, а не рядом с ней: предмет — это второй столбец
   реестра наравне с текстом, а не иллюстрация к нему. */
.slide--editorial .ed-relic {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-relic > section {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  padding: var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-relic > section:first-child { border-top: 2px solid var(--accent); }
.slide--editorial .ed-relic h3 {
  grid-column: 1 / 4;
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.25;
}
.slide--editorial .ed-relic figure { grid-column: 4 / 6; margin: 0; }
.slide--editorial .ed-relic figure img,
.slide--editorial .ed-relic figure .ed-figure__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.slide--editorial .ed-body .ed-relic p { font-size: 15px; line-height: 1.55; margin-bottom: 0; }
.slide--editorial .ed-relic__origin { grid-column: 6 / 10; }
.slide--editorial .ed-relic__sense {
  grid-column: 10 / 13;
  font-family: var(--font-sans);
  color: var(--ed-ink-margin);
  padding-top: 6px;
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-body .ed-relic__sense { font-size: var(--ed-small); }

/* ── Шкала слитности ────────────────────────────────────────────────────────
   Три остановки: свободное сочетание, устойчивое, сращение. Степень слитности
   показана самим набором примера — слова разводятся, сближаются и сходятся
   вплотную. Это единственное, что про них известно из источника (тесты 27 и 28
   различают свободное сочетание и фразеологизм, и не более), и геометрия
   кодирует ровно это: порядок, а не доли и не расстояния.

   От схемы процесса главы 05 отличается тем, что здесь нет процесса: это
   градация одного признака, а не три шага, которые идут друг за другом. */
.slide--editorial .ed-degrees {
  grid-column: 1 / 13;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
  counter-reset: ed-degree;
}
.slide--editorial .ed-degrees li {
  counter-increment: ed-degree;
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
}
/* Кружок вместо заливки — та же логика, что у пути воздушной струи в главе 07:
   отметка на шкале обозначает положение, а не величину. */
.slide--editorial .ed-degrees li::before {
  content: counter(ed-degree);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-degrees b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 6px;
}
/* Собственно приём: разрядка убывает от свободного сочетания к сращению.
   Слова буквально сходятся, пока не перестают быть отдельными. */
.slide--editorial .ed-degrees li:nth-child(1) b { letter-spacing: .14em; }
.slide--editorial .ed-degrees li:nth-child(2) b { letter-spacing: .02em; }
.slide--editorial .ed-degrees li:nth-child(3) b { letter-spacing: -.03em; }
.slide--editorial .ed-degrees strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-degrees span {
  display: block;
  font-size: 15px;
  line-height: 1.55;
}

/* ── Колода придуманных выражений ───────────────────────────────────────────
   Рамка в одну волосяную линейку — единственное место в издании, где
   контентный блок обведён по периметру, и на то есть причина: это не текст
   страницы, а образцы, которые студент дописывает своими. Карточка здесь
   означает «заготовка», а не «контейнер для абзаца».

   С карточками-перевёртышами главы 08 не путать: там виджет с переворотом на
   двух гранях, здесь неподвижный набор. */
.slide--editorial .ed-coinage {
  grid-column: 1 / 13;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-coinage li {
  border: 1px solid var(--ed-rule-strong);
  padding: var(--ed-space-s);
}
.slide--editorial .ed-coinage b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--ed-space-xs);
  padding-bottom: var(--ed-space-xs);
  border-bottom: 1px solid var(--ed-rule);
  /* anywhere, а не break-word: «Открыть слишком много вкладок» в колонке 240px
     упирается в min-content, на который break-word не влияет (правило снято на
     карточках слайдов 10, 12 и 15). */
  overflow-wrap: anywhere;
}
.slide--editorial .ed-coinage span {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ═══ Глава 10 «Словообразование» ═══════════════════════════════════════════
   Сценарий главы: слово собирается из частей, как соединение из деталей.
   Отсюда четыре сигнатурных блока — разбор, матрица способов, банк морфем и
   ветвящееся дерево, — и они не используются больше нигде.

   Чем каждый отличается от уже занятых, чтобы при беглом взгляде не читаться
   их повтором:
   .ed-morph — единственная сегментированная полоса ВНУТРИ одного слова;
   .ed-ways  — единственная настоящая таблица издания, с шапкой и колонками
               (.ed-panel раскладывает списки, .ed-relic — четыре колонки на
               секцию, но шапки нет ни у того, ни у другого);
   .ed-bank  — единственная сетка многих мелких ячеек; рамка только сверху,
               потому что рамка по всем четырём сторонам принадлежит
               .ed-coinage главы 09 и остаётся её приметой;
   .ed-tree  — единственная ВЕТВЯЩАЯСЯ структура: .ed-tract — три звена одной
               цепи, .ed-flow — пять равных колонок, .ed-shift — непрерывная
               ось времени, и ни одна из них не раздваивается.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Разбор слова по составу ────────────────────────────────────────────────
   Тот же сегмент .ed-morph__part, что и в титуле, но кеглем полосы, а не
   дисплейным: на титуле разбор — событие, здесь — рабочий инструмент. */
.slide--editorial .ed-morph {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
}
/* Селектор включает `.ed-body p` намеренно: без этого правило
   `.slide--editorial .ed-body p { font-size: 17px }` (0,2,1) перебивает
   класс (0,2,0), и разбор набирается кеглем полосы вместо дисплейного. */
.slide--editorial .ed-body p.ed-morph__word {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--ed-space-m);
}
.slide--editorial .ed-morph__gloss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ed-space-xs) var(--ed-gap);
  margin: 0;
}
.slide--editorial .ed-morph__gloss > div {
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-morph__gloss dt {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}
.slide--editorial .ed-morph__gloss dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ── Матрица способов словообразования ──────────────────────────────────────
   Настоящая <table>: содержимое и есть таблица — шесть способов сравниваются
   по трём одинаковым признакам. Громче всего набрана формула, потому что
   способ опознаётся по ней, а не по названию; добавленная морфема в формуле
   идёт акцентом. Ниже 860px таблица разбирается на карточки строк через
   data-label, чтобы не давать горизонтального скролла. */
.slide--editorial .ed-ways {
  grid-column: 1 / 13;
  width: 100%;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  border-collapse: collapse;
  text-align: left;
}
.slide--editorial .ed-ways th {
  padding: 0 var(--ed-gap) var(--ed-space-xs) 0;
  border-bottom: 2px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
  white-space: nowrap;
}
.slide--editorial .ed-ways td {
  padding: var(--ed-space-s) var(--ed-gap) var(--ed-space-s) 0;
  border-bottom: 1px solid var(--ed-rule);
  vertical-align: baseline;
}
.slide--editorial .ed-ways td:last-child,
.slide--editorial .ed-ways th:last-child { padding-right: 0; }
.slide--editorial .ed-ways__name {
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  font-weight: 600;
  width: 22%;
}
.slide--editorial .ed-ways__formula {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  line-height: 1.4;
  width: 34%;
}
.slide--editorial .ed-ways__formula b {
  color: var(--accent);
  font-weight: 600;
}
.slide--editorial .ed-ways__note {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.6;
  color: var(--ed-ink-margin);
}

/* ── Банк морфем ────────────────────────────────────────────────────────────
   Справочная сетка: много мелких ячеек «морфема + значение». Ячейка держится
   одной линейкой сверху — никаких рамок и заливок, иначе получится карточка,
   которой в этой системе нет. */
.slide--editorial .ed-bank {
  grid-column: 1 / 13;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
}
.slide--editorial .ed-bank section + section { margin-top: var(--ed-space-m); }
.slide--editorial .ed-bank h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--ed-space-xs);
  padding-bottom: var(--ed-space-xs);
  border-bottom: 2px solid var(--accent);
}
.slide--editorial .ed-bank ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0 var(--ed-gap);
  margin: 0;
  padding: 0;
}
.slide--editorial .ed-bank li {
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-bank li:first-child { border-top: 0; }
.slide--editorial .ed-bank b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  color: var(--accent);
}
.slide--editorial .ed-bank span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Словообразовательное дерево ────────────────────────────────────────────
   Единственная ветвящаяся структура издания. Связи — Г-образные волосяные
   линии из двух границ одного псевдоэлемента: вертикаль идёт от родителя,
   горизонталь подводит к ребёнку. Глубина задаётся вложенностью <ul>, а не
   классами уровней: дерево можно нарастить, ничего не переписывая.

   Кадры стоят не рядом, а каскадом справа со сдвигом — тремя в ряд их ставить
   нельзя, ряд из трёх принадлежит .ed-gallery главы 05. */
.slide--editorial .ed-tree {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  padding-top: var(--ed-space-s);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-tree__branches { grid-column: 1 / 9; }
.slide--editorial .ed-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slide--editorial .ed-tree ul ul { padding-left: var(--ed-space-m); }
.slide--editorial .ed-tree li {
  position: relative;
  margin-bottom: 0;
  padding: var(--ed-space-xs) 0;
}
/* Г-образная связь: вертикаль от предыдущего узла + горизонталь к этому. */
.slide--editorial .ed-tree ul ul > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--ed-space-m) * -1);
  width: calc(var(--ed-space-m) - 10px);
  height: calc(var(--ed-space-xs) + .7em);
  border-left: 1px solid var(--ed-rule-strong);
  border-bottom: 1px solid var(--ed-rule-strong);
}
/* Вертикаль продолжается вниз у всех детей, кроме последнего. */
.slide--editorial .ed-tree ul ul > li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--ed-space-xs) + .7em);
  bottom: 0;
  left: calc(var(--ed-space-m) * -1);
  border-left: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-tree b {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
}
.slide--editorial .ed-tree > .ed-tree__branches > ul > li > b {
  font-family: var(--font-display);
  font-size: clamp(27px, 3vw, 33px);
  color: var(--accent);
}
.slide--editorial .ed-tree span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-tree__frames {
  grid-column: 9 / 13;
  display: grid;
  gap: var(--ed-space-m);
  align-content: start;
}
.slide--editorial .ed-tree__frames figure { margin: 0; }
.slide--editorial .ed-tree__frames figure:nth-child(2) { margin-left: 12%; }
.slide--editorial .ed-tree__frames figure:nth-child(3) { margin-left: 24%; }
.slide--editorial .ed-tree__frames img { width: 100%; height: auto; display: block; }

/* ── Асимметричная пара кадров ──────────────────────────────────────────────
   Крупный слева, мелкий справа со сдвигом вниз. Не .ed-gallery (три равных в
   ряд, глава 05) и не .ed-plates (два равных, глава 07): здесь работает именно
   разница масштабов — второй кадр читается примечанием к первому. */
.slide--editorial .ed-spread {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-spread figure { margin: 0; }
.slide--editorial .ed-spread img { width: 100%; height: auto; display: block; }
.slide--editorial .ed-spread__major { grid-column: 1 / 9; }
.slide--editorial .ed-spread__minor {
  grid-column: 9 / 13;
  margin-top: var(--ed-space-l);
}

/* ══ ГЛАВА 11 «МОРФОЛОГИЯ» ═══════════════════════════════════════════════════
 *
 * Сценарий главы: система форм. Словообразование (гл. 10) разбирает слово на
 * части — морфология умножает одно слово в парадигму форм и раскладывает слова
 * по категориям. Отсюда два ключа: МАТРИЦА (система) и ПАРАДИГМА (изменение при
 * неизменном стержне). Сигнатурные блоки: .ed-parts, .ed-paradigm,
 * .ed-categories, .ed-cluster, .ed-rack — в других главах не используются.
 */

/* ── Титул-матрица (глава 11) ────────────────────────────────────────────────
   Одиннадцатый тип титула и первый, где заглавие стоит не над содержанием,
   а ВНУТРИ него: система частей речи разложена сеткой, и блок заглавия
   занимает в этой сетке такую же клетку, как «Существительное».

   От титула-разбора главы 10 отличается операцией: там заглавие рассекается
   по горизонтали на морфемы, здесь оно вписано в двумерную таблицу. От
   спектра главы 06 — тем, что клетки несут содержание, а не цветовой декор.

   Вертикальных линеек нет намеренно: издание строит иерархию волосяными
   горизонталями, а рамки клеток превратили бы матрицу в таблицу-карточку.
   Колонки держит column-gap, ряды — линейка сверху каждой клетки. */
.slide--editorial .ed-hero--matrix {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  /* .slide--editorial обнуляет padding-top: var(--chrome-top) из base.css.
     Титул с текстом наверху обязан вернуть клиренс сам, иначе первая строка
     уезжает под стеклянную панель (76px) и это неотличимо от задуманного
     «контент подныривает под стекло». */
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--matrix::after { content: none; }

.slide--editorial .ed-parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--ed-gap);
}
/* Клетка заглавия — 2 × 2 в левом верхнем углу. Левый край без padding:
   заглавие обязано стоять на той же вертикали, что и первый абзац .ed-body. */
.slide--editorial .ed-parts__title {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  padding: 0 var(--ed-gap) var(--ed-space-m) 0;
}
.slide--editorial .ed-parts__title .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-parts__title .ed-standfirst { color: var(--ed-ink-margin); max-width: none; }

.slide--editorial .ed-parts__cell {
  padding: var(--ed-space-xs) var(--ed-gap) var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
}
/* Три разряда частей речи различаются линейкой, а не заливкой: самостоятельные
   — волосяная, служебные — акцентная в два пикселя, междометие — пунктир.
   Геометрия здесь работает указателем, а не украшением. */
.slide--editorial .ed-parts__cell[data-kind="service"] { border-top: 2px solid var(--accent); }
.slide--editorial .ed-parts__cell[data-kind="special"] { border-top: 1px dashed var(--ed-rule-strong); }

.slide--editorial .ed-parts__abbr {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  transition: color .18s var(--ease-glass, ease);
}
.slide--editorial .ed-parts__name {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.35;
}
.slide--editorial .ed-parts__q {
  display: block;
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--ed-small);
  line-height: 1.4;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-parts__cell:hover .ed-parts__abbr { color: var(--accent); }

.slide--editorial .ed-parts .ed-hero-meta {
  grid-column: 3 / 5;
  align-self: end;
  margin-top: 0;
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* ── Парадигма: одно слово во многих формах (глава 11) ───────────────────────
   Сигнатурный блок главы. Стержень слова набирается чернилом, окончание —
   акцентом: читатель видит, что меняется, не читая подписей. Ровно этим
   морфология отличается от словообразования, где менялось само слово.

   Шаблон колонок вынесен в --ed-par-tmpl, чтобы три сценария блока (склонение,
   спряжение, управление) не плодили три сетки. Значение переопределяется
   модификатором, а не инлайновым стилем. */
.slide--editorial .ed-paradigm {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
}
/* `.ed-body p.` обязателен: правило `.ed-body p { font-size: 17px }` имеет
   специфичность (0,2,1) и перебивает класс блока (0,2,0). Замер показал шапку
   парадигмы кеглем полосы вместо служебных 13px — глазом это читается как
   «крупновато», а не как ошибка. То же ниже у легенды матрицы и ключевого
   слова кластера. */
.slide--editorial .ed-body p.ed-paradigm__head {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: var(--ed-space-s);
}
.slide--editorial .ed-paradigm__grid {
  display: grid;
  grid-template-columns: var(--ed-par-tmpl, 10rem repeat(3, 1fr));
  column-gap: var(--ed-gap);
  align-items: baseline;
}
/* Метка формы живёт в левом поле блока служебным кеглем — как в грамматическом
   справочнике, где парадигму читают по строке, а не по заголовку. */
.slide--editorial .ed-paradigm__case {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-paradigm__form {
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  line-height: 1.5;
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
/* Окончание — единственное, что здесь цветное. Вес поднят на ступень: цвет
   один в паре с весом читается и в чёрно-белой печати. */
.slide--editorial .ed-paradigm__form b {
  color: var(--accent);
  font-weight: 600;
}
.slide--editorial .ed-paradigm__lemma {
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.2;
  padding-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-paradigm__lemma b { color: var(--accent); }
/* Первая строка сетки — шапка: линейки над ней не нужно, её роль играет
   линейка самого блока. */
.slide--editorial .ed-paradigm__grid > :nth-child(-n + 4) { border-top: 0; }

/* Спряжение: две колонки видов вместо трёх типов склонения. */
.slide--editorial .ed-paradigm--conj { --ed-par-tmpl: 10rem repeat(2, 1fr); }
.slide--editorial .ed-paradigm--conj .ed-paradigm__grid > :nth-child(-n + 4) { border-top: 1px solid var(--ed-rule); }
.slide--editorial .ed-paradigm--conj .ed-paradigm__grid > :nth-child(-n + 3) { border-top: 0; }

/* Управление: предлог — падеж — пример. Метки формы здесь нет, слева стоит
   сам предлог, и он же несёт акцент. */
.slide--editorial .ed-paradigm--govern { --ed-par-tmpl: 7rem 12rem 1fr; }
.slide--editorial .ed-paradigm--govern .ed-paradigm__grid > :nth-child(-n + 4) { border-top: 1px solid var(--ed-rule); }
.slide--editorial .ed-paradigm--govern .ed-paradigm__grid > :nth-child(-n + 3) { border-top: 0; }
.slide--editorial .ed-paradigm--govern .ed-paradigm__prep {
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  color: var(--accent);
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}

/* ── Матрица категорий (глава 11) ────────────────────────────────────────────
   Инфографика главы: какие грамматические категории у какой части речи есть.
   Не таблица — диаграмма: в клетках нет текста, только метка. Заполненный
   круг — категория есть, кольцо — есть с оговоркой, штрих — нет.

   Круги рисуются, а не набираются глифом: символы ● и ○ в Literata и Golos
   имеют разный кегль и разную высоту по базовой линии, и ряд из них дрожал.

   Матрица шире полосы и на узком экране прокручивается внутри себя. Свести её
   в карточки, как .ed-ways главы 10, нельзя: смысл диаграммы в том, что
   столбцы сравниваются глазом. */
.slide--editorial .ed-categories {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
  overflow-x: auto;
  /* Без min-width: 0 прокрутка не включается вообще. У элемента сетки
     min-width равен auto, то есть ширине по min-content: блок раздувался до
     580px внутренней матрицы и на вьюпорте 480 давал горизонтальный скролл
     всей страницы (замер: scrollWidth 571 при clientWidth 480). overflow-x
     при этом был выставлен и не срабатывал — переполняться было нечему. */
  min-width: 0;
}
.slide--editorial .ed-categories__grid {
  display: grid;
  grid-template-columns: 11rem repeat(6, minmax(64px, 1fr));
  min-width: 580px;
  align-items: center;
}
.slide--editorial .ed-categories__col {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  padding-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-categories__row {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  padding: var(--ed-space-xs) var(--ed-gap) var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-categories__mark {
  position: relative;   /* якорь для скрытой расшифровки ниже */
  justify-self: center;
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
  width: 100%;
  display: grid;
  place-items: center;
}
.slide--editorial .ed-categories__mark::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.slide--editorial .ed-categories__mark[data-mark="full"]::before { background: var(--accent); }
.slide--editorial .ed-categories__mark[data-mark="none"]::before {
  width: 11px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--ed-rule-strong);
  border-radius: 0;
}
/* Расшифровка метки для скринридера: цвет и форма — единственный носитель
   значения в диаграмме, без текста она недоступна. */
.slide--editorial .ed-categories__mark i {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.slide--editorial .ed-categories__corner { border: 0; }
.slide--editorial .ed-body p.ed-categories__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ed-space-xs) var(--ed-space-m);
  margin-top: var(--ed-space-s);
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: var(--ed-ink-margin);
}

/* ── Кластер (глава 11) ──────────────────────────────────────────────────────
   Стратегия «кластер» взята прямо из источника: на доске пишется ключевое
   слово, вокруг него — всё, что вспомнилось. Поле слов держится flex-обёрткой
   со сдвигом по вертикали через nth-child: россыпь читается как записанное от
   руки, а не как список.

   Радиальную геометрию не строим намеренно — на любом экране, кроме одного,
   она разъезжается, а смысл блока в том, что слова ещё НЕ разложены по
   группам. Их разложит следующий блок. */
.slide--editorial .ed-cluster {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
  text-align: center;
}
.slide--editorial .ed-body p.ed-cluster__key {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--ed-space-s);
}
/* Вертикаль от ключевого слова к полю — единственная линия блока. */
.slide--editorial .ed-cluster__key::after {
  content: '';
  display: block;
  width: 1px;
  height: var(--ed-space-m);
  margin: var(--ed-space-xs) auto 0;
  background: var(--ed-rule-strong);
}
.slide--editorial .ed-cluster__field {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--ed-space-xs) var(--ed-space-m);
  max-width: 46rem;
  margin: var(--ed-space-s) auto 0;
}
.slide--editorial .ed-cluster__field li {
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  line-height: 1.3;
  border-bottom: 1px solid var(--ed-rule);
  padding-bottom: 2px;
}
.slide--editorial .ed-cluster__field li:nth-child(3n)   { transform: translateY(-7px); }
.slide--editorial .ed-cluster__field li:nth-child(4n+2) { transform: translateY(6px); }
.slide--editorial .ed-cluster__field li[data-group="proper"]   { color: var(--accent); border-bottom-color: var(--accent); }
.slide--editorial .ed-cluster__field li[data-group="abstract"] { font-style: italic; color: var(--ed-ink-margin); }

/* ── Ряд кадров (глава 11) ───────────────────────────────────────────────────
   Три квадрата в строку под одной подписью. .ed-gallery главы 05 занята и
   устроена иначе — там кадры с индивидуальными подписями и своей нумерацией. */
.slide--editorial .ed-rack {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-rack__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ed-gap);
}
.slide--editorial .ed-rack picture { display: block; }
.slide--editorial .ed-rack img { display: block; width: 100%; height: auto; }

/* ══ ГЛАВА 12 «СИНТАКСИС» ═════════════════════════════════════════════════════
   Двенадцатый тип титула, шесть сигнатурных блоков и два блока раскладки.
   Предмет главы — связь и порядок, поэтому вся её геометрия горизонтальная:
   дуги между словами, ярусы схемы, перестановки в столбик, лента кадров.
   Ни один блок не повторяет чужую сигнатуру: разбор здесь идёт по членам
   предложения, а не по морфемам (глава 10), и клетка отсутствует вовсе
   (глава 11).                                                               */

/* ── Титул-разбор по членам предложения (глава 12) ───────────────────────────
   Двенадцатый тип. Заглавие называет предмет, а под ним стоит фраза источника
   «Студент подготовил интересный доклад», разобранная школьными
   подчёркиваниями. Приём выбран потому, что это единственная запись, которую
   русский филолог читает без легенды: одна черта — подлежащее, две —
   сказуемое, волна — определение.

   От титула главы 10 отличается тем, ЧТО разбирается: там одно слово по
   морфемам с подписями ролей под скобками, здесь целое предложение по членам
   без подписей — роль несёт сам тип линии. Легенда стоит отдельной строкой
   ниже и служит ключом ко всей главе, а не подписью к титулу.

   Вертикальный кадр 9:16 прижат к правому полю (колонки 9–12) — ни один титул
   издания не ставил фотографию вертикальной колонкой справа: глава 03 даёт
   колонку слева в половину ширины, глава 08 — сверху с обрезкой.

   padding-top обязателен: .slide--editorial обнуляет padding-top: var(--chrome-top)
   из base.css, и без него надстрочник уезжает под стеклянную панель. */
.slide--editorial .ed-hero--parse {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--parse::after { content: none; }
.slide--editorial .ed-hero--parse picture { display: block; }

/* Коробка титула повторяет коробку полосы. Без этого левый край заголовка не
   совпадает с левым краем абзацев: .ed-hero — полноширинный блок со своим
   горизонтальным полем, а .ed-body — центрированный ящик 1180px. Замер до
   правки: 123 против 187 на 1440. Проверяется сравнением left у .ed-hero__text
   и у первого абзаца полосы. */
.slide--editorial .ed-hero--parse { padding-inline: 0; }
.slide--editorial .ed-hero--parse .ed-hero__inner {
  max-width: var(--ed-page);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
.slide--editorial .ed-hero--parse .ed-hero__text { grid-column: 1 / 9; }
/* align-self: start, а не stretch. Растянутая колонка получила бы высоту от
   соседа, и aspect-ratio 9/16 начал бы считать ШИРИНУ от высоты — ровно тот
   дефект, что дважды ломал полосу 21:9. Здесь ширину задаёт сетка, высоту —
   пропорция, и спорить нечему. */
.slide--editorial .ed-hero__pillar {
  grid-column: 9 / 13;
  align-self: start;
  margin: 0;
}
.slide--editorial .ed-hero__pillar img { display: block; width: 100%; height: auto; }
.slide--editorial .ed-hero--parse .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--parse .ed-standfirst { color: var(--ed-ink-margin); max-width: 40ch; }
.slide--editorial .ed-hero--parse .ed-hero-meta  {
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* ── Разбор предложения по членам ────────────────────────────────────────────
   Сигнатурный блок главы 12. Пять типов линии — ровно те пять, что
   поддерживает text-decoration-style, и ровно те пять, что приняты в русском
   разборе. Совпадение удачное: блок не рисует ни одной собственной линейки,
   подчёркивание остаётся частью текста и переносится вместе со словом.

   Штрих-пунктир обстоятельства заменён точечным: dash-dot в CSS отсутствует,
   а рисовать его фоном значило бы потерять перенос. Обозначение объявлено
   легендой, поэтому подмена не мешает чтению.

   Селектор с `.ed-body p` обязателен: правило основного текста (0,2,1)
   перебивает класс (0,2,0), и разбор набрался бы кеглем полосы. */
.slide--editorial .ed-parse,
.slide--editorial .ed-body p.ed-parse {
  font-family: var(--font-display);
  font-size: clamp(23px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.85;          /* воздух под подчёркивания: на 1.3 волна второй строки садилась на первую */
  letter-spacing: -.01em;
  max-width: none;
  margin: var(--ed-space-s) 0 0;
}
.slide--editorial .ed-body p.ed-parse--text {
  font-size: clamp(20px, 2.4vw, 29px);
  margin: var(--ed-space-m) 0 0;
}
.slide--editorial .ed-parse__w {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .26em;
}
.slide--editorial [data-member="subject"]   { text-decoration-style: solid; }
.slide--editorial [data-member="predicate"] { text-decoration-style: double; }
.slide--editorial [data-member="attribute"] { text-decoration-style: wavy; }
.slide--editorial [data-member="object"]    { text-decoration-style: dashed; }
.slide--editorial [data-member="adverbial"] { text-decoration-style: dotted; }

/* Легенда — ключ ко всей главе. Стоит один раз в титуле и повторяется один раз
   в разделе разбора; каждый её пункт набран собственной линией, поэтому
   объяснять словами, «какая линия что значит», не приходится. */
.slide--editorial .ed-parse__legend,
.slide--editorial .ed-body p.ed-parse__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ed-space-xs) var(--ed-space-s);
  margin: var(--ed-space-s) 0 0;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  max-width: none;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-parse__legend span {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .32em;
}

/* ── Дуги подчинительной связи ───────────────────────────────────────────────
   Три способа связать два слова, показанные тем же знаком, каким их связывает
   рука на доске: дугой сверху. Дуга — это верхняя половина эллипса на
   border-radius, а не картинка и не SVG: она обязана тянуться ровно по ширине
   пары, какой бы ни была длина слов.

   От блока .ed-relations главы 08 (круги отношений) отличается тем, что
   соединяет ДВА КОНКРЕТНЫХ слова, а не изображает отношение схематически. */
.slide--editorial .ed-arc {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-arc > div { min-width: 0; }
.slide--editorial .ed-arc dt {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-arc dd { margin: 0; }
.slide--editorial .ed-arc__pair {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 1.1em;
  padding-top: 20px;
  margin-bottom: var(--ed-space-xs);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.3;
}
.slide--editorial .ed-arc__pair::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 3px;
  height: 15px;
  border: 1.5px solid var(--accent);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.slide--editorial .ed-arc__pair b { font-weight: 500; }
.slide--editorial .ed-arc__pair b:last-child { font-weight: 700; }
.slide--editorial .ed-body .ed-arc p {
  font-size: 15px;
  line-height: 1.55;
  max-width: none;
  margin-bottom: 0;
  color: var(--ed-ink-margin);
}

/* ── Перестановки: порядок слов и смысловой центр ────────────────────────────
   Одно предложение, пять порядков, столбиком. Читается сверху вниз как
   киноплёнка: меняется только позиция акцентного слова, всё остальное стоит
   на месте. Смысловой центр помечен <em> — акцентом и той же сплошной линией,
   что у подлежащего в разборе, потому что это и есть одна система знаков.

   Счётчик римскими: арабские в главе уже заняты нумерацией разделов и
   практикума, а третий арабский ряд превратил бы полосу в оглавление. */
.slide--editorial .ed-order {
  counter-reset: ed-ord;
  list-style: none;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  max-width: var(--ed-measure);
}
.slide--editorial .ed-order li {
  counter-increment: ed-ord;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--ed-gap);
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-order li::before {
  content: counter(ed-ord, upper-roman);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 2.4;
  color: var(--ed-rule-strong);
}
/* Обе строки прибиты ко второй колонке явно. Псевдоэлемент ::before — тоже
   элемент сетки и занимает первую ячейку, поэтому при авторазмещении пояснение
   уезжало во второй ряд первой колонки и получало 38px ширины вместо 600. */
.slide--editorial .ed-order__line,
.slide--editorial .ed-order__gloss { grid-column: 2; }
.slide--editorial .ed-order__line {
  display: block;
  font-size: 19px;
  line-height: 1.5;
}
.slide--editorial .ed-order__line em {
  font-style: normal;
  color: var(--accent);
  text-decoration: underline solid var(--accent) 1.5px;
  text-underline-offset: .26em;
}
.slide--editorial .ed-order__gloss {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Схема сложного предложения ──────────────────────────────────────────────
   Ярусы, а не дерево: главная часть в квадратных скобках, придаточная в
   круглых, союз на вертикальной связи между ними. Скобки набираются
   ::before/::after — это принятая запись, и рисовать её линиями было бы
   переводом с русского на язык блок-схем.

   Дерево главы 10 занято и устроено иначе: там ветвление словообразовательной
   цепочки, здесь два яруса с подчинением и одна связь. */
.slide--editorial .ed-scheme {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-body .ed-scheme p.ed-scheme__head {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  max-width: none;
  margin-bottom: var(--ed-space-s);
}
.slide--editorial .ed-scheme__clause {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  padding: 6px 0;
}
.slide--editorial .ed-scheme__row[data-tier="main"] .ed-scheme__clause::before { content: '[\00a0'; color: var(--accent); }
.slide--editorial .ed-scheme__row[data-tier="main"] .ed-scheme__clause::after  { content: '\00a0]'; color: var(--accent); }
.slide--editorial .ed-scheme__row[data-tier="sub"]  .ed-scheme__clause::before { content: '(\00a0'; color: var(--ed-ink-margin); }
.slide--editorial .ed-scheme__row[data-tier="sub"]  .ed-scheme__clause::after  { content: '\00a0)'; color: var(--ed-ink-margin); }
.slide--editorial .ed-scheme__row[data-tier="sub"] { margin-left: clamp(24px, 6vw, 72px); }
/* Связь: волосяная вертикаль с союзом на ней. Отступ слева совпадает со
   сдвигом придаточного яруса — линия приходит ровно к его левому краю. */
.slide--editorial .ed-scheme__link {
  margin-left: clamp(24px, 6vw, 72px);
  padding: 8px 0 8px var(--ed-space-s);
  border-left: 1.5px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}

/* ── Рамки типов предложения ─────────────────────────────────────────────────
   Четыре типа рядом, каждый в волосяной рамке. Рамка здесь не карточка:
   ни заливки, ни тени, ни скругления — это оттиск клише, каким в учебной
   таблице обводят схему. Сравнение идёт по строкам сверху вниз: название,
   схема, пример, признак; глаз считывает четыре схемы одним движением. */
.slide--editorial .ed-frame {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-frame article {
  min-width: 0;                    /* без него содержимое раздувает колонку по min-content */
  padding: var(--ed-space-s);
  border: 1px solid var(--ed-rule);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-frame h3 {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-body .ed-frame p { max-width: none; margin-bottom: var(--ed-space-xs); }
.slide--editorial .ed-body .ed-frame p:last-child { margin-bottom: 0; }
.slide--editorial .ed-frame__scheme {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.slide--editorial .ed-frame__ex { font-size: 16px; line-height: 1.5; }
.slide--editorial .ed-body .ed-frame p.ed-frame__note {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Реестр пространственных конструкций ─────────────────────────────────────
   Шесть падежей — шесть гнёзд: падеж, предлоги, вопрос, пример. Сетка на
   auto-fit, а не таблица: таблица на 480px требовала бы разбора в карточки
   (приём главы 10), а гнёзда схлопываются в столбец сами и не заводят
   горизонтальный скролл ни на одной контрольной точке. */
.slide--editorial .ed-space {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-space > div {
  min-width: 0;
  padding-top: var(--ed-space-xs);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-space dt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
  margin-bottom: 4px;
}
.slide--editorial .ed-space dd { margin: 0; }
.slide--editorial .ed-space__prep {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.slide--editorial .ed-space__q {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--accent);
}
.slide--editorial .ed-space__ex {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Лента кадров ────────────────────────────────────────────────────────────
   Четыре квадрата в строку во всю ширину — визуальная пауза, которая ставится
   один раз сразу под титулом и работает как разворот-заставка. От .ed-rack
   главы 11 (три квадрата под общей подписью) отличается числом кадров и тем,
   что у каждого своя подпись; от .ed-gallery главы 05 — тем, что кадры не
   нумерованы и читаются одним рядом, а не серией шагов.

   --duo: асимметричная пара 7 : 5, выровненная по нижней кромке. Разный
   размер — это и есть содержание пары: крупный кадр несёт сцену, мелкий
   уточняет деталь.

   --trio: ряд из трёх кадров неравной ширины 4 : 3 : 5 под одной общей
   подписью — сценарий «последовательность». Отщепляется от .ed-band на тех
   же основаниях, что и --duo при переносе главы 13: заставка из четырёх
   квадратов под титулом остаётся композиционным приёмом главы 12, а --duo
   и --trio собственной семантики не несут и служат примитивами подачи
   наравне с --wide и --margin. От .ed-gallery главы 05 отличается тем, что
   ширины разные и кадры не читаются шагами процедуры; от .ed-rack главы 11 —
   тем, что кадры не квадратные и не равны между собой. */
.slide--editorial .ed-band {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-band--duo {
  grid-template-columns: 7fr 5fr;
  align-items: end;
}
.slide--editorial .ed-band--trio {
  grid-template-columns: 4fr 3fr 5fr;
  align-items: end;
}
.slide--editorial .ed-band figure { margin: 0; min-width: 0; }
.slide--editorial .ed-band picture { display: block; }
.slide--editorial .ed-band img { display: block; width: 100%; height: auto; }

/* ═══ Глава 13 · Стилистика ══════════════════════════════════════════════════
   Сценарий главы выведен из её предмета. Стилистика — не ярус языка, как
   фонетика или синтаксис, а выбор между уже готовыми средствами. Значит
   страница обязана показывать не устройство, а РАЗНИЦУ: одно и то же,
   сказанное по-разному. Отсюда все пять сигнатурных блоков — каждый из них
   в том или ином виде ставит рядом два варианта одного смысла.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Титул-регистр (глава 13) ────────────────────────────────────────────────
   Тринадцатый тип. Фотографии в титуле нет ни одной крупной — вместо неё
   каскад из трёх мелких кадров в поле 8–12. Причина не в разнообразии:
   у главы нет ни одного предмета, который назвал бы её целиком. Фонетику
   называет речевой аппарат, синтаксис — отвес, стилистику не называет ничто,
   потому что её содержание — выбор, а выбор показывается только рядом
   вариантов. Три кадра и есть этот ряд.

   Заглавие сопровождается пятью строками одной мысли в пяти регистрах.
   От титула главы 10 (заглавие разобрано на морфемы) и главы 12 (фраза
   разобрана по членам) отличается тем, что здесь разбирается не запись,
   а сам выбор: пять строк — пять равноправных вариантов, ни один не «разбор»
   другого.

   padding-top обязателен: .slide--editorial обнуляет padding-top:
   var(--chrome-top) из base.css, и без него первая строка уходит под
   стеклянную панель. */
.slide--editorial .ed-hero--register {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--register::after { content: none; }
.slide--editorial .ed-hero--register picture { display: block; }

/* Коробка титула повторяет коробку полосы — правило, которое ломалось уже
   дважды (главы 07 и 12). Проверяется сравнением left у .ed-hero__text и
   у первого абзаца .ed-body. */
.slide--editorial .ed-hero--register { padding-inline: 0; }
.slide--editorial .ed-hero--register .ed-hero__inner {
  max-width: var(--ed-page);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
.slide--editorial .ed-hero--register .ed-hero__text { grid-column: 1 / 8; }
.slide--editorial .ed-hero--register .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--register .ed-standfirst { color: var(--ed-ink-margin); max-width: 38ch; }
.slide--editorial .ed-hero--register .ed-hero-meta  {
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* Каскад кадров. Две строки, а не три: колонка из трёх кадров подряд в поле
   шириной ~415px набирает под 900px высоты и уводит титул на полтора экрана.
   Верхняя строка — вертикаль и квадрат рядом, нижняя — горизонталь во всю
   ширину поля. Квадрат опущен на шаг: выравненная по верху пара читалась бы
   таблицей, а сдвиг делает её каскадом.

   align-self: start обязателен по той же причине, что и у столба главы 12:
   растянутая колонка получила бы высоту от соседа, и aspect-ratio начал бы
   считать ширину от высоты. */
.slide--editorial .ed-hero__stack {
  grid-column: 8 / 13;
  align-self: start;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ed-space-s) var(--ed-gap);
}
.slide--editorial .ed-hero__stack figure { margin: 0; min-width: 0; }
.slide--editorial .ed-hero__stack figure:nth-child(2) { margin-top: var(--ed-space-s); }
.slide--editorial .ed-hero__stack figure:nth-child(3) { grid-column: 1 / 3; }
.slide--editorial .ed-hero__stack img { display: block; width: 100%; height: auto; }

/* ── Регистр: одна мысль пятью способами ─────────────────────────────────────
   Сигнатурный блок главы 13 и её главный приём. Пять строк несут ОДИН смысл;
   различает их только набор, и различие это не декоративное — оно и есть
   содержание. Разговорная строка идёт гротеском в кегле реплики,
   художественная — дисплейной антиквой курсивом, публицистическая — плотным
   полужирным, научная — рядовой антиквой полосы, официальная — разряженным
   гротеском на ступень мельче и тише всех.

   Разрядка у официальной строки не украшение: она физически замедляет чтение,
   и это ровно то, что делает канцелярский синтаксис. Ступень мельче — потому
   что документ не повышает голос.

   Квадрат слева набирает плотность вместе с регламентом: от контурного
   у разговорной строки до сплошного у официальной. Геометрия здесь работает
   шкалой, а не украшением. */
.slide--editorial .ed-register {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-register > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--ed-gap);
  align-items: baseline;
  padding: var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-register > div:last-child { border-bottom: 1px solid var(--ed-rule); }
.slide--editorial .ed-register dt {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ed-ink-margin);
  display: flex;
  align-items: baseline;
  gap: .6em;
}
/* Квадрат-метка. Псевдоэлемент внутри flex, а не внутри грида: элементом
   сетки он забрал бы ячейку и уронил подпись на следующую строку
   (тот же дефект, что ловился в .ed-order главы 12). */
.slide--editorial .ed-register dt::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) var(--ed-reg-fill, 0%), transparent);
}
.slide--editorial .ed-register dd { margin: 0; }
.slide--editorial .ed-register [data-tone="talk"]  { --ed-reg-fill: 0%; }
.slide--editorial .ed-register [data-tone="art"]   { --ed-reg-fill: 25%; }
.slide--editorial .ed-register [data-tone="press"] { --ed-reg-fill: 50%; }
.slide--editorial .ed-register [data-tone="sci"]   { --ed-reg-fill: 75%; }
.slide--editorial .ed-register [data-tone="doc"]   { --ed-reg-fill: 100%; }

.slide--editorial .ed-register [data-tone="talk"] dd {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.45;
}
.slide--editorial .ed-register [data-tone="art"] dd {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  line-height: 1.25;
}
.slide--editorial .ed-register [data-tone="press"] dd {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}
.slide--editorial .ed-register [data-tone="sci"] dd {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
}
.slide--editorial .ed-register [data-tone="doc"] dd {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ed-ink-margin);
}

/* Титульный вариант: те же пять строк на ступень тише. Метка формы уходит,
   остаётся квадрат — в титуле подпись «Официально-деловой» рядом с самой
   фразой прочиталась бы оглавлением главы, а не примером. */
/* Отбивки вдвое тише, чем у полосового варианта. Замер: при 24px титул выходил
   881px против 738–743 у глав 11 и 12, то есть на экране 900 читатель не видел
   ни строки текста. 8px возвращают титул в полосу издания, не трогая набор. */
.slide--editorial .ed-register--hero { margin: var(--ed-space-s) 0 0; }
.slide--editorial .ed-register--hero > div {
  grid-template-columns: 1.6rem 1fr;
  padding: 8px 0;
}
/* Метка снимается с экрана, но остаётся в дереве доступности: без неё пять строк
   титула читаются скринридером как пять несвязанных фраз. font-size: 0 здесь не
   годится — это ровно тот приём, который ловит правило tiny-text, и он гасит
   заодно квадрат-метку. Прячем сам текст, оставляя коробку. */
.slide--editorial .ed-register--hero dt { gap: 0; }
.slide--editorial .ed-register--hero dt span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.slide--editorial .ed-register--hero [data-tone="art"] dd   { font-size: 24px; }
.slide--editorial .ed-register--hero [data-tone="press"] dd { font-size: 20px; }
.slide--editorial .ed-register--hero [data-tone="talk"] dd  { font-size: 18px; }
.slide--editorial .ed-register--hero [data-tone="sci"] dd   { font-size: 17px; }
.slide--editorial .ed-register--hero [data-tone="doc"] dd   { font-size: 16px; }

/* ── Шкала регистров ─────────────────────────────────────────────────────────
   Второй сигнатурный блок. Пять стилей выстроены не списком, а по оси
   «свобода ↔ регламент», и положение на оси задаётся длиной заливки.

   От спектра главы 06 отличается принципиально: там шесть равных полос
   шести цветов — шляпы равноправны и порядка между ними нет. Здесь одна
   акцентная краска и РАЗНАЯ длина: стили упорядочены, и порядок этот
   содержательный, а не алфавитный.

   Заливка идёт через width на ::after внутри позиционированной дорожки —
   не элемент сетки, ячейку не занимает. */
.slide--editorial .ed-scale {
  grid-column: 1 / 13;
  list-style: none;
  margin: var(--ed-space-l) 0;
  padding: 0;
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-scale li {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--ed-space-xs) var(--ed-gap);
  align-items: center;
  padding: var(--ed-space-s) 0;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-scale__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.slide--editorial .ed-scale__rail {
  position: relative;
  display: block;
  height: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.slide--editorial .ed-scale__rail::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ed-scale-pos, 50%);
  background: var(--accent);
}
.slide--editorial .ed-scale li[data-step="1"] { --ed-scale-pos: 14%; }
.slide--editorial .ed-scale li[data-step="2"] { --ed-scale-pos: 34%; }
.slide--editorial .ed-scale li[data-step="3"] { --ed-scale-pos: 54%; }
.slide--editorial .ed-scale li[data-step="4"] { --ed-scale-pos: 76%; }
.slide--editorial .ed-scale li[data-step="5"] { --ed-scale-pos: 96%; }
.slide--editorial .ed-scale__gloss {
  grid-column: 1 / 3;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  /* 50ch, а не 62: замер даёт 71 знак в строке при 62ch — мелкий кегль набирает
     знаков заметно больше, чем крупный, и служебный текст обгоняет по длине
     основную полосу. Подписи издания держатся 52–61 знака, сюда и приводим. */
  max-width: 50ch;
}
.slide--editorial .ed-scale__axis {
  grid-column: 1 / 13;
  display: flex;
  justify-content: space-between;
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  letter-spacing: .04em;
  color: var(--ed-ink-margin);
}

/* ── Лист сравнения ──────────────────────────────────────────────────────────
   Третий сигнатурный блок. Таблица, а не сетка карточек: сравнивать пять
   стилей по четырём признакам можно только построчно, и любая карточная
   раскладка это сравнение немедленно ломает — глаз перестаёт держать строку.

   min-width: 0 обязателен. У элемента грида min-width равен auto, то есть
   ширине по min-content: без него таблица раздувается до своего содержимого
   и даёт горизонтальный скролл ВСЕЙ страницы, а не собственный. Ловилось
   в главе 11 замером на 480 (scrollWidth 571 при clientWidth 480). */
.slide--editorial .ed-sheet {
  grid-column: 1 / 13;
  min-width: 0;
  overflow-x: auto;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-sheet table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}
.slide--editorial .ed-sheet th,
.slide--editorial .ed-sheet td {
  text-align: left;
  vertical-align: top;
  padding: var(--ed-space-xs) var(--ed-space-s) var(--ed-space-xs) 0;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-sheet thead th {
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ed-ink-margin);
  border-bottom: 1px solid var(--ed-rule-strong);
  padding-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-sheet tbody th {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  width: 12rem;
}
.slide--editorial .ed-sheet tbody tr:last-child th,
.slide--editorial .ed-sheet tbody tr:last-child td { border-bottom: 0; }

/* ── Правка ──────────────────────────────────────────────────────────────────
   Четвёртый сигнатурный блок. Две колонки «было / стало» с обязательным
   третьим элементом — объяснением, ЧТО именно поменялось. Без него блок
   превращается в пару примеров, а редакторская работа состоит как раз
   в основании правки.

   Снятые слова помечаются волосяным перечёркиванием в акценте. Это
   корректурный знак, а не декоративный эффект: читатель видит не «текст
   с ошибкой», а след решения. */
.slide--editorial .ed-edit {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ed-space-s) var(--ed-gap);
  margin: var(--ed-space-m) 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
}
/* Селекторы с `p` обязательны: правило `.ed-body p { font-size: 17px }` имеет
   специфичность (0,2,1) и перебивает голый класс (0,2,0). На этом уже
   попадались .ed-morph__word главы 10 и три блока главы 11 сразу. */
.slide--editorial .ed-body p.ed-edit__label {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ed-ink-margin);
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-body p.ed-edit__text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  max-width: none;
  margin: 0;
}
.slide--editorial .ed-edit__col[data-state="was"] p.ed-edit__text { color: var(--ed-ink-margin); }
.slide--editorial .ed-edit__col[data-state="now"] { padding-left: var(--ed-space-s); border-left: 2px solid var(--accent); }
.slide--editorial .ed-edit__cut {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
}
.slide--editorial .ed-body p.ed-edit__why {
  grid-column: 1 / 3;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
  /* Та же поправка, что у пояснения шкалы: 68ch мелким кеглем дают 76 знаков. */
  max-width: 50ch;
  margin: 0;
}

/* ── Разбор по уликам ────────────────────────────────────────────────────────
   Пятый сигнатурный блок. Фрагмент, список примет и вывод — порядок именно
   такой: сначала текст, потом наблюдения, и только потом название стиля.
   Обратный порядок («это официально-деловой стиль, потому что…») превращает
   разбор в иллюстрацию к готовому ответу.

   Приметы нумерованы и связаны с текстом надстрочником: связь показывается
   номером, а не цветом — цветовых пометок на полосе и так одна, акцентная. */
.slide--editorial .ed-clue {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-m) 0;
}
.slide--editorial .ed-clue__text {
  grid-column: 1 / 9;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.55;
  padding-left: var(--ed-space-s);
  border-left: 2px solid var(--ed-rule-strong);
  margin: 0;
}
.slide--editorial .ed-clue__mark {
  background: none;
  color: inherit;
  border-bottom: 1px solid var(--accent);
}
.slide--editorial .ed-clue__mark sup {
  font-family: var(--font-sans);
  font-size: max(11px, .58em);
  font-style: normal;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  margin-left: 1px;
}
.slide--editorial .ed-clue__list {
  grid-column: 9 / 13;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ed-clue;
}
.slide--editorial .ed-clue__list li {
  counter-increment: ed-clue;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .4rem;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  padding: var(--ed-space-xs) 0;
  border-bottom: 1px solid var(--ed-rule);
}
.slide--editorial .ed-clue__list li::before {
  content: counter(ed-clue);
  font-weight: 700;
  color: var(--accent);
}
.slide--editorial .ed-clue__verdict {
  grid-column: 1 / 9;
  margin-top: var(--ed-space-s);
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
}
.slide--editorial .ed-clue__verdict b { color: var(--accent); }

/* ═══ Глава 14 · Культура речи ════════════════════════════════════════════════
   Сценарий главы выведен из одной фразы источника: «Филолог должен уметь
   различать: ошибку; вариант нормы; языковую инновацию». Все предыдущие главы
   описывали УСТРОЙСТВО языка — звук, слово, форму, связь. Эта единственная
   описывает ОЦЕНКУ: не как устроено, а как решить, допустимо ли.

   Отсюда все четыре сигнатурных блока: каждый из них выносит решение о форме.
   Суд решает спор двух вариантов, ударение — где норма, реестр ошибок —
   почему форма неверна, дрейф — что делать с формой, которой вчера не было.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Титул-вердикт (глава 14) ────────────────────────────────────────────────
   Четырнадцатый тип. Первый титул издания, где ТАКСОНОМИЯ ГЛАВЫ ОБЪЯВЛЕНА
   ФОТОГРАФИЯМИ: три вердикта стоят тремя равными кадрами во всю ширину под
   заглавием, и сетка кадров и есть содержание главы.

   Отличие от занятых типов не в перестановке блоков, а в роли снимка:
     --band (05)     — один кадр 21:9 и текст НА нём под скримом;
     --atlas (07)    — одна пластина в край окна, плита титула наезжает на шов;
     --diptych (09)  — две квадратные створки НАД титулом, шов вертикалью;
     --matrix (11)   — фотографии нет вовсе, заглавие стоит клеткой сетки;
     --parse (12)    — одна вертикаль 9:16 в боковом поле 9–12;
     --register (13) — каскад из трёх НЕРАВНЫХ кадров, запертых в поле 8–12,
                       а таксономия живёт списком внутри текстовой колонки.
   Здесь — три РАВНЫХ горизонтали на всех 12 колонках ПОД титулом, каждая со
   своим термином, и текстовой колонки они не касаются.

   padding-top обязателен: .slide--editorial обнуляет padding-top:
   var(--chrome-top) из base.css, и без него надстрочник уходит под стекло. */
.slide--editorial .ed-hero--verdict {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  /* Отбивка снизу на ступень короче, чем у соседних титулов. Первая сборка
     дала 914px против 738–743 у глав 12 и 13 и 826 у главы 15: на экране 900
     читатель не видел ни строки полосы. Лечится отбивками и пропорцией
     кадров (3:2 → 16:9), а не кеглем заглавия. */
  padding-bottom: var(--ed-space-s);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--verdict::after { content: none; }
.slide--editorial .ed-hero--verdict picture { display: block; }
.slide--editorial .ed-hero--verdict .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
/* Глобальное правило .ed-hero__text прибивает текст к 7–12 — здесь он обязан
   стоять на полосе набора, иначе левый край заглавия не совпадёт с абзацем. */
.slide--editorial .ed-hero--verdict .ed-hero__text { grid-column: 1 / 10; }
.slide--editorial .ed-hero--verdict .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--verdict .ed-standfirst { color: var(--ed-ink-margin); max-width: 44ch; }
.slide--editorial .ed-hero--verdict .ed-hero-meta  {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-s);
  border-top-color: var(--ed-rule-strong);
  color: var(--ed-ink-margin);
}

/* Три гнезда вердикта. Набраны ОДИНАКОВО намеренно: ни линейкой, ни заливкой,
   ни кеглем они не различаются. Это содержательное решение, а не экономия —
   спорная форма не носит на себе метки, к какому разряду относится, и
   различить их и есть работа главы. Атрибут data-verdict в CSS ничего не
   красит: он существует как якорь разметки.

   align-self: start обязателен по той же причине, что у каскада главы 13 и
   столба главы 12: растянутая по соседу колонка отдала бы высоту кадрам, и
   aspect-ratio начал бы считать ширину ОТ высоты. */
.slide--editorial .ed-verdicts {
  grid-column: 1 / 13;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--ed-gap);
  margin-top: var(--ed-space-xs);
}
.slide--editorial .ed-verdicts > div {
  min-width: 0;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-verdict__term {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.slide--editorial .ed-verdict__gloss {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
  /* 30ch, а не наследование 68ch: 13px при 68ch дают 76 знаков — служебная
     строка вышла бы длиннее полосы, которую поясняет. */
  max-width: 30ch;
}
.slide--editorial .ed-verdicts figure { margin: var(--ed-space-xs) 0 0; min-width: 0; }
.slide--editorial .ed-verdicts img,
.slide--editorial .ed-verdicts .ed-figure__placeholder { display: block; width: 100%; height: auto; }

/* ── Языковой суд ────────────────────────────────────────────────────────────
   Первый сигнатурный блок главы. Две конкурирующие формы стоят по обе стороны
   оси, под ними — вердикт и его основание.

   Блок СИММЕТРИЧЕН и НЕ НАПРАВЛЕН, и в этом всё отличие от правки главы 13:
   у .ed-edit слева всегда плохое, справа исправленное, и направление задано
   до чтения. Здесь до вердикта обе формы равноправны, а в деле «вариант
   нормы» обе так и остаются принятыми — случай, который .ed-edit выразить
   не может в принципе. От минимальных пар главы 07 (.ed-pair) отличается
   тем, что там меняется буква и вывода не делается вовсе.

   Шов рисуется ::before в межколоннике. Псевдоэлемент здесь безопасен: он
   абсолютный и из потока сетки выведен — в отличие от ::before главы 12,
   который забирал ячейку авторазмещения. */
.slide--editorial .ed-trial {
  grid-column: 1 / 13;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-trial__case {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: end;
  padding: var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
  min-width: 0;
}
.slide--editorial .ed-trial__case:first-child { border-top: 2px solid var(--accent); }
.slide--editorial .ed-trial__case::before {
  content: '';
  position: absolute;
  top: var(--ed-space-s);
  bottom: var(--ed-space-s);
  left: 50%;
  border-left: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-trial__form {
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}
.slide--editorial .ed-trial__form[data-side="a"] { grid-column: 1 / 7;  text-align: right; }
.slide--editorial .ed-trial__form[data-side="b"] { grid-column: 7 / 13; text-align: left; }
.slide--editorial .ed-trial__form[data-state="kept"]    { color: var(--ink); }
.slide--editorial .ed-trial__form[data-state="dropped"] { color: var(--ed-ink-margin); }
.slide--editorial .ed-trial__verdict {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-s);
  padding-top: 6px;
  border-top: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: max(11px, .68em);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
}
/* Селектор включает `.ed-body p`: без него правило абзаца (0,2,1) перебивает
   класс (0,2,0) и основание набирается кеглем полосы. Ловилось у .ed-morph__word
   главы 10 и у трёх блоков главы 11 подряд. */
.slide--editorial .ed-body p.ed-trial__ground {
  grid-column: 4 / 10;
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  text-align: center;
  color: var(--ed-ink-margin);
  /* 46ch, а не 68ch: см. разбор у .ed-verdict__gloss. Замер 50ch дал 62 знака —
     на знак выше полосы подписей издания (52–61). */
  max-width: 46ch;
  justify-self: center;
}

/* ── Акцентологический ряд ───────────────────────────────────────────────────
   Второй сигнатурный блок. Ударная гласная помечается ЛИНЕЙКОЙ, а не глифом
   акута: комбинирующий U+0301 в Literata садится по-разному на разные гласные
   и на 480px сливается с верхним выносным элементом соседней строки.
   Линейка держит одинаковый отступ при любом кегле.

   От парадигмы главы 11 отличается тем, что там таблица форм ОДНОЙ леммы и
   акцентом набрано окончание; здесь плоский ряд независимых слов, и акцент
   стоит на гласной внутри основы. От минимальных пар главы 07 — тем, что
   различие надсегментное, и обязателен отвергнутый вариант.

   Перечёркивание --ed-rule-strong, а не акцентом: у главы 13 акцентное
   перечёркивание (.ed-edit__cut) — корректурный знак редактора, здесь же это
   служебная помета словаря, и она обязана быть тише. */
.slide--editorial .ed-stress {
  grid-column: 1 / 13;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
/* min-width: 0 обязателен: у элемента сетки min-width равен auto, то есть
   ширине по min-content, и длинное слово раздувает колонку, давая
   горизонтальный скролл ВСЕЙ страницы (замерено в главе 11 на 480). */
.slide--editorial .ed-stress li {
  min-width: 0;
  padding-top: var(--ed-space-xs);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-stress__yes {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-h2);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.slide--editorial .ed-stress__v {
  display: inline-block;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: 1px;
  line-height: 1;
}
.slide--editorial .ed-stress__no {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  color: var(--ed-ink-margin);
  text-decoration: line-through;
  text-decoration-color: var(--ed-rule-strong);
  text-decoration-thickness: 1px;
}
.slide--editorial .ed-body p.ed-stress__why,
.slide--editorial .ed-stress__why {
  /* display: block обязателен — в разметке это <span>, а строчный элемент
     игнорирует и max-width, и вертикальные отступы. Тот же дефект, что жил
     в .flashcard__inner всё издание. */
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
  max-width: 40ch;
}

/* ── Реестр речевых ошибок ───────────────────────────────────────────────────
   Третий сигнатурный блок и единственный в главе, живущий НА ПОЛОСЕ НАБОРА,
   а не во всю ширину: реестр читается подряд, как текст, и растянутый на 12
   колонок он превратился бы в таблицу, которой не является.

   От нумерованного разбора (.ed-steps) отличается содержимым левого поля: там
   висячая ЦИФРА дисплейной антиквой, здесь висячий ТЕРМИН гротеском, и
   счётчика нет вовсе — типы ошибок не упорядочены.

   Ошибочный фрагмент помечается ПУНКТИРОМ снизу. Сплошная нижняя линейка в
   издании уже занята уликой главы 13 (.ed-clue__mark), перечёркивание — правкой
   главы 13 и рядом ударений выше. Три разных пометы на одной странице
   различимы только если каждая своя. */
.slide--editorial .ed-slip {
  grid-column: 1 / 10;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-slip > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: var(--ed-gap);
  padding: var(--ed-space-s) 0;
  border-top: 1px solid var(--ed-rule);
  min-width: 0;
}
.slide--editorial .ed-slip__type {
  font-family: var(--font-sans);
  font-size: max(11px, .68em);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
  padding-top: 6px;
}
.slide--editorial .ed-slip dd { margin: 0; min-width: 0; }
.slide--editorial .ed-slip__ex {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
}
.slide--editorial .ed-slip__hit {
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.slide--editorial .ed-slip__fix {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.slide--editorial .ed-slip__fix::before {
  content: '→ ';
  color: var(--accent);
}
.slide--editorial .ed-body p.ed-slip__why,
.slide--editorial .ed-slip__why {
  display: block;   /* см. .ed-stress__why: <span> не держит max-width */
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  max-width: 50ch;
}

/* ── Дрейф: новые слова эпохи ────────────────────────────────────────────────
   Четвёртый сигнатурный блок. Единственный КОНТЕНТНЫЙ блок издания на
   многоколоночном потоке: до сих пор `columns` держали только сноски. Выбор
   механизма содержательный — глоссарий эпохи читается не строкой и не
   таблицей, а колонкой, и обрывается там, где кончается страница.

   От банка морфем главы 10 отличается механизмом (там grid auto-fill из
   двухстрочных ячеек) и числом полей: у статьи их четыре, включая цепь
   вывода. От словарной статьи главы 08 — тем, что там ОДНО слово с
   нумерованными значениями и пометами, разворот словаря; здесь много слов по
   одному значению, то есть глоссарий.

   break-inside: avoid обязателен — без него статья рвётся между словом и его
   значением, и колонка теряет смысл. */
.slide--editorial .ed-drift {
  grid-column: 1 / 13;
  columns: 2;
  column-gap: var(--ed-space-l);
  column-rule: 1px solid var(--ed-rule);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-drift > div {
  break-inside: avoid;
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-drift__word {
  font-family: var(--font-display);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.slide--editorial .ed-drift dd { margin: 0; }
.slide--editorial .ed-drift__sense {
  display: block;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
}
.slide--editorial .ed-drift__from {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-drift__step:not(:first-child)::before {
  content: '← ';
  color: var(--accent);
}
.slide--editorial .ed-drift__use {
  display: block;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--ed-rule);
  font-family: var(--font-sans);
  font-size: max(11px, .68em);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
}

/* ══ ГЛАВА 15 «ПРАКТИКУМ» ════════════════════════════════════════════════════
 *
 * Сценарий главы выведен из того, чем она является. Четырнадцать предыдущих
 * глав описывали язык; эта не описывает ничего — она ставит работу. Значит
 * страница обязана быть не изложением, а РАБОЧИМ ЛИСТОМ: у каждой единицы
 * есть номер, формулировка, форма сдачи и признак, по которому её проверяют.
 * Отсюда все пять сигнатурных блоков.
 *
 *   .ed-loop   — круг исследования: шесть узлов на кольце. Кольцо, а не
 *                стрелка: у работы нет конца, вывод ставит следующий вопрос.
 *                Тем и отличается от .ed-flow главы 05 — там линейная
 *                процедура RAFT из пяти шагов с началом и концом.
 *   .ed-brief  — рабочая форма задания: номер, название, формулировка,
 *                «сдаётся», «проверяется». Несущий блок главы: им набраны
 *                все пятьдесят заданий. От .ed-steps отличается тем, что это
 *                не разбор одной процедуры, а реестр независимых единиц.
 *   .ed-roster — навигационный реестр пятнадцати блоков практикума с
 *                указанием, где искать первые пятьдесят заданий.
 *   .ed-rubric — шкала оценивания: три уровня полосами разной длины.
 *   .ed-folio  — четыре позиции итогового электронного портфолио.
 *
 * Титул --tally — пятнадцатый тип. Числительное крупнее заглавия: этого не
 * делал ни один титул издания, и приём здесь содержательный, а не формальный —
 * глава называется числом заданий раньше, чем словом. Фотография в титуле
 * одна и маленькая, в поле маргиналий: все прочие фотографические титулы
 * дают крупный кадр (полосой, разворотом, створками, каскадом, колонкой),
 * и шестой крупный кадр читался бы шестым повторением.
 */

/* ── Титул-рабочий лист: числительное вместо кадра (глава 15) ────────────────
   Фотографии как подложки нет — значит, как у глав 02, 04, 06 и 11, снимаются
   и тёмная подложка, и затемняющий градиент, и белый текст: титул лежит на
   бумаге тем же чернилом, что и полоса.

   padding-top: --ed-space-xl обязателен. .slide--editorial обнуляет
   padding-top: var(--chrome-top) из base.css, и титул с текстом наверху
   должен восстанавливать клиренс сам — иначе первая строка уезжает под
   стеклянную панель, и глазом это неотличимо от задуманного «контент
   подныривает под стекло». Проверяется только замером. */
.slide--editorial .ed-hero--tally {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--tally::after { content: none; }

.slide--editorial .ed-hero--tally .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}

/* Счёт заданий. Кегль выше дисплейного (168 против 92 у заглавия) — это и
   есть сигнатура титула: глава называет себя числом раньше, чем словом. */
.slide--editorial .ed-hero--tally .ed-tally__count {
  grid-column: 1 / 4;
  margin: 0;
}
.slide--editorial .ed-tally__count b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(84px, 11.5vw, 168px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.04em;
  color: var(--accent);
}
.slide--editorial .ed-tally__count span {
  display: block;
  margin-top: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-ink-margin);
}

.slide--editorial .ed-hero--tally .ed-hero__text  { grid-column: 4 / 10; }
.slide--editorial .ed-hero--tally .ed-eyebrow     { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--tally .ed-standfirst  { color: var(--ed-ink-margin); }

/* Кадр в поле маргиналий. `display: block` на <picture> обязателен: базовый
   титул задаёт `.ed-hero picture { display: contents }` под полноэкранное
   фото, и без переопределения бокс кадра исчезает. */
.slide--editorial .ed-hero__card { grid-column: 10 / 13; margin: 0; min-width: 0; }
.slide--editorial .ed-hero--tally .ed-hero__card picture { display: block; }
.slide--editorial .ed-hero__card img { display: block; width: 100%; height: auto; }

.slide--editorial .ed-tally__meters {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ed-space-s) var(--ed-gap);
  margin-top: var(--ed-space-l);
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-tally__meters > div { min-width: 0; }
.slide--editorial .ed-tally__meters dt {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.slide--editorial .ed-tally__meters dd {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
}

/* Линейка уже нарисована блоком счётчиков — вторая подряд дала бы двойную
   отбивку, поэтому у выходных данных её нет. */
.slide--editorial .ed-hero--tally .ed-hero-meta {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-s);
  padding-top: 0;
  border-top: 0;
  color: var(--ed-ink-margin);
}

/* ── Круг исследования ───────────────────────────────────────────────────────
   Кольцо считается тригонометрией, а не выкладывается сеткой: шесть узлов
   через 60°, подписи на радиусе 232px, номерные кружки на самом кольце
   (радиус 154px). Размеры в пикселях, а не в процентах, потому что блок
   имеет фиксированный бокс 640×620 всюду, где вообще показывается кольцом:
   ниже 860px он переключается на вертикальный список.

   Приём с двойным поворотом — rotate(--a) translateY(-r) rotate(-1*--a) —
   выносит бокс на окружность и возвращает ему горизонтальную ось. Без
   обратного поворота подписи стояли бы по касательной. */
.slide--editorial .ed-loop {
  grid-column: 1 / 13;
  position: relative;
  width: 640px;
  max-width: 100%;
  height: 620px;
  margin: var(--ed-space-l) auto;
  list-style: none;
  counter-reset: ed-loop;
}
.slide--editorial .ed-loop::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 308px;
  height: 308px;
  margin: -154px 0 0 -154px;
  border: 1px solid var(--ed-rule-strong);
  border-radius: 50%;
}
.slide--editorial .ed-loop li {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  text-align: center;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-232px) rotate(calc(var(--a) * -1));
}
.slide--editorial .ed-loop li:nth-child(1) { --a:   0deg; }
.slide--editorial .ed-loop li:nth-child(2) { --a:  60deg; }
.slide--editorial .ed-loop li:nth-child(3) { --a: 120deg; }
.slide--editorial .ed-loop li:nth-child(4) { --a: 180deg; }
.slide--editorial .ed-loop li:nth-child(5) { --a: 240deg; }
.slide--editorial .ed-loop li:nth-child(6) { --a: 300deg; }
/* Номерной кружок садится на само кольцо: тот же луч, на 78px ближе к центру
   (232 − 78 = 154). Заливка бумагой разрывает линейку кольца — так узел
   читается остановкой на круге, а не наклейкой поверх него. */
.slide--editorial .ed-loop li::before {
  content: counter(ed-loop);
  counter-increment: ed-loop;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(78px) rotate(calc(var(--a) * -1));
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.slide--editorial .ed-loop b {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.slide--editorial .ed-loop span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
}

/* ── Рабочая форма задания ───────────────────────────────────────────────────
   Номер живёт в собственной колонке слева от текста, а не в поле маргиналий:
   заданий пятьдесят, и вынос их номеров на поле превратил бы поле в лестницу.

   Строки «сдаётся» и «проверяется» набираются классом на <p>. Это не стиль,
   а обязательное требование: правило `.slide--editorial .ed-body p` имеет
   специфичность (0,2,1), и блок с корнем <p> без собственного класса тихо
   наберётся кеглем полосы. Ловилось на .ed-morph__word главы 10 и сразу
   на трёх блоках главы 11. */
.slide--editorial .ed-brief {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-brief > div {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  column-gap: var(--ed-gap);
  min-width: 0;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
  transition: border-color .22s ease;
}
/* Единственная микроанимация главы: под курсором линейка задания набирает
   акцент. Пятьдесят единиц в списке, и подсветка строки — навигация, а не
   украшение. Ни сдвигов, ни теней, ни изменения кегля: они сдвинули бы
   соседей и порвали вертикальный ритм. */
.slide--editorial .ed-brief > div:hover { border-top-color: var(--accent); }
.slide--editorial .ed-brief > div::before {
  content: attr(data-no);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--accent);
}
.slide--editorial .ed-brief dt {
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}
.slide--editorial .ed-brief dd { grid-column: 2; margin: 0; }
.slide--editorial .ed-body .ed-brief p {
  font-size: 15px;
  line-height: 1.55;
  max-width: none;
  margin-bottom: var(--ed-space-xs);
}
.slide--editorial .ed-body p.ed-brief__out,
.slide--editorial .ed-body p.ed-brief__skill {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
  margin-bottom: 8px;
}
.slide--editorial .ed-body p.ed-brief__skill { margin-bottom: 0; }
/* inline-block, а не inline: строчный элемент молча игнорирует и отступы,
   и ширину — грабля, прожившая в .flashcard__inner всю разработку. */
.slide--editorial .ed-brief__out > span,
.slide--editorial .ed-brief__skill > span {
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Реестр блоков практикума ───────────────────────────────────────────────
   Диапазон номеров и место блока — две строки, а не две колонки: три колонки
   текста на 375px дают по 100px на каждую и выносят горизонтальный скролл
   на всю страницу. Строчная подача переносится сама. */
.slide--editorial .ed-roster {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 var(--ed-gap);
  margin: var(--ed-space-l) 0;
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-roster > div {
  min-width: 0;
  padding: var(--ed-space-xs) 0;
  border-bottom: 1px solid var(--ed-rule);
  transition: border-color .22s ease;
}
.slide--editorial .ed-roster > div:hover { border-bottom-color: var(--accent); }
.slide--editorial .ed-roster dt {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
}
.slide--editorial .ed-roster__no {
  display: inline-block;
  min-width: 4.8em;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-roster dd {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
}
.slide--editorial .ed-roster > div[data-here] { border-bottom-color: var(--accent); }
.slide--editorial .ed-roster > div[data-here] .ed-roster__no,
.slide--editorial .ed-roster > div[data-here] dd { color: var(--accent); }

/* ── Шкала оценивания ────────────────────────────────────────────────────────
   Полоса рисуется градиентом с остановкой на верхней границе диапазона, а не
   тремя разными заливками: длина полосы и есть балл, и читатель сравнивает
   уровни глазом, не считывая цифры. */
.slide--editorial .ed-rubric {
  grid-column: 1 / 13;
  display: grid;
  gap: var(--ed-space-m);
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-rubric > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--ed-gap);
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-rubric > div[data-level="high"] { --w: 100%; }
.slide--editorial .ed-rubric > div[data-level="mid"]  { --w: 82%; }
.slide--editorial .ed-rubric > div[data-level="low"]  { --w: 60%; }
.slide--editorial .ed-rubric dt {
  grid-column: 1;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.slide--editorial .ed-rubric__score {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 8px;
}
.slide--editorial .ed-rubric dd { grid-column: 2; margin: 0; }
.slide--editorial .ed-rubric__bar {
  display: block;
  height: 6px;
  margin-bottom: var(--ed-space-xs);
  background: linear-gradient(90deg,
    var(--accent) 0 var(--w, 100%),
    color-mix(in srgb, var(--ink) 8%, transparent) var(--w, 100%) 100%);
}
.slide--editorial .ed-rubric ul { list-style: none; }
.slide--editorial .ed-rubric li {
  font-size: 15px;
  line-height: 1.6;
  padding: 4px 0;
}

/* ── Итоговое портфолио ──────────────────────────────────────────────────── */
.slide--editorial .ed-folio {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-space-m) var(--ed-gap);
  margin: var(--ed-space-l) 0;
  list-style: none;
  counter-reset: ed-folio;
}
.slide--editorial .ed-folio li {
  min-width: 0;
  padding-top: var(--ed-space-xs);
  border-top: 2px solid var(--accent);
}
.slide--editorial .ed-folio li::before {
  content: counter(ed-folio, decimal-leading-zero);
  counter-increment: ed-folio;
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
}
.slide--editorial .ed-folio b {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.slide--editorial .ed-folio span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ════════════════════════════════════════════════════════════════════════════
   ГЛАВА 16 · «Тестовые задания» · акцент вайда .ed-ch--woad
   ════════════════════════════════════════════════════════════════════════════

   Предмет главы — измерительный прибор. Отсюда весь её словарь: устройство
   задания (.ed-anatomy), карта банка (.ed-map), поломки прибора (.ed-flaw),
   чтение показания (.ed-gauge). Геометрия главы — кружок бланка: он же
   в титуле, он же маркером ключа в разборе задания.

   Единственная глава издания, где вся геометрия строится на ОДНОМ примитиве.
   Это не экономия, а тема: бланк ответов не знает других форм. */

/* ── Титул: бланк ответов ────────────────────────────────────────────────────
   Шестнадцатый тип титула. Типографика и геометрия разведены по колонкам
   и нигде не пересекаются: заглавие 1–7 на бумаге, сетка кружков 8–12.
   Ближайший родственник — .ed-hero--matrix главы 11, но там клетки текстовые
   и заглавие сидит ВНУТРИ матрицы; здесь матрица молчит и ничего не называет.

   Сетка не иллюстративная: десять строк — это ровно десять вопросов
   итогового теста внизу страницы, четыре кружка — четыре варианта.
   Один залит в каждой строке, потому что верный ответ всегда один.

   padding-top: --ed-space-xl обязателен: .slide--editorial обнуляет
   padding-top: var(--chrome-top) из base.css, и титул с текстом наверху
   восстанавливает клиренс сам. Проверяется замером getBoundingClientRect,
   глазом дефект неотличим от задуманного «контент подныривает под стекло». */
.slide--editorial .ed-hero--marks {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--marks::after { content: none; }

/* Строки сетки заданы явно. При авторазмещении счётная строка ушла бы
   в колонку 8–12 под кружки, а не под заглавие. */
.slide--editorial .ed-hero--marks .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
.slide--editorial .ed-hero--marks .ed-hero__text { grid-column: 1 / 8; grid-row: 1; }
.slide--editorial .ed-hero--marks .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--marks .ed-standfirst { color: var(--ed-ink-margin); }

.slide--editorial .ed-marks {
  grid-column: 8 / 13;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 8px;   /* оптическое выравнивание первого ряда кружков по капители надзаголовка */
}
.slide--editorial .ed-marks__row {
  display: grid;
  grid-template-columns: repeat(4, 22px);
  gap: 8px;
  margin-bottom: 8px;
}
.slide--editorial .ed-marks__row:last-child { margin-bottom: 0; }
.slide--editorial .ed-marks i {
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ed-rule-strong);
  border-radius: 50%;
}
.slide--editorial .ed-marks i.is-filled {
  background: var(--accent);
  border-color: var(--accent);
}

/* Счёт под заглавием. Число крупное, но НИЖЕ дисплейного кегля заглавия
   (58 против 92): у главы 15 число титула больше заглавия и это её сигнатура,
   повторять её здесь нельзя. Тут число комментирует заглавие, а не заменяет. */
.slide--editorial .ed-body p.ed-marks__tally,
.slide--editorial .ed-marks__tally {
  grid-column: 1 / 8;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: var(--ed-space-xs);
  /* Отбивки, а не кегль: в первой сборке титул дал 859px против 831 у соседей
     по развороту (главы 13 и 14), и на окне 900 читатель не видел ни строки
     полосы. Урок главы 13 — высота титула лечится паузами внутри него. */
  margin: var(--ed-space-s) 0 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-marks__tally b {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--accent);
}
.slide--editorial .ed-marks__tally span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
  max-width: 26ch;
}

.slide--editorial .ed-hero--marks .ed-hero-meta {
  grid-column: 1 / 13;
  grid-row: 3;
  margin-top: var(--ed-space-s);
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
  color: var(--ed-ink-margin);
}

/* ── Устройство задания ──────────────────────────────────────────────────────
   Разбор одного вопроса на части. Скобка слева — не декор: она показывает,
   докуда простирается «тело задания», и отделяет его от выносок справа.
   Рисуется тремя линиями (border-left + два засечка ::before/::after),
   а не рамкой: рамка сделала бы из разбора карточку, а карточек в системе нет. */
.slide--editorial .ed-anatomy {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  margin: var(--ed-space-l) 0;
}
.slide--editorial .ed-anatomy__item {
  grid-column: 1 / 8;
  position: relative;
  padding-left: var(--ed-space-s);
  border-left: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-anatomy__item::before,
.slide--editorial .ed-anatomy__item::after {
  content: '';
  position: absolute;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--ed-rule-strong);
}
.slide--editorial .ed-anatomy__item::before { top: 0; }
.slide--editorial .ed-anatomy__item::after  { bottom: 0; }

.slide--editorial .ed-body p.ed-anatomy__stem {
  margin-bottom: var(--ed-space-s);
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.35;
}
.slide--editorial .ed-anatomy__options { list-style: none; }
.slide--editorial .ed-anatomy__options li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--ed-space-xs);
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--ed-rule);
  font-size: 15px;
  line-height: 1.5;
}
.slide--editorial .ed-anatomy__options li:last-child { border-bottom: 0; }
/* Тот же кружок, что в титуле, — один примитив на всю главу. */
.slide--editorial .ed-anatomy__options li::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-top: -2px;
  border: 1px solid var(--ed-rule-strong);
  border-radius: 50%;
}
.slide--editorial .ed-anatomy__options li[data-key] { font-weight: 600; }
.slide--editorial .ed-anatomy__options li[data-key]::before {
  background: var(--accent);
  border-color: var(--accent);
}

.slide--editorial .ed-anatomy__legend { grid-column: 9 / 13; }
.slide--editorial .ed-anatomy__legend > div {
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-anatomy__legend > div:first-child { border-top: 0; padding-top: 0; }
.slide--editorial .ed-anatomy__legend dt {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.slide--editorial .ed-anatomy__legend dd {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Карта банка ─────────────────────────────────────────────────────────────
   Двадцать пять разделов подряд — самая плотная зона страницы, и это
   осознанно: реестр обязан выглядеть реестром. Воздух вокруг него дают
   соседние секции, а не разрядка внутри.

   `columns: 2` вместо сетки в 25 строк: столбик в 25 строк по 40px даёт
   тысячу пикселей прокрутки на один блок, и глава в этом месте перестаёт
   дышать. Строка — grid внутри колонки, break-inside запрещён. */
.slide--editorial .ed-map {
  grid-column: 1 / 13;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
  columns: 2;
  column-gap: var(--ed-space-l);
}
.slide--editorial .ed-map > div {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.2rem;
  gap: var(--ed-space-xs);
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--ed-rule);
}
.slide--editorial .ed-map dt {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-map dd { margin: 0; min-width: 0; }
.slide--editorial .ed-map__topic {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}
.slide--editorial .ed-map__range {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  color: var(--ed-ink-margin);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Провал 49–60. Пунктир — единственное место в издании, где линейка не
   сплошная: строка обозначает отсутствие, и линия обязана это показывать. */
.slide--editorial .ed-map__void {
  border-top: 1px dashed var(--accent);
  border-bottom: 1px dashed var(--accent);
}
.slide--editorial .ed-map__void .ed-map__topic {
  font-style: italic;
  color: var(--accent);
}

/* ── Поломки задания ─────────────────────────────────────────────────────────
   Три разбора: как напечатано → что не так → как исправлено. Единственная
   глава издания, которая разбирает дефекты собственного источника, поэтому
   и блок принадлежит только ей.

   Смена цвета линейки по наведению — единственная микроанимация блока,
   по образцу .ed-roster главы 15. Никаких сдвигов и масштабирований:
   строка реестра не должна шевелиться под курсором. */
.slide--editorial .ed-flaw {
  grid-column: 1 / 13;
  margin-top: var(--ed-space-m);
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
  transition: border-color .22s ease;
}
.slide--editorial .ed-flaw:hover { border-top-color: var(--accent); }

.slide--editorial .ed-body p.ed-flaw__no {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.slide--editorial .ed-flaw__title {
  margin: 0 0 var(--ed-space-s);
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
}
.slide--editorial .ed-flaw__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ed-gap);
}
.slide--editorial .ed-flaw__col { min-width: 0; padding-left: var(--ed-space-xs); }
.slide--editorial .ed-flaw__col[data-state="broken"] { border-left: 2px solid var(--bad); }
.slide--editorial .ed-flaw__col[data-state="fixed"]  { border-left: 2px solid var(--good); }

.slide--editorial .ed-body p.ed-flaw__label {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.slide--editorial .ed-flaw__col[data-state="broken"] .ed-flaw__label { color: var(--bad); }
.slide--editorial .ed-flaw__col[data-state="fixed"]  .ed-flaw__label { color: var(--good); }
.slide--editorial .ed-flaw__col[data-state="broken"] .ed-flaw__label::before { content: '✗ '; }
.slide--editorial .ed-flaw__col[data-state="fixed"]  .ed-flaw__label::before { content: '✓ '; }

.slide--editorial .ed-body p.ed-flaw__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
}
.slide--editorial .ed-flaw__text em { font-style: italic; }
.slide--editorial .ed-body p.ed-flaw__why {
  display: block;
  max-width: 50ch;   /* замером: 68ch на кегле 13px дают 76 знаков — длиннее полосы, которую поясняют */
  margin: var(--ed-space-s) 0 0;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Шкала результата ────────────────────────────────────────────────────────
   Одиннадцать делений — это одиннадцать возможных исходов теста из десяти
   вопросов, от 0 до 10, а не круглое число «для красоты». Полосы под рейкой
   набраны 5fr 3fr 3fr и в сумме дают ровно те же одиннадцать долей, поэтому
   границы полос совпадают с делениями рейки пиксель в пиксель. */
.slide--editorial .ed-gauge {
  grid-column: 1 / 13;
  margin: var(--ed-space-m) 0 var(--ed-space-l);
}
.slide--editorial .ed-gauge__rail {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: end;
  height: 22px;
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-gauge__rail i {
  justify-self: center;
  width: 1px;
  height: 8px;
  background: var(--ed-rule-strong);
}
/* Границы полос: пятое и восьмое деления отмечены длиннее и акцентом. */
.slide--editorial .ed-gauge__rail i:nth-child(6),
.slide--editorial .ed-gauge__rail i:nth-child(9) {
  height: 18px;
  background: var(--accent);
}
.slide--editorial .ed-gauge__bands {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr;
  gap: var(--ed-gap);
  margin-top: var(--ed-space-xs);
}
.slide--editorial .ed-gauge__bands > div { min-width: 0; }
.slide--editorial .ed-gauge__bands dt {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slide--editorial .ed-gauge__bands dd { margin: var(--ed-space-xs) 0 0; }
.slide--editorial .ed-gauge__bands b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.slide--editorial .ed-gauge__bands span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.5;
  color: var(--ed-ink-margin);
}

/* ── Выносная реплика в поле ─────────────────────────────────────────────────
   Второй способ цитирования на странице, кроме каталожного .ed-quote.
   От .ed-note отличается уровнем: маргиналия — служебный комментарий сансом
   на 13px, выноска — дисплейная реплика в акценте. Ставится в поле 10–12
   по тем же правилам, что и любая маргиналия: строго после АБЗАЦА. */
.slide--editorial .ed-body p.ed-pull,
.slide--editorial .ed-pull {
  grid-column: 10 / 13;
  margin: 0 0 var(--ed-space-s);
  padding-top: var(--ed-space-xs);
  border-top: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}

/* ── Появление блоков при прокрутке ──────────────────────────────────────────
   Первая моторика издания сверх hover-состояний. Скоупится под акцентный
   класс главы, а не под .slide--editorial: так правка физически не может
   задеть остальные пятнадцать editorial-страниц, даже если [data-reveal]
   когда-нибудь окажется на них по недосмотру.

   Только opacity и сдвиг на 10px. will-change не ставится — правило издания,
   замер обязан давать ноль. Параллакса нет: он требует непрерывного rAF
   на прокрутке, а прокрутка здесь уже занята демпфером smooth-scroll.js.

   Наблюдатель живёт в js/reveal.js и слушает САМ СЛАЙД как root: документ
   в этом проекте не скроллится вообще, скроллится каждый .slide. */
   Глава 17 берёт тот же слой вторым скоупом, а не расширением до
   .slide--editorial: список селекторов растёт линейно и остаётся читаемым,
   а промах в разметке любой другой главы по-прежнему ничего не показывает
   и ничего не прячет. В указателе атрибут стоит ТОЛЬКО на алфавитных группах
   и крупных блоках — не на строках: девяносто строк, проявляющихся разом,
   были бы анимацией ради анимации. */
.slide--editorial.ed-ch--woad [data-reveal],
.slide--editorial.ed-ch--damson [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-glass), transform .5s var(--ease-glass);
}
.slide--editorial.ed-ch--woad [data-reveal].is-revealed,
.slide--editorial.ed-ch--damson [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Нумерация разделов ──────────────────────────────────────────────────────
   Две главы издания со сквозной нумерацией — 12 и 15, — и метка у них разная
   намеренно: одинаковая читалась бы повтором приёма, а не системой.

   У главы 12 номер стоит в волосяном кружке НАД заголовком отдельной строкой,
   а не слева от него: боковое размещение сдвинуло бы заголовок вправо от
   полосы набора, и левый край перестал бы совпадать с абзацами — журнальная
   вёрстка этого не прощает.

   У главы 15 кружка нет вовсе: раздел метится линейкой на всю ширину полосы
   и словом «раздел» с номером под ней. Это метка рабочего листа, а не главы,
   и она соответствует тому, чем страница является. */
.slide--editorial.ed-ch--laurel .ed-body { counter-reset: ed-sec; }
.slide--editorial.ed-ch--laurel .ed-body .ed-h2 { counter-increment: ed-sec; }
.slide--editorial.ed-ch--laurel .ed-body .ed-h2::before {
  content: counter(ed-sec, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--ed-space-xs);
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}

.slide--editorial.ed-ch--umber .ed-body { counter-reset: ed-sec; }
.slide--editorial.ed-ch--umber .ed-body .ed-h2 {
  counter-increment: ed-sec;
  padding-top: var(--ed-space-xs);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial.ed-ch--umber .ed-body .ed-h2::before {
  content: 'Раздел ' counter(ed-sec, decimal-leading-zero);
  display: block;
  margin-bottom: var(--ed-space-xs);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Глава 16 — третье оформление номера, и оно обязано отличаться от первых двух:
   у главы 12 кружок, у главы 15 надпись «Раздел NN», здесь квадратная рамка.
   Квадрат не случаен — вся геометрия главы построена на кружке бланка, и
   номер раздела единственный, кому кружок не положен: он служебная метка
   набора, а не элемент бланка. Различение приёма и предмета делается формой. */
.slide--editorial.ed-ch--woad .ed-body { counter-reset: ed-sec; }
.slide--editorial.ed-ch--woad .ed-body .ed-h2 { counter-increment: ed-sec; }
.slide--editorial.ed-ch--woad .ed-body .ed-h2::before {
  content: counter(ed-sec, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--ed-space-xs);
  border: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ГЛАВА 17 · «Предметный указатель» · акцент тёрн .ed-ch--damson
   Титул --alphabet, сигнатурные блоки: алфавитная рейка (.ed-alphabet),
   сам указатель (.ed-glossary), вход по разделам (.ed-shelf).

   Страница отличается от всех шестнадцати предыдущих функцией: её не читают
   подряд, её сканируют. Отсюда два следствия, определившие композицию.

   Первое: фотографий на странице нет ни одной. Своей фотосерии у главы не
   существует, а брать кадры соседних глав система запрещает — и это оказалось
   не потерей, а точным решением. Указатель — концевой аппарат издания;
   «воздух» ему создают белое поле, алфавит и разные масштабы набора, а
   фотография превратила бы навигацию в декоративный плакат.

   Второе: единственный предмет этой главы — алфавит, и он же её главный
   инструмент. Поэтому алфавитная рейка стоит в титуле и является работающей
   навигацией, а не заставкой: буква с терминами — ссылка, буква без
   терминов гаснет. Ни одна другая глава алфавита не содержит, и приём
   закреплён за этой безусловно.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Титул-алфавит ───────────────────────────────────────────────────────────
   Семнадцатый тип титула. Асимметрия 5 : 7 — заглавие слева узкой колонкой,
   рейка справа широкой. Ни один существующий титул так не делится: у --marks
   текст 1–7 и бланк 8–12, у --tally число 1–3 и текст 4–9, у --spectrum
   текст 1–7 и полосы 8–12. Здесь текстовый блок УЖЕ поля с иллюстрацией,
   и это ровно то, что нужно сказать: на этой странице главное не текст.

   Фотографии нет — значит нет ни подложки, ни затемняющего градиента, и
   клиренс под плавающую панель приходится восстанавливать вручную: .slide--
   editorial обнуляет padding-top из base.css, и без --ed-space-xl первая
   строка уходит под стекло (проверяется только замером .getBoundingClientRect). */
.slide--editorial .ed-hero--alphabet {
  min-height: 0;
  display: block;
  background: none;
  color: var(--ink);
  overflow: visible;
  padding-top: var(--ed-space-xl);
  padding-bottom: var(--ed-space-m);
  border-bottom: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-hero--alphabet::after { content: none; }

.slide--editorial .ed-hero--alphabet .ed-hero__inner {
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
}
.slide--editorial .ed-hero--alphabet .ed-hero__text { grid-column: 1 / 6; grid-row: 1; }
/* Собственный кегль заглавия — тот же приём, что у --split. Пять колонок дают
   423px на 1280 и на 1440 (ящик полосы упирается в --ed-page раньше вьюпорта),
   а «Предметный» дисплейным кеглем 92px берёт 469px и вылезает из колонки.
   Замер: 469/423. Максимум 80px держит слово в 408px с запасом, а рабочее
   значение на 1440 — 63px. Заглавие здесь делит титул с рейкой и намеренно
   не претендует на полный дисплейный уровень издания. */
.slide--editorial .ed-hero--alphabet .ed-title      { font-size: clamp(36px, 4.4vw, 80px); }
.slide--editorial .ed-hero--alphabet .ed-eyebrow    { color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--alphabet .ed-standfirst { max-width: 34ch; color: var(--ed-ink-margin); }
.slide--editorial .ed-hero--alphabet .ed-hero-meta {
  grid-column: 1 / 13;
  grid-row: 2;
  margin-top: var(--ed-space-m);
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule);
  color: var(--ed-ink-margin);
}

/* ── Алфавитная рейка ────────────────────────────────────────────────────────
   Тридцать три буквы русского алфавита ложатся сеткой 11 × 3 без остатка —
   ритм задаётся самим предметом, а не подобран. Буквы с терминами набраны
   дисплейной антиквой в тушь и являются ссылками; Ё, Й, Ъ, Ы, Ь и ещё
   несколько букв терминов не имеют никогда, и они гаснут до волосяного тона.

   Гасшие буквы не убираются: пропуски в алфавите — такая же информация,
   как и заполненные ячейки, и по ним читатель мгновенно видит плотность
   указателя. Тот же принцип, что у .ed-map__void главы 16, где провал
   в нумерации банка помечен, а не скрыт.

   Ячейка — не кнопка и не плитка: заливки нет, форма задаётся волосяной
   линейкой снизу. Карточек в системе не бывает. */
.slide--editorial .ed-alphabet {
  grid-column: 6 / 13;
  grid-row: 1;
  align-self: start;
  padding-top: 6px;   /* оптическое совмещение первого ряда с капителью надзаголовка */
}
.slide--editorial .ed-alphabet__row {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  column-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slide--editorial .ed-alphabet__cell {
  display: grid;
  place-items: center;
  height: 44px;
  border-bottom: 1px solid var(--ed-rule);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  background: none;
  transition: color .18s var(--ease-glass), border-bottom-color .18s var(--ease-glass);
}
.slide--editorial a.ed-alphabet__cell:hover,
.slide--editorial a.ed-alphabet__cell:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.slide--editorial a.ed-alphabet__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Буква без терминов: служебный тон и БЕЗ линейки снизу. Это <span>,
   а не отключённая ссылка — фокус на ней ничего бы не открыл.

   Первая сборка гасила такую букву до --ed-rule-strong (28 %), и замер дал
   контраст 1.98 при пороге издания 4.5. Тон линейки к тексту неприменим:
   волосяная линейка не читается, а буква обязана. Поэтому различение
   переложено с одного средства на два — тон 72 % против полной туши плюс
   отсутствие линейки. Ступень 10.9 → 6.08 глазом однозначна, и порог держится. */
.slide--editorial .ed-alphabet__cell--void {
  color: var(--ed-ink-margin);
  border-bottom-color: transparent;
}

.slide--editorial .ed-alphabet__tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ed-space-xs);
  margin: var(--ed-space-s) 0 0;
  padding-top: var(--ed-space-s);
  border-top: 1px solid var(--ed-rule-strong);
}
.slide--editorial .ed-alphabet__tally b {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--accent);
}
.slide--editorial .ed-alphabet__tally span {
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.45;
  color: var(--ed-ink-margin);
}

/* ── Указатель ───────────────────────────────────────────────────────────────
   Алфавитная группа: крупная буква держится в колонках 1–2 и прилипает
   к верхней кромке при прокрутке, строки идут в 3–12 двумя колонками потока.

   Строка указателя — не карточка и не строка таблицы, а типографская строка
   с выноской: термин, волосяная линейка до конца ширины, номер слайда.
   Линейка СПЛОШНАЯ: единственная пунктирная линейка издания принадлежит
   .ed-map__void главы 16, и вторую заводить нельзя.

   Иерархия «термин важнее номера» строится тремя средствами сразу, а не
   одним: термин набран книжной антиквой 17px тушью, номер — дисплейной
   антиквой 19px служебным тоном 72 %. Номер заметен (он крупнее по кеглю),
   но вторичен (он глуше по тону и стоит после выноски). */
.slide--editorial .ed-glossary {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  margin: var(--ed-space-m) 0 var(--ed-space-l);
}
.slide--editorial .ed-glossary__group {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(var(--ed-cols), 1fr);
  column-gap: var(--ed-gap);
  align-items: start;
  padding-top: var(--ed-space-s);
  margin-bottom: var(--ed-space-m);
  border-top: 1px solid var(--ed-rule);
}
/* Липкая буква: слайд и есть контейнер прокрутки (документ в этом проекте
   не скроллится вообще), поэтому sticky работает от него. Вычет --chrome-top
   обязателен — иначе буква встанет под стеклянную панель шапки. */
.slide--editorial .ed-glossary__letter {
  grid-column: 1 / 3;
  position: sticky;
  top: calc(var(--chrome-top) + var(--ed-space-xs));
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 68px);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--accent);
}
.slide--editorial .ed-glossary__list {
  grid-column: 3 / 13;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--ed-space-l);
}
.slide--editorial .ed-glossary__list li {
  break-inside: avoid;
  margin: 0;
}
.slide--editorial .ed-glossary__term {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px;   /* touch target; на десктопе высоту всё равно задаёт интерлиньяж */
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color .18s var(--ease-glass);
}
.slide--editorial .ed-glossary__word {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--ed-body);
  line-height: 1.5;
  /* break-word здесь бесполезен: текст во flex — анонимный элемент
     с min-width: auto, то есть шириной по min-content. Работает только anywhere. */
  overflow-wrap: anywhere;
}
/* Выноска. Отдельный элемент, а не ::after: растянуться на остаток ширины
   может только flex-элемент, псевдоэлемент внутри строки этого не умеет. */
.slide--editorial .ed-glossary__lead {
  flex: 1 1 12px;
  min-width: 12px;
  align-self: baseline;
  transform: translateY(-.3em);
  border-bottom: 1px solid var(--ed-rule);
  transition: border-bottom-color .18s var(--ease-glass);
}
.slide--editorial .ed-glossary__slide {
  flex: none;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  color: var(--ed-ink-margin);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease-glass), transform .18s var(--ease-glass);
}
.slide--editorial .ed-glossary__term:hover .ed-glossary__lead,
.slide--editorial .ed-glossary__term:focus-visible .ed-glossary__lead { border-bottom-color: var(--accent); }
.slide--editorial .ed-glossary__term:hover .ed-glossary__slide,
.slide--editorial .ed-glossary__term:focus-visible .ed-glossary__slide {
  color: var(--accent);
  transform: translateX(2px);
}
.slide--editorial .ed-glossary__term:hover { color: var(--accent); }
.slide--editorial .ed-glossary__term:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Вход по разделам ────────────────────────────────────────────────────────
   Второй сценарий поиска и вторая зона страницы. Читатель не всегда помнит
   слово — чаще он помнит раздел, в котором его встретил. Реестр закрывает
   этот случай и заодно ломает «длинный список»: после девяноста строк
   алфавита страница меняет способ подачи, а не продолжает его.

   От .ed-roster главы 15 отличается направлением: там номера заданий ведут
   к главам, здесь главы ведут к терминам. От .ed-map главы 16 — тем, что
   строка интерактивна и является переходом, а не справкой. */
.slide--editorial .ed-shelf {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ed-space-l);
  margin: var(--ed-space-m) 0 0;
}
.slide--editorial .ed-shelf > div {
  min-width: 0;
  padding: var(--ed-space-xs) 0;
  border-top: 1px solid var(--ed-rule);
  transition: border-top-color .22s ease;
}
.slide--editorial .ed-shelf > div:hover { border-top-color: var(--accent); }
.slide--editorial .ed-shelf dt { margin: 0; }
.slide--editorial .ed-shelf__go {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--ed-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: color .18s var(--ease-glass);
}
.slide--editorial .ed-shelf__go:hover { color: var(--accent); }
.slide--editorial .ed-shelf__go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.slide--editorial .ed-shelf__no {
  flex: none;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* max-width считается замером знаков, а не наследуется у полосы: 13px в половине
   разворота дали 62 знака против 54 у основного текста — служебная строка
   оказалась длиннее того, что поясняет. 46ch сводят её к 52 (правило 8а). */
.slide--editorial .ed-shelf__terms {
  margin: 6px 0 0;
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: var(--ed-small);
  line-height: 1.55;
  color: var(--ed-ink-margin);
}

/* ── Гашение протечки из slides.css ───────────────────────────────────────── */
/* slides.css:57-58 задаёт `ul, ol { padding-left: 22px }` и `li { margin-bottom:
   7px }` селекторами элементов без скоупа. Кегль и интерлиньяж списков система
   перекрывает, а отступы — нет: 7px на каждом li ломают шаг 8px и накапливаются
   в высоких панелях, а сами списки съезжают на 22px от текстовой колонки.
   Правим здесь, а не в slides.css — легаси-страницы на нём ещё живут. */
.slide--editorial .ed-steps,
.slide--editorial .ed-panel ul,
.slide--editorial .ed-tract,
.slide--editorial .ed-plate--task ul,
.slide--editorial .ed-shift,
.slide--editorial .ed-degrees,
.slide--editorial .ed-coinage,
.slide--editorial .ed-bank ul,
.slide--editorial .ed-tree ul,
.slide--editorial .ed-cluster__field,
.slide--editorial .ed-order,
.slide--editorial .ed-scale,
.slide--editorial .ed-clue__list,
.slide--editorial .ed-stress,
.slide--editorial .ed-loop,
.slide--editorial .ed-folio,
.slide--editorial .ed-rubric ul,
.slide--editorial .ed-anatomy__options,
.slide--editorial .ed-alphabet__row,
.slide--editorial .ed-glossary__list,
.slide--editorial .ed-footnotes { padding-left: 0; }
.slide--editorial .ed-steps li,
.slide--editorial .ed-panel li,
.slide--editorial .ed-strata li,
.slide--editorial .ed-shift li,
.slide--editorial .ed-degrees li,
.slide--editorial .ed-coinage li,
.slide--editorial .ed-bank li,
.slide--editorial .ed-tree li,
.slide--editorial .ed-cluster__field li,
.slide--editorial .ed-order li,
.slide--editorial .ed-scale li,
.slide--editorial .ed-clue__list li,
.slide--editorial .ed-stress li,
.slide--editorial .ed-loop li,
.slide--editorial .ed-folio li,
.slide--editorial .ed-rubric li,
.slide--editorial .ed-anatomy__options li,
.slide--editorial .ed-alphabet__row li,
.slide--editorial .ed-glossary__list li,
.slide--editorial .ed-plate--task li { margin-bottom: 0; }

/* ── Кинополоса на узком экране: текст сходит с фотографии ───────────────────
   Ниже 1024px кадр перестаёт быть полосой: при ширине 480 он кадрируется почти
   в квадрат, титульный блок занимает его целиком, и белый текст потребовал бы
   затемнения в 60 % по всему кадру, чтобы взять 4.5:1 (замерено). Это уже не
   фотография, а текстура.

   Поэтому на узком экране титул сходит с фотографии обратно на бумагу: кадр
   сверху, текст под ним. Для телефона это и есть нормальная подача, а вопрос
   контраста снимается полностью — чернила по бумаге.

   Заодно снимается конфликт `aspect-ratio` с `min-height: 380px` из мобильного
   медиазапроса: они вместе вычисляли ШИРИНУ от высоты и раздували hero до
   887px при вьюпорте 480, давая горизонтальный скролл. */
@media (max-width: 1024px) {
  .slide--editorial .ed-hero--band {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    display: block;
    background: none;
    color: var(--ink);
    overflow: visible;
    padding-top: 0;
    padding-bottom: var(--ed-space-m);
  }
  .slide--editorial .ed-hero--band::after { content: none; }
  .slide--editorial .ed-hero--band picture { display: block; }
  .slide--editorial .ed-hero__band {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
    margin: 0 0 var(--ed-space-l);
  }
  /* На бумаге заголовок идёт полным дисплейным кеглем и обязан переноситься. */
  .slide--editorial .ed-hero--band .ed-title      { font-size: var(--ed-display); max-width: none; white-space: normal; }
  .slide--editorial .ed-hero--band .ed-eyebrow    { color: var(--ed-ink-margin); }
  .slide--editorial .ed-hero--band .ed-standfirst { max-width: none; color: var(--ed-ink-margin); }
  .slide--editorial .ed-hero--band .ed-hero-meta  { border-top-color: var(--ed-rule-strong); color: var(--ed-ink-margin); }
}

/* ── Узкий экран ──────────────────────────────────────────────────────────── */
/* Поле для маргиналий на узком экране схлопывается: заметка встаёт в полосу
   и отбивается линейкой сверху. Держать три колонки поля здесь невозможно —
   на них не остаётся ширины. */
@media (max-width: 860px) {
  .slide--editorial .ed-body > *,
  .slide--editorial .ed-note,
  .slide--editorial .ed-figure--margin,
  .slide--editorial .ed-plate--margin,
  .slide--editorial .ed-plate--square { grid-column: 1 / 13; }
  /* Выноска главы 16 уходит из поля в полосу вместе с остальными маргиналиями.
     Селектор повторяет специфичность объявления (0,3,1) — правило `.ed-body > *`
     выше её не перебивает. Тот же случай, что у .ed-lead с самого начала. */
  .slide--editorial .ed-body p.ed-pull { grid-column: 1 / 13; max-width: var(--ed-measure); }
  .slide--editorial .ed-plate--margin,
  .slide--editorial .ed-plate--square { max-width: 320px; }
  /* Стих в полосу целиком — иначе строка ломается посередине. */
  .slide--editorial .ed-quote--verse blockquote { grid-column: 1 / 13; }
  .slide--editorial .ed-figure--margin { max-width: 320px; }
  .slide--editorial .ed-footnotes { columns: 1; }
  .slide--editorial { --ed-space-xl: calc(var(--ed-rhythm) * 9); }

  /* Титулы схлопываются в одну колонку: в половине ширины ни заголовок,
     ни изображение здесь уже не помещаются. */
  .slide--editorial .ed-hero--type .ed-title,
  .slide--editorial .ed-hero--type .ed-standfirst,
  .slide--editorial .ed-hero__figure,
  .slide--editorial .ed-hero__text { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--type .ed-standfirst { margin-top: var(--ed-space-s); }
  /* В одной колонке фотография 4:5 занимает почти весь экран и уводит титул
     за сгиб — на узком экране порядок переворачивается: сначала заголовок,
     фотография под ним. Текст на фото не ложится и здесь. */
  .slide--editorial .ed-hero__text   { order: 0; padding-bottom: var(--ed-space-s); }
  .slide--editorial .ed-hero__figure { order: 1; margin-bottom: 0; }
  /* Определение: термин над толкованием, вторая линейка убирается —
     две волосяные подряд на узком экране читаются как разрыв. */
  .slide--editorial .ed-def dt { grid-column: 1 / 13; }
  .slide--editorial .ed-def dd { grid-column: 1 / 13; border-top: 0; }
  /* Плита отдаёт фиксированную ширину: на планшете 620px — это уже полоса. */
  .slide--editorial .ed-figure--plate { max-width: 100%; }
  .slide--editorial .ed-diamond li { max-width: 100%; }
  /* Ключ RAFT в две колонки: в четыре пояснения ужимаются до двух слов в строке. */
  .slide--editorial .ed-raft { grid-template-columns: repeat(2, 1fr); }
  /* Схема разворачивается в столбец: линейки переезжают слева наверх. */
  .slide--editorial .ed-flow { grid-template-columns: 1fr; }
  .slide--editorial .ed-flow li {
    padding: var(--ed-space-s) 0 0;
    border-left: 0;
    border-top: 1px solid var(--ed-rule);
  }
  .slide--editorial .ed-flow li:first-child { padding-top: 0; border-top: 0; }
  /* Галерея в один столбец: три кадра по 250px читаются хуже одного крупного. */
  .slide--editorial .ed-gallery { grid-template-columns: 1fr; }

  /* Титул-спектр: полосы уходят под титул, а не вбок. */
  .slide--editorial .ed-hero--spectrum .ed-eyebrow,
  .slide--editorial .ed-hero--spectrum .ed-title,
  .slide--editorial .ed-hero--spectrum .ed-standfirst,
  .slide--editorial .ed-hero--spectrum .ed-hero-meta { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--spectrum .ed-spectrum {
    grid-column: 1 / 13;
    grid-row: auto;
    margin-top: var(--ed-space-m);
  }
  /* Шляпы: фотография над текстом, чередование сторон теряет смысл в одну колонку. */
  .slide--editorial .ed-hats__text,
  .slide--editorial .ed-hats > section:nth-child(even) .ed-hats__text { grid-column: 1 / 13; grid-row: 2; }
  .slide--editorial .ed-hats__figure,
  .slide--editorial .ed-hats > section:nth-child(even) .ed-hats__figure {
    grid-column: 1 / 13;
    grid-row: 1;
    margin-bottom: var(--ed-space-s);
  }
  /* Спектр-лента: шесть колонок по 130px нечитаемы, уходим в две. */
  .slide--editorial .ed-spectrum--row { grid-template-columns: repeat(2, 1fr); gap: var(--ed-space-s) var(--ed-gap); }

  /* Титул-атлас: указатель пластин уходит под титул. Наезд плиты на кадр
     снимается — на узком экране кадр кадрируется почти в квадрат, и
     перекрытие в 64px съедало бы половину его высоты. */
  .slide--editorial .ed-hero--atlas .ed-eyebrow,
  .slide--editorial .ed-hero--atlas .ed-title,
  .slide--editorial .ed-hero--atlas .ed-standfirst { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--atlas .ed-index {
    grid-column: 1 / 13;
    grid-row: auto;
    margin-top: var(--ed-space-m);
  }
  .slide--editorial .ed-hero--atlas .ed-hero__inner { margin-top: 0; }
  .slide--editorial .ed-hero__plate { aspect-ratio: 16 / 9; max-height: none; }

  /* Две пластины в разворот — в столбец: по 150px кадры перестают читаться. */
  .slide--editorial .ed-plates { grid-template-columns: 1fr; }
  /* Минимальные пары в одну колонку: в половине ширины ряд из трёх слов
     переносится, и сравнение, ради которого блок существует, распадается. */
  .slide--editorial .ed-pair { grid-template-columns: 1fr; }
  .slide--editorial .ed-plates .ed-plate:last-child { margin-top: 0; }
  /* Цепь условий разворачивается вниз: соединитель переезжает вбок и вниз. */
  .slide--editorial .ed-tract { grid-template-columns: 1fr; }
  .slide--editorial .ed-tract li:not(:last-child)::after {
    top: auto;
    bottom: calc(var(--ed-gap) * -1);
    right: auto;
    left: 0;
    width: 0;
    height: var(--ed-gap);
    border-top: 0;
    border-left: 2px dotted var(--accent);
  }
  /* Путь воздушной струи: пояснение уходит под название органа. */
  .slide--editorial .ed-organs li { grid-template-columns: 2.4rem 1fr; }
  .slide--editorial .ed-organs span { grid-column: 2; }

  /* Титул-статья: фотоколонка уходит под текст и перестаёт подныривать под
     шапку — в одной колонке обрез сверху читался бы браком печати, а не приёмом. */
  .slide--editorial .ed-hero--entry .ed-eyebrow,
  .slide--editorial .ed-hero--entry .ed-title,
  .slide--editorial .ed-hero--entry .ed-gram,
  .slide--editorial .ed-hero--entry .ed-senses,
  .slide--editorial .ed-hero--entry .ed-hero-meta { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--entry .ed-hero__column {
    grid-column: 1 / 13;
    grid-row: auto;
    margin: var(--ed-space-m) 0 0;
    max-width: 380px;
  }
  /* Словарная статья: заглавное слово над значениями. Вторая линейка не нужна —
     две волосяные подряд на узком экране читаются разрывом (правило .ed-def). */
  .slide--editorial .ed-entry__word,
  .slide--editorial .ed-entry__gram { grid-column: 1 / 13; }
  .slide--editorial .ed-entry__senses {
    grid-column: 1 / 13;
    grid-row: auto;
    margin-top: var(--ed-space-s);
  }
  /* Ось времени встаёт вертикально: линия переезжает сверху налево, станции
     вместе с ней. Горизонтальная ось на 400px дала бы по два слова в станции. */
  .slide--editorial .ed-shift {
    grid-auto-flow: row;
    gap: var(--ed-space-m);
    padding: 0 0 0 var(--ed-space-m);
    border-top: 0;
    border-left: 2px solid var(--accent);
  }
  .slide--editorial .ed-shift li::before {
    top: 6px;
    left: calc(var(--ed-space-m) * -1 - 5px);
  }
  /* Разрез: уступы вдвое мельче, иначе последний слой уходит за правый край. */
  .slide--editorial .ed-strata li:nth-child(2) { margin-left: var(--ed-space-xs); }
  .slide--editorial .ed-strata li:nth-child(3) { margin-left: calc(var(--ed-space-xs) * 2); }
  .slide--editorial .ed-strata li:nth-child(4) { margin-left: calc(var(--ed-space-xs) * 3); }
  .slide--editorial .ed-strata li:nth-child(5) { margin-left: calc(var(--ed-space-xs) * 4); }
  .slide--editorial .ed-strata li:nth-child(n + 6) { margin-left: calc(var(--ed-space-xs) * 5); }
  .slide--editorial .ed-strata li { grid-template-columns: 1fr; }

  /* Титул-диптих: кадры встают друг под друга, шов из вертикального становится
     горизонтальным. Наезд плиты снимается — в одну колонку она закрыла бы
     верхний кадр наполовину. */
  .slide--editorial .ed-hero__frame:first-of-type,
  .slide--editorial .ed-hero__frame:last-of-type { grid-column: 1 / 13; }
  .slide--editorial .ed-hero__frame:first-of-type { grid-row: 1; margin-bottom: var(--ed-space-s); }
  .slide--editorial .ed-hero__frame:last-of-type  { grid-row: 2; }
  .slide--editorial .ed-hero__frame:last-of-type::before {
    top: calc(var(--ed-space-s) / -2);
    bottom: auto;
    left: 0;
    right: 0;
    border-left: 0;
    border-top: 1px solid var(--ed-rule-strong);
  }
  .slide--editorial .ed-hero--diptych .ed-eyebrow {
    grid-column: 1 / 13;
    grid-row: 3;
    margin-top: var(--ed-space-m);
    padding-top: 0;
    background: none;
  }
  .slide--editorial .ed-hero--diptych .ed-title      { grid-column: 1 / 13; grid-row: 4; }
  .slide--editorial .ed-hero--diptych .ed-standfirst { grid-column: 1 / 13; grid-row: 5; }
  .slide--editorial .ed-hero--diptych .ed-hero-meta  { grid-row: 6; }

  /* Двойное чтение: кадр уходит наверх, толкования встают друг под друга.
     В половине ширины две колонки по ~180px рвут пояснение по два слова в
     строку, а сравнение, ради которого блок существует, распадается. */
  .slide--editorial .ed-idiom__figure {
    grid-column: 1 / 13;
    grid-row: 1;
    max-width: 320px;
    margin-bottom: var(--ed-space-s);
  }
  .slide--editorial .ed-idiom__phrase { grid-column: 1 / 13; grid-row: 2; }
  .slide--editorial .ed-idiom__read:first-of-type { grid-column: 1 / 13; grid-row: 3; margin-bottom: var(--ed-space-s); }
  .slide--editorial .ed-idiom__read:last-of-type {
    grid-column: 1 / 13;
    grid-row: 4;
    padding-left: 0;
    border-left: 0;
  }

  /* Реестр происхождения: выражение и кадр в строку, толкования под ними.
     Четыре колонки на 800px давали по 90px на столбец. */
  .slide--editorial .ed-relic h3            { grid-column: 1 / 8; }
  .slide--editorial .ed-relic figure        { grid-column: 8 / 13; grid-row: 1 / 3; }
  .slide--editorial .ed-relic__origin       { grid-column: 1 / 8; margin-top: var(--ed-space-xs); }
  .slide--editorial .ed-relic__sense        { grid-column: 1 / 13; margin-top: var(--ed-space-s); }

  /* Шкала слитности в столбец: три остановки по 240px обрывают примеры. */
  .slide--editorial .ed-degrees { grid-template-columns: 1fr; row-gap: var(--ed-space-m); }

  /* ── Глава 10 ─────────────────────────────────────────────────────────────
     Матрица способов разбирается на карточки строк. Три колонки на 800px
     давали формуле 270px, и она рвалась посреди стрелки; горизонтальный
     скролл здесь запрещён правилом scrollWidth === clientWidth. Название
     признака подставляется из data-label, поэтому в разобранном виде строка
     остаётся читаемой без шапки. */
  .slide--editorial .ed-ways,
  .slide--editorial .ed-ways tbody,
  .slide--editorial .ed-ways tr { display: block; }
  .slide--editorial .ed-ways thead { display: none; }
  .slide--editorial .ed-ways tr {
    padding: var(--ed-space-s) 0;
    border-bottom: 1px solid var(--ed-rule);
  }
  .slide--editorial .ed-ways tr:first-child { border-top: 2px solid var(--accent); }
  .slide--editorial .ed-ways td {
    display: block;
    width: auto;
    padding: 0 0 var(--ed-space-xs);
    border-bottom: 0;
  }
  .slide--editorial .ed-ways td:last-child { padding-bottom: 0; }
  .slide--editorial .ed-ways td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ed-ink-margin);
  }

  /* Дерево и кадры к нему — в одну колонку; каскад сдвигов теряет смысл,
     когда кадры и так идут друг под другом во всю ширину. */
  .slide--editorial .ed-tree__branches,
  .slide--editorial .ed-tree__frames { grid-column: 1 / 13; }
  .slide--editorial .ed-tree__frames {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: var(--ed-space-m);
    gap: var(--ed-gap);
  }
  .slide--editorial .ed-tree__frames figure:nth-child(2),
  .slide--editorial .ed-tree__frames figure:nth-child(3) { margin-left: 0; }

  /* Асимметричная пара: сдвиг вниз у мелкого кадра снимается — в столбце он и
     так идёт вторым, а отступ читался бы дырой. */
  .slide--editorial .ed-spread__major,
  .slide--editorial .ed-spread__minor { grid-column: 1 / 13; }
  .slide--editorial .ed-spread__minor {
    margin-top: var(--ed-space-m);
    max-width: 320px;
  }

  /* ── Глава 11 ── */
  /* Матрица титула с четырёх колонок на две: в четверти ширины «Имя
     существительное» встаёт в четыре строки и клетка перестаёт читаться
     клеткой. Блок заглавия занимает целый ряд. */
  .slide--editorial .ed-parts { grid-template-columns: repeat(2, 1fr); }
  .slide--editorial .ed-parts__title {
    grid-column: 1 / 3;
    grid-row: auto;
    padding-right: 0;
  }
  .slide--editorial .ed-parts .ed-hero-meta { grid-column: 1 / 3; }

  /* Поле метки формы ужимается: 10rem от 820px — это восьмая часть ширины
     под слово «Родительный», а колонкам форм ширины уже не остаётся. */
  .slide--editorial .ed-paradigm { --ed-par-tmpl: 7rem repeat(3, 1fr); }
  .slide--editorial .ed-paradigm--conj   { --ed-par-tmpl: 7rem repeat(2, 1fr); }
  .slide--editorial .ed-paradigm--govern { --ed-par-tmpl: 5rem 9rem 1fr; }

  /* ── Глава 12 ─────────────────────────────────────────────────────────────
     Титул в одну колонку. Порядок переворачивается, как в главе 03: сначала
     заглавие с разбором, фотография под ним. Вертикаль 9:16 в полную ширину
     заняла бы полтора экрана и увела бы разбор за сгиб — ради него титул и
     существует. */
  .slide--editorial .ed-hero--parse .ed-hero__text,
  .slide--editorial .ed-hero__pillar { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--parse .ed-hero__text { order: 0; }
  .slide--editorial .ed-hero__pillar {
    order: 1;
    max-width: 300px;
    margin-top: var(--ed-space-m);
  }

  /* Лента с четырёх кадров на два: по 200px на кадр — предмет ещё читается,
     по 100px уже нет. Асимметричная пара распадается в столбец: смысл пары
     в разнице размеров, а на узком экране оба кадра всё равно во всю ширину. */
  .slide--editorial .ed-band { grid-template-columns: repeat(2, 1fr); }
  .slide--editorial .ed-band--duo { grid-template-columns: 1fr; }
  .slide--editorial .ed-band--duo figure:last-child { max-width: 320px; }

  /* ── Глава 13 ─────────────────────────────────────────────────────────────
     Титул в одну колонку, каскад под текстом и с ограничением по ширине:
     на 820px поле 8–12 даёт около 300px, и вертикаль верхней строки
     схлопывается до 140px — предмет в кадре перестаёт опознаваться. */
  .slide--editorial .ed-hero--register .ed-hero__text,
  .slide--editorial .ed-hero__stack { grid-column: 1 / 13; }
  .slide--editorial .ed-hero__stack {
    max-width: 420px;
    margin-top: var(--ed-space-m);
  }

  /* Метка стиля встаёт над строкой. 11rem от 820px — это восьмая часть
     ширины под слово «Официально-деловой», а самой фразе места уже нет. */
  .slide--editorial .ed-register > div,
  .slide--editorial .ed-scale li { grid-template-columns: 1fr; }
  .slide--editorial .ed-register dt { margin-bottom: 4px; }
  .slide--editorial .ed-register--hero > div { grid-template-columns: 1fr; }
  .slide--editorial .ed-scale__gloss { grid-column: 1; }

  /* Правка в столбец: две колонки по 380px рвут предложение на пять строк
     каждое, и сравнение «было / стало» перестаёт читаться параллельно. */
  .slide--editorial .ed-edit { grid-template-columns: 1fr; }
  .slide--editorial .ed-body p.ed-edit__why { grid-column: 1; }

  /* Улики уходят под фрагмент: колонка 9–12 на 820px даёт 190px, и примета
     из шести слов занимает четыре строки. */
  .slide--editorial .ed-clue__text,
  .slide--editorial .ed-clue__list,
  .slide--editorial .ed-clue__verdict { grid-column: 1 / 13; }
  .slide--editorial .ed-clue__list { margin-top: var(--ed-space-s); }

  /* ── Глава 14 ─────────────────────────────────────────────────────────────
     Триптих вердиктов разворачивается в три строки, но НЕ в столбик: кадр
     уходит вправо, термин с глоссой остаются слева. Три кадра 16:9 в ряд на
     820px дали бы по 250px — тот же порог, на котором в главах 10 и 11
     переставал опознаваться предмет; три кадра столбиком во всю ширину
     давали титул в 1544px против 1380 у соседней главы 13 (замерено).
     Строка снимает обе беды разом: кадр остаётся 400px, титул — 1314px. */
  .slide--editorial .ed-hero--verdict .ed-hero__text { grid-column: 1 / 13; }
  .slide--editorial .ed-verdicts {
    grid-template-columns: 1fr;
    row-gap: var(--ed-space-m);
  }
  .slide--editorial .ed-verdicts > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ed-gap);
    align-content: start;
  }
  .slide--editorial .ed-verdicts figure {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    align-self: start;
  }

  /* Суд в столбец: две формы по шесть колонок от 820px дают по 380px, и
     заглавная форма из двух слов встаёт в три строки. Шов из вертикали
     становится горизонталью — тот же приём, что у диптиха главы 09. */
  .slide--editorial .ed-trial__case::before { content: none; }
  .slide--editorial .ed-trial__form[data-side="a"],
  .slide--editorial .ed-trial__form[data-side="b"] {
    grid-column: 1 / 13;
    text-align: left;
  }
  .slide--editorial .ed-trial__form[data-side="b"] {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ed-rule-strong);
  }
  .slide--editorial .ed-body p.ed-trial__ground {
    grid-column: 1 / 13;
    text-align: left;
    justify-self: start;
  }
  .slide--editorial .ed-trial__verdict { text-align: left; }

  /* Метка типа ошибки встаёт над примером: 9rem от 820px — это девятая часть
     ширины под слово «Расщеплённое сказуемое», а примеру места уже нет. */
  .slide--editorial .ed-slip { grid-column: 1 / 13; }
  .slide--editorial .ed-slip > div { grid-template-columns: 1fr; }
  .slide--editorial .ed-slip__type { padding-top: 0; margin-bottom: 4px; }

  /* Глоссарий в одну колонку — по образцу сносок выше. */
  .slide--editorial .ed-drift { columns: 1; column-rule: none; }

  /* ── Глава 15 ────────────────────────────────────────────────────────────── */
  /* Титул расслаивается: счёт и кадр встают парой, текст под ними. Держать
     три поля рядом ниже 860 нельзя — на колонку текста остаётся 380px при
     заглавии в 92px кегля. */
  .slide--editorial .ed-hero--tally .ed-tally__count { grid-column: 1 / 8; }
  .slide--editorial .ed-hero__card { grid-column: 8 / 13; align-self: end; }
  .slide--editorial .ed-hero--tally .ed-hero__text {
    grid-column: 1 / 13;
    margin-top: var(--ed-space-m);
  }

  /* Кольцо разворачивается в столбик. Тригонометрия отключается целиком:
     640px бокса ниже 860 не помещаются, а сжатие кольца свело бы подписи
     в 90px колонки. Круг при этом не теряется — его держит вертикальная
     линейка и замыкающая подпись у последнего узла. */
  .slide--editorial .ed-loop {
    width: auto;
    height: auto;
    margin: var(--ed-space-l) 0;
    padding-left: var(--ed-space-m);
    border-left: 1px solid var(--ed-rule-strong);
  }
  .slide--editorial .ed-loop::before { content: none; }
  .slide--editorial .ed-loop li {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    text-align: left;
    transform: none;
    padding-bottom: var(--ed-space-s);
  }
  .slide--editorial .ed-loop li:last-child { padding-bottom: 0; }
  .slide--editorial .ed-loop li::before {
    position: absolute;
    left: calc(var(--ed-space-m) * -1 - 17px);
    top: 0;
    transform: none;
  }

  /* Три кадра ряда неравной ширины: на планшете сохраняем ряд, но выравниваем
     доли — 4 : 3 : 5 от 774px даёт среднему кадру 190px. */
  .slide--editorial .ed-band--trio { grid-template-columns: repeat(3, 1fr); }

  .slide--editorial .ed-rubric > div { grid-template-columns: 1fr; }
  .slide--editorial .ed-rubric dd { margin-top: var(--ed-space-xs); }

  /* ── Глава 16 ── */
  /* Титул в один столбец. Сетка кружков идёт ПОД заглавие, а не над ним:
     это геометрический комментарий к теме, и перед заглавием он читался бы
     заставкой — то есть ровно тем приёмом, который закреплён за главой 12. */
  .slide--editorial .ed-hero--marks .ed-hero__text,
  .slide--editorial .ed-marks,
  .slide--editorial .ed-marks__tally { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--marks .ed-hero__text  { grid-row: 1; }
  .slide--editorial .ed-marks       { grid-row: 2; margin-top: var(--ed-space-m); padding-top: 0; }
  .slide--editorial .ed-marks__tally { grid-row: 3; }

  /* Реестр в одну колонку: 25 строк на две колонки от 774px дают теме
     раздела 250px, и «Современные процессы в языке» идёт в три строки. */
  .slide--editorial .ed-map { columns: 1; }

  /* Разбор задания в столбик: выноски в 4 колонки от 774px — это 180px
     на определение из двух строк, а сам разбор ужимается до 380px. */
  .slide--editorial .ed-anatomy { grid-template-columns: 1fr; }
  .slide--editorial .ed-anatomy__item,
  .slide--editorial .ed-anatomy__legend { grid-column: 1; }
  .slide--editorial .ed-anatomy__legend { margin-top: var(--ed-space-m); }

  /* Пара «как напечатано / как исправлено» в столбик: два столбца от 774px
     дают каждому 370px, а в них лежат цитаты вариантов ответа целиком. */
  .slide--editorial .ed-flaw__grid { grid-template-columns: 1fr; gap: var(--ed-space-s); }

  /* ── Глава 17 ── */
  /* Титул в один столбец: рейка идёт ПОД заглавие. Держать её справа нельзя —
     одиннадцать колонок от 774px дают ячейке 60px при кегле буквы 23px,
     и рейка перестаёт читаться алфавитом. */
  .slide--editorial .ed-hero--alphabet .ed-hero__text,
  .slide--editorial .ed-alphabet { grid-column: 1 / 13; }
  .slide--editorial .ed-hero--alphabet .ed-hero__text { grid-row: 1; }
  .slide--editorial .ed-hero--alphabet .ed-standfirst { max-width: var(--ed-measure); }
  .slide--editorial .ed-alphabet { grid-row: 2; margin-top: var(--ed-space-m); padding-top: 0; }

  /* Буква группы уходит из колонок 1–2 наверх и перестаёт быть липкой:
     при ширине полосы 774px она съедала бы шестую часть строки указателя,
     а sticky-элемент над узким списком закрывал бы его первые строки. */
  .slide--editorial .ed-glossary__letter,
  .slide--editorial .ed-glossary__list { grid-column: 1 / 13; }
  .slide--editorial .ed-glossary__letter {
    position: static;
    margin-bottom: var(--ed-space-xs);
    font-size: 40px;
  }
  .slide--editorial .ed-glossary__list { columns: 2; column-gap: var(--ed-space-m); }

  /* Реестр разделов в одну колонку: две от 774px дают названию главы 350px,
     а под ним идёт строка терминов, которая уходит в четыре строки. */
  .slide--editorial .ed-shelf { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .slide--editorial { --ed-body: 16px; --ed-measure: 100%; }
  .slide--editorial .ed-steps li { grid-template-columns: 2.4rem 1fr; }

  /* Цитата в одну колонку. Атрибуция сидела в поле 10–12 на всех ширинах, и на
     375px три колонки от 335 дают 72px: слово «формулировка» набирает 95px и
     выносит горизонтальный скролл на всю страницу. Дефект общий для блока,
     а не для одной главы — замер поймал его на всех тринадцати editorial-
     слайдах разом (3–15). Полоса 1/13 и волосяная линейка сверху вместо
     бокового поля, которого на телефоне всё равно нет. */
  .slide--editorial .ed-quote blockquote,
  .slide--editorial .ed-quote cite { grid-column: 1 / 13; }
  .slide--editorial .ed-quote cite { margin-top: var(--ed-space-s); }
  .slide--editorial .ed-hero { min-height: 380px; }
  /* Полюса ромба на ступень ниже, интерлиньяж плотнее: на 480px четвёртая
     строка и так переносится, растянутый набор превратил бы её в столбик. */
  .slide--editorial .ed-diamond li:first-child,
  .slide--editorial .ed-diamond li:last-child { font-size: var(--ed-h3); }
  .slide--editorial .ed-diamond li { line-height: 1.7; }
  .slide--editorial .ed-diamond--scheme li { line-height: 1.9; }
  /* Ключ RAFT в одну колонку: две по 200px рвут пояснения по слогам. */
  .slide--editorial .ed-raft { grid-template-columns: 1fr; }
  /* Обтекание отключается: на 480px рядом с врезкой остаётся ~15 знаков. */
  .slide--editorial .ed-figure--inset,
  .slide--editorial .ed-plate--inset {
    float: none;
    width: 100%;
    max-width: 260px;
    margin: 0 0 var(--ed-space-s);
  }
  /* Минимальные пары на ступень ниже: «дом — дым — дам» в 36px уходит в три
     строки, и сравнение, ради которого блок существует, перестаёт читаться. */
  .slide--editorial .ed-pair__words { font-size: var(--ed-h3); gap: var(--ed-space-xs); }
  /* Шапка пластины в столбец: номер и формат в одну строку не помещаются. */
  .slide--editorial .ed-plate { grid-template-columns: 1fr; }
  .slide--editorial .ed-plate::after { grid-column: 1; }
  /* Карточки-перевёртыши в одну колонку: при 190px минимума на 480px их и так
     одна, но сетка оставляет лишний зазор справа. */
  .slide--editorial .ed-flashcards,
  .slide--editorial .flashcards__grid { grid-template-columns: 1fr; }
  /* Круги отношений на ступень мельче: 64px + смещение 116px не помещаются
     в колонку 440px и дают горизонтальный скролл. */
  .slide--editorial .ed-relations__fig { height: 76px; }
  .slide--editorial .ed-relations__fig::before,
  .slide--editorial .ed-relations__fig::after { width: 54px; height: 54px; top: 10px; }
  .slide--editorial [data-rel="syn"] .ed-relations__fig::before { left: 28px; }
  .slide--editorial [data-rel="syn"] .ed-relations__fig::after  { left: 68px; }
  .slide--editorial [data-rel="ant"] .ed-relations__fig::after  { left: 96px; }
  .slide--editorial [data-rel="ant"] .ed-relations__fig { background-position: 54px 36px; background-size: 42px 1.5px; }
  .slide--editorial [data-rel="omo"] .ed-relations__fig::before { left: 46px; }
  .slide--editorial [data-rel="omo"] .ed-relations__fig::after  { left: 52px; }
  .slide--editorial [data-rel="par"] .ed-relations__fig::before { left: 22px; }
  .slide--editorial [data-rel="par"] .ed-relations__fig::after  { left: 76px; }
  /* Реестр в столбец целиком: кадр 5/12 на 440px схлопывается до 150px и
     перестаёт читаться предметом. */
  .slide--editorial .ed-relic h3,
  .slide--editorial .ed-relic figure { grid-column: 1 / 13; }
  .slide--editorial .ed-relic figure {
    grid-row: auto;
    max-width: 220px;
    margin: var(--ed-space-xs) 0 0;
  }
  .slide--editorial .ed-relic__origin { grid-column: 1 / 13; margin-top: var(--ed-space-s); }
  /* Колода в одну колонку: при 240px минимума на 480px карточка и так одна,
     но сетка оставляет лишний зазор справа. */
  .slide--editorial .ed-coinage { grid-template-columns: 1fr; }

  /* ── Глава 10 ─────────────────────────────────────────────────────────────
     Подписи разбора уходят в сокращения. Причина арифметическая: дисплейный
     кегль на 480 упирается в нижнюю границу clamp (44px), сегмент «о» даёт
     около 24px букв, а подпись «интерфикс» — около 58px. Сегмент расширяется
     до подписи, слово набирает лишние ~70px и начинает переноситься по
     морфемам чаще, чем нужно. Сокращения снимают это одной подстановкой. */
  .slide--editorial .ed-morph__part::after { content: attr(data-abbr); }

  /* Кадры дерева в столбец: три в ряд на 440px дают по 130px, и предмет в
     кадре перестаёт опознаваться. */
  .slide--editorial .ed-tree__frames {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    max-width: 280px;
  }
  /* Банк морфем в одну колонку: при 160px минимума на 440px помещаются две,
     и значение морфемы рвётся на три строки. */
  .slide--editorial .ed-bank ul { grid-template-columns: 1fr; }
  .slide--editorial .ed-spread__minor { max-width: 240px; }

  /* ── Глава 11 ── */
  .slide--editorial .ed-parts__abbr { font-size: 23px; }
  /* Парадигма остаётся четырёхколоночной: смысл блока в том, что формы
     сравниваются по строке. Ужимаем поле метки и кегль форм, а не сетку. */
  .slide--editorial .ed-paradigm { --ed-par-tmpl: 5.5rem repeat(3, 1fr); }
  .slide--editorial .ed-paradigm--conj   { --ed-par-tmpl: 5.5rem repeat(2, 1fr); }
  .slide--editorial .ed-paradigm--govern { --ed-par-tmpl: 4rem 7rem 1fr; }
  .slide--editorial .ed-paradigm__form,
  .slide--editorial .ed-paradigm__case { font-size: 14px; }
  .slide--editorial .ed-paradigm__lemma { font-size: 17px; }
  /* Ряд кадров в столбец: три квадрата на 440px дают по 130px — тот же порог,
     на котором в главе 10 перестали опознаваться кадры дерева. */
  .slide--editorial .ed-rack__row {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-inline: auto;
  }
  .slide--editorial .ed-cluster__field {
    gap: var(--ed-space-xs) var(--ed-space-s);
  }
  .slide--editorial .ed-cluster__field li { font-size: 17px; }

  /* ── Глава 12 ── */
  /* Поле римского номера ужимается: 2.4rem от 440px забирает ширину у самой
     перестановки, ради которой блок и стоит. */
  .slide--editorial .ed-order li { grid-template-columns: 1.8rem 1fr; }
  .slide--editorial .ed-order__line { font-size: 17px; }
  /* Дуга связи: пара из двух слов по 21px на 440px переносится, и дуга,
     растянутая на два уровня строк, перестаёт читаться дугой. */
  .slide--editorial .ed-arc__pair { font-size: 18px; gap: .8em; }
  /* Ярус придаточного и связь теряют сдвиг: clamp даёт на 480px минимальные
     24px, но вместе с круглыми скобками они съедают четверть строки. */
  .slide--editorial .ed-scheme__row[data-tier="sub"],
  .slide--editorial .ed-scheme__link { margin-left: 12px; }
  .slide--editorial .ed-scheme__clause { font-size: 18px; }

  /* ── Глава 13 ── */
  /* Художественная строка на ступень ниже: 30px дисплейной антиквой на 440px
     уводят пример в четыре строки, и разница регистров, ради которой блок
     существует, тонет в переносах. Разрядка официальной строки ужимается
     по той же причине — .05em на 440px добавляют фразе почти строку. */
  .slide--editorial .ed-register [data-tone="art"] dd   { font-size: 25px; }
  .slide--editorial .ed-register [data-tone="press"] dd { font-size: 21px; }
  .slide--editorial .ed-register [data-tone="doc"] dd   { letter-spacing: .03em; }
  .slide--editorial .ed-register--hero [data-tone="art"] dd { font-size: 21px; }
  /* Дорожка шкалы тоньше: 10px рядом с кеглем 17px читаются полосой, а не
     отметкой на оси. */
  .slide--editorial .ed-scale__rail { height: 8px; }
  .slide--editorial .ed-scale__name { font-size: 17px; }
  /* Фрагмент разбора на ступень ниже — курсивная антиква 21px на 440px
     даёт около 30 знаков в строке. */
  .slide--editorial .ed-clue__text { font-size: 18px; }

  /* ── Глава 14 ── */
  /* Вердикт снова столбиком: строка «текст | кадр», выигравшая на 860, на 440
     отдаёт кадру 140px — меньше того порога, на котором в главах 10 и 11
     предмет переставал опознаваться. Кадр возвращается под текст во всю
     ширину колонки. */
  .slide--editorial .ed-verdicts > div { grid-template-columns: 1fr; }
  .slide--editorial .ed-verdicts figure {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--ed-space-xs);
  }
  /* Формы суда на ступень ниже: «договоры» дисплейной антиквой в 27px на
     440px переносится по слогам, и пара, ради которой блок стоит, перестаёт
     читаться параллельно. Тот же порог у ударений и вердиктов титула. */
  .slide--editorial .ed-trial__form,
  .slide--editorial .ed-stress__yes,
  .slide--editorial .ed-verdict__term { font-size: var(--ed-h3); }
  /* Пример реестра к кеглю полосы: 19px антиквой на 440px дают около 32
     знаков в строке, и трёхсловная фраза уходит в две. */
  .slide--editorial .ed-slip__ex,
  .slide--editorial .ed-slip__fix { font-size: var(--ed-body); }

  /* ── Глава 15 ── */
  /* Титул в один столбец: счёт 168px кегля рядом с кадром на 335px давал бы
     каждому по 150px, и числительное перестало бы быть числительным. */
  .slide--editorial .ed-hero--tally .ed-tally__count,
  .slide--editorial .ed-hero__card { grid-column: 1 / 13; }
  .slide--editorial .ed-hero__card { margin-top: var(--ed-space-m); max-width: 260px; }
  .slide--editorial .ed-tally__meters { grid-template-columns: repeat(2, 1fr); }
  .slide--editorial .ed-tally__meters dt { font-size: 27px; }

  /* Ряд из трёх кадров в столбец: 4 : 3 : 5 от 335px дают среднему 78px —
     тот же порог, на котором перестают опознаваться кадры в главах 10 и 11. */
  .slide--editorial .ed-band--trio {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-inline: auto;
  }

  /* Колонка номера задания уже: 3.6rem от 335px — это девятая часть ширины
     под двузначное число, и формулировке остаётся 230px на два слова в строке. */
  .slide--editorial .ed-brief > div { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .slide--editorial .ed-brief > div::before { font-size: 23px; }

  /* Диапазон номеров отдельной строкой: inline-block в 4.8em оставлял бы
     названию блока 200px, и «Креативная методика преподавания» шла в три
     строки с висячим предлогом. */
  .slide--editorial .ed-roster__no { display: block; min-width: 0; margin-bottom: 4px; }

  .slide--editorial .ed-rubric__score { font-size: 34px; }

  /* ── Глава 16 ── */
  /* Кружки мельче: 22px × 4 плюс три зазора по 12px дают 124px, и на 335px
     полосы сетка занимала бы больше трети ширины под чистую геометрию. */
  .slide--editorial .ed-marks__row { grid-template-columns: repeat(4, 16px); gap: 9px; margin-bottom: 9px; }
  .slide--editorial .ed-marks i { width: 16px; height: 16px; }

  /* Счёт и подпись в столбик: 58px числа рядом с текстом на 335px оставляли
     подписи 180px, и «заданий из ста объявленных» шло в четыре строки. */
  .slide--editorial .ed-marks__tally { display: block; }
  .slide--editorial .ed-marks__tally span { margin-top: 8px; max-width: none; }

  /* Диапазон номеров под тему: 4.2rem от 335px — это восьмая часть строки,
     а теме раздела остаётся 190px на два слова. */
  .slide--editorial .ed-map > div { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .slide--editorial .ed-map__range { grid-column: 2; text-align: left; margin-top: 2px; }

  /* Полосы шкалы в столбик: 5fr 3fr 3fr от 335px дают крайним по 80px,
     и двузначный диапазон «8–10» перестаёт помещаться в строку. */
  .slide--editorial .ed-gauge__bands { grid-template-columns: 1fr; gap: var(--ed-space-s); }
  .slide--editorial .ed-gauge__bands > div { padding-top: var(--ed-space-xs); border-top: 1px solid var(--ed-rule); }
  .slide--editorial .ed-gauge__bands > div:first-child { border-top: 0; padding-top: 0; }

  /* ── Глава 17 ── */
  /* Рейка перестраивается 11 × 3 → 6 × 6: одиннадцать ячеек от 335px полосы
     дают 30px на букву кегля 23px, и алфавит слипается в ленту. Шесть ячеек
     держат 55px и остаются сеткой. Строй 6 × 6 при 33 буквах даёт три пустые
     ячейки в последнем ряду — они и стоят пустыми, дорисовывать нечего. */
  .slide--editorial .ed-alphabet__row { grid-template-columns: repeat(6, 1fr); }
  .slide--editorial .ed-alphabet__cell { height: 40px; font-size: 21px; }

  /* Указатель в одну колонку. Две от 335px дают термину 150px, и
     «Словообразовательное дерево» уходит в четыре строки. */
  .slide--editorial .ed-glossary__list { columns: 1; }
  .slide--editorial .ed-glossary__letter { font-size: 34px; }
  /* Номер слайда спускается на ступень вместе с остальным дисплейным набором —
     тот же массовый спуск, что у .ed-verdict__term и .ed-stress__yes. */
  .slide--editorial .ed-glossary__slide,
  .slide--editorial .ed-shelf__no { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide--editorial .ed-back,
  .slide--editorial .match-item,
  .slide--editorial .ed-parts__abbr,
  .slide--editorial .ed-brief > div,
  .slide--editorial .ed-roster > div,
  .slide--editorial .ed-flaw,
  .slide--editorial .ed-alphabet__cell,
  .slide--editorial .ed-glossary__term,
  .slide--editorial .ed-glossary__lead,
  .slide--editorial .ed-glossary__slide,
  .slide--editorial .ed-shelf > div,
  .slide--editorial .ed-shelf__go,
  .slide--editorial .mc-option { transition: none; }
  /* Сдвиг номера строки указателя — движение, а не смена цвета: в этом режиме
     снимается вместе с транзишеном, иначе он просто станет мгновенным. */
  .slide--editorial .ed-glossary__term:hover .ed-glossary__slide,
  .slide--editorial .ed-glossary__term:focus-visible .ed-glossary__slide { transform: none; }
  /* Появление при прокрутке гасится целиком: блоки сразу на месте. Наблюдатель
     в reveal.js при этом продолжает работать и вешать .is-revealed вхолостую —
     ветвления в JS не нужно, состояние покоя и состояние показа совпадают. */
  .slide--editorial.ed-ch--woad [data-reveal],
  .slide--editorial.ed-ch--damson [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Переворот карточки гасится в widgets.css, но там правило скоупится на
     .flashcard__inner без учёта editorial — дублируем, чтобы правка одного
     модуля не отменила поведение в другом. */
  .slide--editorial .flashcard__inner { transition: none; }
}