/* Castalia — страница статьи. Подключается ПОСЛЕ tokens.css и base.css.
   Уровень интенсивности тела — 2 (только типографика и воздух),
   формул, таблиц и графика — 1 (ноль декора). Движения в теле нет.
   Токены здесь не переопределяются: только используются. */

/* ─────────────────────────────────────────────────────────────────────────
   0. Каркас страницы
   ───────────────────────────────────────────────────────────────────── */

/* Страховка от бокового выезда. Она именно страховка: причины переполнения
   лечатся на месте (перенос длинных слов в колонке, собственный скролл у
   формул, таблиц и кода), потому что здесь текст молча срезается. */
html { overflow-x: hidden; }

/* Плавная прокрутка — только для навигации по оглавлению и только там,
   где пользователь этого не запретил. В теле статьи движения нет. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: var(--fs-meta);
  padding: var(--s2) var(--s4);
  text-decoration: none;
}
.skip-link:focus-visible { transform: none; }

/* ── полоса прогресса чтения ──────────────────────────────────────────────
   Тонкая, золотая, читается прямо из позиции скролла: ни transition,
   ни сглаживания — поэтому нечему дёргаться. */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--rule);
  z-index: var(--z-nav);
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── колонтитул издания ───────────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s5);
}
.masthead__logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-decoration: none;
}
/* --mute на бумаге даёт 3.8:1 — для служебного микротекста берём --slate (5.9:1) */
.masthead__issue { margin-inline-end: auto; color: var(--slate); }
.masthead__back { text-decoration: none; color: var(--slate); }
.masthead__back:hover { color: var(--vermilion); }

/* ─────────────────────────────────────────────────────────────────────────
   1. Мера строки
   ───────────────────────────────────────────────────────────────────────
   --measure (42rem) — потолок, заданный токеном. Внутри статьи колонка
   дополнительно ограничена в ch: это единственная единица, которая
   подстраивается под метрику реально загруженного шрифта и удерживает
   строку в 62–70 знаков на всей подстановочной цепочке --font-body.
   Токен не переопределяется — он остаётся верхней границей.            */

.article .measure { max-width: min(var(--measure), 51ch); }

/* ─────────────────────────────────────────────────────────────────────────
   2. Шапка статьи
   ───────────────────────────────────────────────────────────────────── */

/* Ширина взята так, чтобы содержимое шапки встало ровно над колонкой
   чтения: те же 51ch плюс те же боковые поля, что у .article__body. */
.article__head {
  max-width: calc(min(var(--measure), 51ch) + var(--s5) * 2);
  margin-inline: auto;
  padding: var(--s8) var(--s5) var(--s7);
}

.article__title { margin-block: var(--s4) var(--s5); }

.article__dek {
  font-size: clamp(var(--fs-lede), 2.2vw, 1.5rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--slate);
  text-wrap: pretty;
  margin-bottom: var(--s6);
}

/* Пока документа нет, подписи нет тоже: display: flex ниже перебил бы
   [hidden], и на странице отказа оставалось бы одинокое «By». */
.article__byline[hidden] { display: none; }

.article__byline {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
}
.article__author { margin-bottom: 0; }
.article__author-name { font-variant-caps: small-caps; letter-spacing: .04em; }
.article__facts { color: var(--slate); display: flex; flex-wrap: wrap; gap: var(--s2); }
.article__accession { flex-basis: 100%; color: var(--slate); }

/* ── место под сцену обложки ─────────────────────────────────────────────
   Сцена сюда монтируется отдельно; здесь только зарезервированный кадр
   в пропорции холста из контракта ассетов (1024 × 1440). */
.article__plate { margin: var(--s7) 0 0; }
.cover-mount {
  width: min(100%, calc(var(--s11) * 2));
  aspect-ratio: 1024 / 1440;
  margin-inline: auto;
  background: var(--ink);
}
.article__plate figcaption {
  width: min(100%, calc(var(--s11) * 2));
  margin-inline: auto;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  color: var(--slate);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Оглавление
   ───────────────────────────────────────────────────────────────────────
   Ниже 78rem рельсу заменяет раскрываемое Contents внутри .reader. Уровень 3 — тонкие
   линейки, микротекст, золотая метка. */

.toc { display: none; }

@media (min-width: 78rem) {
  /* Оглавления может не быть вовсе — тогда его прячет разметка, а не стиль.
     Без этой строки display: block из правила ниже перебил бы [hidden]. */
  .toc[hidden] { display: none; }

  .toc {
    display: block;
    position: fixed;
    top: 50%;
    /* прижато к левому полю колонки чтения, а не к краю окна */
    left: calc(50% - var(--measure) / 2 - var(--s5) - var(--s11));
    transform: translateY(-50%);
    width: var(--s11);
    max-height: 76vh;
    overflow-y: auto;
    z-index: var(--z-content);
  }
  .toc__title {
    color: var(--slate);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s3);
  }
  .toc__list { list-style: none; padding-left: 0; margin-bottom: 0; }
  .toc__list li { margin-bottom: var(--s3); }

  /* Подраздел (h3) отбивается сдвигом, а не вторым уровнем списка: рельса
     узкая, и вложенный <ol> съел бы у строки треть ширины. */
  .toc__item--sub { padding-left: var(--s3); }
  .toc__item--sub .toc__link { font-size: var(--fs-meta); }

  .toc__link {
    display: block;
    font-family: var(--font-meta);
    font-size: var(--fs-small);
    line-height: 1.32;
    color: var(--slate);
    text-decoration: none;
    padding-left: var(--s4);
    border-left: 1px solid transparent;
  }
  .toc__link:hover { color: var(--vermilion); }
  .toc__link.is-current {
    color: var(--text);
    border-left-color: var(--gold);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Тело статьи
   ───────────────────────────────────────────────────────────────────────
   Полная ширина и position: relative — это опорный блок для боковых
   сносок из base.css, которые считают своё поле от 50% этого блока. */

.article__body {
  position: relative;
  padding-inline: var(--s5);
  padding-bottom: var(--s8);
}

/* Колонка чтения. Тело приезжает плоской чередой блоков — разделов-обёрток
   в данных нет и быть не может, — поэтому меру держит один контейнер. */
.reader {
  max-width: min(var(--measure), 51ch);
  margin-inline: auto;
  /* Длинное неразрывное слово (адрес, идентификатор, длинный терм) уезжало за
     край, а страховка html{overflow-x:hidden} срезала его молча: часть текста
     исчезала без следов. Перенос внутри слова возвращает её в колонку;
     дефисы при lang="en" достаются бесплатно и делают перенос осмысленным. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.reader.reader .lede::first-line { font-variant-caps: small-caps; letter-spacing: .015em; }

/* Заголовок раздела с тонкой линейкой над ним. Якорь ему даёт рендерер,
   поэтому отступ под фиксированной шапкой живёт на самом заголовке. */
.reader.reader > h2 {
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--s7);
}
.reader.reader > h2:first-child { margin-top: var(--s7); }
.reader.reader > h3 { scroll-margin-top: var(--s7); }

/* ── боковые сноски ──────────────────────────────────────────────────────
   Номер и отсылку ставит рендерер узлами (.sidenote__no и .sn-ref): в данных
   у сноски одно поле text, и вставить <sup> в абзац неоткуда. Счётчиков CSS
   здесь поэтому нет — иначе номер печатался бы дважды. */

.reader.reader .sn-ref {
  font-family: var(--font-meta);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text);        /* золото на бумаге даёт 1.95:1 — для знака в тексте мало */
  vertical-align: super;
  line-height: 0;
  padding-left: .12em;
  text-decoration: none;
}
.reader.reader .sn-ref:hover { color: var(--vermilion); }

.reader.reader .sidenote {
  display: block;
  border-left: 1px solid var(--gold);
  padding-left: var(--s4);
  color: var(--slate);          /* --mute не добирает 4.5:1 на бумаге */
  text-wrap: pretty;
}
.reader.reader .sidenote__no {
  font-family: var(--font-meta);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text);
  vertical-align: super;
  line-height: 0;
  padding-right: .4em;
}
.reader.reader .sidenote math { color: var(--slate); }
.reader.reader .sidenote:target { background: var(--paper-2); }

/* ─────────────────────────────────────────────────────────────────────────
   5. Математика — уровень 1
   ───────────────────────────────────────────────────────────────────────
   Нативный MathML, без единой внешней библиотеки. Родовое семейство
   `math` в конце цепочки: если Libertinus Math не установлен, подхватится
   математический шрифт системы с таблицей MATH, а не безликий serif —
   иначе разваливаются интегралы, суммы и растяжимые скобки. */

.reader.reader math {
  font-family: var(--font-math), math;
  font-style: normal;
  color: inherit;
}
.reader.reader math mtext { font-family: var(--font-body); }

/* Выключенная формула: тело по центру, номер прижат вправо, ширина
   номера зарезервирована — широкая формула не наезжает на него, а
   скроллится внутри своего контейнера.
   Раскладка снята с того, что строит blocks.js: .eq > .eq__body >
   (.eq__math, .eq__no). Номер лежит ВНУТРИ тела, поэтому колонки заводит
   .eq__body, а не .eq — иначе номер уезжает в строку следом за формулой. */
.reader.reader .eq {
  margin-block: var(--s6);
  scroll-margin-top: var(--s7);
}
.reader.reader .eq__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s7);
  align-items: center;
  column-gap: var(--s4);
}
.reader.reader .eq__math {
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  justify-content: safe center;      /* при переполнении не срезает левый край */
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--s2);
}
.reader.reader .eq__math math { margin: 0; flex: none; max-width: none; }
/* Прокручивается только контейнер .eq__math: overflow на самом <math> включал
   вертикальную полосу у высоких дробей и вторую горизонтальную у широких. */

/* Выключенной формуле колонка чтения тесна: она шире набора ровно
   настолько, чтобы номер ушёл на поле, а не отъедал место у математики. */
@media (min-width: 48rem) {
  .reader.reader .eq { margin-inline: calc(var(--s6) * -1); }
}

/* Номер формулы — сам якорь: `#eq-5` рендерер вешает на него, а не на
   обёртку, поэтому и отступ под шапкой считается по нему. */
.reader.reader .eq__no {
  font-family: var(--font-meta);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  text-align: right;
  scroll-margin-top: var(--s7);
}

/* Подсветка цели ложится на всю формулу, хотя :target — на её номере. */
.eq:target,
.reader.reader .eq:target { background: var(--paper-2); }

.reader.reader a.eqref {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Формула и прилипший к ней знак препинания — один неразрывный кусок строки.
   Word joiner (U+2060) после </math> в Chromium не держит, и запятая после
   встроенной формулы уезжала на следующую строку одна. */
.reader.reader .nobr { white-space: nowrap; }

/* Запасной вид формулы: tex.js не загрузился, и рендерер честно показал
   исходник. Пусть он выглядит исходником, а не сломанным набором. */
.reader.reader .tex {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--paper-2);
  padding: 0 .24em;
}
.reader.reader .tex--display {
  display: block;
  width: fit-content;
  margin: var(--s6) auto;
  padding: var(--s3) var(--s4);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. Аппарат: теоремы, леммы, определения, доказательства
   ───────────────────────────────────────────────────────────────────── */

.reader.reader .claim > *:last-child { margin-bottom: 0; }
.reader.reader .claim .eq { margin-block: var(--s5); }
.reader.reader .claim ol, .reader.reader .claim ul { margin-bottom: 1.4em; }

/* Доказательство идёт следом за утверждением: своя верхняя линейка ему
   не нужна, иначе получается двойное правило в четыре миллиметра. */
.reader.reader .claim + .claim--proof { margin-top: var(--s5); border-top: 0; padding-top: 0; }

/* Киноварь допустима только здесь: в блоке доказательства золота нет,
   линейки у него нейтральные, конкуренции акцентов не возникает. */
.reader.reader .claim__qed {
  color: var(--vermilion);
  padding-left: var(--s2);
  font-size: var(--fs-small);
  vertical-align: .12em;
}

/* ─────────────────────────────────────────────────────────────────────────
   6a. Врезка — уровень 2
   ───────────────────────────────────────────────────────────────────────
   Тот же вид, что в предпросмотре студии (studio.css): врезка не должна
   выглядеть в редакторе иначе, чем у читателя. */

.reader.reader .inset {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  padding: var(--s5);
  margin-block: var(--s6);
}
.reader.reader .inset .meta { display: block; color: var(--slate); margin-bottom: var(--s2); }
.reader.reader .inset p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   7. Иллюстрации, таблицы — уровень 1
   ───────────────────────────────────────────────────────────────────── */

.reader.reader .figure figcaption { color: var(--slate); }
.reader.reader .figure img { max-width: 100%; height: auto; margin-inline: auto; }

/* ── виджет ──────────────────────────────────────────────────────────────
   Точка монтирования. Если вид виджета странице неизвестен, рендерер
   оставляет в ней одну служебную строку — она и должна выглядеть местом
   под будущий виджет, а не потерянным абзацем. */
.reader.reader .widget { margin-block: var(--s7); }
.reader.reader .widget__mount > .micro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  margin: 0;
  padding: var(--s4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--slate);
}
.reader.reader .widget__mount table { margin-block: 0; }

/* ── код ─────────────────────────────────────────────────────────────────
   Тёмная плашка из base.css плюс метка языка: без неё листинг на полосе
   ничем не объявлен, а язык уже лежит в данных блока. */
.reader.reader pre.code { margin-block: var(--s6); }
.reader.reader pre.code[data-lang]::before {
  content: attr(data-lang);
  display: block;
  font-family: var(--font-meta);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: inherit;
  opacity: .62;
  margin-bottom: var(--s3);
}

.reader.reader .scroll-x { overscroll-behavior-x: contain; }
.reader.reader .scroll-x + p, .reader.reader .figure + p { margin-top: var(--s5); }

.reader.reader table { margin-block: var(--s6); }
.reader.reader .scroll-x table { min-width: 28rem; }        /* узкая колонка — таблица скроллится, а не давится */
.reader.reader table caption { caption-side: top; }
.reader.reader .table-number { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.reader.reader th { overflow-wrap: normal; hyphens: none; }

/* ─────────────────────────────────────────────────────────────────────────
   8. Разделители
   ───────────────────────────────────────────────────────────────────────
   Прорисовка по скроллу — единственное разрешённое движение на странице
   (STYLE.md §6). Длину пути ставит скрипт, переход живёт в base.css. */

.reader.reader > .divider {
  max-width: min(var(--measure), 51ch);
  margin-inline: auto;
  height: 2.5rem;
  clear: right;                /* линейка не должна начинаться рядом со сноской */
}

/* ─────────────────────────────────────────────────────────────────────────
   8a. Состояние страницы
   ───────────────────────────────────────────────────────────────────────
   Загрузка, «нет такой статьи», отказ сети и ненабранный текст занимают
   место текста и выглядят как часть издания, а не как ошибка браузера. */

.article__state {
  border-top: 1px solid var(--gold);
  padding-top: var(--s4);
  margin-block: var(--s7) var(--s9);
}
.article__state-text {
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--slate);
  text-wrap: pretty;
  margin-bottom: var(--s4);
}
.article__state-link { color: var(--slate); margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   9. Связанные статьи
   ───────────────────────────────────────────────────────────────────── */

.article__foot {
  border-top: 1px solid var(--gold);
  padding: var(--s7) var(--s5) var(--s9);
}
.related__kicker { margin-bottom: var(--s2); }
.related__title { margin-top: 0; margin-bottom: var(--s6); }

.related__list { list-style: none; padding-left: 0; margin-bottom: 0; }
.related__item { margin-bottom: 0; border-top: 1px solid var(--rule); }
.related__item:last-child { border-bottom: 1px solid var(--rule); }

.related__link {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s5);
  text-decoration: none;
}
/* В карточке уже есть золотая рубрика, поэтому киноварь наведения снимаем:
   два акцента в одном блоке конкурируют. Отклик даёт золотая подчёркивание. */
.related__link:hover { color: var(--text); }
.related__link:hover .related__name {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.related__discipline { font-size: var(--fs-meta); }
.related__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
}
.related__dek { font-style: italic; color: var(--slate); }
.related__meta { color: var(--slate); font-variant-numeric: tabular-nums; }
.related__fallback { color: var(--slate); }

/* ─────────────────────────────────────────────────────────────────────────
   10. Подвал издания
   ───────────────────────────────────────────────────────────────────── */

.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  padding: var(--s7) var(--s5);
}
.site-foot .micro { color: var(--paper); }   /* --mute на туши не даёт 4.5:1 */

/* ─────────────────────────────────────────────────────────────────────────
   11. Узкие экраны
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .article__head { padding-top: var(--s7); }
  /* Номер остаётся рядом, широкая математика прокручивается отдельно. */
  .reader.reader .eq__body { grid-template-columns: minmax(0, 1fr) 2.5em; column-gap: var(--s2); }
  .reader.reader .eq__no { text-align: right; }
}

/* ─────────────────────────────────────────────────────────────────────────
   12. Движение
   ───────────────────────────────────────────────────────────────────────
   Базовый глушитель в base.css уже снимает переходы; здесь добиваем
   собственное: прорисовка разделителей становится мгновенной. */

@media (prefers-reduced-motion: reduce) {
  .divider path { stroke-dashoffset: 0; }
  .progress__bar { will-change: auto; }
}

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

@media print {
  html { overflow-x: visible; }
  body { background: #fff; color: #000; font-size: 11pt; }

  .progress, .skip-link, .toc, .article__plate, .masthead__back,
  .article__foot, .divider { display: none !important; }

  .masthead { border-bottom: 1px solid #999; }
  .masthead__inner, .site-foot__inner { padding-inline: 0; }

  .site-foot, .site-foot .micro { background: #fff !important; color: #000 !important; }
  .site-foot { border-top: 1px solid #999; }

  /* Мера строки на листе своя: ограничение в ch считает экранный шрифт, а
     полоса A4 при 11pt без потолка даёт около девяноста знаков в строке. */
  .article__head, .article__body, .article .measure { max-width: none; }
  .article__head, .article__body { padding-inline: 0; }
  .reader { max-width: 34em; margin-inline: 0; }

  /* Сноска на бумаге стоит в потоке: правого поля под неё нет. */
  .reader.reader .sidenote {
    position: static; float: none; clear: none; width: auto;
    margin-inline-end: 0; margin-block: 1em;
    border-left: 2px solid #999; color: #000;
  }

  a { color: inherit; text-decoration: none; }
  /* Адрес ссылки на бумаге не кликается — печатаем его рядом. */
  .related__link[href]::after { content: ""; }

  h2, h3 { break-after: avoid; }
  .eq, .claim, .figure, .inset, .widget, pre.code, table, .sidenote { break-inside: avoid; }
  .reader.reader .eq__body, .reader.reader .eq__math { overflow: visible; }
  .reader.reader pre.code { background: #fff; color: #000; border: 1px solid #999; }

  @page { margin: 18mm 16mm; }
}

/* Reader contract: its own type size and measure, independent of Studio body. */
.reader-shell { container: reader-shell / inline-size; }
.reader.reader {
  --measure: 51ch;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text);
  max-width: 51ch;
  min-width: 0;
  margin-inline: auto;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.reader.reader .eq { padding: 0; font-size: 1em; }
.reader.reader .eq__body { justify-content: normal; }
.reader.reader .widget__mount { display: block; min-block-size: 0; border: 0; background: none; }
.reader.reader .widget__mount .scroll-x { max-width: 100%; overflow-x: auto; }
.reader.reader .sidenote {
  position: static; float: none; clear: none; inset: auto;
  inline-size: auto; width: auto; margin: var(--s5) 0;
  font-size: var(--fs-small); line-height: 1.5;
}
.reader.reader .sidenote__no { margin-inline-end: 0; }
.reader.reader .sn-ref { margin-inline-start: 0; }
.reader.reader .sn-back { font-style: normal; white-space: nowrap; }
.reader.reader .figure__credit { display: block; margin-top: var(--s2); }
.reader.reader .reader-list { padding-inline-start: var(--s5); }
.reader.reader .reader-list li { margin-block: var(--s2); }
.reader.reader .reader-quote { margin: var(--s6) 0; padding-inline-start: var(--s5); border-inline-start: 2px solid var(--gold); }
.reader.reader .reader-quote cite { font-size: var(--fs-small); }
.reader.reader .references { margin-top: var(--s7); }
.reader.reader .references li { margin-block: var(--s4); scroll-margin-top: var(--s7); }
.reader.reader .formula-problem, .reader.reader .reference-problem { color: var(--vermilion); font-family: var(--font-meta); font-size: var(--fs-small); }
.reader.reader .reader-contents { margin-bottom: var(--s6); border-block: 1px solid var(--rule); padding-block: var(--s3); }
.reader-contents summary { cursor: pointer; padding-block: var(--s2); font-family: var(--font-meta); }
.reader-toc .toc__list { list-style: none; padding: 0; margin: var(--s3) 0; }
.reader-toc .toc__link { display: block; padding-block: var(--s2); color: var(--slate); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; }
.reader-toc .toc__item--sub { padding-inline-start: var(--s4); }
.reader-toc .toc__link:hover { color: var(--vermilion); }
.reader.reader h2, .reader.reader h3 { scroll-margin-top: var(--s7); }
.article__read { display: inline-block; margin-top: var(--s4); }
.article__read[hidden] { display: none; }
.related__reason { margin-block: 0 var(--s5); color: var(--slate); }
@container reader-shell (min-width: 76rem) {
  .reader.reader .sidenote { float: right; clear: right; inline-size: 14rem; width: 14rem; margin-inline-end: calc((14rem + var(--s5)) * -1); margin-block: -.4em var(--s5); }
}
@media (min-width: 78rem) {
  .article__body .reader-contents { display: none; }
}
@media (max-width: 77.99rem) {
  .article__head { padding-block: var(--s5); }
  .article__title { font-size: clamp(2rem, 6vw, 3rem); margin-block: var(--s3); }
  .article__dek { margin-bottom: var(--s4); }
  .article__plate { margin-top: var(--s5); }
  .article__plate .cover-mount { width: min(100%, 13rem); max-height: 18rem; }
  .article__plate figcaption { width: min(100%, 20rem); }
}
@media print {
  .reader.reader { font-size: 11pt; max-width: 34em; margin-inline: 0; }
  .reader.reader .reader-contents, .article__read, .reader .sn-back { display: none !important; }
  .reader.reader .sidenote { float: none; width: auto; inline-size: auto; margin: 1em 0; color: #000; }
  .reader.reader .eq { margin-inline: 0; }
  .reader.reader .eq__body { display: grid; grid-template-columns: minmax(0, 1fr) 3em; }
  .reader.reader .scroll-x { overflow: visible; }
  .reader.reader table { min-width: 0; width: 100%; font-size: 9pt; }
  .reader.reader th, .reader.reader td { overflow-wrap: anywhere; padding: var(--s2); }
  .reader.reader .references li { break-inside: avoid; }
  .reader.reader .references a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; overflow-wrap: anywhere; }
}