/* =====================================================================
   БАЗА: сброс, сцена, переключатель версий, доступность.
   Координаты переключателя — в пикселях ОКНА, а не сцены:
   он живёт снаружи композиции и не масштабируется вместе с ней.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

/* Горизонтальный вылет режем через clip, а не hidden, и только на корне.
   hidden на html делает его контейнером прокрутки, и колесо начинает
   уходить не туда: страница листается клавишами, но не мышью. Это и
   ловили. clip обрезает так же, но контейнера не создаёт. */
html { overflow-x: clip; }

/* Рост страницы набирается секциями: каждая знает свою высоту в макете
   и умножает её на общий масштаб. Никаких фиксированных высот у body. */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* ---------------------------------------------------------------------
   СЕКЦИЯ И СЦЕНА.

   Каждый блок сайта — секция со своей высотой в координатах макета
   (--scene-h). Секция занимает всю ширину окна, её реальная высота —
   макетная, умноженная на общий масштаб k = ширина окна / 1440.

   Внутри секции лежит сцена: кадр фиксированной ширины 1440, который
   целиком масштабируется. Так каждый новый блок рисуется в координатах
   макета и при этом упирается в оба края окна на любом мониторе.
   --------------------------------------------------------------------- */
.scene {
  position: relative;
  width: 100%;


  /* Высоту держит СООТНОШЕНИЕ СТОРОН, а не формула и не скрипт.
     Раньше стояло calc(--scene-h * --k): Chrome это применял, Safari —
     нет, и там секции получали нулевую высоту, страница обрывалась на
     первом экране. Соотношение задаётся у каждой секции своим правилом
     (см. ниже) и работает без JS, из чистого CSS. */
  height: auto;
  background: var(--field);   /* поле листа; сама бумага — внутри, с отступом */
  overflow: hidden;             /* запасное правило: Safari до 16 не знает clip
                                   и без него кадр вылезал вбок */
  overflow: clip;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--scene-w);
  height: var(--scene-h);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;

  /* ПОДЛОЖКА ЛИСТА КРАСИТСЯ С ОТСТУПОМ 18 — не заливкой во всю сцену.
     Заливка покрывала и поле листа, и кромка выходила серой: бумагу мы
     внутрь посадили, а подложку под ней нет. Здесь тот же цвет положен
     картинкой в 18 от каждого края, поэтому кромка остаётся полем
     секции, то есть белой.

     Градиент, а не padding: у padding сдвинулись бы все дети — они
     стоят абсолютом от этого короба, и весь макет уехал бы на 18. */
  background: linear-gradient(var(--bg), var(--bg))
              18px var(--sheet-t, 18px)
              / calc(100% - 36px) calc(100% - 18px - var(--sheet-t, 18px)) no-repeat;
}

/* Пропорция каждой секции: ширина макета к её высоте. Числа те же,
   что стоят в --scene-h у секции в разметке.

   Высота задана ДВАЖДЫ и намеренно: min-height в vw — страховка для
   браузеров, где aspect-ratio по какой-то причине не сработал. Без
   высоты секция схлопывается в ноль, её содержимое (оно абсолютное)
   продолжает рисоваться, но страница считает себя короткой — и
   прокрутка кончается на первом экране. Это ровно тот баг, который
   ловили в Safari. */
.scene--hero   { aspect-ratio: 1440 / 841;  min-height: calc(100vw * 841 / 1440); }

/* ПЕРВЫЙ ЭКРАН ВЛЕЗАЕТ В ОКНО — ПОДЖИМОМ НИЗА, А НЕ ПОСАДКОЙ ЛИСТА.

   Сначала лист сажали целиком: масштаб брали меньшим из «по ширине» и
   «по высоте». Экран влезал, но на низком окне лист становился уже
   окна, и справа оставалась пустая полоса — это и забраковали.

   Теперь лист по-прежнему во всю ширину (масштаб --k, как у всех
   блоков), а не влезающую часть отдаёт нижняя группа: соцсети, сноска и
   нижние красные полосы поднимаются на --squeeze — ровно на столько
   макетных пикселей, сколько не помещается. Считается в разметке,
   ограничено 90: больше — и группа наедет на гео-подпись.
   Координаты нижней группы см. hero.css. */
.scene--events { aspect-ratio: 1440 / 996;  min-height: calc(100vw * 996 / 1440); }    /* было 1280, потом 1090: блок укорочен дважды 05.09 */
.scene--povod  { aspect-ratio: 1440 / 780;  min-height: calc(100vw * 780 / 1440); }   /* было 1160: кадр обрезан 05.09, блок влезает в экран */

/* Всё внутри сцены позиционируется абсолютно в её координатах */
.stage > * { position: absolute; margin: 0; }

/* ---------------------------------------------------------------------
   ПЕРЕКЛЮЧАТЕЛЬ ВЕРСИЙ
   Левый нижний угол окна — единственное место, где в обеих версиях
   макета пусто (нижний левый угол свободен до красной полосы).
   Родные radio: переключаются стрелками с клавиатуры без всякого JS,
   заказчик видит привычные точки и не гадает, что это такое.
   --------------------------------------------------------------------- */
.switcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  margin: 0;
  padding: 8px 12px 9px;
  border: 1px solid #d6d2cd;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  line-height: 1.35;
  color: #2b2b2b;
}

.switcher legend {
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7d7873;
}

.switcher label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
}

.switcher input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #e4535a;
  cursor: pointer;
}

.switcher input:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   ДОСТУПНОСТЬ
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a { color: inherit; text-decoration: none; }

a:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

/* Спокойный режим НЕ глушится здесь одной строкой.

   Раньше тут стояло `* { animation: none !important }` — и оно выключало
   на сайте вообще всё, включая то, что движением не является: письмо
   имени на заставке, проявление секций, отклик на наведение. Человек
   с включённой настройкой видел не спокойный сайт, а сломанный.

   Теперь каждый файл сам решает, что у него движение, а что появление:
   boot.css убирает уезд листа и оставляет письмо, interactive.css
   выключает след и параллакс, section-events.css показывает разворот
   собранным, js/interactive.js и js/reel.js не заводят свои петли. */


/* --- ВЫКЛЮЧАТЕЛИ ДЛЯ ПОИСКА ТОРМОЗОВ (см. хвост js/main.js) --------- */
html[data-perf~="noblend"] .paper,
html[data-perf~="noblend"] .grain { mix-blend-mode: normal; }

html[data-perf~="nograin"] .grain { display: none; }

html[data-perf~="nopaper"] .paper { display: none; }

/* Снимает вынос слоёв на свой композиционный уровень. Он поставлен
   ради смешивания, но каждый такой слой — своя картинка размером во
   весь разворот, и в Safari их восемь. */
html[data-perf~="nolayer"] .paper,
html[data-perf~="nolayer"] .grain,
html[data-perf~="nolayer"] .shot__deal { will-change: auto; }
html[data-perf~="nolayer"] .paper { transform: none; }

/* Только для замера: ломает раскладку, зато показывает, сколько стоит
   сам приём «сцена масштабируется целиком трансформом». */
html[data-perf~="noscale"] .stage { transform: none; }
html[data-perf~="noimg"] img:not(.paper) { visibility: hidden; }