/* ============================================================
   Чтение: страница статьи, сноски, регламент-документ.
   Перенесено из style.css дословно (1.22, фундамент); порядок правил
   прежний. Подключается ключом PageCSS: статья, свод правил, запись
   хроники, источник, лицензия и «спасибо» (у них .article-body или
   .article-lead). Правит волна «чтение» (4.1a).

   1.22: колонтитул, лист «Содержание», три карточки «Дальше по теме»,
   свёрнутый на телефоне аппарат, текст 18 px и метки 44 px на ≤720 px.
   Макеты ReadingPhoneScroll / ReadingPhoneContents / ReadingPhoneEnd;
   цвета только токенами — тёмная тема приходит сама.
   ============================================================ */

/* ---- Страница статьи --------------------------------------- */

.article-lead { max-width: var(--measure); margin: 10px auto 0; text-align: center; }
.article-lead .rubric-line {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}
.article-lead .rubric-line::before,
.article-lead .rubric-line::after { content: ""; width: 42px; border-top: 1px solid var(--rule); }
.article-lead h1 { font-size: 3rem; margin: 16px 0 14px; }
.article-lead .dek { margin: 0 auto 14px; max-width: 34rem; }
.article-lead .credit-line { font-family: var(--grotesk); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--service); }

/* Обложка статьи — той же меры, что и текст: читатель видит колонку
   одной ширины сверху донизу. Селектор с figure.plate — иначе общее
   правило figure.plate{margin:0} оказывается специфичнее и сбивает
   центрирование. */
figure.plate.article-cover { margin: 30px auto; max-width: var(--measure); }

.article-body { max-width: var(--measure); margin: 0 auto; font-size: 1.06rem; }
.article-body > p { margin: 0 0 1.1em; }
.article-body h2 {
  font-size: 1.6rem;
  margin: 2em 0 0.6em;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}
.article-body h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li { margin: 0.4em 0; }
.article-body blockquote {
  margin: 1.8em 0;
  padding: 0;
  border: none;
  text-align: center;
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}
.article-body pre { background: var(--inset); border: 1px solid var(--rule); padding: 14px; overflow-x: auto; font-size: 0.88rem; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--rule); padding: 7px 10px; text-align: left; }
/* Иллюстрации внутри статьи идут вровень с текстом: по ширине колонки,
   по её левому краю. Так картинка читается как часть текста, а не как
   врезка поверх него. */
.article-body img, .article-body figure, .article-body video, .article-body iframe {
  width: 100%;
  max-width: 100%;
  margin: 2em 0 0.6em;
}
.article-body img { border: 1px solid var(--rule); background: var(--plate); }
.article-body figure img { margin: 0; }
.article-body figcaption { font-family: var(--grotesk); font-size: 11.5px; color: var(--service); margin-top: 8px; }

/* Полоса прогресса чтения и оглавление длинной статьи. Черта — только
   своя, #read-progress: класс .progress есть и у строки закрепа турнира. */
.progress#read-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--gold); z-index: 60; width: 0; }
/* На десктопе черту рисует тонкая полоса (.topbar-progress) — вторая
   черта у верхнего края была бы дублем. */
@media (min-width: 721px) {
  .progress#read-progress { display: none; }
}
.toc {
  position: sticky;
  top: 90px;
  font-family: var(--grotesk);
  font-size: 12.5px;
  line-height: 1.45;
}
.toc .toc-title { font-family: var(--grotesk); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--service); font-weight: 400; margin: 0 0 10px; }
.toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0 4px 10px; border-left: 1px solid var(--rule); }
.toc a:hover, .toc a.on { color: var(--gold); border-left-color: var(--gold); }
/* Вложенные разделы — с отступом, чтобы читалась структура. */
.toc a.toc-h3 { padding-left: 22px; font-size: 12px; }
/* Третий уровень: оглавление считает уровни от верхнего заголовка
   текста (article.js), и после понижения заголовков тела «h3» статьи
   приходит как h4. */
.toc a.toc-h4 { padding-left: 34px; font-size: 12px; }
.article-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 30px; align-items: start; }
.article-layout > .article-body { grid-column: 2; }
/* Колонка тянется на всю высоту текста — иначе липкому оглавлению не
   за что держаться, и оно уезжает вверх вместе со своей ячейкой. */
.article-layout > .toc-col { grid-column: 1; align-self: stretch; }

.apparatus { max-width: var(--measure); margin: 46px auto 0; }
.apparatus .block { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 22px; }
.apparatus .block:first-child { border-top: 1px solid var(--rule-strong); }
.apparatus dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 0.95rem; }
.apparatus dt { font-family: var(--display); }
.apparatus dd { margin: 0; color: var(--muted); }
.apparatus .sources { font-size: 0.93rem; color: var(--muted); }
.apparatus .sources p { margin: 0.4em 0; }

/* «Дальше по теме» — три карточки сразу после текста, до аппарата
   (1.22, U4). Карточка — одна ссылка: картинка, рубрика, название,
   время чтения. Без обложки — только текст. */
.next-reads { max-width: var(--measure); margin: 46px auto 0; border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.next-reads > h2.rubric { display: block; margin: 0 0 8px; }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-list > li { border-top: 1px solid var(--rule); margin: 0; }
.next-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; color: var(--ink); text-decoration: none; }
.next-thumb {
  flex: none;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--plate);
  border: 1px solid var(--rule);
}
.next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.next-rubric { font-family: var(--grotesk); font-size: 10.5px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.next-title { font-family: var(--display); font-size: 1.3rem; line-height: 1.22; }
.next-meta { font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.06em; color: var(--service); }
.next-card:hover .next-title { color: var(--gold); }
.next-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Аппарат, свёрнутый на телефоне (article.js ставит .app-folding только
   на ≤720 px). Кнопка строки есть только со скриптом; без класса она
   спрятана, и блок выглядит как раньше — рубрика и содержимое. */
.apparatus .app-toggle { display: none; }
.apparatus.app-folding [data-fold] { padding-top: 0; margin-top: 0; }
.apparatus.app-folding [data-fold] > .rubric { display: none; }
.apparatus.app-folding [data-fold]:not(.open) > .fold-body { display: none; }
.apparatus.app-folding [data-fold].open > .fold-body { padding-bottom: 14px; }
.apparatus.app-folding .app-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.app-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-name { font-family: var(--grotesk); font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.app-peek { font-family: var(--book); font-size: 13.5px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-fold].open .app-peek { display: none; }
.app-mark { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); }
.app-mark svg { display: block; }
[data-fold].open .app-mark svg { transform: rotate(180deg); }
.app-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Колонтитул (≤720 px и свод правил до 1080) ------------------- */
/* Ставит article.js. Выезжает сверху при прокрутке вверх и прячется при
   прокрутке вниз: visibility, а не display, — ради анимации; спрятанный
   он и так недоступен ни табуляции, ни диктору. Слой 40 — как тонкая
   полоса (шкала z-index в style.css); с открытым листом — над подложкой. */
.running-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.18s ease, visibility 0s linear 0.18s;
}
.running-head.on { transform: none; visibility: visible; transition: transform 0.18s ease; }
body.toc-opened .running-head { z-index: 70; }
.rh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.rh-part, .rh-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--grotesk); text-transform: uppercase; }
.rh-part { font-size: 10px; letter-spacing: 0.18em; color: var(--service); }
.rh-title { font-size: 12px; letter-spacing: 0.1em; color: var(--ink); }
.rh-toc, .tb-toc, .toc-open {
  flex: none;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.rh-toc svg, .tb-toc svg, .toc-open svg { display: block; flex: none; }
/* Лист открыт — кнопка залита чернилами и значит «закрыть». */
.rh-toc[aria-expanded="true"], .tb-toc[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.rh-top { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ink); cursor: pointer; }
.rh-top svg { display: block; }
.rh-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--gold); }
:is(.rh-toc, .tb-toc, .toc-open, .rh-top, .ts-close):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Кнопка «Содержание» под шапкой статьи — где нет оглавления сбоку. */
.toc-open-row { display: flex; justify-content: center; margin-top: 18px; }
.toc-open-row[hidden] { display: none; }
.toc-open { padding: 0 16px; font-size: 11.5px; }
.toc-open[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

/* Раздел и «Содержание» в тонкой полосе статьи на 721–1080 px: разделы
   сайта там не помещаются, оглавления сбоку нет. Узел ставит article.js
   в .topbar-row (layout.html). */
.tb-reading { display: none; }
body.toc-opened > .topbar { z-index: 70; background: var(--paper); }

/* ---- Лист «Содержание» -------------------------------------------- */
/* Диалог поверх текста под той полосой, из которой открыт (--sheet-top
   ставит article.js). Список прокручивается внутри, строки 44 px,
   текущий раздел — золотой линейкой и «вы здесь»; внизу закреплены
   прыжки в аппарат. Слой 70 по шкале; подложка — тот же слой, раньше в
   документе. */
.toc-scrim { position: fixed; inset: 0; z-index: 70; background: var(--scrim); }
.toc-sheet {
  --sheet-top: 0px;
  position: fixed;
  z-index: 70;
  top: var(--sheet-top);
  left: 0; right: 0;
  max-height: calc(100vh - var(--sheet-top) - 56px);
  max-height: calc(100dvh - var(--sheet-top) - 56px);
  display: flex;
  flex-direction: column;
  background: var(--inset);
  border-bottom: 2px solid var(--gold);
}
.toc-sheet[hidden], .toc-scrim[hidden] { display: none; }
.toc-sheet:focus { outline: none; }
.ts-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 4px 16px; }
.ts-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-kicker { font-family: var(--grotesk); font-size: 10.5px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--service); }
.ts-doc { font-family: var(--display); font-size: 17px; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-close { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ink); cursor: pointer; }
.ts-close svg { display: block; }
.ts-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px; }
.ts-list a { text-decoration: none; }
.ts-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ts-part {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0 4px;
  font-family: var(--grotesk);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0 6px 12px;
  border-top: 1px solid var(--rule);
  border-left: 2px solid transparent;
  color: var(--ink);
}
.ts-item.ts-sub { padding-left: 42px; }
.ts-no { flex: none; width: 18px; font-family: var(--grotesk); font-size: 12px; color: var(--service); }
.ts-name { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.35; }
.ts-item:hover .ts-name, .ts-part:hover { color: var(--gold); }
.ts-item.on { border-left-color: var(--gold); }
.ts-item.on .ts-name { color: var(--gold); }
.ts-here { flex: none; margin-left: auto; padding-right: 4px; font-family: var(--grotesk); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ts-jumps { flex: none; display: flex; border-top: 1px solid var(--rule-strong); }
.ts-jumps[hidden] { display: none; }
.ts-jumps a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-left: 1px solid var(--rule);
  font-family: var(--grotesk);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
}
.ts-jumps a:first-child { border-left: none; }
.ts-jumps a:hover { color: var(--gold); }
.ts-jumps a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .running-head, .running-head.on { transition: none; }
}

/* Печать с телефона: свёрнутый аппарат печатается раскрытым, строк-кнопок
   на бумаге нет (колонтитул и лист и так .no-print). */
@media print {
  .apparatus .app-toggle { display: none !important; }
  .apparatus.app-folding [data-fold] > .rubric,
  .apparatus.app-folding [data-fold] > .fold-body { display: block !important; }
}

/* Сноски: в тексте — надстрочная золотая цифра, в списке примечаний
   (он стоит в аппарате статьи) — сам текст со стрелкой возврата к
   месту чтения. Со скриптом цифра ещё и показывает текст примечания
   окошком рядом с собой (article.js); без скрипта она остаётся обычной
   ссылкой на список, поэтому ни список, ни стрелки возврата тут ничем
   не прячутся — они нужны и на печати, и с выключенным JS. */
.article-body sup { line-height: 0; }
/* Цифра крупнее прежних 11 px, а цель для пальца крупнее самой цифры:
   её растит ::after, который в поток не входит. Настоящие поля тут
   нельзя — вертикальные поля у надстрочного индекса разгоняют
   межстрочный интервал основного текста, а он набран для чтения; по
   той же причине у sup нулевая line-height. */
.article-body .footnote-ref {
  position: relative;
  font-family: var(--grotesk);
  font-size: 13.5px;
  color: var(--gold);
  text-decoration: none;
  padding: 0 2px;
}
.article-body .footnote-ref::after {
  content: "";
  position: absolute;
  /* ≈ 27 × 37 px — цель по WCAG 2.2 (24 × 24) с запасом, но не настолько
     велика, чтобы отбирать нажатия у соседних строк абзаца. */
  left: -9px; right: -9px; top: -8px; bottom: -13px;
}
.article-body .footnote-ref:hover { color: var(--ink); }
/* Открытая сноска: цифра вывернута в плашку — видно, чьё это окошко.
   Заливка, а не подчёркивание: черта под приподнятым индексом попадает
   в середину строки и читается как случайный дефис в слове. Поля у
   цифры в обоих состояниях одинаковые, иначе строка дёргалась бы в
   момент открытия. */
.article-body .footnote-ref.on { color: var(--paper); background: var(--gold); }
.article-body .footnote-ref:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Набор списка примечаний живёт без привязки к телу статьи: место
   списка — аппарат, рядом со словарём и источниками, и от переезда
   туда набор меняться не должен. Отбивка с линейкой — наоборот,
   только для случая «список остался в тексте»: в аппарате свою черту
   рисует .block, и вторая была бы лишней. */
.footnotes { font-size: 0.9rem; color: var(--muted); }
.article-body .footnotes { margin-top: 2.4em; padding-top: 14px; border-top: 1px solid var(--rule); }
.footnotes hr { display: none; } /* линейку рисуем сами */
.footnotes ol { padding-left: 1.4em; }
.footnotes li { margin: 0.5em 0; }
.footnotes li p { margin: 0; }
.footnotes li::marker { color: var(--gold); font-family: var(--grotesk); font-size: 0.85em; }
/* Стрелка возврата — такая же мелкая цель, как была цифра; поля по
   бокам её увеличивают, вертикальные в строке списка безопасны. */
.footnote-backref { color: var(--gold); text-decoration: none; margin-left: 4px; padding: 2px 7px; }

/* Полоса наверху не должна накрывать то, к чему ведёт ссылка: и сноску,
   и раздел из оглавления. С 1.22 меню не липнет, сверху бывает только
   тонкая полоса (48 px) или колонтитул (54 px): 96 → 64 px. */
.article-body :target,
.article-body h1[id], .article-body h2[id], .article-body h3[id], .article-body h4[id],
.footnotes li { scroll-margin-top: 64px; }

/* Окошко с текстом примечания. Ставит его article.js: position: fixed
   и координаты в пикселях экрана — так проще всего не пустить окошко
   за край, а на прокрутке скрипт переставляет его следом за цифрой.
   Вид — как у карточки термина: вставка, тонкая рамка, золотая
   линейка сверху. Ни тени, ни скругления. */
.footnote-pop {
  position: fixed;
  z-index: 55; /* выше липкого меню (40), ниже полосы чтения (60) */
  width: 320px;
  max-width: calc(100vw - 16px); /* на экране в 375 px остаются поля */
  max-height: 60vh;              /* длинное примечание прокручивается внутри */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  padding: 9px 14px 12px;
  font-family: var(--book);
  font-size: 0.86rem;
  line-height: 1.5;              /* свой: от абзаца окошко унаследовало бы 1.7 */
  color: var(--ink);
}
.footnote-pop:focus { outline: none; }
.footnote-pop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.footnote-pop p { margin: 0; }
.footnote-pop p + p { margin-top: 0.5em; }
.footnote-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.footnote-pop-no { font-family: var(--grotesk); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--service); }
.footnote-pop-close {
  flex: none;
  width: 32px; height: 32px;
  margin: -7px -9px -7px 0; /* цель для пальца больше самого крестика */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--grotesk);
  font-size: 19px;
  line-height: 1;
  color: var(--service);
}
.footnote-pop-close:hover { color: var(--ink); }

@media (min-width: 1081px) {
  .toc-open-row { display: none; }
  .toc-sheet, .toc-scrim { display: none !important; }
}

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout > .article-body { grid-column: 1; }
  .toc-col { display: none; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .tb-reading { display: flex; align-items: center; gap: 16px; min-width: 0; margin-left: auto; }
  .tb-title {
    min-width: 0;
    font-family: var(--grotesk);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tb-toc { height: 38px; }
  /* Лист на планшете — панелью справа, а не во всю ширину. */
  .toc-sheet { left: auto; width: min(32rem, 100%); border-left: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  .article-lead h1 { font-size: 2rem; }
  /* 18 px (1.22, решение владельца по группе 5; было 17 — как весь набор
     страницы на телефоне). Пиксели, а не rem: 1rem считался от корня
     (16 px), а не от body, и текст выходил мельче подписей вокруг. Класс
     общий — запись хроники, перевод источника и лицензия читаются тем же
     кеглем. */
  .article-body { font-size: 18px; line-height: 1.68; }
  .article-body img, .article-body figure, .article-body video, .article-body iframe {
    width: 100%; margin-left: 0; transform: none;
  }

  /* Метки под статьёй — цели для пальца 44 px (на касании это уже даёт
     style.css по pointer: coarse; здесь — и на узком окне с мышью). */
  .apparatus .tag { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }

  .next-reads { margin-top: 30px; }
  .next-card { gap: 14px; }
  .next-thumb { width: 96px; }
  .next-title { font-size: 18.5px; }
  .apparatus { margin-top: 26px; }
}

/* ============================================================
   Регламент: документ, а не статья (.wrap.doc)
   ============================================================ */

/* Шапка свода. У статьи она набрана по центру и открывает чтение; у
   документа выровнена влево и заперта между линейками — жирной сверху
   и волосяной снизу, как шапка бумажного свода. Мера та же, что у
   текста: колонка одной ширины сверху донизу. */
.doc-head {
  max-width: var(--measure);
  margin: 6px auto 0;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0 18px;
}
.doc-head h1 { font-size: 2.6rem; margin: 12px 0 10px; }
.doc-head .dek { margin: 0 0 16px; max-width: 34rem; }
.doc-head .rubric a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Выходные данные свода: кем издан, когда введён, какой редакции.
   Тот же приём, что у «фактов» тёмной полосы и колонок турнира —
   подпись гротеском в разрядку, значение основным набором. */
.doc-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  margin: 0;
  font-size: 0.95rem;
}
.doc-facts dt {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--service);
  padding-top: 4px;
}
.doc-facts dd { margin: 0; }

/* Разделы свода открываются линейкой во всю меру, а не золотой чертой
   слева, как подзаголовки статьи: в документе заголовок — это стык
   двух частей, и его работа — резать текст, а не украшать абзац. */
.doc .article-body h2 {
  font-size: 1.5rem;
  border-left: none;
  border-top: 1px solid var(--rule-strong);
  padding: 12px 0 0;
  margin: 2.2em 0 0.7em;
}
.doc .article-body h3 { font-size: 1.15rem; margin: 1.7em 0 0.4em; }

/* Пункты. Шаг между ними больше обычного — по своду ищут глазом один
   пункт, а не читают подряд; цифра пункта выделена золотом, как
   рубрика.

   Нумерацию счётчиками CSS (1 · 1.1 · 1.1.1) не делаем сознательно:
   счётчик не знает про <ol start="…">, который goldmark ставит списку,
   начатому не с единицы, — и разорванный абзацем перечень молча
   поехал бы с другого номера. В документе, по которому судят, это
   дороже любой красоты. */
.doc .article-body li { margin: 0.55em 0; }
.doc .article-body ol > li::marker {
  font-family: var(--grotesk);
  font-size: 0.85em;
  color: var(--gold);
}
.doc .article-body ul > li::marker { color: var(--gold); }

/* Таблица в своде (весовые категории, время боя) — шапка на подложке:
   в документе её ищут глазами чаще, чем в статье. */
.doc .article-body thead th { background: var(--inset); }

.doc .apparatus .sources { margin-top: 8px; }

/* Область применения — концовка документа. */
.doc-note {
  max-width: var(--measure);
  margin: 40px auto 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: 14px;
}
.doc-note .hint { margin: 8px 0 10px; }

/* Оглавление свода на узком экране. У статьи колонка оглавления ниже
   1080 px прячется (.toc-col{display:none}) — там текст читают подряд,
   и оглавление не потеря. В регламент приходят за конкретным пунктом,
   поэтому здесь колонка остаётся, но перестаёт быть липкой и встаёт
   врезкой над текстом: разметка одноколоночная, aside стоит первым и
   попадает наверх сам.

   Пункты идут в две колонки, пока хватает ширины (column-width), а
   подпись растянута на обе (column-span). Поля у ссылки — 40 px по
   высоте: это список, по которому будут попадать пальцем. */
@media (max-width: 1080px) {
  .doc .toc-col { display: block; }
  .doc .toc {
    position: static;
    max-width: var(--measure);
    margin: 0 auto 28px;
    padding: 14px 16px 8px;
    border: 1px solid var(--rule);
    background: var(--inset);
    column-width: 230px;
    column-gap: 26px;
  }
  .doc .toc .toc-title { column-span: all; }
  .doc .toc a { padding: 11px 0 11px 12px; break-inside: avoid; }
  .doc .toc a.toc-h3 { padding-left: 24px; }
  .doc .toc a.toc-h4 { padding-left: 36px; }
}

@media (max-width: 720px) {
  .doc-head { padding: 14px 0 16px; }
  .doc-head h1 { font-size: 1.9rem; }
  .doc .article-body h2 { font-size: 1.35rem; }
}