/* =========================================================
   РАЗДЕЛЫ

   Три типа глав, и разница между ними не косметическая:

     is-beat — кадр. Один экран, текста мало, он прижат к низу,
               поле открыто и работает как главный элемент.
     is-move — перегон. Пустая секция между кадрами; её работа —
               дать полю время перетечь в новое состояние, не
               споря с текстом.
     is-read — чтение. Высота по содержимому, текст в колонке
               слева, поле притушено вуалью.

   Ритм страницы задан их чередованием: кадр — перегон — кадр —
   чтение. Сплошное чтение читается как статья, сплошные кадры —
   как заставка; вместе получается спуск.
   ========================================================= */

.page { position: relative; z-index: var(--z-page); }

.chapter {
  position: relative;
  padding: var(--pad) var(--gut);
}

/* Переход по ссылке не должен приводить человека под шапку. */
.chapter[id] { scroll-margin-top: var(--head-h); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

/* ---- Кадр ----

   Содержимое стоит ПО ЦЕНТРУ, а не прижато к низу.

   Прижатый к низу текст — приём с лендинга ретрита, и там он работал:
   под текстом шёл снятый фильм, и верхние две трети экрана были заняты
   кадром — яхтой, водой, закатом. Здесь под текстом рисованное поле.
   Заказчик прислал снимок экрана, на котором нет ничего, кроме фона и
   слова «ПЕРВЫЙ ШАГ», и написал прямо: «главный экран спущен вниз,
   неудобно», «слишком много на себя задний фон берёт внимание из-за
   отсутствия контента». Это не придирка — так и было.

   Высота 94vh, а не 100: край следующей секции обязан заглядывать
   снизу. Иначе экран читается как конец страницы. */
.chapter.is-beat {
  min-height: calc(var(--vh, 1vh) * 82);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Не от vh, а от высоты шапки: угловая метка абсолютна, её низ
     всегда на 117px, а 12vh на коротком экране давали 89px — и
     заголовок наезжал на метку. */
  padding-top: calc(var(--head-h) + 3.4rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}

/* ---- Перегон ----

   ЦЕЛЫЙ ЭКРАН С ЛИШНИМ, А НЕ ТРЕТЬ.

   Здесь раньше стояло 38vh, и обоснование было такое: своего текста у
   перегона нет, а на высоте больше половины экрана он рано или поздно
   окажется на экране один — человек увидит чистый фон и ничего кроме.
   Для рисованного поля это была правда: экран движущегося тумана без
   текста и правда пустой.

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

   И дело не только во впечатлении. Скорость плёнки задаётся не
   секундами, а пикселями прокрутки: сколько её ни снимай, при коротком
   перегоне клип проматывается залпом. На 38vh на секунду клипа
   приходилось 94 пикселя прокрутки, на лендинге ретрита — 233. Плёнка
   у нас шла в два с половиной раза быстрее, и заказчик прочитал это как
   «мало кадров в секунду».

   Сколько именно — посчитано, а не взято с ретрита. Замер обоих сайтов
   (пиксели прокрутки на один кадр видео): у ретрита разброс 8-37, у нас
   в перегоне было 6.8, а под текстом 18-107. Плёнка не медленная и не
   быстрая — она рваная. 190vh вместе со SLOW 0.32 дают ровно 20 пикселей
   на кадр и в перегоне, и под текстом. */
.chapter.is-move {
  min-height: calc(var(--vh, 1vh) * 190);
  padding: 0;
  pointer-events: none;
}

/* На телефоне высота экрана в пикселях меньше, а палец проходит за один
   мах примерно то же расстояние — поэтому перегону нужно больше высот
   экрана, чтобы клип не пролетал. */
@media (max-width: 780px) {
  .chapter.is-move { min-height: calc(var(--vh, 1vh) * 140); }
}

/* ПОСЛЕДНИЙ ПЕРЕГОН КОРОЧЕ ОСТАЛЬНЫХ, И ЭТО НЕ ИСКЛЮЧЕНИЕ РАДИ
   ИСКЛЮЧЕНИЯ.

   У всех прочих перегонов после них идёт текстовый блок на том же шве,
   и клип доигрывает внутри перегона целиком. У последнего иначе: за ним
   идут три длинных раздела — цена, вопросы, заявка, — и раньше плёнка
   на них стояла намертво три экрана подряд. Заказчик сказал прямо:
   «дальше видеоряд кончается, экран просто стоит, уберите большие
   переходы».

   Поэтому последний клип теперь размазан по этим трём разделам: у
   каждого своё значение data-film, и подъём с крыши в космос идёт до
   самого низа страницы. Перегону при этом столько высоты уже не нужно —
   он отыгрывает не весь клип, а только отрыв от крыши. */
.chapter.is-move--last { min-height: calc(var(--vh, 1vh) * 100); }
@media (max-width: 780px) {
  .chapter.is-move--last { min-height: calc(var(--vh, 1vh) * 90); }
}

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

/* ---- Угловая метка: римская цифра, волос, подпись ----
   Работает как подпись на архивном кадре: говорит, где ты, но
   не претендует на внимание. */
/* На первом экране шапки ещё нет, и метка стоит у самого верха.
   Дальше шапка появляется, и метка оказывалась ровно под её строкой —
   на экране заявки «XI · ПЕРВЫЙ ШАГ» читалось вторым этажом названия.
   Поэтому во всех главах, кроме первой, метка опускается под шапку. */
.chapter:not(.hero) .mark { top: calc(var(--head-h) + clamp(0.4rem, 1.6vh, 1rem)); }

.mark {
  position: absolute;
  top: clamp(1.6rem, 5vh, 3.4rem);
  left: var(--gut);
  right: var(--gut);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.numeral {
  font-family: var(--display);
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.mark__line {
  flex: 0 0 clamp(28px, 6vw, 74px);
  height: 1px;
  background: var(--hair-warm);
}

/* Первому экрану высота нужна полная: он и есть первое впечатление,
   и обрезать его нечем — под ним ничего нет. Остальным кадрам хватает
   82vh, иначе вокруг короткого блока текста остаётся слишком много
   пустого поля. */
/* ТЕНЬ ПОД ТЕКСТОМ, А НЕ ЗАТЕМНЕНИЕ ПОВЕРХ КАДРА.

   Взято с ретрита. Буквы лежат прямо на плёнке, и на светлом месте
   кадра белое по золотому расплывается. Затемнить кадр сильнее — значит
   убить его; тень же гасит ровно те пиксели, что под буквой, и на
   плёнку не влияет вовсе. Особенно нужна на телефоне, где вуали нет и
   текст идёт во всю ширину. */
.chapter.is-beat h1,
.chapter.is-beat h2,
.chapter.is-beat p,
.chapter.is-read h2,
.chapter.is-read p,
.chapter.is-read li { text-shadow: 0 2px 24px rgba(4, 3, 26, 0.92); }

.chapter.is-beat.hero { min-height: calc(var(--vh, 1vh) * 96); }

/* ============ I. Первый экран ============ */

.hero__top {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: clamp(1.6rem, 4vh, 3rem);
}
.hero__top .hair { flex: 1; }

/* Вторая строка подписи — кто ведёт. Стоит здесь, а не только на экране
   с цитатой: человек должен видеть имя автора метода на первом же
   экране, до того как решит листать дальше. */
.hero__who {
  line-height: 1.75;
  max-width: 46ch;
}
.hero__who b {
  display: block;
  margin-top: 0.35em;
  font-weight: 400;
  color: rgba(236, 233, 246, 0.62);
}

@media (max-width: 700px) {
  .hero__top { display: block; }
  .hero__who { max-width: none; }
}

.hero h1 {
  max-width: 15ch;
  margin-bottom: clamp(1.8rem, 5vh, 3.4rem);
}

.hero__lower {
  /* Не на всю ширину колонки: на мониторе 1900 точек кнопка улетала к
     правому краю и переставала читаться как продолжение подзаголовка. */
  max-width: 62rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}

.hero__sub { max-width: 40ch; }

/* Подсказка «листай» — единственный элемент страницы, который сам
   просит действия. Держим её тонкой и в стороне от кнопки. */
.hint {
  position: absolute;
  right: var(--gut);
  bottom: clamp(1.2rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 233, 246, 0.5);
}
.hint__line {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, var(--hair-warm));
  position: relative;
  overflow: hidden;
}
.hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: hintRun 2.6s var(--ease) infinite;
}
@keyframes hintRun {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

.is-past-hero .hint { opacity: 0; transition: opacity 0.4s; }

@media (max-width: 700px) {
  /* Волосу не остаётся ширины: метка занимает обе строки целиком,
     и он вырождался в точку у правого края. */
  .hero__top .hair { display: none; }
  .hint { display: none; }
  .hero__lower { flex-direction: column; align-items: stretch; }
  .hero__lower .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hint__line::after { animation: none; transform: none; opacity: 0.5; }
}

/* ============ II. Манифест ============ */

/* Две строки набраны кеглем заголовка и намеренно не выровнены по
   левому краю колонки: вторая уходит вправо. Ровный столбик читался
   бы как список, а это заявление. */
.manifest__lines {
  font-family: var(--display);
  font-size: var(--t-beat);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: none;
  display: grid;
  gap: 0.08em;
  margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
}
/* Прямой потомок обязателен. Скрипт разбирает заголовки на слова и
   оборачивает каждое в свой span — без «>» правило ловило ВТОРОЕ СЛОВО
   первой строки: «Форму [мы] натренировали», золотом и с отбивкой в
   пять сантиметров. */
.manifest__lines > span:nth-child(2) {
  margin-left: clamp(0px, 8vw, 5.5rem);
  color: var(--gold);
}

.manifest__text { max-width: 48ch; margin-left: auto; }

@media (max-width: 700px) {
  .manifest__text { margin-left: 0; }
  .manifest__lines > span:nth-child(2) { margin-left: 0; }
}

/* ============ III. Мышца: ведомость ============ */

.ledger {
  margin-top: clamp(2.2rem, 6vh, 4rem);
  border-top: 1px solid var(--hair);
}

/* Две колонки с волосяной линией между ними. Это не таблица и не
   карточки: слева — знакомое, справа — то же самое про внутреннее.
   Смысл в паре, поэтому строку нельзя разрывать по вертикали. */
.ledger__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(1.1rem, 2.6vh, 1.9rem) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.ledger__side {
  font-size: var(--t-small);
  color: var(--bone-dim);
}
.ledger__side b {
  display: block;
  font-family: var(--ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 233, 246, 0.42);
  margin-bottom: 0.5em;
}

.ledger__row .ledger__side:last-child { color: var(--bone); }
.ledger__row .ledger__side:last-child b { color: var(--gold); }

.ledger__note {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  max-width: 52ch;
}

@media (max-width: 620px) {
  .ledger__row { grid-template-columns: 1fr; gap: 0.9rem; }
  .ledger__row .ledger__side:last-child {
    padding-left: 1rem;
    border-left: 1px solid var(--hair-warm);
  }
}

/* ============ IV. Метод и мастер ============ */

.method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 5vh, 3.4rem);
}

.method__body > * + * { margin-top: 1.15em; }

/* Портрет намеренно не квадратный и не круглый: вытянутый кадр с
   тонкой рамкой читается как отпечаток, а не как аватар в профиле. */
.master {
  position: relative;
  /* На мониторе 1900 точек колонка отдавала портрету под шестьсот
     точек ширины, и он превращался в самый яркий объект экрана —
     плакат рядом с текстом вместо портрета при тексте. */
  max-width: 430px;
  margin: 0 0 0 auto;
  /* смешивание тонировки не должно уходить за пределы кадра */
  isolation: isolate;
}
.master img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Снимок сделан в солнечный день у воды и на тёмной странице выглядел
     вырезкой из чужого сайта. Обесцвечиваем и приглушаем — портрет
     должен лежать в том же свете, что и всё остальное. */
  filter: grayscale(0.52) contrast(1.08) brightness(0.72);
  border: 1px solid var(--hair);
}
.master.is-empty img,
.master.is-empty .master__tint,
.master.is-empty::before,
.master.is-empty::after { display: none; }

/* Низ кадра растворяется в странице, чтобы фотография не заканчивалась
   линией отреза. */
.master::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, rgba(6, 5, 28, 0) 46%, rgba(6, 5, 28, 0.82) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Тонировка цветом поля: тот же оттенок, что сейчас горит в фоне.
   Режим color красит, не трогая светлоту, — лица это не искажает. */
.master__tint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 4 / 5;
  background: var(--tint, var(--indigo-hi));
  mix-blend-mode: color;
  opacity: 0.2;
  pointer-events: none;
}

/* Свет от поля ложится на рамку портрета — тот же цвет, что сейчас
   в фоне. Ради этого field.js и отдаёт наружу --field-b. */
.master::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--tint, var(--indigo-hi));
  opacity: 0.34;
  pointer-events: none;
  transform: translate3d(9px, 9px, 0);
}

.master figcaption {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.95rem;
}
.master__name { font-family: var(--display); font-size: 1.16rem; }
.master__role { font-size: var(--t-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-dim); }

/* Наведение отделено от касания намеренно: на тач-экранах наведение
   залипает после нажатия, и ссылка осталась бы подсвеченной навсегда.
   Поэтому там она сразу с подчёркиванием — иначе на телефоне неясно,
   что имя со «собакой» вообще можно нажать. */
.master__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  justify-self: start;
  margin-top: 0.35rem;
  font-family: var(--ui);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.35s var(--ease);
}
.master__link svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.master__link span { border-bottom: 1px solid var(--hair); transition: border-color 0.35s var(--ease); }
.master__link:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

@media (hover: hover) {
  .master__link span { border-bottom-color: transparent; }
  .master__link:hover { color: var(--gold-hi); }
  .master__link:hover span { border-bottom-color: var(--gold); }
}

/* ---- Строка цифр ---- */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(2.4rem, 6vh, 4rem);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
  border-top: 1px solid var(--hair);
}
.figures__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
}
.figures__cap {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

@media (max-width: 860px) {
  .method__grid { grid-template-columns: 1fr; }
  .master { max-width: 380px; }
}
@media (max-width: 520px) {
  .figures { grid-template-columns: 1fr; gap: 1.1rem; }
  .figures div { display: flex; align-items: baseline; gap: 0.9rem; }
  .figures__cap { margin-top: 0; }
}

/* ============ V. Как проходит тренировка ============ */

/* Ступени сдвигаются вправо каждая на шаг. Ровный столбик читался бы
   как оглавление; лесенка показывает, что это последовательность. */
.steps {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  display: grid;
  gap: clamp(1.1rem, 3vh, 2rem);
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: clamp(2.6rem, 5vw, 4rem);
  max-width: 56ch;
}
.step:nth-child(2) { margin-left: clamp(0px, 4vw, 3rem); }
.step:nth-child(3) { margin-left: clamp(0px, 8vw, 6rem); }
.step:nth-child(4) { margin-left: clamp(0px, 12vw, 9rem); }

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--display);
  font-size: 0.92rem;
  color: var(--tint, var(--indigo-hi));
  filter: brightness(1.35);
}
.step::after {
  content: "";
  position: absolute;
  left: clamp(1.5rem, 2.6vw, 2.1rem);
  top: 0.55em;
  bottom: -0.4em;
  width: 1px;
  background: linear-gradient(180deg, var(--hair), transparent);
}
.step:last-child::after { display: none; }

.step h3 { margin-bottom: 0.35em; }
.step p { color: var(--bone-mid); font-size: var(--t-small); }

@media (max-width: 700px) {
  .step:nth-child(2), .step:nth-child(3), .step:nth-child(4) { margin-left: 0; }
}

/* ============ VI. Четыре недели ============ */

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

/* Каждой неделе — свой экран.

   По высоте содержимого их выходило две на экран, и на мониторе
   получалось «здоровье зелёное, а под ним уже семья, тоже зелёная»:
   цвет не успевал прожить свой момент, ради которого весь раздел и
   затевался. Теперь неделя занимает почти весь экран и стоит по центру —
   переход между состояниями видно как переход, а не как градиент внутри
   одного кадра. */
.week {
  min-height: calc(var(--vh, 1vh) * 88);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.week__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: start;
}

/* Нечётные недели зеркалим: колонка с номером уходит вправо.
   Четыре одинаковых экрана подряд читаются как один длинный. */
.week:nth-of-type(even) .week__grid { direction: rtl; }
.week:nth-of-type(even) .week__grid > * { direction: ltr; }

.week__no {
  font-family: var(--display);
  font-size: clamp(4.4rem, 2rem + 9vw, 11rem);
  /* 0.82 поджимало строку так, что хвост четвёрки заезжал на подпись */
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--tint, var(--indigo-hi));
  opacity: 0.8;

  /* ТЕНЬ БЕРЁТСЯ ОТ ОБВОДКИ, А НЕ ОТ ЗАЛИВКИ.

     Цвет акцента недели совпадает с цветом плёнки под ним: золотая
     цифра лежит на золотой сфере, зелёная на зелёной. Обводка в один
     пиксель пропадает целиком — заказчик это и увидел.

     Плоским затемнением не лечится: оно гасит кадр и цифру одинаково,
     разницы между ними не прибавляется. Нужна тень под самим знаком.

     text-shadow здесь не работает: он рисуется от ЗАЛИВКИ, а заливка у
     этой цифры прозрачная. filter: drop-shadow берёт форму от реально
     нарисованных пикселей, то есть от обводки, и потому работает. */
  filter:
    drop-shadow(0 1px 2px rgba(4, 3, 26, 0.95))
    drop-shadow(0 0 18px rgba(4, 3, 26, 0.85));
}

.week__label {
  display: block;
  margin-top: 1rem;
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-dim);
  /* та же беда, что у цифры: подпись стоит на светлой части кадра */
  text-shadow: 0 1px 3px rgba(4, 3, 26, 0.95), 0 0 16px rgba(4, 3, 26, 0.8);
}

.week h2 { margin-bottom: 0.7em; }
.week h2 em {
  color: var(--tint, var(--gold));
  filter: brightness(1.2);
  /* «предназначения» золотом по золотой сфере — без тени пропадает */
  text-shadow: 0 2px 10px rgba(4, 3, 26, 0.9), 0 0 28px rgba(4, 3, 26, 0.75);
}

.week__why { color: var(--bone-mid); max-width: 50ch; }
.week__why + .week__why { margin-top: 0.85em; }

.week__list {
  list-style: none;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
  padding-top: clamp(1rem, 2.4vh, 1.5rem);
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 0.7rem;
}
.week__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-small);
  color: var(--bone-dim);
}
/* Пункт недели — пара: сверху то, с чем человек приходит, ниже то, что
   меняется. Раньше стоял только первый ряд, и список читался как
   перечень обвинений — заказчик 24.08.2026 попросил, чтобы рядом с
   каждым «плохо» сразу стояло, что даёт спортзал. */
.week__list li b {
  display: block;
  font-weight: 500;
  color: var(--bone);
  margin-bottom: 0.25em;
}

.week__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint, var(--indigo-hi));
  filter: brightness(1.3);
}

@media (max-width: 780px) {
  .week__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .week:nth-of-type(even) .week__grid { direction: ltr; }
  .week__no { font-size: clamp(3.6rem, 14vw, 6rem); }
}

/* ============ IV-б. Портретный кадр ============

   Единственный экран страницы, где главное — фотография. Он нужен по
   двум причинам сразу: человеку пора увидеть того, кто ведёт, а
   странице — сменить материал. Двадцать экранов рисованного поля
   подряд утомляют, сколько форм в нём ни меняй; настоящий кадр между
   ними работает как вдох.

   Снимок лежит НАД полем и ПОД текстом, занимает правую половину
   экрана и растворяется влево — так он не выглядит прямоугольником,
   наклеенным на фон. */

/* Экран цитаты: кадр плёнки с лицом Павла и текст поверх.
   Фотографии здесь больше нет — на этом шве плёнка показывает его же
   лицо, и снимок был вторым человеком на том же экране. */
.quotescreen { overflow: hidden; }

/* На телефоне угловая метка ложится прямо на лицо.

   На широком экране она стоит в углу над текстовой колонкой и ничему не
   мешает. На телефоне лицо занимает весь экран целиком, и номер главы
   оказывается поперёк него. Номер тут не нужен: раздел и так подписан
   именем автора под цитатой. */
@media (pointer: coarse) {
  .quotescreen .mark { display: none; }
}

.quote {
  max-width: 46ch;
  margin: 0;
}
.quote p {
  font-family: var(--display);
  font-size: clamp(1.34rem, 0.85rem + 1.7vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: none;
}
.quote em { font-style: normal; color: var(--gold); }

/* Подпись под цитатой лежит на светлой утренней дымке, а затемнение с
   этого экрана снято намеренно — там в кадре лицо Павла. Мелкий текст
   держит собственная тень: она гасит пиксели под буквами и кадр не
   трогает. */
.quote footer,
.quote footer * { text-shadow: 0 1px 3px rgba(4, 3, 26, 0.95), 0 0 14px rgba(4, 3, 26, 0.85); }

.quote footer {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.2rem, 3vh, 2rem);
}
.quote footer::before {
  content: "";
  width: clamp(24px, 5vw, 56px);
  height: 1px;
  background: var(--indigo-dim);
  flex: 0 0 auto;
}
.quote__name { font-size: var(--t-small); }
.quote__role {
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Ссылка на Павла переехала сюда из раздела о методе: там она стояла в
   подписи к фотографии, а фотографию оттуда убрали. */
.quote footer .master__link { margin-left: 0.4rem; }
@media (max-width: 700px) {
  .quote footer { flex-wrap: wrap; row-gap: 0.3rem; }
  .quote footer .master__link { flex: 1 0 100%; margin-left: 0; }
}

/* На узком экране имя и роль не помещаются в строку и ломались
   посреди фамилии. Ставим их столбиком. */
@media (max-width: 560px) {
  .quote footer { flex-wrap: wrap; row-gap: 0.25rem; }
  .quote footer::before { flex: 0 0 24px; }
  .quote__role { flex: 1 0 100%; padding-left: calc(24px + 0.9rem); }
}

/* ============ Карта месяца ============

   Четыре недели идут подряд, и на третьей человек перестаёт понимать,
   где он и сколько осталось. Четыре засечки отвечают на это без слов. */

.weekmap {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
}
.weekmap li {
  /* было 11.2px при альфе 0.3 — это 2.4:1, засечки не видно вовсе,
     а это единственный указатель «где я среди четырёх недель» */
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: rgba(236, 233, 246, 0.5);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hair);
  flex: 1 1 0;
  max-width: 46px;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.weekmap li {
  text-shadow: 0 1px 3px rgba(4, 3, 26, 0.95);
}
.weekmap li.is-on {
  color: var(--tint, var(--indigo-hi));
  border-bottom-color: var(--tint, var(--indigo-hi));
  filter: brightness(1.25) drop-shadow(0 1px 3px rgba(4, 3, 26, 0.9));
}

/* Четыре недели — четыре цвета.

   Раньше оттенок приходил из фона: поле отдавало наружу свой текущий
   цвет, и акценты внутри раздела красились им сами. Под фильмом такого
   источника нет — цвет теперь объявлен здесь, по одному на неделю.
   Им набраны номер, точки списка и акцент в заголовке. */
.week[data-week="1"] { --tint: #f2ac4e; }
.week[data-week="2"] { --tint: #d167e0; }
.week[data-week="3"] { --tint: #48dfa7; }
.week[data-week="4"] { --tint: #6a8cff; }

/* ============ IV. Четыре сферы: инфографика ============

   Заказчик 24.08.2026 просил на этом экране инфографику и прислал
   образец: четыре подписанные области вокруг общего центра. Собрано
   вёрсткой, а не картинкой — по трём причинам. Текст обязан быть в
   типографике сайта; цвета обязаны совпадать с неделями и с шарами в
   плёнке; и картинка не пережила бы телефон, где на неё остаётся
   треть ширины.

   Шар нарисован одним и тем же кодом на все четыре сферы, цвет
   приходит из data-week через --tint и currentColor. */

.spheres {
  list-style: none;
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vh, 2.8rem) clamp(1.6rem, 5vw, 4rem);
  max-width: 70rem;
}

.sphere {
  color: var(--tint);
  display: grid;
  grid-template-columns: clamp(58px, 11vw, 96px) minmax(0, 1fr);
  column-gap: clamp(0.85rem, 2.2vw, 1.4rem);
  align-content: start;
}
.sphere[data-week="1"] { --tint: #f2ac4e; }
.sphere[data-week="2"] { --tint: #d167e0; }
.sphere[data-week="3"] { --tint: #48dfa7; }
.sphere[data-week="4"] { --tint: #6a8cff; }

.sphere__orb {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: auto;
  /* Шар — это свет, а не иконка: пусть слегка светит наружу, как шары
     в плёнке. Тень цветная и очень мягкая, иначе на индиго читается
     грязным пятном. */
  filter: drop-shadow(0 0 18px color-mix(in oklab, var(--tint) 35%, transparent));
}

.sphere__no {
  grid-column: 2;
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--tint);
  opacity: 0.8;
}

.sphere__name {
  grid-column: 2;
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.12;
  color: var(--bone);
  margin: 0.3em 0 0.45em;
}
.sphere__name span { display: block; color: rgba(236, 233, 246, 0.6); }

.sphere__line {
  grid-column: 2;
  font-size: var(--t-small);
  color: rgba(236, 233, 246, 0.62);
  max-width: 34ch;
}

@media (max-width: 620px) {
  .spheres { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============ VII. Сам или с проводником ============

   ПОСТРОЧНО, А НЕ ДВУМЯ КОЛОНКАМИ. Колонки читались нормально на
   широком экране и разваливались на телефоне: сначала четыре абзаца
   «сам», один за другим, и только потом четыре ответа. Заказчик
   24.08.2026: «читаешь — как-то негатив такой; если раскрывается
   негатив, тут же пишется, что даёт спортзал». Строками ответ стоит
   рядом с вопросом при любой ширине. */

.versus {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  border-top: 1px solid var(--hair);
}

.versus__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 3.2rem);
  padding: clamp(1.1rem, 2.6vh, 1.9rem) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.versus__side {
  font-size: var(--t-small);
  max-width: none;
}
.versus__side b {
  display: block;
  font-family: var(--ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

/* Левая сторона приглушена, правая в полную силу: сравнение должно быть
   видно раньше, чем прочитано. */
/* 0.68, а не 0.55: строками текста стало больше, и на светлых кадрах
   плёнки прежняя приглушённость уходила в нечитаемое. Разница с правой
   стороной сохраняется, но читать можно обе. */
.versus__side--self { color: rgba(236, 233, 246, 0.68); }
.versus__side--self b { color: rgba(236, 233, 246, 0.42); }
.versus__side--gym { color: var(--bone); }
.versus__side--gym b { color: var(--gold); }

@media (max-width: 620px) {
  .versus__row { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ============ Дорожка отзывов ============

   Листается пальцем сама, без скрипта: scroll-snap. Скрипт добавляет
   только точки, стрелки и прячет всё это, когда листать нечего —
   отзывов пока два, и на широком экране они помещаются оба. */

.slider { position: relative; }

.slider__track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  /* БЕЗ minmax. С minmax(0, ...) дорожка имеет право ужать карточки до
     нуля — и ужимает: два трека по 88% не влезают в ширину, браузер
     честно сжимает их до 160 пикселей, и в отзыве остаётся по два слова
     в строке. Ширина трека задаётся жёстко, а лишнее уезжает в прокрутку,
     ради которой всё и затевалось. */
  grid-auto-columns: calc(50% - clamp(0.5rem, 1.5vw, 1rem));
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.4rem;
}
.slider__track::-webkit-scrollbar { display: none; }

.slider__item { scroll-snap-align: start; min-width: 0; }
/* Каждая карточка своей высоты. По умолчанию ячейки грид-дорожки
   растягиваются до самой высокой, и под коротким отзывом зиял пустой
   бокс в четверть экрана. */
.slider__track { align-items: start; }
/* Внутри дорожки вырезка занимает всю ячейку и не уезжает вправо. */
.slider .case { max-width: none; }
.slider .case:nth-child(even) { margin-left: 0; }

/* ДЛИННЫЕ ОТЗЫВЫ СВЁРНУТЫ.

   Отзывы настоящие и разной длины: от двух строк до восьмисот знаков.
   В дорожке все ячейки одной высоты — по самой высокой, — и без
   ограничения лента выходила 886 пикселей, то есть выше экрана
   телефона, а под короткими отзывами зияла пустота. Поэтому потолок и
   кнопка: тот же приём, что на лендинге ретрита. */
.slider .case { position: relative; overflow: hidden; }
.slider .case:not(.is-open) { max-height: clamp(18rem, 42vh, 24rem); }
.slider .case.is-long:not(.is-open)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  background: linear-gradient(to bottom, rgba(6, 5, 28, 0), rgba(6, 5, 28, 0.92));
  pointer-events: none;
}

/* Кнопка стоит ПОД карточкой, а не поверх текста. Наложением она
   ложилась ровно на строку, и никакая градиентная вуаль этого не
   спасала: под ней всё равно просвечивали буквы. Ячейка дорожки стала
   сеткой из двух рядов — карточка и кнопка. */
.slider__item { display: grid; grid-template-rows: 1fr auto; }

.case__more {
  justify-self: start;
  margin-top: 0.7rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--hair-warm);
  background: none;
  cursor: pointer;
  font-family: var(--ui);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.case__more:hover { border-bottom-color: var(--gold); }

.slider__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(0.9rem, 2.4vh, 1.4rem);
}
.slider__nav[hidden] { display: none; }

.slider__arrow {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur, 200ms) ease, opacity var(--dur, 200ms) ease;
}
.slider__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--bone-dim);
  border-bottom: 1px solid var(--bone-dim);
}
.slider__arrow[data-dir="-1"]::before { transform: rotate(135deg) translate(-1px, -1px); }
.slider__arrow[data-dir="1"]::before { transform: rotate(-45deg) translate(-1px, -1px); }
.slider__arrow:hover:not(:disabled) { border-color: var(--hair-warm); }
.slider__arrow:disabled { opacity: 0.3; cursor: default; }

.slider__dots {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.slider__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(236, 233, 246, 0.28);
  cursor: pointer;
  transition: background var(--dur, 200ms) ease, transform var(--dur, 200ms) ease;
}
.slider__dot.is-on { background: var(--gold); transform: scale(1.25); }

@media (max-width: 700px) {
  /* Следующая карточка выглядывает из-за края — так видно, что листается. */
  .slider__track { grid-auto-columns: 88%; }
}

/* ============ VIII. Что меняется ============ */

.cases {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
}

/* Отзыв — не карточка с тенью и радиусом, а вырезка: тонкая линия
   слева и цифра недели над текстом. Так он не спорит с полем. */
.case {
  padding: clamp(1.2rem, 3vh, 1.8rem) clamp(1.1rem, 3vw, 2rem);
  border-left: 1px solid var(--tint, var(--hair-warm));
  background: linear-gradient(90deg, rgba(16, 12, 56, 0.5), rgba(6, 5, 28, 0));
  max-width: 62ch;
}
.case:nth-child(even) { margin-left: auto; }

.case__when {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.case p { font-size: var(--t-small); color: var(--bone-mid); }
.case p + p { margin-top: 0.8em; }

/* Имя под отзывом — не заголовок и не подпись курсивом, а короткая
   строка с чертой, как на лендинге ретрита: отзыв должен читаться как
   слова человека, а не как элемент интерфейса. */
.case__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1em;
  font-style: normal;
  font-size: var(--t-small);
  color: rgba(236, 233, 246, 0.5);
}
.case__who::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: var(--hair-warm);
}

.cases__note {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 56ch;
  font-size: var(--t-small);
  color: rgba(236, 233, 246, 0.6);
}

/* ============ IX. Цена ============ */

.price__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 5vh, 3.4rem);
}

.price__sum {
  font-family: var(--display);
  font-size: clamp(2.8rem, 1.3rem + 5.4vw, 6rem);
  line-height: 0.94;
  color: var(--gold);
  white-space: nowrap;
}
.price__per {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.price__day {
  margin-top: clamp(1.2rem, 3vh, 1.8rem);
  padding-top: clamp(1rem, 2.4vh, 1.4rem);
  border-top: 1px solid var(--hair);
  font-size: var(--t-small);
  color: var(--bone-mid);
}
.price__day b { color: var(--bone); font-weight: 500; }

/* Счёт «на что уходит столько же». Он и есть аргумент цены —
   поэтому набран как список расходов, а не как преимущества. */
.tally { list-style: none; display: grid; }
.tally li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-small);
}
.tally li:first-child { border-top: 1px solid var(--hair); }
.tally span:last-child {
  color: var(--bone-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tally li.is-us { border-bottom-color: var(--hair-warm); }
.tally li.is-us span { color: var(--gold); }

.price__closing {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 52ch;
}

.price__cta { margin-top: clamp(1.6rem, 4vh, 2.6rem); }

@media (max-width: 780px) {
  .price__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ============ X. Вопросы ============ */

.faq__list {
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  border-top: 1px solid var(--hair);
  max-width: 820px;
}

.faq details { border-bottom: 1px solid var(--hair); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1rem, 2.4vh, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  color: var(--bone);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }

/* Плюс, который становится минусом. Без поворота всей иконки:
   вращается только вертикальная черта. */
.faq__sign {
  flex: 0 0 14px;
  height: 14px;
  position: relative;
  margin-top: 0.35em;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.faq__sign::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq__sign::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%) scaleY(1); }
.faq details[open] .faq__sign::after { transform: translateX(-50%) scaleY(0); }

.faq__answer {
  padding-bottom: clamp(1rem, 2.4vh, 1.5rem);
  max-width: 62ch;
  color: var(--bone-mid);
  font-size: var(--t-small);
}
.faq__answer p + p { margin-top: 0.8em; }

/* ============ XI. Заявка ============ */

.join { text-align: left; }

.join__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.join h2 { margin-bottom: 0.6em; }

.book-form {
  display: grid;
  gap: 0.9rem;
  max-width: 460px;
  width: 100%;
}

.book-form input[type="text"],
.book-form input[type="tel"] {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(6, 5, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.book-form input::placeholder { color: rgba(236, 233, 246, 0.38); }
.book-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(6, 5, 28, 0.72);
}

/* Выбор мессенджера — не радиокнопки, а три равные клетки:
   решение на один взгляд, попадание пальцем без прицела. */
.pick {
  /* точка отсчёта для спрятанных радиокнопок: без неё они уезжают
     позиционироваться от секции и утаскивают за собой фокус */
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.pick label:hover { color: var(--bone); border-color: var(--hair-warm); }
.pick input:checked + label {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(224, 180, 117, 0.09);
}
.pick input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

.book-form button {
  justify-content: center;
  width: 100%;
  margin-top: 0.3rem;
  font-family: var(--ui);
}
.book-form button:disabled { opacity: 0.6; cursor: default; }

.book-form__say {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--bone-dim);
  min-height: 1.5em;
}
.book-form.is-failed .book-form__say { color: #f0a08a; }
.book-form.is-sent .book-form__say { color: var(--gold); }

.book-form__fine {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(236, 233, 246, 0.64);
  max-width: 44ch;
}

@media (max-width: 860px) {
  .join__grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .book-form { max-width: none; }
}

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

.foot {
  position: relative;
  z-index: var(--z-page);
  padding: clamp(2rem, 5vh, 3.4rem) var(--gut);
  border-top: 1px solid var(--hair);
  background: rgba(6, 5, 28, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.foot__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(236, 233, 246, 0.55);
}
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.foot a:hover { color: var(--gold); border-bottom-color: var(--hair-warm); }

/* ============ Общая типографская мелочь ============ */

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

   У заголовка мера жёстче, чем у текста: на 46 знаках он вытягивался
   в одну строку через весь экран и переставал быть заголовком —
   становился просто крупной строкой. На 30 он ломается надвое, и
   акцентная часть уходит на вторую строку целиком. */
.chapter.is-read .wrap > h2 { max-width: min(100%, 30ch); }
.chapter.is-read .wrap > .label,
.chapter.is-read .wrap > .lead { max-width: min(100%, 46ch); }

/* Отступ у самого заголовка, а не у соседа: в разделе «Метод» абзац
   завёрнут в обёртку, правило на соседа не срабатывало, и хвост
   буквы Ш заходил на первую строку. Соседние отступы схлопываются,
   поэтому у списков ниже ничего не меняется. */
.chapter.is-read .wrap > h2 { margin-bottom: 1.1rem; }
.chapter.is-read .label + h2 { margin-top: 0.9rem; }