/* ============================================================
   Le Sentiment du Fer — визуальная система из дизайн-дока.
   Ретро здесь — приём вёрстки, а не текстура: линейки, разрядка
   в прописных, буквица, отточие, подпись под гравюрой. Никаких
   теней, скруглений и градиентов.

   Шкала z-index (1.22) — одна на сайт, новые слои встают в неё:
     40  .topbar (тонкая полоса после прокрутки) и колонтитул статьи
     45  открытое меню «Разделы» и его подложка
     50  карточка термина на десктопе
     55  окошко сноски
     60  черта прочитанного
     70  лист «Содержание», панель термина, «Перейти к тексту»
     100 лайтбокс
   ============================================================ */

/* ---- Токены и тема (1.22) -----------------------------------
   Тема — «Журнал ночью» (макет DarkPalette): не инверсия, а те же роли
   в тёмной тёплой бумаге. Решает сервер: <html data-theme="light|dark|
   auto"> по куке theme (internal/handlers/theme.go), редакция и печать
   всегда светлые. Здесь каждый токен описан ОДИН раз:
     · вне @supports — светлые значения: браузер без light-dark()
       (Safari до 17.5) получает светлую тему целиком, и это принято;
     · внутри @supports — light-dark(светлое, тёмное). Функция сама
       смотрит на color-scheme элемента, а color-scheme ставит
       data-theme; при auto (light dark) она слушает настройку системы,
       отдельный @media для auto не нужен.
   Тексты на витрине (--vitrine) одинаковы в обеих темах: витрина тёмная
   всегда. Контраст пар проверяет internal/render/contrast_test.go —
   меняете цвет, прогоните его. */
:root {
  --paper:    #e7e6e2; /* фон всех страниц */
  --inset:    #f5f4f1; /* панели, врезки, рамки иллюстраций */
  --vitrine:  #111214; /* тёмная сцена под предмет, приглашение в зал */
  --ink:      #1b1a18; /* основной набор */
  /* Служебные тона держатся выше порога WCAG AA на бумаге: 5.5:1 у
     --muted и 4.7:1 у --service. Прежние #6c6a64 и #8f8d86 читались
     4.33:1 и 2.66:1 — на мобильном в пересвет уходили в никуда. */
  --muted:    #5c5a55; /* аннотации, лиды, вторичный текст */
  --service:  #67655f; /* подписи, даты, время чтения, кредиты */
  --service-lit: #a8a59c; /* то же на тёмном: там светлее — значит виднее */
  --gold:     #7c5a2e; /* рубрики, ссылки, буквица */
  --gold-lit: #a37c3f; /* то же на тёмном — только текстом, не заливкой */
  --gold-btn: #8c6428; /* заливка единственной кнопки: белое по нему 5.3:1 — в обеих темах */
  --steel:    #3f5866; /* иноязычные термины и переводы в карточках */
  --rule:     #cfcdc6; /* все разделители */
  --rule-strong: #1b1a18; /* жирные линейки разделов (в светлой — чернила) */
  /* Тревога и согласие. Раньше оба тона стояли литералами в четырёх
     местах каждый (кнопка удаления, флеши, ошибка загрузки) — и мимо
     палитры: поправить их разом было негде. */
  --alarm:    #8f2d2d; /* удаление, ошибка */
  --yes:      #2c6b2f; /* «готово» */

  /* 1.22: то, что стояло литералами. */
  --plate:       #f5f4f1;     /* вклейка под скан и гравюру (.plate .frame, картинки тела) */
  --photo-rule:  transparent; /* рамка фото — нужна только на тёмной бумаге */
  --vitrine-rule: transparent; /* линейка вокруг тёмных полос: на тёмной бумаге они иначе сливаются */
  --on-vitrine:  #e7e6e2;     /* текст на витрине */
  --on-vitrine-dim: #cfcdc6;  /* вторичный текст на витрине */
  --on-vitrine-head: #fff;    /* заголовок на витрине */
  --steel-lit:   #9fb3bf;     /* иноязычное на витрине */
  --on-accent:   #fff;        /* текст на золотой и тревожной заливке (не на кнопке) */
  --glass:       rgba(231, 230, 226, 0.92); /* подложка тонкой полосы */
  --scrim:       rgba(17, 18, 20, 0.45);    /* затемнение под открытым меню */

  /* Отступы и кегли служебных надписей — только для админки: в
     публичной части величины подобраны под каждый блок отдельно и
     сводить их к общей шкале сейчас не за чем. */
  --gap-1: 6px;  --gap-2: 12px; --gap-3: 22px; --gap-4: 34px;
  --fs-label: 11px; --fs-small: 13px; --fs-table: 14px;

  --display: "Prata", "Times New Roman", serif;
  --book:    "Literata", Georgia, serif;
  --grotesk: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  --measure: 39rem;  /* мера строки статьи — около 70 знаков */
  --page:    1280px;
}

/* Тёмные значения — палитра «Журнал ночью» (DarkPalette.dc.html). */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper:    light-dark(#e7e6e2, #211e1a);
    --inset:    light-dark(#f5f4f1, #2a2722);
    --vitrine:  light-dark(#111214, #0f1012);
    --ink:      light-dark(#1b1a18, #e4dfd3);
    --muted:    light-dark(#5c5a55, #b8b1a3);
    --service:  light-dark(#67655f, #a19a8c);
    --gold:     light-dark(#7c5a2e, #c49b60);
    --gold-lit: light-dark(#a37c3f, #d6b077);
    --steel:    light-dark(#3f5866, #93adbd);
    --rule:     light-dark(#cfcdc6, #3b362f);
    --rule-strong: light-dark(#1b1a18, #6f685c);
    --alarm:    light-dark(#8f2d2d, #e08a7e);
    --yes:      light-dark(#2c6b2f, #86c08a);
    --plate:    light-dark(#f5f4f1, #d9d3c6);
    --photo-rule:   light-dark(transparent, #3b362f);
    --vitrine-rule: light-dark(transparent, #4a4238);
    --on-accent: light-dark(#fff, #211e1a);
    --glass:    light-dark(rgba(231, 230, 226, 0.92), rgba(33, 30, 26, 0.92));
    --scrim:    light-dark(rgba(17, 18, 20, 0.45), rgba(0, 0, 0, 0.6));
  }
}
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="auto"] { color-scheme: light dark; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Плавная прокрутка к якорю — движение, которое человек не заказывал:
   при настройке «уменьшить движение» прыгаем сразу. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--book);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

a { color: var(--gold); }
/* height: auto обязателен рядом с max-width: у картинок теперь
   проставлены настоящие width и height — без него браузер держал бы
   высоту из атрибута и растягивал картинку, как только ширина упрётся
   в 100%. Сами атрибуты нужны затем, чтобы место под картинку было
   занято до её загрузки и текст не прыгал. */
img { max-width: 100%; height: auto; display: block; }

/* Клавиатурный фокус — свой, а не дефолтное кольцо браузера: у каждого
   оно своё и на золотых ссылках теряется. :focus-visible браузер зажигает
   там, где человек действительно идёт по табу, поэтому мышь рамки не
   получает. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* На тёмных полосах золото рубрик светлее — иначе контур сливается с фоном. */
.band :focus-visible,
.word-box :focus-visible,
.live-pin :focus-visible { outline-color: var(--gold-lit); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; }
/* Заголовок в две строки — ровными строками, а не длинной и огрызком
   в одно слово («Лёгкая шпага — в зале, дважды / в неделю»). Браузер без
   поддержки просто переносит как раньше. */
h1, h2 { text-wrap: balance; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
main { padding: 34px 0 0; }

/* ---- Повторяющиеся приёмы --------------------------------- */

/* Рубрика: мелкие прописные золотом в разрядку — над каждым
   разделом и каждой карточкой. Иконок вместо неё не бывает. */
.rubric {
  display: block;
  font-family: var(--grotesk);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.rubric.dim { color: var(--service); }
/* Без тегов рубрики нет, но строка под неё остаётся — иначе заголовки
   соседних карточек встают на разной высоте. */
.rubric:empty::before { content: "\00a0"; }
.rubric a { color: inherit; text-decoration: none; }

/* Раздел открывается жирной линейкой в 1 px чёрным. */
.section {
  border-top: 1px solid var(--rule-strong);
  padding-top: 14px;
  margin-top: 34px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.section-head h2 { font-size: 1.9rem; margin: 4px 0 0; }

.meta {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--service);
}
.dek { font-size: 1.1rem; font-style: italic; color: var(--muted); }
.muted { color: var(--muted); }
.empty-hint { color: var(--service); font-style: italic; font-size: 0.95rem; }
.opt { font-family: var(--book); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--service); }

/* Иноязычное — курсивом цветом «сталь», всегда рядом с русским. */
.foreign { font-style: italic; color: var(--steel); }

.more {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  margin-top: 12px;
}
.more:hover { color: var(--ink); border-color: var(--ink); }

/* Буквица — одна на статью, в первом абзаце, золотом. dropcap-host
   ставится на блок готового HTML: буквицу получает его первый абзац. */
.dropcap::first-letter,
.dropcap-host > p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.1em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--gold);
}
.dropcap-host > p { margin: 0 0 0.9em; }

/* Иллюстрация: рамка + изображение + подпись с кредитом.
   Предмет — чёрная витрина, гравюра — светлая рамка. */
figure.plate { margin: 0; }
/* Под сканом и гравюрой — вклейка (--plate): в тёмной теме это светлый
   #d9d3c6, скан лежит как есть, без инверсии и затемнения. */
figure.plate .frame { background: var(--plate); border: 1px solid var(--rule); padding: 14px; }
figure.plate.vitrine .frame { background: var(--vitrine); border-color: var(--vitrine); outline: 1px solid var(--vitrine-rule); outline-offset: -1px; }
figure.plate img { width: 100%; outline: 1px solid var(--photo-rule); outline-offset: -1px; }
figure.plate figcaption {
  font-family: var(--grotesk);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--service);
  margin-top: 8px;
}

/* Единственная яркая кнопка на странице. */
.btn {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 13px 26px;
  background: var(--gold-btn);
  color: #fff;
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--gold); color: var(--on-accent); }
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 8px 15px; font-size: 11px; }
.btn.tiny { padding: 4px 9px; font-size: 10px; letter-spacing: 0.08em; }
/* Удаление — всегда контурной кнопкой: заливка на странице одна, и она
   принадлежит приглашению в зал. */
.btn.danger { background: none; color: var(--alarm); border: 1px solid var(--alarm); }
.btn.danger:hover { background: var(--alarm); color: var(--on-accent); }
.quiet-link { font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.04em; }

.flash-error { color: var(--alarm); font-family: var(--grotesk); font-size: 14px; margin: 10px 0; }
.flash-ok { color: var(--yes); font-family: var(--grotesk); font-size: 14px; margin: 10px 0; }

/* ---- Шапка ------------------------------------------------- */

/* Тонкая строка титула: «Выходит с 2026 года · № 4 · август 2026». */
.imprint {
  border-bottom: 1px solid var(--rule);
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--service);
  /* 24 px строки — цель нажатия по WCAG 2.2 (2.5.8) у ссылок на выпуск и
     его темы. Высота полосы почти прежняя: поля ниже сокращены на ту же
     величину, на какую выросла строка. */
  line-height: 24px;
}
/* Три колонки, а не flex с распоркой: номер выпуска встаёт ровно по
   середине страницы независимо от того, какой длины строки по краям. */
.imprint .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.imprint .center { color: var(--ink); text-align: center; white-space: nowrap; }
.imprint .wrap > :last-child { text-align: right; }
/* Без min-width длинная строка по краю распирает свою колонку, и
   номер выпуска уезжает от середины на несколько пикселей. */
.imprint .wrap > * { min-width: 0; }
/* Номер и темы номера — ссылки на страницу выпуска, но золотыми им быть
   нельзя: строка титула набрана служебным тоном, и две золотые вставки
   в ней читаются как ошибка вёрстки. Подчёркивание при наведении —
   этого хватает, чтобы ссылку заметили. */
.imprint a { color: inherit; text-decoration: none; }
.imprint a:hover { text-decoration: underline; }

.masthead { text-align: center; padding: 30px 0 0; }
/* Название журнала печатается <h1> только на главной и в редакции —
   там своего заголовка у страницы нет. На остальных это .brand: <h1> на
   странице должен быть один, и он принадлежит разделу. Вид одинаковый. */
.masthead h1,
.masthead .brand {
  font-family: var(--display);
  font-size: 3.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.masthead h1 a,
.masthead .brand a { color: var(--ink); text-decoration: none; }
.masthead .subtitle {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin: 12px auto 0;
  max-width: 560px;
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead .subtitle::before,
.masthead .subtitle::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* Меню больше не липнет (1.22, U1): после прокрутки его место занимает
   тонкая полоса .topbar там, где она нужна (главная на телефоне, статья
   на десктопе), а липкое меню во всю ширину съедало экран чтения. Вместе
   с липкостью ушла и полупрозрачная подложка. */
nav.mainnav {
  margin-top: 20px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
/* Группы «Журнал» и «Клуб» (блок site-nav в layout.html). На широком
   экране их как бы нет: пункты — прямые участники строки меню, как до
   1.22, черта .sep между ними; подписи групп видны только в раскрытом
   меню телефона. */
.nav-group { display: contents; }
.nav-group-title { display: none; }
nav.mainnav .wrap {
  display: flex;
  justify-content: center;
  gap: 38px;
  flex-wrap: wrap;
  padding-top: 11px;
  padding-bottom: 11px;
}
nav.mainnav a {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
nav.mainnav a:hover { color: var(--gold); }
nav.mainnav a.on { border-bottom-color: var(--gold); color: var(--gold); }
/* Черта между журнальной и клубной половинами меню. Ровно волосяная и
   в цвет линеек: разделитель здесь должен читаться как типографская
   отбивка, а не как ещё один пункт. Отрицательные поля съедают половину
   общего зазора с каждой стороны — иначе группы разъезжаются вдвое
   сильнее, чем соседние пункты внутри группы. */
nav.mainnav .sep {
  width: 1px;
  align-self: stretch;
  background: var(--rule);
  margin: -2px -13px;
}

/* ---- Главная: полоса номера -------------------------------- */

.frontpage {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 254px;
  gap: 0 30px;
  padding-top: 30px;
}
.col-left   { grid-column: 1; grid-row: 1; padding-right: 28px; border-right: 1px solid var(--rule); }
.col-center { grid-column: 2; grid-row: 1; }
.col-right  { grid-column: 3; grid-row: 1; padding-left: 28px; border-left: 1px solid var(--rule); }
.col-left, .col-right { display: flex; flex-direction: column; }

.editorial h2 { font-size: 1.55rem; margin: 8px 0 10px; }
.editorial p { font-size: 0.96rem; margin: 0 0 0.9em; }
.editorial .dropcap::first-letter { font-size: 3.4em; }

.epigraph { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule); }
.epigraph blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}
.epigraph blockquote::before { content: "«"; }
.epigraph blockquote::after { content: "»"; }
.epigraph figcaption { margin-top: 8px; font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.08em; color: var(--service); }

/* Материал номера */
.feature h2 { font-size: 2.7rem; margin: 8px 0 12px; }
.feature h2 a { color: inherit; text-decoration: none; }
.feature h2 a:hover { color: var(--gold); }
.feature .dek { margin: 0 0 18px; }
.feature .plate { margin: 18px 0; }
.feature-body { column-count: 2; column-gap: 32px; font-size: 1rem; }
.feature-body p { margin: 0 0 1em; }
.feature-body p:first-child { margin-top: 0; }

/* Хроника */
.chronicle { list-style: none; margin: 0; padding: 0; }
.chronicle li { padding: 10px 0; border-top: 1px solid var(--rule); }
.chronicle li:first-child { border-top: none; padding-top: 0; }
.chronicle .line { font-family: var(--grotesk); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--service); }
.chronicle .line b { color: var(--gold); font-weight: 400; }
.chronicle a { display: block; color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; margin-top: 3px; }
.chronicle a:hover { color: var(--gold); }

/* Слово из словаря — тёмная врезка внизу правой колонки. */
.word-box {
  margin-top: auto;
  background: var(--vitrine);
  color: var(--on-vitrine);
  outline: 1px solid var(--vitrine-rule); outline-offset: -1px;
  padding: 18px 20px 20px;
}
.word-box .rubric { color: var(--gold-lit); }
.word-box .word { display: block; font-family: var(--display); font-size: 1.6rem; color: var(--on-vitrine-head); text-decoration: none; margin: 8px 0 2px; }
.word-box .foreign { color: var(--steel-lit); }
.word-box p { font-size: 0.9rem; color: var(--on-vitrine-dim); margin: 8px 0 10px; }
.word-box .more { color: var(--gold-lit); border-color: var(--gold-lit); }

/* ---- Карточка материала (три размера) ---------------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { display: flex; flex-direction: column; }
.card .plate { margin-bottom: 10px; }
.card h3 { font-size: 1.2rem; margin: 6px 0; }
.card h3 a, .card a.title { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--gold); }
.card p { font-size: 0.93rem; color: var(--muted); margin: 0; }
.card .meta { margin-top: 8px; }
.card .plate img { aspect-ratio: 4 / 3; object-fit: cover; }
.plate-empty { display: block; aspect-ratio: 4 / 3; background: var(--rule); }

/* Карточка человека. Отличается от карточки материала одним: портрет
   стоит вертикально. Общее правило .card .plate img режет картинку под
   4:3 — на снимке человека это срезает голову или пояс. */
.card.person .plate img { aspect-ratio: 3 / 4; }
.card.person .person-bio { margin-top: 10px; }
.card.person .person-bio p { margin: 0 0 8px; }
.card.person .person-bio p:last-child { margin-bottom: 0; }
.card.person .person-credit {
  margin-top: 10px;
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.06em;
  color: var(--service);
}

/* Строка со миниатюрой 92×92 — правая колонка библиотеки номера. */
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  align-items: flex-start;
}
.row-item:first-child { border-top: none; padding-top: 0; }
.row-item .thumb { flex: 0 0 158px; }
.row-item .thumb img { width: 158px; height: 112px; object-fit: cover; border: 1px solid var(--rule); }
.row-item .thumb.small img { width: 92px; height: 92px; }
.row-item .body { flex: 1; min-width: 0; }
.row-item h3 { font-size: 1.35rem; margin: 4px 0 6px; }
.row-item h3 a { color: var(--ink); text-decoration: none; }
.row-item h3 a:hover { color: var(--gold); }
.row-item p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.row-item .aside { flex: 0 0 118px; text-align: right; }
.row-item .aside .meta { display: block; }

.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--service);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  text-decoration: none;
}
.tag:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Тёмная полоса: приглашение в зал и афиша -------------- */

.band {
  background: var(--vitrine);
  color: var(--on-vitrine);
  /* Линейки сверху и снизу — тенью внутрь, а не border: в светлой теме
     их цвет прозрачный, и border прибавил бы полосе 2 px высоты. */
  box-shadow: inset 0 1px 0 var(--vitrine-rule), inset 0 -1px 0 var(--vitrine-rule);
  margin-top: 46px;
  padding: 40px 0;
}
.band .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
.band .rubric { color: var(--gold-lit); }
/* Афиша турнира — единственный заголовок своей страницы, поэтому там
   в полосе стоит <h1>; в приглашении в зал — <h2>. Набор один и тот же. */
.band h1, .band h2 { font-size: 2.1rem; margin: 10px 0 14px; color: var(--on-vitrine-head); }
/* Заголовок-ссылка на тёмном — белым, как в закрепе «турнир идёт» и в
   словарной врезке: золото ссылки на витрине едва отличимо от фона. */
.band h1 a, .band h2 a { color: inherit; text-decoration: none; }
.band p { color: var(--on-vitrine-dim); margin: 0 0 20px; max-width: 34rem; }
.band .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.band .actions a.quiet-link { color: var(--on-vitrine-dim); }
.band .facts { display: grid; grid-template-columns: 92px 1fr; gap: 7px 18px; font-size: 0.92rem; }
.band .facts dt { font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--service-lit); padding-top: 3px; }
.band .facts dd { margin: 0; color: var(--on-vitrine); }
.band .facts dd.tbd { color: var(--service-lit); font-style: italic; }
/* Ссылка в строке «Зала» (памятка новичку). Золотой на тёмном — это
   --gold-lit, обычный --gold на затемнении не дотягивает по контрасту.
   Подчёркивание с отбивкой, а не сплошное: строка набрана мелко, и
   линия под ней иначе съедает нижние выносные. */
.band .facts dd a {
  color: var(--gold-lit);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.band .facts dd a:hover { text-decoration-thickness: 2px; }
.band .plate .frame { background: #000; border-color: #000; }
.band figcaption { color: var(--service-lit); }

/* ---- Оглавление выпуска: отточие --------------------------- */

.contents { list-style: none; margin: 0; padding: 0; }
.contents li { padding: 11px 0; border-top: 1px solid var(--rule); }
.contents li:first-child { border-top: none; }
.contents .line { display: flex; align-items: baseline; gap: 10px; }
.contents .num { font-family: var(--grotesk); font-size: 12px; color: var(--service); flex: 0 0 26px; }
.contents .name { font-family: var(--display); font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.contents .name:hover { color: var(--gold); }
.contents .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 30px; }
.contents .tail { font-family: var(--grotesk); font-size: 11.5px; letter-spacing: 0.06em; color: var(--service); white-space: nowrap; }
.contents .note { margin: 2px 0 0 36px; font-size: 0.93rem; color: var(--muted); }

.issue-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: start; }
.issue-cover .frame { background: var(--vitrine); border: 1px solid var(--vitrine); padding: 16px; outline: 1px solid var(--vitrine-rule); outline-offset: -1px; }

/* ---- Библиотека -------------------------------------------- */

.library-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start; }

.ribbon { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--rule-strong); margin-bottom: 26px; }
.ribbon .era { border-right: 1px solid var(--rule); padding: 12px 14px 14px 0; }
.ribbon .era:last-child { border-right: none; }
/* Заголовок века — кнопка отбора: клик оставляет в списке только этот
   промежуток, повторный клик его снимает. */
.ribbon .era-name {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.ribbon .era-name:hover { color: var(--gold); border-bottom-color: var(--rule); }
.ribbon .era.on .era-name { color: var(--gold); border-bottom-color: var(--gold); }
.ribbon .marks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 26px; }
.ribbon .mark {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  background: var(--inset);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ribbon .mark:hover { border-color: var(--gold); color: var(--gold); }
.ribbon .era.filled .mark { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }

.filters .group { margin-bottom: 22px; }
.filters .group h2 { font-family: var(--grotesk); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--service); margin: 0 0 8px; font-weight: 400; }
.filters a.f {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
}
.filters a.f:hover { color: var(--gold); }
.filters a.f.on { background: var(--ink); color: var(--paper); }
.filters a.f .n { float: right; color: var(--service); font-size: 11px; }
.filters a.f.on .n { color: var(--rule); }

.route { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 30px; }
.route .step { border-top: 1px solid var(--rule-strong); padding-top: 12px; display: flex; gap: 14px; }
.route .n { font-family: var(--display); font-size: 2rem; color: var(--gold); line-height: 1; }
.route h3 { font-size: 1.25rem; margin: 0 0 4px; }
.route h3 a { color: var(--ink); text-decoration: none; }
.route p { margin: 0; font-size: 0.93rem; color: var(--muted); }

/* ---- Галерея ------------------------------------------------ */

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
.album-grid .card h3 { font-size: 1.25rem; }

.collage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 12px;
}
.collage .tile { margin: 0; position: relative; grid-row: span 2; }
.collage .tile.tall { grid-row: span 3; }
.collage .tile.wide { grid-column: span 2; grid-row: span 2; }
.collage .tile img,
.collage .tile .tile-video {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
  cursor: pointer;
  background: var(--inset);
}
.collage .tile-video { position: relative; display: flex; align-items: center; justify-content: center; background: var(--vitrine); overflow: hidden; }
.collage .tile-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.collage .tile-video .play {
  position: relative; z-index: 1; color: #fff; font-size: 26px;
  width: 58px; height: 58px; border: 1px solid rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
}
.collage figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 10px 8px;
  font-family: var(--grotesk); font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.collage .tile:hover figcaption { opacity: 1; }

.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(10,10,11,0.95); z-index: 100;
  align-items: center; justify-content: center; padding: 30px 70px;
}
.lightbox.open { display: flex; }
.lightbox-content { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lightbox img, .lightbox video, .lightbox iframe { max-width: 86vw; max-height: 82vh; width: auto; border: none; }
.lightbox iframe { width: 80vw; aspect-ratio: 16/9; height: auto; }
.lightbox .caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--rule); font-family: var(--grotesk); font-size: 12px; }
.lightbox .close, .lightbox .nav { position: absolute; color: #fff; background: none; border: none; cursor: pointer; font-family: var(--book); }
.lightbox .close { top: 20px; right: 28px; font-size: 32px; line-height: 1; }
.lightbox .nav { top: 50%; transform: translateY(-50%); font-size: 52px; line-height: 1; padding: 0 16px; opacity: 0.65; }
.lightbox .nav:hover { opacity: 1; }
.lightbox .prev { left: 6px; }
.lightbox .next { right: 6px; }

/* ---- Контакты и формы --------------------------------------- */

.contact-list { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 22px 0; }
.contact-list dt { font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--service); padding-top: 4px; }
/* Длинная почта или адрес Telegram рвутся где угодно: целиком они не
   влезали в колонку на 375 px и выталкивали страницу вбок (1.22). */
.contact-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

form.card-form { max-width: 520px; }
form.card-form label { display: block; margin: 16px 0 5px; font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--service); }
form.card-form input[type=text], form.card-form input[type=email], form.card-form input[type=tel],
form.card-form input[type=password], form.card-form textarea, form.card-form select {
  width: 100%;
  font-family: var(--book);
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--ink);
  background: var(--inset);
}
form.card-form textarea { min-height: 120px; }
/* Подсказка под полем связи: меняется вместе с выбранным способом. */
form.card-form .field-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
form.card-form .btn { margin-top: 22px; }

/* ---- Полка книг ------------------------------------------------ */

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 30px; }
.book { display: flex; gap: 16px; align-items: flex-start; }
.book-cover { flex: 0 0 92px; }
.book-cover img { width: 92px; height: 130px; object-fit: cover; border: 1px solid var(--rule); }
/* Книга без обложки всё равно выглядит книгой: корешок и поле. */
.book-blank {
  display: block; width: 92px; height: 130px;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--gold);
}
.book-body { min-width: 0; }
.book-body h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 4px; line-height: 1.25; }
.book-body p { font-size: 0.9rem; color: var(--muted); margin: 8px 0 0; }
.book-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.book-open, .book-link {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.book-link { color: var(--steel); border-color: var(--steel); }
.book-open:hover, .book-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Вход в редакцию ------------------------------------------ */

.login { max-width: 420px; margin: 40px auto 60px; }
.login h1 { font-size: 2.4rem; margin: 10px 0 18px; }
.login .card-form { max-width: none; }
.login-cmd {
  background: var(--vitrine);
  color: var(--on-vitrine);
  padding: 12px 14px;
  font-size: 13px;
  overflow-x: auto;
}

/* ---- Подвал -------------------------------------------------- */

footer { border-top: 1px solid var(--rule-strong); margin-top: 60px; padding: 30px 0 44px; }
.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.sitemap h2 { font-family: var(--grotesk); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; font-weight: 400; }
.sitemap a { display: block; color: var(--ink); text-decoration: none; padding: 3px 0; font-size: 0.93rem; }
.sitemap a:hover { color: var(--gold); }
/* Подписка в подвале: та же волосяная линейка, что у колофона, поле в
   строку с кнопкой. Ни рамок-карточек, ни заливки — подвал остаётся
   подвалом. */
.footer-subscribe { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 16px; max-width: 30rem; }
.footer-subscribe > .title { display: block; font-family: var(--grotesk); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
/* Подпись поля нужна экранному диктору, а на экране её заменяет
   заголовок блока: показывать обе — повтор. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Порядок в форме: адрес, согласие, кнопка. Поле занимает всю ширину
   блока — кнопка теперь стоит под ним, а не рядом. */
.footer-subscribe .line { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.footer-subscribe input[type=email] {
  display: block; width: 100%; padding: 9px 11px; border: 1px solid var(--service); background: var(--paper);
  font-family: var(--book); font-size: 0.95rem; color: var(--ink);
}
/* Поле подписки подчёркивает фокус линейкой, но кольцо с клавиатуры
   снимать нельзя — иначе по табу не видно, где ты. */
.footer-subscribe input[type=email]:focus { border-color: var(--ink); }
.footer-subscribe input[type=email]:focus:not(:focus-visible) { outline: none; }
.footer-subscribe .check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.86rem; color: var(--muted); }
.footer-subscribe .check input { margin: 0; }
.footer-subscribe .sub { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--service); }

.colophon {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 16px;
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.06em; color: var(--service);
}
/* Номер выпуска в подвале — та же ссылка, что и в титуле, и тем же
   служебным тоном. */
.colophon a { color: inherit; text-decoration: none; }
.colophon a:hover { text-decoration: underline; }

/* ---- Кусочки, общие с редакцией ---------------------------------
   Подсказка под полем, ряд кнопок формы, полка выпусков, памятка
   новичку и личная страница участника: их рисуют и публичные
   страницы, поэтому в admin.css им не место. */
.hint { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.55; }
.hint.inline { display: block; margin: 4px 0 0; font-size: 12px; }
.inline-form { margin-top: 14px; }

/* Полка выпусков в библиотеке: номер, темы номера, дата — строкой,
   как оглавление. */
.issue-shelf { list-style: none; padding: 0; margin: 14px 0 0; }
.issue-shelf li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.issue-shelf a { display: flex; gap: 12px; align-items: baseline; flex: 1; text-decoration: none; color: var(--ink); }
.issue-shelf a:hover .what { color: var(--gold); }
.issue-shelf .no { font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--service); white-space: nowrap; }
.issue-shelf .what { font-family: var(--display); font-size: 1.1rem; }
.issue-shelf .when { font-family: var(--grotesk); font-size: 11.5px; color: var(--service); white-space: nowrap; }

/* Памятка новичку на странице «Клуб». */
.primer { border-left: 2px solid var(--gold); padding: 4px 0 4px 14px; margin: 22px 0; max-width: 36rem; }
.primer h3 { font-family: var(--display); font-size: 1.25rem; margin: 6px 0 6px; }
.primer h3 a { text-decoration: none; color: var(--ink); }
.primer h3 a:hover { color: var(--gold); }
.primer p { margin: 0 0 8px; color: var(--muted); }

/* На печати ни шапки, ни меню, ни подвала: печатают содержимое —
   протокол, лист кодов, заявку, статью. */
@media print {
  /* Полоса «Зал» — приглашение на экран, а не часть статьи: на бумаге
     она печаталась чёрной плашкой после текста. Именно body > .band: та
     же полоса внутри <main> — афиша турнира с его заголовком, её
     печатают. */
  .imprint, .masthead, nav.mainnav, footer, body > .band, .skip-link, .no-print { display: none !important; }
}

/* ============================================================
   Мобильная версия — точка перелома 720 px
   ============================================================ */

@media (max-width: 1080px) {
  .frontpage { grid-template-columns: minmax(0, 1fr) 244px; }
  .col-center { grid-column: 1; grid-row: 1; }
  .col-right { grid-column: 2; grid-row: 1; }
  .col-left {
    grid-column: 1 / -1; grid-row: 2;
    border-right: none; border-top: 1px solid var(--rule);
    padding: 24px 0 0; margin-top: 26px;
  }
  .col-left .epigraph { margin-top: 22px; }
  .feature-body { column-count: 1; }
  .library-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .masthead h1, .masthead .brand { font-size: 2.1rem; letter-spacing: 0.1em; }
  .imprint .wrap { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .imprint .wrap > :last-child { text-align: center; }
  /* На узком экране меню переносится в две строки, и вертикальная
     черта попадала бы в разрыв. Прячем: группы там и так читаются
     переносом. */
  nav.mainnav .sep { display: none; }
  nav.mainnav a { font-size: 11px; letter-spacing: 0.1em; }

  /* Полоса «Зал» на узкой главной поднимается под масштхед. Приглашение
     в клуб лежало на пятом экране: тест первого впечатления новичок
     проходит на первом, и видел он журнал, а не место, куда прийти.
     Только на главной (body.front) и только здесь: на странице статьи
     тёмная полоса перед заголовком читалась бы как объявление.
     На широком экране порядок прежний — полоса внизу. */
  body.front { display: flex; flex-direction: column; }
  body.front > .imprint { order: 1; }
  body.front > header   { order: 2; }
  /* Отступ сверху полоса носит для своего обычного места — внизу, после
     текста. Поднятая под шапку, она отбивалась им как провалом: во
     flex-контейнере отступы соседей уже не схлопываются. */
  body.front > .band    { order: 3; margin-top: 0; }
  body.front > main     { order: 4; }
  body.front > footer   { order: 5; }
  /* Идёт турнир: в этот день первым экраном должно быть то, что
     происходит сейчас. С 1.22 закреп — сосед полосы (layout.html печатает
     его между шапкой и <main>), поэтому он встаёт выше «Зала», а полоса
     остаётся над текстом: кнопка записи по-прежнему на первых экранах.
     Класс live ставит layout.html. */
  body.front.live > .live-pin { order: 3; }
  body.front.live > .band { order: 4; margin-top: 22px; }
  body.front.live > main { order: 5; }
  body.front.live > footer { order: 6; }

  .frontpage { grid-template-columns: 1fr; }
  .col-center { grid-column: 1; grid-row: 1; }
  .col-left { grid-column: 1; grid-row: 2; }
  .col-right {
    grid-column: 1; grid-row: 3;
    border-left: none; border-top: 1px solid var(--rule);
    padding: 24px 0 0; margin-top: 26px;
  }
  .cards { grid-template-columns: 1fr; }
  .feature h2 { font-size: 1.9rem; }

  .library-grid { grid-template-columns: 1fr; }
  .filters { border: 1px solid var(--rule); padding: 14px; background: var(--inset); }
  .filters .group { margin-bottom: 14px; }
  .filters .group:last-child { margin-bottom: 0; }
  .ribbon { grid-auto-flow: row; grid-auto-columns: auto; }
  .ribbon .era { border-right: none; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .route { grid-template-columns: 1fr; }
  .row-item { flex-wrap: wrap; }
  .row-item .thumb { flex: 0 0 100px; }
  .row-item .thumb img { width: 100px; height: 74px; }
  .row-item .aside { flex-basis: 100%; text-align: left; }
  /* «15 августа 2026 · материалов: 4» в строку не влезала и выталкивала
     страницу за край на 375 px (найдено в 1.22). */
  .contents .tail { white-space: normal; }

  .issue-grid, .band .wrap { grid-template-columns: 1fr; gap: 26px; }

  .collage { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: 110px; }
  .lightbox { padding: 20px 10px; }
  .lightbox .nav { font-size: 38px; padding: 0 6px; }
}

/* ============================================================
   Добавка к style.css: регламент как документ, страница одного
   источника и полка со ссылками.

   Всё ниже — новые правила. Переопределений существующих селекторов
   ровно три, и каждое объяснено на месте: .toc-col в узком экране
   (регламенту оглавление нужно и на телефоне), nav.mainnav на узком
   экране (в меню стало девять пунктов) и .book-body h3 (название на
   полке стало ссылкой).

   Переменные и заготовки взяты те же, что и везде: --measure для меры
   строки, --inset для врезок, --rule для линеек, --service и --muted
   для служебного текста (оба выше порога 4.5:1 на бумаге), .rubric,
   .dek, .hint, .btn.ghost, .plate, .empty-hint, .quiet-link.
   ~~Тёмной темы у сайта нет (это записано в CLAUDE.md как решение),
   поэтому вторых наборов цветов здесь нет тоже.~~ (отменено 15.09,
   1.22: тёмная тема есть — light-dark() в токенах в начале файла;
   новые цвета — только токенами.)
   ============================================================ */

/* ---- Шапка раздела (страница «Источники и книги») ------------ */
/* Раньше кегль заголовка и мера лида стояли в style="…" прямо в
   sources.html. Раздел не один такой, поэтому вынесено классом. */
.page-head { margin-bottom: 4px; }
.page-head h1 { font-size: 2.8rem; margin: 10px 0 12px; }
.page-head .dek { max-width: var(--measure); }
.page-head .dek p { margin: 0 0 0.6em; }
.page-head .dek p:last-child { margin-bottom: 0; }

/* Заголовок раздела с припиской справа: на узком экране приписка
   уходит под рубрику, а не сжимает её в столбик. Отдельным классом,
   а не общим правилом: у остальных .section-head справа стоит
   короткая ссылка, и перенос им не нужен. */
.section-head.wrapped { flex-wrap: wrap; }

/* ---- Полка книг: название ведёт на страницу источника --------- */
/* Единственное переопределение .book-body h3 — цвет и подчёркивание
   ссылки. Набор заголовка (кегль, гарнитура) остаётся прежним, иначе
   карточка на /library и на /sources разъехалась бы с соседями. */
.book-body h3 a { color: var(--ink); text-decoration: none; }
.book-body h3 a:hover { color: var(--gold); }
.book-cover a { display: block; }

/* ---- Меню: девятый пункт ------------------------------------- */
/* «Источники» подняты из подвала в верхнее меню, пунктов стало девять.
   На широком экране строка держит их без переносов; на узком меню
   переносилось и раньше (восемь пунктов в две строки), и вся правка
   здесь — про то, чтобы перенос читался как намеренный:
     · зазор между пунктами меньше, чем был (18 → 13), — на 375 px это
       ровно та разница, из-за которой строк остаётся две, а не три;
     · между строками появляется свой отступ, иначе две строки
       слипаются в кашу, где не видно, где кончается пункт;
     · у пункта появляются поля сверху и снизу: цель пальца в 19 px по
       высоте не проходит по WCAG 2.5.8 (минимум 24 px), а с полями
       выходит 28 px.
   ~~Ниже 360 px пунктов хватает на три строки, и липкое меню съедало бы
   пятую часть экрана на всё время чтения — там оно перестаёт быть
   липким. Это единственное место, где поведение меню меняется.~~
   (отменено 15.09, 1.22: меню не липнет; на телефоне внутренние
   страницы сворачивают его в «≡ Разделы», строкой оно стоит только на
   главной.) */
/* Планшет и узкий ноутбук. Общий gap: 38px задаёт и зазор между
   пунктами, и зазор между строками. ~~Поэтому перенесённое меню занимало
   113 px в липкой шапке ещё при восьми пунктах (замерено при 768 px).
   Пунктов девять: сжимаем зазор — при 900 px и шире строка снова одна,
   при 768 px строк две, но шапка 82 px вместо 113.~~ (отменено 15.09,
   1.22: шапка больше не липкая, счёт 113→82 px не про что; сжатый зазор
   остаётся ради ровных двух строк при 768 px.) */
@media (max-width: 1080px) {
  nav.mainnav .wrap { column-gap: 22px; row-gap: 10px; }
}

/* Между 721 и 860 px девять пунктов в строку уже не входят, а
   переносятся как попало: восемь наверху и «Галерея» одна внизу —
   это читается как поломка. Поэтому в этом промежутке строку рвёт та
   самая черта, что делит меню на журнальную и клубную половины: она
   становится разрывом строки (flex-basis: 100%), и получаются две
   ровные строки — 5 и 4 пункта, каждая по своему смыслу. Черта при
   этом исчезает, как и ниже 720 px: разрыв строки сам говорит то же,
   что говорила она. */
@media (min-width: 721px) and (max-width: 860px) {
  nav.mainnav .sep {
    flex-basis: 100%;
    width: auto;
    height: 0;
    background: none;
    margin: 0;
  }
}

@media (max-width: 720px) {
  nav.mainnav .wrap { column-gap: 13px; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  nav.mainnav a { padding: 5px 0 4px; }
}
@media (max-width: 420px) {
  nav.mainnav a { letter-spacing: 0.07em; }
}
/* ~~Ниже 360 px меню переставало быть липким.~~ (отменено 15.09, 1.22:
   меню не липнет нигде — U1.) */

/* ============================================================
   Страница одного источника (/sources/<слаг>)
   ============================================================ */

/* Шапка книги стоит по той же оси, что и текст под ней: колонка текста
   держит меру и центрируется, и шапка во всю ширину страницы уводила бы
   взгляд влево от того, ради чего страница открыта. Мера шапки шире —
   в ней две колонки, обложка и выходные данные. */
.source-head {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  max-width: 54rem;
  margin: 10px auto 0;
}
/* Без обложки колонка под неё не остаётся: пустое поле в 210 px
   читается как незагрузившаяся картинка. */
.source-head.no-cover { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
.source-cover .frame { padding: 10px; }
.source-info h1 { font-size: 2.4rem; margin: 12px 0 8px; }
.source-info .rubric a:hover { text-decoration: underline; text-underline-offset: 3px; }
.source-info .dek { margin: 0 0 20px; max-width: 34rem; }

/* Выходные данные книги — автор и год строкой под заголовком. */
.source-imprint {
  font-family: var(--grotesk);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--service);
  margin: 0 0 14px;
}

/* «Как взять»: что за файл, сколько весит, куда ведёт. Врезка на
   подложке, как поле поиска и рамка иллюстрации, — не карточка с
   тенью. Кнопка контурная: яркая на странице одна, и она внизу, в
   полосе «Зал». */
.source-file {
  border: 1px solid var(--rule);
  background: var(--inset);
  padding: 16px 18px 18px;
  max-width: 34rem;
}
.source-file-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--service);
}
.source-file-kind { color: var(--ink); }
.source-file-line > span + span::before { content: "· "; color: var(--rule); }
.source-file-out { margin: 14px 0 0; }

/* ---- Оригинал и перевод: переключатель ---------------------- */

.source-texts { margin-top: 44px; }

/* Сегмент из двух кнопок: рамка чернилами, выбранная залита чернилами
   насквозь (белое по --ink — 15:1). Выбор виден не одним цветом:
   залитая кнопка ещё и объявлена как aria-pressed="true". */
.text-switch {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 26px;
  border: 1px solid var(--ink);
}
/* Без этого правила display:flex перебивает атрибут hidden, и
   переключатель был бы виден до того, как скрипт его оживит. */
.text-switch[hidden] { display: none; }
.switch-btn {
  font-family: var(--grotesk);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 13px 24px;
  background: none;
  color: var(--ink);
  border: none;
  border-right: 1px solid var(--ink);
  cursor: pointer;
}
.switch-btn:last-child { border-right: none; }
.switch-btn:hover { color: var(--gold); }
.switch-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.switch-btn[aria-pressed="true"]:hover { color: var(--paper); }

.source-text[hidden] { display: none; }

/* Без скрипта видны оба текста подряд, и второй отбивается линейкой со
   своей подписью. Со скриптом видно ровно один, и отбивка не нужна:
   класс на обёртке ставит сам скрипт, поэтому «без JS» и «с JS»
   различаются здесь, а не двумя наборами разметки. */
.source-texts .source-text + .source-text {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.source-texts.switched .source-text + .source-text {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.text-label {
  max-width: var(--measure);
  margin: 0 auto 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--service);
}

.source-empty {
  max-width: var(--measure);
  margin: 44px auto 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: 14px;
}
.source-empty .empty-hint { margin: 8px 0 10px; }

@media (max-width: 720px) {
  .source-head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .source-cover { max-width: 190px; }
  .source-info h1 { font-size: 1.9rem; }
  .source-file { padding: 14px 16px 16px; }
  /* Переключатель во всю ширину: два больших поля вместо двух мелких
     кнопок посередине пустой строки. */
  .text-switch { width: 100%; }
  .switch-btn { flex: 1 1 50%; padding: 13px 8px; }
}

/* На печати переключателя нет: печатают оба текста, каждый под своей
   подписью — ту, что скрипт убрал с экрана, возвращаем. */
@media print {
  .text-switch, .doc .toc-col, .doc-note .quiet-link { display: none !important; }
  .source-text[hidden] { display: block !important; }
  .source-text .text-label.sr-only {
    position: static; width: auto; height: auto; clip: auto; white-space: normal;
  }
}

/* ============================================================
   Аудит 2026-09: доступность, цели нажатия, поля на телефоне.

   Всё ниже либо привязано к новым классам и атрибутам шаблонов
   (.library-search, .list-first, h2.rubric, .entry-live,
   [data-entry-*]), либо только добавляет свойства старым: этот файл
   попадает на сервер раньше пересобранных шаблонов и обязан работать
   с прежней разметкой.
   ============================================================ */

/* ---- Рубрика заголовком --------------------------------------- */
/* Над разделами <span class="rubric"> стал <h2 class="rubric">: у
   страницы появился уровень между h1 и карточками h3. Вид прежний —
   его задаёт .rubric; здесь снимаем то, что h2 приносит сам и что
   добавляют правила вида .section-head h2 и .band h2 (кегль, поля).
   Правило стоит в конце файла: при равной специфичности выигрывает
   позднее. */
h2.rubric { margin: 0; font-weight: 400; font-size: 11px; }

/* ---- Лайтбокс с клавиатуры ------------------------------------ */
/* Плитки альбома получают tabindex из gallery.js; кольцо — как у
   остальных элементов сайта, с отступом, чтобы не спрятаться под
   рамкой снимка. */
[data-lightbox]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Поиск библиотеки над списком ------------------------------ */
/* Поле вынесено из панели фильтров наверх: на телефоне читатель видит
   поиск и сразу список, а облако меток уходит под список. Вид поля —
   прежний (раньше стоял inline в library.html), граница — служебным
   тоном, как у всех полей ввода. */
.library-search { max-width: 26rem; margin: 0 0 18px; }
.library-search input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]) {
  width: 100%;
  font-family: var(--book);
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--service);
  background: var(--paper);
  color: var(--ink);
}
@media (max-width: 720px) {
  /* Сетка в одну колонку не умеет поменять блоки местами без order, а
     order в сетке путает автоматическую раскладку строк, — поэтому
     столбец. align-items: stretch возвращает блокам всю ширину: у сетки
     стоит align-items: start, и во flex-столбце он сжал бы их по
     содержимому. Зазор (gap) у flex тот же, что был у сетки. */
  .library-grid.list-first { display: flex; flex-direction: column; align-items: stretch; }
  .library-grid.list-first .filters { order: 2; }
}

/* ---- Цели нажатия на сенсорном экране -------------------------- */
/* 44 px точечно — у мелких кнопок и меток, по которым попадают пальцем.
   ~~Меню и строка титула держат 24 px (WCAG 2.2, 2.5.8): 44 px в шапке
   разломали бы журнальную полосу.~~ (отменено 15.09, 1.22: на телефоне
   меню свёрнуто в «≡ Разделы», раскрытое — по 44 px, секция «Партия 1.22»
   в конце файла; 24 px строкой остались только на широком экране и в
   полной шапке главной.) Мышь (pointer: fine) ничего не замечает. */
@media (pointer: coarse) {
  .btn.small, .btn.tiny, .tag, .alphabet a, .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Пункт фильтра — строка во всю ширину панели, поэтому flex, а не
     inline-flex; счётчик в flex-строке не плавает — прижимаем полем. */
  .filters a.f { min-height: 44px; display: flex; align-items: center; }
  .filters a.f .n { float: none; margin-left: auto; padding-left: 8px; }
}

/* ---- Поля ввода на телефоне ------------------------------------ */
/* iOS Safari увеличивает страницу, когда касаются поля мельче 16 px, и
   обратно её не возвращает. !important — потому что поле бывает
   оформлено и более специфичным селектором блока, и inline-стилем в
   старом шаблоне (поиск библиотеки); на узком экране 16 px нужнее
   любого из них. Кнопочные input и галки не трогаем. */
@media (max-width: 720px) {
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=color]),
  select,
  textarea { font-size: 16px !important; }
}

/* ============================================================
   Партия 1.20: переход к тексту, поля ввода в Safari, «спасибо».
   ============================================================ */

/* ---- «Перейти к тексту» ---------------------------------------- */
/* Первая остановка табуляции на странице. С экрана убрана за край, а не
   display:none — иначе до неё не дойти ни табом, ни диктором; в фокусе
   встаёт плашкой в левом верхнем углу, поверх титула. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 70; /* выше липкого меню (40) и полосы чтения (60) */
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }
.skip-link:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 2px; }

/* ---- Поля ввода: без скруглений системы ------------------------- */
/* Safari рисует текстовым полям свои скругления и внутреннюю тень —
   поперёк правила «ни теней, ни скруглений». Только текстовые виды:
   галки и переключатели без системного вида пропадают вовсе, у полей
   даты и времени iOS без него теряет высоту, у файла — кнопку. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=url], input[type=number], input:not([type]),
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
/* Выпадающий список на публичной форме заявки: системный вид снимаем
   тоже, но тогда исчезает стрелка — рисуем свою, чернилами, картинкой
   data: (CSP разрешает img-src data:). Только здесь: у списков
   редакции admin.css задаёт фон сокращённым background, который стёр
   бы стрелку, и список выглядел бы полем ввода. Правило стоит после
   form.card-form select и той же специфичности — побеждает позднее. */
form.card-form select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b1a18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

/* ============================================================
   Партия 1.22: шапка «≡ Разделы», тонкая полоса, тема в подвале.
   Макеты: HeaderPhoneAlt (меню), HeaderPhoneHome (главная и подвал),
   HeaderDesktop (полоса у статьи), DarkPalette.
   ============================================================ */

/* ---- Кнопка «≡ Разделы» ----------------------------------------- */
/* Без скрипта у кнопки hidden, и правило [hidden] ниже держит её
   спрятанной: display у самой кнопки иначе перебил бы атрибут. Видна
   только на телефоне — на внутренних страницах и в тонкой полосе.
   Класс nav-toggle есть и у меню редакции (admin-nav), поэтому правила
   только внутри .masthead и .topbar. */
:is(.masthead, .topbar) .nav-toggle {
  display: none;
  flex: none;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
:is(.masthead, .topbar) .nav-toggle[hidden] { display: none !important; }
:is(.masthead, .topbar) .nav-toggle svg { display: block; }
:is(.masthead, .topbar) .nav-toggle .i-close { display: none; }
:is(.masthead, .topbar) .nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
:is(.masthead, .topbar) .nav-toggle[aria-expanded="true"] .i-open { display: none; }
:is(.masthead, .topbar) .nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* Узкий телефон (≤380 px, 1.23): у кнопки остаётся только «≡» 44×44,
   подпись «Разделы» скрыта визуально (имя кнопки — aria-label). Иначе
   кнопка съедала ~105 px, и название журнала на 360 px обрезалось
   многоточием. */
@media (max-width: 380px) {
  :is(.masthead, .topbar) .nav-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  :is(.masthead, .topbar) .nav-toggle-label { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
}

/* Подложка под открытым меню: затемняет текст, касание по ней закрывает
   меню (site.js). Сама шапка над подложкой — у неё тот же слой 45 и
   она позже в документе. */
.nav-scrim { position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
body.nav-opened > .masthead,
body.nav-opened > .topbar { z-index: 45; }
/* Полупрозрачная подложка полосы над затемнением читалась бы серой. */
body.nav-opened > .topbar { background: var(--paper); }

/* ---- Тонкая полоса после прокрутки (.topbar) ---------------------- */
/* Разметка — layout.html с hidden; показывает site.js, когда .masthead
   ушла за верх экрана. «article» — десктоп: логотип строкой, разделы и
   золотая черта прочитанного. «home» — телефон: логотип и «Разделы». */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--glass);
  /* Safari до 18 знает свойство только с приставкой. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-strong);
}
.topbar[hidden] { display: none; }
.topbar-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--page);
  min-height: 47px;
  margin: 0 auto;
  padding: 0 32px;
}
.topbar-brand {
  flex: none;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 26px; }
.topbar-nav a {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.topbar-nav a:hover { color: var(--gold); }
.topbar-nav a.on { color: var(--gold); border-bottom-color: var(--gold); }
.topbar-nav .sep { width: 1px; height: 16px; background: var(--rule); }
/* Черта прочитанного — по нижнему краю полосы. Ширину пишет site.js. */
.topbar-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--gold);
}
/* Тонкая полоса у широкой статьи на узком ноутбуке: разделы не
   помещаются рядом с логотипом — остаются логотип и черта. */
@media (min-width: 721px) and (max-width: 1080px) {
  .topbar-nav { display: none; }
}

/* ---- Тема в подвале --------------------------------------------- */
/* Три ссылки сегментом (макет HeaderPhoneHome): текущая залита
   чернилами. Цели — 44 px и на мыши: переключатель стоит один раз. */
.theme-block { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 16px; max-width: 30rem; }
.theme-block > .title { display: block; font-family: var(--grotesk); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.theme-switch { display: flex; border: 1px solid var(--ink); }
.theme-switch a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border-right: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--grotesk);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.theme-switch a:last-child { flex-grow: 1.5; border-right: none; }
.theme-switch a:hover { color: var(--gold); }
.theme-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.theme-switch svg { flex: none; }
.theme-hint { margin: 8px 0 0; font-family: var(--grotesk); font-size: 12.5px; line-height: 1.45; color: var(--service); }

/* ---- Телефон: шапка одной строкой и меню «Разделы» ------------------ */
@media (max-width: 720px) {
  /* Внутренние страницы (body без .front): полоса выпуска спрятана,
     шапка — строка ≈57 px: логотип слева, «Разделы» справа. Главная
     держит полную журнальную шапку, как раньше. */
  body:not(.front) > .imprint { display: none; }
  body:not(.front) > .masthead {
    position: relative;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid var(--rule-strong);
    background: var(--paper);
  }
  body:not(.front) > .masthead > .wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 8px 0 16px;
  }
  body:not(.front) > .masthead h1,
  body:not(.front) > .masthead .brand {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:not(.front) > .masthead .subtitle { display: none; }
  body:not(.front) > .masthead .nav-toggle,
  .topbar .nav-toggle { display: inline-flex; }

  /* Меню внутренней страницы и тонкой полосы — два столбца «Журнал |
     Клуб», пункты по 44 px. Так оно выглядит и без скрипта (раскрытым
     под шапкой), и открытым по кнопке. */
  body:not(.front) nav.mainnav { margin-top: 0; border-top: none; border-bottom: none; }
  body:not(.front) nav.mainnav .wrap,
  .topbar .topbar-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0 20px;
    padding: 16px 20px 18px;
  }
  body:not(.front) nav.mainnav .nav-group,
  .topbar .nav-group { display: flex; flex-direction: column; }
  body:not(.front) nav.mainnav .nav-group-title,
  .topbar .nav-group-title {
    display: block;
    margin: 0 0 6px;
    font-family: var(--grotesk);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--service);
  }
  body:not(.front) nav.mainnav .sep,
  .topbar .topbar-nav .sep { display: none; }
  body:not(.front) nav.mainnav a,
  .topbar .topbar-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
  }
  body:not(.front) nav.mainnav a.on,
  .topbar .topbar-nav a.on { border-bottom-color: var(--rule); border-left-color: var(--gold); }

  /* Со скриптом меню свёрнуто, пока не нажата кнопка; открытое ложится
     поверх текста под шапкой. */
  body:not(.front) nav.mainnav.nav-folding:not(.nav-open),
  .topbar .topbar-nav.nav-folding:not(.nav-open) { display: none; }
  body:not(.front) nav.mainnav.nav-open,
  .topbar .topbar-nav.nav-open {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 45;
    max-height: calc(100vh - 57px);
    overflow-y: auto;
    background: var(--inset);
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
  }

  .topbar-row { gap: 8px; min-height: 56px; padding: 0 8px 0 16px; }
  .topbar-brand { flex: 1; min-width: 0; font-size: 16px; letter-spacing: 0.12em; overflow: hidden; text-overflow: ellipsis; }
  .topbar-progress { display: none; }

  /* Подвал: ссылки строками по 44 px, журнал и клуб рядом. */
  .sitemap { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .sitemap a { display: flex; align-items: center; min-height: 44px; padding: 0; line-height: 1.25; }
  .theme-block { max-width: none; }
}

/* ---- Тёмная тема: стрелка списка ----------------------------------- */
/* Стрелка нарисована картинкой data: с цветом внутри — переменной туда
   не попасть. В тёмной теме — светлыми чернилами. Только при
   light-dark(): без него тема светлая, и тёмная стрелка верна. */
@supports (color: light-dark(#000, #fff)) {
  [data-theme="dark"] form.card-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e4dfd3'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] form.card-form select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e4dfd3'/%3E%3C/svg%3E");
    }
  }
}

/* На печати — ни полосы, ни меню, ни переключателя; и печать всегда
   светлая, какую бы тему ни выбрали на экране. Последним правилом
   файла: оно главнее любого color-scheme выше. */
@media print {
  .topbar, .masthead .nav-toggle, .nav-scrim, .theme-block { display: none !important; }
  html[data-theme] { color-scheme: light !important; }
}