/* ===========================================================
   База: сброс, типографика, каркас страницы, листы альбома
   =========================================================== */

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

html {
  scroll-behavior: smooth;
  /* Листы намеренно шире вьюпорта, и этот запас нельзя давать
     прокручивать вбок. Именно clip, а не hidden: hidden на корне создал
     бы scroll-контейнер и сломал бы position: sticky у листов.
     На body одного clip не хватает — правило не всегда всплывает
     до вьюпорта, и вбок уезжает на 58px. */
  overflow-x: clip;
}

body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  overflow-x: hidden; /* фолбэк для старых движков */
  overflow-x: clip;   /* не создаёт scroll-контейнер и не ломает sticky */
}

img { max-width: 100%; display: block; image-orientation: from-image; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 3px dashed var(--marker);
  outline-offset: 3px;
  border-radius: 2px;
}

/* — типографика — */

h2 {
  font-weight: 900;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: var(--gap-m);
  text-wrap: balance;
}

h2 .h2-note { margin-left: 14px; vertical-align: middle; font-weight: 400; }

p { text-wrap: pretty; }

/* — каркас — */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* padding-block, а не шорткат: эти классы висят на том же элементе,
   что и .wrap, и `padding: X 0` обнулял бы его боковые отступы —
   на узком экране текст уезжал бы за край листа. */
.section { padding-block: var(--pad-section); }

/* ===========================================================
   Листы альбома
   Каждая секция — отдельный лист. Лист, который помещается во
   вьюпорт, прилипает к верху, и следующий наезжает на него —
   как перекладываемые страницы. Класс .sheet--stick вешает JS
   после замера высоты: у высокого листа иначе не долистать низ.
   =========================================================== */

.sheet {
  position: relative;
  /* Наклон уводит углы листа внутрь, и по краям проступает лист под ним.
     Поэтому лист шире вьюпорта и заходит на предыдущий сверху — запаса
     с избытком хватает на смещение от 0.5° (по краям это ~6px). */
  width: calc(100% + 40px);
  margin-left: -20px;
  /* Лист обязан быть не ниже экрана, иначе, наехав на предыдущий, он не
     закроет его целиком и снизу останется полоса чужого листа.
     vh (а не svh/dvh) — это наибольшая высота вьюпорта на мобильных,
     то есть покрытие гарантировано и при спрятанной панели браузера. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  transform: rotate(var(--sr, 0deg));
  box-shadow: var(--lift-sheet);
}

.sheet + .sheet { margin-top: -14px; }

.sheet--green {
  background-color: var(--green);
  background-image: var(--grain);
  background-size: 240px 240px;
}

/* Точку прилипания считает JS: лист по высоте экрана прибит за верх
   (--stick-top: 0), высокий — за низ (отрицательный top), чтобы сначала
   прокрутиться целиком и только потом застыть. */
.js .sheet--stick { position: sticky; top: var(--stick-top, 0px); }

/* На узком экране наклон листа съедает края: при ширине 375px даже
   0.35° выносит углы за вьюпорт. Стопка там и так не читается.
   Без наклона не нужен и боковой запас — а он съедал бы весь
   отступ .wrap, и текст прижимался бы вплотную к краю экрана. */
@media (max-width: 700px) {
  .sheet {
    --sr: 0deg !important;
    width: 100%;
    margin-left: 0;
  }
}

/* лёгкий разброс углов — чтобы стопка выглядела сложенной руками */
.sheet:nth-of-type(1) { --sr: -0.35deg; }
.sheet:nth-of-type(2) { --sr:  0.45deg; }
.sheet:nth-of-type(3) { --sr: -0.30deg; }
.sheet:nth-of-type(4) { --sr:  0.50deg; }
.sheet:nth-of-type(5) { --sr: -0.50deg; }
.sheet:nth-of-type(6) { --sr:  0.40deg; }
.sheet:nth-of-type(7) { --sr: -0.30deg; }

/* — шапка и подвал — */

.head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
}

.head-name { font-weight: 900; font-size: 1.05rem; }
.head-tag  { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); }

.site-footer {
  padding: 26px 0 40px;
  text-align: center;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

/* ===========================================================
   Движение по согласию
   Само появление блоков описано в materials.css — там же, где
   собирается transform, чтобы не спорить с ним за одно свойство.
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }

  .js [data-reveal] { opacity: 1; --rise: 0px; }
  .js .sheet--stick { position: relative; top: auto; }
}