/* ═══ HERO ГЛАВНОЙ ════════════════════════════════════════════════════
   Фото и текст идут отдельными блоками: изображение не перекрывается
   плашкой, а вся важная информация остаётся читаемой сразу под ним.
   Кнопки на первом экране НЕТ — следующий блок и есть продолжение.    */
.hero { position: relative; display: flex; flex-direction: column;
        overflow: hidden; }
.hero__bg { position: relative; width: 100%; }
.hero__bg .ph { width: 100%; height: auto; aspect-ratio: 1600 / 1064;
                border: 0; border-radius: 0; align-items: flex-start; }
/* Подпись и рамка заглушки — только для резервного состояния без фото. */
.hero__bg .ph > span { z-index: 3; margin-top: 20vh; }
/* Настоящая фотография в hero показывается целиком, без обрезки:
   высота рассчитывается из исходного соотношения 1600×1064. */
.hero__img {
  width: 100%; height: auto;
  object-fit: contain; object-position: 50% 32%;
}
.hero__bg .ph::before { content: ""; position: absolute; inset: 14px;
  border: 1px dashed var(--line); z-index: 2; pointer-events: none; }
/* Плашка теперь находится в потоке сразу после фотографии. Непрозрачный
   фон нужен, чтобы текст не зависел от цветов и деталей кадра.         */
.hero__in {
  position: relative; order: 2;
  width: 100%;
  padding: var(--s-5) 0 var(--s-7);
  background: var(--paper);
  border-top: var(--border);
}
.hero__lead { margin-top: var(--s-4); max-width: 26em; }
.hero__scroll { display: none; }

/* ═══ БЛОК «ОБ ИРИНЕ» ═════════════════════════════════════════════════ */
.who__facts li { position: relative; padding-left: var(--s-5);
                 font-size: var(--fs-body); line-height: 1.5; }
.who__facts li + li { margin-top: var(--s-3); }
.who__facts li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1px; background: var(--gold); }

/* ═══ ТРИ НАПРАВЛЕНИЯ ═════════════════════════════════════════════════ */
.three { border-top: var(--border); max-width: 34em; }
.three a { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 64px; padding: var(--s-3) 0;
  border-bottom: var(--border); text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-h3); }
.three a::after { content: "→"; font-family: var(--font-text);
  font-size: 16px; color: var(--ink-soft); }
.three a:hover::after { color: var(--ink); }

/* ═══ СХЕМА «КАК РАБОТАЮТ QR» ═════════════════════════════════════════ */
.steps { display: grid; gap: var(--s-4); counter-reset: st; }
.steps__i { position: relative; padding: var(--s-5) var(--s-4) var(--s-4)
  var(--s-6); border: var(--border); border-radius: var(--radius);
  background: var(--paper-2); }
.steps__i::before { counter-increment: st; content: counter(st);
  position: absolute; left: var(--s-4); top: var(--s-4);
  /* Это ТЕКСТ (номер шага), а не украшение: --gold даёт 2.84:1,
     ниже порога 3:1 даже для крупного начертания. */
  font-family: var(--font-display); font-size: 27px; color: var(--gold-ink);
  line-height: 1; }
.steps__i span { display: block; padding-top: var(--s-2); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3,1fr); } }

/* ═══ ФИЛЬТР СОБЫТИЙ ══════════════════════════════════════════════════
   Кнопки, не селект: селект на мобильном требует лишнего тапа.         */
.filter { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.filter button { min-height: 44px; padding: 0 var(--s-4);
  border: var(--border); border-radius: var(--radius); background: none;
  font: 400 var(--fs-small)/1 var(--font-text); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink);
  color: var(--paper); border-color: var(--ink); font-weight: 500; }

/* ═══ КАРТА (статичная, без чужих iframe) ═════════════════════════════ */
.map { border: var(--border); border-radius: var(--radius);
       overflow: hidden; background: var(--paper-2); }
.map .ph { aspect-ratio: 16/9; border: 0; border-radius: 0; }
/* Фотография в блоке карты. Пропорции НЕ навязываем: у кадра зала
   3:2, и обрезка до 16/9 срезала бы верх с гонгами — то, ради чего
   снимок здесь и стоит. Скругления нет: его даёт сам блок,
   у которого overflow: hidden. */
.map img { display: block; width: 100%; height: auto; }
.map__map { border-top: var(--border); aspect-ratio: 16 / 9; min-height: 260px; }
.map__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__foot { padding: var(--s-4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  border-top: var(--border); font-size: var(--fs-small); }
.contact__directions { white-space: pre-line; }
.collab__text { white-space: pre-line; }

/* ═══ БЛОК КОДА ИЗ КНИГИ ══════════════════════════════════════════════ */
.codebox { border: 1px solid var(--gold); border-radius: var(--radius);
           padding: var(--s-5); background: var(--paper-2); }
.codebox h3 { margin-bottom: var(--s-2); }
.codebox p { font-size: var(--fs-small); color: var(--ink-soft);
             margin-bottom: var(--s-4); }
.codeface { display: inline-flex; gap: 2px; align-items: center;
  font: 500 20px/1 var(--font-text); letter-spacing: .16em;
  font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   СТРАНИЦЫ /s/1 … /s/5 — разворот книги
   Метафора: страница книги, ПРОДОЛЖЕННАЯ ВНИЗ. Буквальный разворот
   на вертикальном экране не работает.
   100% трафика мобильный: телефон в одной руке, книга в другой.
   ═══════════════════════════════════════════════════════════════════════ */
.bk { min-height: 100svh; padding: var(--s-5) var(--pad-x) var(--s-7);
      display: flex; flex-direction: column;
      background: var(--paper); color: var(--ink); }
/* Переход включается только после первой отрисовки: иначе страница
   вспыхивает светлым, прежде чем стать ночной. Для страницы, которую
   читают перед сном, вспышка недопустима.                             */
.bk--anim { transition: background 300ms var(--ease), color 300ms var(--ease); }
.bk__top { display: flex; align-items: flex-start; justify-content: space-between;
           gap: var(--s-4); }
/* Ни хедера, ни меню, ни логотипа сверху. Ни одной ссылки в верхней
   половине экрана.                                                     */
.bk__spread { font-size: 13px; letter-spacing: .08em; color: var(--ink-soft);
              font-variant-numeric: tabular-nums; }
.bk__night { position: relative; flex: none; width: 36px; height: 36px;
  border-radius: 50%; border: var(--border); background: none; cursor: pointer;
  display: grid; place-content: center; }
/* Кружок остаётся 36px, область нажатия — 44px */
/* -5px, а не -4px: inset считается от padding-box, а у кнопки
   есть border 1px — фактическая зона нажатия выходила 42×42. */
.bk__night::after { content: ""; position: absolute; inset: -5px; }
.bk__night svg { width: 16px; height: 16px; }

/* Ограничение по высоте, а не только по ширине. При max-width 420px
   и aspect-ratio 3/4 иллюстрация занимала 447px, и единственное
   действие страницы — кнопка play — оказывалось на 922px от верха
   при экране 812px. Человек с книгой в одной руке был обязан
   пролистать экран, чтобы найти play. */
.bk__art { margin: var(--s-4) auto 0; max-width: 420px; width: 100%; }
.bk__art .ph { aspect-ratio: 3/4; max-height: 32svh; }
.bk__art .ph > span { padding: 0 var(--s-3); }
.bk.is-playing .bk__art { animation: breathe 12s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1) }
                     50% { transform: scale(1.012) } }

.bk__hand { margin: var(--s-4) 0 0; max-width: 420px; }
.bk__hand .ph { background: none; border: 0; }
.bk__hand .ph > span { font-size: 12px; }

.bk__body { max-width: 420px; width: 100%; margin: var(--s-5) auto 0; }
.bk__h { font-family: var(--font-display); font-weight: 400; font-size: 29px;
         line-height: 1.2; }
/* Текст разворота стоит ниже кнопки — см. разметку s1…s5 */
.bk__text { max-width: 420px; width: 100%; margin: var(--s-6) auto 0;
            line-height: 1.7; }
.bk__text p + p { margin-top: var(--s-4); }

/* Одна крупная кнопка play, нижняя треть экрана — зона большого пальца */
.bk__playwrap { margin: var(--s-5) auto 0; max-width: 420px;
                width: 100%; display: flex; flex-direction: column;
                align-items: center; }
.bk__play { width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--gold-ring); background: none; cursor: pointer;
  display: grid; place-content: center;
  transition: width 300ms var(--ease), height 300ms var(--ease); }
.bk__play svg { width: 26px; height: 30px; fill: currentColor; }
.bk.is-playing .bk__play { width: 64px; height: 64px; }
.bk.is-playing .bk__play svg { width: 18px; height: 20px; }

/* Крупное время: читается с расстояния вытянутой руки, когда телефон
   лежит на столе.                                                      */
.bk__time { margin-top: var(--s-5); font-size: 18px; line-height: 1.3;
  font-variant-numeric: tabular-nums; text-align: center; }
.bk__note { margin-top: var(--s-3); font-size: var(--fs-small);
            color: var(--ink-soft); text-align: center; }
.bk__bar { width: 100%; max-width: 420px; margin-top: var(--s-4); }
.bk__bar .bar__track { height: 2px; }
.bk:not(.is-playing) .bk__bar { display: none; }

.bk__foot { max-width: 420px; width: 100%; margin: auto auto 0;
            padding-top: var(--s-6); }
.bk__foot .hr { margin: 0 0 var(--s-5); }
.bk__brand { margin-top: var(--s-7); text-align: center; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
/* Реквизиты. БЕЗ капса, в отличие от строки бренда рядом: та —
   начертание логотипа, а это юридический текст, и капс для него
   бриф запрещает. Контраст: --ink-soft даёт 5.61 на бумаге
   и --night-soft 6.49 в ночном виде — AA для мелкого текста. */
.bk__legal { margin-top: var(--s-2); text-align: center; font-size: 11px;
  line-height: 1.5; color: var(--ink-soft); }

/* ── Ночной вид ───────────────────────────────────────────────────────
   Обязателен: человек читает книгу перед сном.
   Автоматически по prefers-color-scheme + ручной переключатель.
   Состояние в памяти страницы, никакого localStorage.                  */
/* Ночной режим живёт на <html>: класс ставится инлайновым скриптом
   в <head>, до первой отрисовки. Никакой вспышки.                     */
html.is-night, html.is-night body { background: var(--night); }
html.is-night .bk { background: var(--night); color: var(--night-ink); }
html.is-night .bk__spread, html.is-night .bk__note, html.is-night .bk__brand,
html.is-night .bk__legal,
html.is-night .muted, html.is-night .form__note { color: var(--night-soft); }
html.is-night .ph { background: var(--night-2); border-color: var(--night-line); }
/* Специфичность: общее правило для .ph перебивало .bk__hand .ph,
   и прозрачная строка скана превращалась в залитую плашку. */
html.is-night .bk__hand .ph { background: none; border: 0; }
html.is-night .ph > span { color: var(--night-soft); }
html.is-night .bk__play { border-color: var(--night-gold); }
html.is-night .bk__night { border-color: var(--night-line); }
html.is-night .bar__track { background: var(--night-line); }
html.is-night .bar__fill, html.is-night .bar__knob { background: var(--night-gold); }
html.is-night .hr { border-color: var(--night-line); }
/* Отдельный цвет: --night-line даёт границе поля 1.43:1 при пороге
   3:1 — поля ввода в ночном режиме не видно. Днём это решено
   токеном --line-ctrl, ночью оставалось. */
html.is-night .inp { background: var(--night-2); border-color: var(--night-ctrl);
                     color: var(--night-ink); }
html.is-night .btn--primary { background: var(--night-gold); color: var(--night); }
html.is-night .btn--quiet { color: var(--night-ink);
                            text-decoration-color: var(--night-gold); }
html.is-night .form__ok { color: var(--night-gold); }
html.is-night :focus-visible { outline-color: var(--night-gold); }

/* Закрывающие фразы страницы «Что такое звуковая терапия».
   Курсив Cormorant — роль пометки на полях по брифу. Отделено
   линейкой, а не заливкой: плоскости здесь разделяет линия. */
.sound__close {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
  line-height: 1.35;
}