/* Приглашение. Артёму 3, Арине 1.
   Графика из референса с мишками, шарами и тортом. Приём 04, разделение
   двоих именинников вертикальной чертой.

   Значения только из tokens.css. Если здесь появился hex или голое число
   в пикселях, это ошибка, а не исключение. Исключение одно и оно осознанное,
   это проценты расстановки рамки: у каждого героя своё место в композиции,
   вынести их в токены значило бы завести десяток одноразовых имён. */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--surface);
  scroll-behavior: smooth;
  /* Страховка от боковой прокрутки. Именно clip, а не hidden: hidden на
     корне делает его контейнером прокрутки и на части версий iOS ломает
     position fixed, на котором стоит панель. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Бумага ОДНА на всю длину документа. Чередования фонов у секций больше нет,
   решение от 07.09.2026. Пока полосы были, их границы не совпадали с высотой
   экрана ни на одном телефоне, и при любой остановке прокрутки шов вставал
   посреди кадра. Если полос нет физически, им нечем не совпасть. */
body {
  position: relative;
  margin: 0;
  background: var(--surface);
  /* Точная пропорция финальной полосы, 327 на 736. Число живёт в ОДНОМ
     месте, его читает маска слоя конфетти и сама полоса. */
  /* Полоса прокрутки в 100vw входит, а в место под содержание нет, поэтому
     её ширину вычитаем. Та же грабля, что с листом первого экрана. */
  --end-w: min(calc(100vw - var(--sbw, 0px)), 46rem);
  --end-h: calc(var(--end-w) * .4443);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Конфетти россыпью по всей длине документа.

   Точки в референсе рассыпаны по всей бумаге, и именно они делают пустое
   поле частью рисунка. Ниже первого экрана их не было вовсе, поэтому бумага
   там читалась мёртвой заливкой. Плитка бесшовная, её собирает
   make_cutouts.py, и размер привязан к ШИРИНЕ ОКНА, а не задан в пикселях:
   дотик обязан быть ровно того же физического размера, что на первом экране,
   где лист тоже занимает всю ширину.

   Маска решает оба края сразу. Сверху слой не должен проступать сквозь
   рисунок первого экрана, у него 44 процента пикселей прозрачны. Снизу он
   не должен лечь на собственное конфетти финальной полосы.

   ВНИМАНИЕ. Слой прибит к высоте body, а она равна содержанию только пока
   у блоков отступы заданы padding. Поставит кто-нибудь margin первому или
   последнему блоку, поля схлопнутся, слой станет короче страницы, и внизу
   молча пропадут дотки. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Две строки подряд намеренно. Старый браузер не поймёт image-set и
     возьмёт png сверху, новый возьмёт webp и сэкономит телефону 37 КБ. */
  background-image: url(assets/cut-mishki/confetti.png);
  background-image: image-set(url(assets/cut-mishki/confetti.webp) type("image/webp"),
                              url(assets/cut-mishki/confetti.png) type("image/png"));
  background-repeat: repeat-y;
  background-position: center top;
  background-size: calc(100vw - var(--sbw, 0px)) auto;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent calc(100svh - var(--s7)),
      #000 calc(100svh + var(--s10)),
      #000 calc(100% - var(--end-h) - var(--s7)),
      transparent 100%);
          mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent calc(100svh - var(--s7)),
      #000 calc(100svh + var(--s10)),
      #000 calc(100% - var(--end-h) - var(--s7)),
      transparent 100%);
}

/* Заголовок для читалок. Глазами его роль играет пара на рисунке. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Экран и лист ───────────────────────────────────────────────────── */

.screen {
  /* Лист постоянной пропорции 736 на 1183, ровно как референс. Высота
     выбирается по трём ограничениям: влезть в окно, влезть по ширине и не
     разрастись на большом мониторе. Что меньше, то и берём.

     Считается ЗДЕСЬ, а не на самом листе, потому что от этих же величин
     живёт подсказка под листом. Пока они лежали на .sheet, снаружи их не
     было видно: `var(--u)` у подсказки не разрешался вовсе, и объявление
     с ним молча выпадало, а кегль она брала из общих токенов, мимо шкалы
     листа. Шкала ниже ПЕРЕКРЫВАЕТ токены из tokens.css на первом экране:
     там всё считается от листа, а не от окна. Блоки ниже живут на общих
     токенах, как и раньше. */
  --ratio: 1.607;                  /* 1183 / 736, пропорция референса */
  /* Полоса под листом, чтобы подсказке было где стоять. На низком экране
     она поджимается, иначе лист мельчает вместе с ней и на маленьком
     телефоне остаются пустые поля по бокам. */
  --hint-room: clamp(3.5rem, 9svh, 5rem);
  --sheet-h: min(
      calc(100svh - var(--hint-room)),
      calc((100vw - var(--sbw, 0px)) * var(--ratio)),
      46rem);
  --u: calc(var(--sheet-h) / 100); /* один процент высоты листа */

  /* Кегль внутри листа считается от листа, иначе на большом мониторе текст
     остаётся крупным, а рисунок вокруг мельчает. Нижние границы через max(),
     чтобы на маленьком телефоне не ушло в нечитаемое. */
  --t-hint:  max(10px, calc(var(--u) * 1.5));
  --t-label: max(10px, calc(var(--u) * 1.8));
  --t-body:  max(13px, calc(var(--u) * 2.4));
  --t-lead:  max(17px, calc(var(--u) * 3.1));
  --t-age:   calc(var(--u) * 9);

  position: relative;
  min-height: 100svh;              /* svh, иначе на айфоне режет адресной строкой */
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s4);
  /* Полей по бокам НЕТ. Рисунок в референсе упирается в края, мишка слева
     и шары справа обрезаны краем листа. С полями лист шире своего места,
     и правый край картинки уезжал под `overflow: hidden`. */
  padding: 0;
  overflow: hidden;
}

.sheet {
  position: relative;
  height: var(--sheet-h);
  aspect-ratio: 736 / 1183;
}

/* ── Рисунок ────────────────────────────────────────────────────────── */

.frame { position: absolute; inset: 0; pointer-events: none; }

.el {
  position: absolute;
  display: block;
  width: var(--w);
  opacity: 0;
}
.el img { display: block; width: 100%; height: auto; }

/* Рисунок проявляется раньше текста и медленнее, чтобы читался как фон,
   а не как ещё один участник анимации. */
.is-ready .el { animation: soak var(--dur-slow) var(--ease-soft) var(--d, 0ms) both; }
@keyframes soak {
  from { opacity: 0; transform: scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* Рисунок это одна деталь ровно в пропорции листа, поэтому раскладывать
   внутри нечего. Проценты и координаты жили здесь, пока экран собирался
   из семи вырезок, и вместе с ними жили швы. См. комментарий в index.html. */
.el--hero { --w: 100%; left: 0; top: 0; }

/* Нижний край рисунка это не край композиции, а место, где кончился исходник:
   ниже по картинке идёт водяной знак стока, и мы обрезали выше него. Прямой
   срез поперёк медвежьих боков читается как брак, поэтому последние проценты
   растворяем в бумагу, как акварель по мокрому. Сверху и с боков растворять
   нечего: там рисунок либо кончается сам, либо уходит за край экрана. */
.el--hero img {
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
}

/* ── Карточка с текстом ─────────────────────────────────────────────── */

/* Текст стоит на облаке, ровно там, где оно нарисовано в референсе.
   Поэтому карточка прижата не к центру листа, а чуть выше, к центру пятна. */
.card {
  position: absolute;
  /* Свободный коридор в рисунке НЕ по центру листа. Слева его поджимает
     мишка с зайцем, справа шары с лисой, и самое узкое место наверху,
     между мишкой и шарами, это 210 до 520 по референсу. Отсюда центр 48
     и ширина 43 процента: текст встаёт в коридор целиком и нигде не лезет
     зверям на морды. */
  left: 49%;
  /* Пятно занимает по высоте 39 до 75 процентов. Карточка чуть выше его
     середины, потому что вводная строка спокойно живёт на чистой бумаге. */
  /* Карточка держится НИЗОМ, а не серединой. Снизу жёсткая граница, нижняя
     полоса героев начинается на 72 процентах высоты листа, и строка
     «Monkey Pub» не должна на неё заезжать. Сверху границы почти нет,
     там чистая бумага до гирлянды. Поэтому лишние строки, а на узком
     телефоне они появляются, растут ВВЕРХ, в пустоту, а не вниз, на морды. */
  bottom: 31%;
  transform: translateX(-50%);
  /* Коридор в рисунке не одинаков по высоте. Внизу, между зайцем и шарами,
     он шире, там 380 пикселей референса, и «3 октября, суббота» встаёт
     в строку. Наверху, между мишкой и шарами, всего 310, поэтому вводную
     строку отдельно поджимаем через max-width. */
  width: 50%;
  text-align: center;
}

.intro {
  /* Наверху коридор уже, чем внизу. 84 процента от карточки это те самые
     310 пикселей референса, дальше строка полезет мишке на плечо. */
  max-width: 84%;
  margin: 0 auto calc(var(--u) * 2.6);
  /* На ступень мельче остальных подписей. Коридор между мишкой и шарами это
     310 пикселей референса, и «ПРИГЛАШАЕМ ОТМЕТИТЬ» в общий кегль просто
     не влезает, строка ломается пополам. */
  font-size: max(10px, calc(var(--u) * 1.6));
  font-weight: 400;
  line-height: 1.75;
  /* Разрядка средняя, а не широкая. Коридор всего 42 процента ширины листа,
     и на широкой разрядке «ПРИГЛАШАЕМ ОТМЕТИТЬ» ломается на две строки. */
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Приём 04. Двое, разделённые чертой ─────────────────────────────── */

.pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: calc(var(--u) * 2.6);
  margin-bottom: calc(var(--u) * 1.8);
}

.kid { min-width: 0; }

.kid__name {
  margin: 0 0 calc(var(--u) * .8);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kid__age {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-age);
  font-weight: 500;
  line-height: .78;
  color: var(--accent);
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

/* Черта. Она и есть весь приём, поэтому рисуется, а не ставится границей.
   Тянется на всю высоту пары, от имени до низа цифры, иначе висит в воздухе
   огрызком. Растворяется по краям, чтобы не выглядела границей таблицы. */
.pair__rule {
  display: block;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom,
              transparent 0%,
              var(--rule) 14%,
              var(--rule) 86%,
              transparent 100%);
}

/* ── Когда и где ────────────────────────────────────────────────────── */

.when { color: var(--ink); }

.when__date {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: lowercase;
}

.when__time {
  margin: calc(var(--u) * .6) 0 calc(var(--u) * 1.6);
  font-family: var(--font-display);
  font-size: calc(var(--t-lead) * 1.7);
  font-weight: 500;
  line-height: 1;
  color: var(--accent-deep);
  /* Cormorant по умолчанию даёт минускульные цифры, и «17:00» читается
     как «I7:OO». Просим маюскульные. */
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

.when__place {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: var(--track-mid);
}

.when__addr {
  display: inline-block;
  margin-top: calc(var(--u) * .4);
  font-size: var(--t-label);
  letter-spacing: normal;
  color: var(--ink-soft);
}

.when::before {
  content: "";
  display: block;
  width: 30%;
  height: 1px;
  margin: 0 auto calc(var(--u) * 1.8);
  background: var(--rule);
}

/* ── Подсказка прокрутки ────────────────────────────────────────────── */

/* Подсказка идёт В ПОТОКЕ карточки, а не прибита к низу экрана. Прибитая,
   она садилась прямо на нижнюю группу героев. */
/* Подсказка стоит НИЖЕ листа, в свободной кремовой полосе. Внутри листа
   ей места нет: середина занята текстом, низ героями. */
.hint {
  /* В ПОТОКЕ, вторым рядом сетки под листом. Прибитая к низу экрана, она
     садилась героям на морды: на невысоком окне лист занимает всю высоту,
     и «низ экрана» это низ картинки. Место под неё держит --hint-room. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .8);
  text-decoration: none;
  color: var(--ink-faint);
  font-size: var(--t-hint);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: color var(--dur-mid) var(--ease-soft);
  padding: var(--s2) var(--s4);
}
.hint:hover, .hint:focus-visible { color: var(--accent-deep); }
.hint:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--s2); border-radius: var(--radius-s); }

.hint__arrow {
  width: var(--s3);
  height: var(--s3);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .hint__arrow { animation: nudge 2.4s var(--ease-soft) infinite; }
}
@keyframes nudge {
  0%, 62%, 100% { transform: rotate(45deg) translate(0, 0); }
  32%           { transform: rotate(45deg) translate(var(--s1), var(--s1)); }
}

/* ── Появление текста ───────────────────────────────────────────────── */

/* Скрытое состояние общее, а включается оно в двух разных местах: на первом
   экране по загрузке шрифтов, у блоков ниже по входу в кадр. Правила
   включения стоят в разделе про блоки. */
.js .reveal { opacity: 0; }
.is-ready .screen .reveal {
  animation: rise var(--dur-slow) var(--ease-soft) var(--d, 0ms) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--s4)); }
  to   { opacity: 1; transform: none; }
}

/* Настройка «уменьшить движение» выключает всё, но НЕ прячет содержимое.
   Иначе вместо приглашения человек получит пустой кремовый экран. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .is-ready .screen .reveal, .block .reveal,
  .el, .is-ready .el,
  .nav {
    opacity: 1;
    animation: none;
    transform: none;
  }
  /* Размывкам возвращаем их рабочую прозрачность поимённо, иначе правило
     выше выставит им единицу и бледный мазок станет пятном. */
  .wash--a, .wash--c { opacity: .50; }
  .wash--b, .wash--d { opacity: .48; }
}

/* ── Блоки после первого экрана ─────────────────────────────────────── */

/* Подтверждения участия нет и не будет, приглашение уходит в один конец.
   Поэтому блоков четыре и все они рассказывают, а не спрашивают.

   Ни у одного блока НЕТ ни своего фона, ни min-height в единицах окна.
   Ритм задаёт только внутренний отступ. Так секции перестают быть полосами,
   и границе между ними просто не с чем не совпасть. */
.block {
  position: relative;
  z-index: 1;
  padding: clamp(var(--s8), 9svh, var(--s10)) var(--s5);
  text-align: center;
  /* Иначе после перехода по якорю заголовок встаёт вплотную к верхнему
     краю окна и наполовину прячется под панелью. */
  scroll-margin-top: var(--s9);
}
.block__body {
  position: relative;
  z-index: 1;
  width: min(100%, 30rem);
  margin: 0 auto;
}

/* ── Акварельная размывка ───────────────────────────────────────────── */

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

   Отдаётся МАСКОЙ, а не картинкой. Цвет остаётся в токенах, и перекрасить
   всю страницу можно одной строкой. Прозрачность ниже 0.45 не опускать:
   ядро облака отличается от бумаги примерно на тридцать уровней, и на
   телефоне при дневном свете более бледная размывка не видна вообще,
   а бумага снова становится мёртвой заливкой. Проверять на улице. */
.wash {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  aspect-ratio: 395 / 360;
  background-color: var(--sage-soft);
  -webkit-mask-image: url(assets/cut-mishki/blot.png);
          mask-image: url(assets/cut-mishki/blot.png);
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Ни один мазок НЕ выходит за край окна. Раньше выходили, и страница
   получала горизонтальную прокрутку. Прятать её через overflow нельзя:
   overflow hidden на блоке срезал бы мазок прямой линией, то есть вернул
   бы ровно тот дефект, от которого ушли. А у мазка край мягкий сам по себе,
   поэтому ему и не нужно упираться в край экрана. */
.wash--a { width: clamp(240px, 62vw, 520px); top: -4%;  left: 0;    opacity: .50; transform: rotate(-6deg); }
.wash--b { width: clamp(210px, 54vw, 440px); top: 16%;  right: 0;   opacity: .48; transform: scaleX(-1) rotate(4deg); }
.wash--c { width: clamp(230px, 58vw, 480px); bottom: 2%; left: 1%;  opacity: .50; transform: rotate(-11deg); }
.wash--d { width: clamp(230px, 60vw, 500px); top: 4%;   right: 1%;  opacity: .48; transform: scaleX(-1) rotate(7deg); }

/* ── Знакомьтесь ────────────────────────────────────────────────────── */

/* Фотографии настоящих детей рядом с акварельным мишкой это столкновение
   двух материалов. Мирит их не обработка фотографии, а то, что низ головы
   растворён в бумагу ровно тем же приёмом, что низ первого экрана и верх
   финальной полосы. Портрет перестаёт быть наклейкой и становится ещё
   одним пятном краски на той же бумаге. Готовит site/make_faces.py. */
.pair--faces {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: clamp(var(--s2), 3vw, var(--s5));
  margin: var(--s5) 0 var(--s6);
}
.face { margin: 0; justify-self: center; width: min(100%, 12rem); }
.face img { display: block; width: 100%; height: auto; }
.face__name {
  margin-top: calc(var(--s2) * -1);   /* низ головы растворён, зазор кажется больше, чем он есть */
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Та же черта, что держит пару «3 | 1» на первом экране. Она сшивает новый
   блок со старым и без слов объясняет, что дети идут парой. */
.pair--faces .pair__rule { align-self: stretch; margin-bottom: var(--s5); }

/* ── Типографика блоков ─────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.h2 {
  margin: 0 0 var(--s5);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.06;
  color: var(--accent-deep);
}

.lead {
  margin: 0 0 var(--s5);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink);
}
.lead:last-of-type { margin-bottom: var(--s7); }

/* Дата повторена в блоке дороги намеренно: гость, открывший приглашение
   ради адреса, не должен листать назад за числом. */
.when-line {
  margin: calc(var(--s4) * -1) 0 var(--s5);
  font-size: var(--t-body);
  letter-spacing: var(--track-mid);
  color: var(--ink-quiet);
  font-variant-numeric: lining-nums;   /* иначе Cormorant отдаст «I7:OO» */
}

.note {
  margin: var(--s3) 0 0;
  font-size: var(--t-note);
  color: var(--ink-quiet);
}

/* ── Кнопка ─────────────────────────────────────────────────────────── */

/* Обе кнопки одинаковые. Деление на основную и призрачную убрано: они
   никогда не встречаются на одном экране, различать их нечем, а разный вес
   читался как случайная иерархия. Кегль НЕ мельче текста над кнопкой,
   раньше было наоборот и выглядело ошибкой. */
.btn {
  position: relative;
  display: inline-block;
  padding: var(--s3) var(--s7);
  min-height: 48px;          /* область нажатия, раньше была 43 */
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-deep);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-decoration: none;
  transition: background var(--dur-mid) var(--ease-soft),
              color var(--dur-mid) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
/* Мазок за кнопкой. Единственное плоское пятно на странице раньше было
   заливкой самой кнопки, и оно спорило с акварелью. Теперь плоского пятна
   нет вовсе, а кнопка всё равно заметна. */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Мазок держит СВОЮ пропорцию, 395 на 360. Если растянуть его по коробке
     кнопки, он превращается в бледный прямоугольник, то есть ровно в ту
     прямую кромку, от которой ушли на всей остальной странице. */
  left: 50%;
  top: 50%;
  width: 126%;
  aspect-ratio: 395 / 360;
  transform: translate(-52%, -46%);
  background-color: var(--accent-soft);
  -webkit-mask-image: url(assets/cut-mishki/blot.png);
          mask-image: url(assets/cut-mishki/blot.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .42;
}
.btn:hover { background: var(--accent); color: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--s2); }

/* ── Прощание ───────────────────────────────────────────────────────── */

.end__line {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent-deep);
}
.end__names {
  margin: 0 0 var(--s2);
  font-size: var(--t-body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.end__date {
  margin: 0;
  font-size: var(--t-body);
  letter-spacing: var(--track-mid);
  color: var(--ink-quiet);
  font-variant-numeric: lining-nums;
}
/* Сердце работает как точка в конце текста, а не как ещё один персонаж. */
.el--heart-end {
  display: block;
  width: 40px;
  margin: var(--s6) auto 0;
  opacity: 1;
  animation: none;
}
.el--heart-end img { display: block; width: 100%; height: auto; }

/* Полоса героев В ПОТОКЕ, последним элементом секции. Абсолютом её держали
   руками через padding-bottom у текста, и на узком телефоне дата почти
   садилась медведям на макушки.

   Это единственная фигурная вырезка ниже первого экрана, и она не дубль:
   лисы и пчелы в ней нет, верх растворён в бумагу. На телефоне она идёт
   ровно в масштабе первого экрана, потому что оба занимают всю ширину. */
.end__row {
  display: block;
  width: var(--end-w);
  /* Полоса шире, чем поле содержания: у блока есть боковые отступы, а она
     обязана упираться в края окна. Отсюда центрирование через сдвиг, а не
     через margin auto, иначе она вылезает вправо на ширину отступа. */
  margin: var(--s8) 0 0 50%;
  transform: translateX(-50%);
}
.end__row img { display: block; width: 100%; height: auto; }
.block--end { padding-bottom: 0; }

/* ── Панель ─────────────────────────────────────────────────────────── */

/* Без подложки, без границы, без размытия. Как только у панели появляется
   фон, на страницу возвращается горизонтальная полоса, то есть ровно та
   сущность, от которой ушли, и на айфоне она складывается с шапкой браузера
   в двойной шов. Читаемость поверх доток и размывок держит ореол. */
.nav {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--s3));
  left: var(--s4);
  right: var(--s4);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  pointer-events: none;      /* панель не перехватывает касания по бумаге */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-soft);
}
.is-nav-on .nav { opacity: 1; transform: none; }
/* При прокрутке ВНИЗ панель уходит. Она fixed, значит проезжает поверх всего,
   и на блоке со знакомством садилась прямо на лицо Арины. Пробовал дать ей
   бумажную подложку, и подложка выбелила девочке волосы. Правильный ответ
   не в подложке, а в том, чтобы панели не было там, где человек читает:
   вниз читают, вверх ищут навигацию. */
.is-nav-on.is-scrolling-down .nav { opacity: 0; transform: translateY(-8px); }
.nav__mark,
.nav__links a {
  font-size: var(--t-note);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-shadow: 0 0 5px var(--surface), 0 0 9px var(--surface),
               0 0 14px var(--surface), 0 0 22px var(--surface);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  font-size: var(--t-note);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-shadow: 0 0 5px var(--surface), 0 0 9px var(--surface),
               0 0 14px var(--surface), 0 0 22px var(--surface);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0;
  padding: 0 var(--s4);
  list-style: none;
  position: relative;
}

/* Бумажное пятно под словами. Панель проходит над портретами и над
   размывками, и одного ореола на буквах там не хватает.

   Это НЕ подложка. Форма берётся той же маской акварельного пятна, что и
   всё остальное на странице, поэтому у неё нет ни одной прямой кромки и
   горизонтальная полоса на страницу не возвращается. Пробовал радиальный
   градиент, и он давал именно полосу: градиент рисуется по коробке, а до
   прозрачности в её углах не доходил. */
.nav__links::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 116%;
  height: 260%;
  transform: translate(-50%, -50%);
  background-color: var(--surface);
  -webkit-mask-image: url(assets/cut-mishki/blot.png);
          mask-image: url(assets/cut-mishki/blot.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .9;
}
.nav__links a {
  display: block;
  padding: var(--s3) 0;      /* область нажатия добирается отступом, не кеглем */
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--dur-mid) var(--ease-soft);
}
.nav__links a:hover,
.nav__links a.is-here { color: var(--accent-deep); }
.nav__links a:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--s1); }

/* ── Проявление блоков ──────────────────────────────────────────────── */

/* Первый экран проявляется сам, по загрузке шрифтов. Блоки ниже ждут, пока
   войдут в кадр, иначе вся анимация отработает до того, как гость до них
   долистает, и страница включится мёртво, рывком. */
.is-ready .screen .reveal,
.block.is-in .reveal {
  animation: rise var(--dur-mid) var(--ease-soft) var(--d, 0ms) both;
}
.block.is-in .wash { animation: soak 1400ms var(--ease-soft) both; }
.js .wash { opacity: 0; }
.block.is-in .wash--a { opacity: .50; }
.block.is-in .wash--b { opacity: .48; }
.block.is-in .wash--c { opacity: .50; }
.block.is-in .wash--d { opacity: .48; }

/* ── Узкий экран ────────────────────────────────────────────────────── */

/* Первому экрану брейкпойнты не нужны: лист сам выбирает высоту по окну,
   а всё внутри считается от листа. Ниже только блоки после него. */

@media (max-width: 30rem) {
  .block { padding-left: var(--s4); padding-right: var(--s4); }
}

/* Вордмарк уступает место ссылкам, а не наоборот. Телефон в этом проекте
   главнее, и потерять навигацию хуже, чем потерять подпись. */
@media (max-width: 26rem) {
  .nav__mark { display: none; }
  .nav { justify-content: flex-end; }
}