/* ============================================================
   Как найти своего идеального партнёра — мобильная версия
   Вёрстка только под телефон. Десктоп закрыт заглушкой.
   ============================================================ */

@font-face{
  font-family:'Betmo';
  src:url('../fonts/betmo.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;

  /* ---- Betmo врёт о собственной высоте ----
     Замерено по контурам глифов: объявленный ascender у шрифта 0.947em,
     а чернила КИРИЛЛИЧЕСКИХ ЗАГЛАВНЫХ доходят до 1.030em (выше всех «Т»,
     «Э», «Ю», «Я», «С»). Строчные в 0.947em укладываются — потому баг и
     виден только на заглавных.

     Строку и границы композитного слоя браузер считает по ОБЪЯВЛЕННЫМ
     метрикам, а рисует по реальным. Верхушка заглавной оказывается за
     пределами растра слоя, и её просто нет; прокрутка вызывает
     перерисовку с другими границами — и буква «чинится» сама. Отсюда и
     «иногда», и «пропадает после скролла».

     Поднимаем объявленный ascender до 1.05em (с запасом над 1.030).
     descent поднят ровно на столько же: 0.400 -> 0.503. Это важно —
     базовая линия внутри строки стоит на L/2 + (asc - desc)/2, и раз
     разность asc-desc сохранена (0.547), весь набор остаётся ровно там,
     где стоял. Меняете одно число — пересчитайте второе, иначе поедет
     ВЕСЬ рукописный текст на всех экранах.

     Снизу запаса хватает и так: самая низкая заглавная «Х» уходит на
     -0.244em при объявленном descent 0.400em.

     Поддержка: Safari 17+, Chrome 87+, Firefox 89+. Где свойства нет,
     они игнорируются — поведение остаётся прежним, хуже не станет. */
  ascent-override:105%;
  descent-override:50.3%;
}

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

:root{
  /* пропорции исходного кадра 720x1276 */
  --vw-ar:0.5642633;   /* 720/1276 */
  --vh-ar:1.7722222;   /* 1276/720 */

  /* палитра снята пипеткой с макетов */
  --cream:#fcf0e4;
  /* Подзаголовок мелкий, ему нужен контраст 4.5. На фоне нового видео
     (#75685c под подписью) #dedede давал 4.01 — подняли до 4.59. */
  --sub:#a29690;
  --gold:#f0d8ba;
  --brown:#482a06;

  /* вертикальная сетка, в % высоты кадра — замерена по референсам */
  --plaque-y:76.93%;
  --s2-title-y:12.7%;    /* якорь подобран по факту: ink встаёт на 11.84% */

  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  background:#cfcfcc;
  color:var(--cream);
  /* 'SF Pro Display' первым: на macOS резолвится по имени, на iOS имя
     не публикуется и подхватывается -apple-system — тот же шрифт.
     BlinkMacSystemFont намеренно не в голове стека: в эмуляторах
     Android он уводит в Roboto и ломает метрики. */
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  /* Базовое начертание системного шрифта по всей презентации — Light.
     Акценты (<b>) и рукописные (Betmo) элементы переопределяют его сами. */
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

/* ============================================================
   Сцена
   ============================================================ */
.stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#cfcfcc;
}

/* .frame — коробка ровно с пропорциями кадра, накрывающая экран
   (object-fit:cover, посчитанный вручную). Всё, что должно держаться
   за картинку — золотая надпись на плите, заголовок второго экрана —
   лежит внутри и позиционируется в % ОТ КАДРА, а не от вьюпорта.
   Иначе при переходе 16:9 -> 20:9 надписи уезжают с места. */
.frame{
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  /* vh-строки — фолбэк для iOS < 15.4: без них весь max() не парсится */
  /* --fw — фактическая ширина кадра. Надписи «нарисованы» на изображении,
     поэтому их кегль считается от кадра, а не от вьюпорта: на 20:9 кадр
     шире экрана на четверть, и vw дал бы мелкий текст на плите. */
  --fw:max(100vw, calc(100vh * var(--vw-ar)));
  width:var(--fw);
  height:max(100vh, calc(100vw * var(--vh-ar)));
  --fw:max(100vw, calc(100svh * var(--vw-ar)));
  width:var(--fw);
  height:max(100svh, calc(100vw * var(--vh-ar)));
}

/* Слои фона: видео и статичные кадры покоя. Показывается ровно один. */
.layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  z-index:0;
  transition:opacity .5s linear;
  pointer-events:none;
}
.layer.is-visible{opacity:1}
.layer--white{background:#fff}
/* Экран-зеркало: в чёрном стекле телефона отражается читательница */
.layer--black{background:#050505}

/* Интро-видео лежит над лупом первого экрана: пока оно видно, луп
   может спокойно крутиться под ним. В конце интро замирает на последнем
   кадре и гаснет обычным фейдом слоя — луп проступает сквозь него.

   Белый фон обязателен. Пока браузер не декодировал первый кадр, <video>
   не рисует ничего, и сквозь прозрачный элемент на пару кадров проступал
   кадр покоя первого экрана (постер лупа) — картинка мелькала до начала
   ролика. Белый фон совпадает и с гейтом, и с первым кадром интро,
   поэтому подменять ему нечего. */
.layer--intro{z-index:2;background:#fff}

/* ============================================================
   Нулевой экран

   Чёрный лист: заголовок, живой шар в центре экрана и рукописное
   «Начать» со стрелкой. Он же гейт загрузки — у интро есть звук,
   а звук браузеры дают только из жеста.

   Размеры и композиция сняты с макета 1082x1920 и считаются
   ОТ ШИРИНЫ экрана (числа в vw = макетные пиксели, делённые
   на 10.82). Привязка другая: шар стоит в центре экрана, «Начать»
   и стрелка отсчитываются от него, а заголовок — от высоты экрана.
   Поэтому на вытянутых телефонах шар остаётся в центре, а воздух
   уходит наверх, между заголовком и шаром.
   ============================================================ */
.slide0{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:8;
  background:#000;
  -webkit-tap-highlight-color:transparent;
}
/* Экран уходит не фейдом, а мгновенно — под уже полностью белой
   засветкой. Фейд здесь был бы виден как посветление чёрного. */
.slide0.is-gone{display:none}

/* Заголовок: SF Pro Display Thin 50/60, трекинг 42% — по фигме.
   padding-left гасит хвостовой letter-spacing после последней буквы:
   без него центрированная строка уезжает влево на пол-трекинга.

   Верх строки на 20% высоты экрана; поправка .371vw — расстояние
   от верха строки до верха самих букв (полуинтерлиньяж плюс
   надстрочный запас SF Pro), замерена в браузере. */
.s0-title{
  position:absolute;
  top:calc(20% - .371vw);
  left:0;right:0;
  padding-left:.42em;
  text-align:center;
  /* гарнитура — системная, из body: там стек собран под iOS */
  font-weight:100;
  font-size:4.6211vw;
  line-height:1.2;
  letter-spacing:.42em;
  color:#ecd4ba;
  white-space:nowrap;
  /* Коробка шара может дойти до строки и своим чёрным срезать
     хвосты букв — заголовок лежит выше неё. */
  z-index:1;
}
/* «ТЬМЕ» — единственное серое слово: свет рождается во тьме */
.s0-dark{color:#656565}

/* Шар. Квадрат из макета — 812x812, но сам клубок внутри него сидит
   не по центру: яркостный центр смещён на 4.81% вправо и 4.56% вверх
   (замерено по десяти кадрам). Эти проценты и вычитаются в translate,
   иначе «центр экрана» пришёлся бы на пустое поле картинки, а не
   на сферу. */
.s0-orb{
  position:absolute;
  top:50%;
  left:50%;
  width:75.0462vw;
  height:75.0462vw;
  -webkit-transform:translate(calc(-50% - 3.610vw), calc(-50% + 3.422vw));
  transform:translate(calc(-50% - 3.610vw), calc(-50% + 3.422vw));
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.s0-orb-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* «Начать» и стрелка отсчитываются от центра экрана, то есть от шара:
   расстояния взяты из макета и сдвинуты вместе с ним. До готовности
   интро приглушены — это и есть индикатор загрузки. */
.s0-start{
  position:absolute;
  top:calc(50% + 39.278vw);
  left:0;right:0;
  text-align:center;
  font-family:'Betmo',cursive;
  font-size:11.525vw;
  line-height:1;
  color:#e2c9af;
  opacity:.35;
  transition:opacity .5s linear;
}
/* Стрелка — исходная текстура arrow02.png, обрезанная по краске
   (52x149). В макете она растянута по ширине сильнее, чем по высоте,
   поэтому ширина и высота задаются порознь, а не одним размером.
   Размер — 0.595 от макетного: ink 118x165 при ширине кадра 1082
   дал бы 10.9057 на 15.2495vw. Уменьшено от левого верхнего угла,
   поэтому остриё осталось на своей точке, а укоротился хвост. */
.s0-arrow{
  position:absolute;
  top:calc(50% + 31.729vw);
  left:calc(50% + 9.389vw);
  width:6.4889vw;
  height:9.0735vw;
  opacity:.35;
  transition:opacity .5s linear;
}
.slide0.is-ready .s0-start,
.slide0.is-ready .s0-arrow{opacity:1}
.slide0.is-ready .s0-start{
  -webkit-animation:orbPulse 2.6s ease-in-out infinite;
  animation:orbPulse 2.6s ease-in-out infinite;
}
@-webkit-keyframes orbPulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
@keyframes orbPulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* Подсказка внизу: единственная надпись, которой нет в макете.
   Куда нажимать, иначе догадаться неоткуда — свайп здесь не работает. */
.s0-hint{
  position:absolute;
  left:0;right:0;
  bottom:6%;
  text-align:center;
  font-size:clamp(9px,2.8vw,14px);
  font-weight:200;
  letter-spacing:.06em;
  color:#5f5f5f;
  opacity:0;
  transition:opacity .5s linear;
}
.slide0.is-ready .s0-hint{opacity:1}

/* ============================================================
   Засветка в белое — переход с нулевого экрана на первый.

   Лежит поверх всего, поэтому смены сцены под ней не видно:
   белое набирается за FLASH_UP, под ним чёрный лист выключается
   и открывается интро, чей первый кадр — тот же чистый белый.
   Гаснет засветка уже в него, поэтому стык не читается вовсе.
   ============================================================ */
.flash{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:9;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
/* Вверх — с ускорением (вспышка), вниз — ровно */
.flash.is-up{opacity:1;transition:opacity .55s cubic-bezier(.55,0,.85,.35)}
.flash.is-down{opacity:0;transition:opacity .45s linear}

/* Пока идёт интро, стрелка и точки не нужны */
.stage.is-intro .cue,
.stage.is-intro .dots{opacity:0;pointer-events:none}

/* ============================================================
   Экран 1
   ============================================================ */
.copy{
  position:absolute;
  opacity:0;
  pointer-events:none;
  /* translateZ поднимает текст над composited-слоем видео:
     на iOS играющее <video> иначе перекрывает соседей */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  z-index:3;
}
.copy.is-active{opacity:1}

/* Неактивный экран обязан быть недосягаем для пальца. Одного
   pointer-events:none у .copy мало: кнопки внутри (сургуч, «Отправь
   подруге») включают себе pointer-events:auto безусловно, и невидимая
   кнопка двадцатого экрана ловила тапы на всех остальных — в нижней
   трети экрана внезапно открывалась системная шторка «Поделиться».
   visibility снимает с касаний всё поддерево разом; на анимации это
   не влияет, потому что is-active снимается уже после затухания. */
.copy:not(.is-active){visibility:hidden}

/* Медленный уход текста поверх играющего перехода (hideMs у хопа):
   is-active остаётся, чтобы рукописные строки не стёрлись раньше времени,
   а правило ниже перебивает его просто порядком в файле. */
.copy.is-leaving{
  opacity:0;
  transition:opacity var(--outMs,1.5s) linear;
  pointer-events:none;
}

/* ============================================================
   Проявление обычного текста

   Блоки помечены классом .rise и всплывают снизу по очереди —
   задержку каждому раздаёт JS через --del. Стартовое состояние
   объявлено только под .has-js: без скриптов текст обязан просто
   лежать на месте, а не оставаться невидимым.

   ВАЖНО: .rise распоряжается transform целиком. Элемент с этим
   классом не имеет права центроваться через translateX(-50%) —
   правило перебьёт его, и блок уедет вправо на половину ширины.
   Центруйте такие блоки полями left/right.
   ============================================================ */
.has-js .rise{
  opacity:0;
  -webkit-transform:translate3d(0,16px,0);
  transform:translate3d(0,16px,0);
}
.has-js .rise.is-in{
  opacity:1;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  -webkit-transition:opacity .72s var(--ease) var(--del,0s),
                     -webkit-transform .72s var(--ease) var(--del,0s);
  transition:opacity .72s var(--ease) var(--del,0s),
             transform .72s var(--ease) var(--del,0s);
}

/* Печатная машинка: каждый символ в своём span. Место он занимает
   сразу (visibility, а не display), поэтому строки не скачут
   по мере набора и вёрстка совпадает с финальной. */
.has-js .tw .tw-c{visibility:hidden}
.has-js .tw .tw-c.is-on{visibility:visible}

.nowrap{white-space:nowrap}

/* Обёртки внутри кадра должны совпадать с ним по габаритам:
   надписи позиционируются в процентах от ЭТОЙ коробки */
.frame > .copy:not(.caption){left:0;right:0;top:0;bottom:0}

/* Золотая гравировка на плите. В самом видео плита пустая. */
.plaque{
  position:absolute;
  left:49.63%;            /* центр строки в макете смещён от центра кадра */
  top:var(--plaque-y);
  /* +.0726em (половина трекинга) гасит хвостовой letter-spacing после
     последней буквы: иначе центрированная строка уезжает влево */
  -webkit-transform:translate(calc(-50% + .0669em),-50%) translateZ(0);
  transform:translate(calc(-50% + .0669em),-50%) translateZ(0);
  width:70%;
  text-align:center;
  font-family:'Betmo',cursive;
  /* Надпись обязана поместиться МЕЖДУ листьями на плите. После добавления
     слова «моей» строка стала длиннее — кегль уменьшен до 75% от прежнего
     (.0789 → .0592), чтобы «Любовь всей моей жизни» вписалась так же,
     как раньше вписывалась «Любовь всей жизни». */
  font-size:clamp(17px,calc(var(--fw) * .0592),43px);
  letter-spacing:.1338em;
  line-height:1;
  white-space:nowrap;
  /* Цвет снят с макета: штрих #6b5c4e на плите #a2988f — темнее фона.
     Гравировка собирается двумя тенями: тёмная сверху внутрь буквы даёт
     глубину, светлая снизу — блик на нижней кромке выемки. Свет считаем
     падающим сверху, как на самом барельефе. */
  color:#65564a;
  /* Блик держим слабым: штрих у Betmo тонкий, и белая подсветка в целый
     пиксель забивает букву — надпись читается светлее плиты вместо
     вдавленной. Тёмная тень сверху даёт глубину, светлая снизу — только
     намёк на нижнюю кромку выемки. */
  text-shadow:
    0 -1px 1px rgba(70,56,44,.5),
    0 1px 0 rgba(255,252,246,.28);
}


.caption{
  left:0;
  right:0;
  /* Отсчёт от КАДРА, а не от экрана. Табличка с надписью привязана к
     кадру, и когда кадр выше видимой области (Safari со своей панелью),
     экранная привязка съедала зазор — заголовок наезжал на табличку.
     Теперь вся композиция масштабируется вместе: 4.74% = 100 - 95.26,
     где 95.26% — низ ink подзаголовка в макете. */
  bottom:4.74%;
  padding:0 clamp(14px,4.6vw,26px);
  text-align:center;
}

.caption h1{
  /* Новый макет: строчные буквы, крупнее прежнего.
     Поправка на iOS здесь не нужна: при таком кегле -apple-system
     подставляет SF Pro Display, тот же, что и на десктопе. */
  /* Начертание по фигме: SF Pro Display Ultralight (100),
     межстрочный 98%, трекинг 0. */
  /* 8.86vw: «Быстрый способ найти» даёт ink 83.72%, «свою любовь» —
     48.10%, ровно как в макете. Обе строки сошлись на одном кегле. */
  font-size:clamp(24px,8.86vw,47px);
  font-weight:100;
  line-height:.98;
  letter-spacing:0;
  color:var(--cream);
}
/* Строки ломаются только по <span>, никогда по ширине:
   иначе на 320px заголовок расползается в три строки */
.caption h1 span{display:block;white-space:nowrap}

.caption .sub{
  margin-top:1.35em;
  /* 2.849vw: ink 66.51% ширины. Кегль мелкий, поэтому здесь поправка
     на iOS нужна — там подставляется SF Pro Text, он шире Display. */
  font-size:clamp(9px,2.849vw,14px);
  /* SF Pro Display Ultralight (200), прямой, без трекинга. */
  font-weight:200;
  font-style:normal;
  line-height:1.25;
  letter-spacing:0;
  color:var(--sub);
  text-shadow:0 1px 6px rgba(58,46,38,.35);
}

/* Появление первого экрана: ни пера, ни ступеней — надпись на плите,
   заголовок и подзаголовок вместе медленно проступают из прозрачности.
   Анимируется сам .copy, поэтому все три блока идут одной волной.
   Уход отсюда перебивает .copy.is-leaving: у него выше специфичность. */
.copy--1{transition:opacity 1.8s linear}

/* ============================================================
   Экран 2 — «От автора»
   ============================================================ */
.s2-title{
  position:absolute;
  left:49.54%;
  top:var(--s2-title-y);
  -webkit-transform:translate(calc(-50% + .0035em),0) translateZ(0);
  transform:translate(calc(-50% + .0035em),0) translateZ(0);
  width:86%;
  text-align:center;
  font-family:'Betmo',cursive;
  /* 12.648% ширины кадра — ink 84.59% x 9.14%, по новому 02_Ref с текстом.jpg */
  font-size:clamp(32px,calc(var(--fw) * .126476),84px);
  letter-spacing:.0069em;
  line-height:1.15;
  white-space:nowrap;
  color:var(--brown);
  transition:opacity .9s ease .2s;
}

/* ============================================================
   Экран 3 — белый лист, текста пока нет
   ============================================================ */
/* Метрики сняты с 03_экран референс.jpg (1080x1920):
   поля 8.7% ширины, шаг строк 4.722% ширины, кегль 3.06%,
   текст начинается на 12.19% высоты, карточка автора — на 87.55%. */
.copy--3{
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
}

.copy--3.is-active{pointer-events:auto}   /* .copy по умолчанию не ловит касания */

.s3-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12.19svh 8.7vw max(4svh, calc(env(safe-area-inset-bottom,0px) + 16px));
  /* область читается пальцем — ей нужны нативные жесты,
     в отличие от остальной сцены, где touch-action выключен */
  touch-action:pan-y;
}

.s3-text{-webkit-text-size-adjust:100%;text-size-adjust:100%}

.s3-text p{
  color:#685538;
  /* Кегль подобран по переносам строк макета. Считать пришлось по метрикам
     iOS, а не десктопа: при мелком кегле -apple-system подставляет SF Pro
     Text, а он шире, чем Display. На 3.935% первая строка не влезала в
     колонку 2.5 пикселя и ломалась на слово раньше, утягивая весь абзац. */
  font-size:clamp(13px,3.85vw,21px);
  line-height:1.2;            /* шаг строк 51px при кегле 42.5% */
  text-align:left;
  /* WebKit самовольно увеличивает шрифт в длинных абзацах внутри
     прокручиваемых блоков. Объявления на <html> ему тут мало —
     на iOS текст раздувался в полтора раза и ломал все переносы. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.s3-text p + p{margin-top:1.06em}   /* отступ между абзацами 45px в макете */

/* Карточка автора: пилюля со скруглением по высоте, фото выступает слева.
   Стоит по центру колонки, кликабельна и ведёт в инстаграм. */
.s3-author{
  display:flex;
  width:-webkit-fit-content;
  width:fit-content;
  align-items:center;
  gap:3.1vw;
  margin:5.4svh auto 0;
  padding:1.15vw 6.2vw 1.15vw 1.15vw;
  border-radius:999px;
  background:#fdf7f2;
  border:1px solid #f0e7dd;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s linear, -webkit-transform .2s var(--ease);
  transition:background .2s linear, transform .2s var(--ease);
}
.s3-author:active{
  background:#f7efe6;
  -webkit-transform:scale(.985);
  transform:scale(.985);
}

/* Кольца-волны расходятся от фото: единственный намёк, что карточка
   нажимается. Держим их еле заметными — это лист с текстом, а не баннер. */
.s3-ava{
  position:relative;
  display:block;
  flex:none;
  width:13.3vw;
  max-width:64px;
  height:13.3vw;
  max-height:64px;
}
.s3-wave{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border-radius:50%;
  border:1px solid rgba(134,97,70,.55);
  opacity:0;
  pointer-events:none;
  -webkit-animation:ripple 3.4s ease-out infinite;
  animation:ripple 3.4s ease-out infinite;
}
.s3-wave--2{
  -webkit-animation-delay:1.7s;
  animation-delay:1.7s;
}
@-webkit-keyframes ripple{
  0%  {opacity:.05;-webkit-transform:scale(1)}
  35% {opacity:.05}
  100%{opacity:0;-webkit-transform:scale(1.65)}
}
@keyframes ripple{
  0%  {opacity:.05;transform:scale(1)}
  35% {opacity:.05}
  100%{opacity:0;transform:scale(1.65)}
}

.s3-avatar{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #ece2d6;
  background:#eee;
}
.s3-who{display:flex;flex-direction:column;gap:.15em;min-width:0}
.s3-name{
  color:#6b6157;
  font-size:clamp(13px,4.1vw,22px);
  line-height:1.15;
  white-space:nowrap;
}
.s3-handle{
  color:#8a7a5e;
  font-size:clamp(10px,3.1vw,17px);
  line-height:1.15;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
  white-space:nowrap;
}

/* Приписка под карточкой автора — добавлена по «03_экран референс.jpg»:
   тише самой карточки, поэтому взят приглушённый --sub, а не текстовые
   цвета экрана. */
.s3-dedication{
  margin:2.3svh auto 0;
  max-width:82%;
  text-align:center;
  color:var(--sub);
  /* -20% от clamp(11px,3.4vw,18px) */
  font-size:clamp(9px,2.72vw,14px);
  line-height:1.3;
  /* Раньше строка ломалась вручную через <br>; с новым текстом та точка
     перестала подходить, а сам по себе он рвётся как 78%/22% — внизу
     повисает одно «упражнение». balance раскладывает обе строки ровно.
     Safari < 17.5 свойство игнорирует и переносит по-старому. */
  text-wrap:balance;
}


/* ============================================================
   Экран 4 — «Прежде чем начать»
   Метрики с «04 экран референс.jpg» (1080x1920): заголовок ink
   7.41%..88.70% по ширине и 4.95%..15.94% по высоте, текст с 15.10%,
   цитата 55.26%..58.85%, верхняя кромка фото конверта — 62.40%.
   Текст живёт только над фотографией и туда же прокручивается.
   ============================================================ */
.copy--4{
  left:0;
  right:0;
  top:0;
  bottom:37.6%;              /* 100% - 62.40%: ниже начинается конверт */
  display:flex;
  flex-direction:column;
}
.copy--4.is-active{pointer-events:auto}

.s4-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  /* Верхнее поле по новому макету: ink заголовка встаёт на 6.98% высоты.
     Раньше поле приходилось поджимать (4.1%), чтобы текст с абзацем P.S.
     помещался над конвертом; после того как ушла цитата про альбом,
     место есть. Меняете текст — проверьте, что на 16:9 блок по-прежнему
     влезает без прокрутки. */
  padding:6.3svh 8.7vw 1.4svh;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Ссылка на альбом и долгий тап по тексту при скролле иногда триггерили
     системное превью/шаринг ссылки (iOS) — на этом экране оно не нужно. */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* Заголовок набран тем же начертанием, что заголовки листов
   (.sheet-head, .s8-head), но крупнее: в этом макете кегль 64px
   на кадре 1080 — вынесен отдельно от общего .sheet-head. */
.s4-head{
  font-size:clamp(20px,5.926vw,64px);
  font-weight:300;
  line-height:1.2;
  color:#685030;
  margin-bottom:.45em;
}

.s4-text p{
  color:#665438;
  /* тот же кегль и шаг, что на третьем экране: шаг строк в обоих
     макетах одинаковый — 4.722% ширины */
  font-size:clamp(13px,3.85vw,21px);
  line-height:1.2;
  text-align:left;
}
.s4-text p + p{margin-top:1.06em}
/* 400 на фоне базового Light (300) почти не читался жирным —
   поднято до Bold, чтобы акценты реально выделялись. */
.s4-text b{font-weight:700}

/* Цитата про альбом убрана из разметки вместе с новым макетом;
   правила оставлены, чтобы её можно было вернуть одним движением. */
.s4-quote{
  margin-top:1.2em;
  color:#675437;
  font-style:italic;
  /* 3.253% ширины: длинная строка цитаты занимает 62.04% */
  font-size:clamp(11px,3.253vw,18px);
  line-height:1.28;
}
.s4-album{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:from-font;
  -webkit-tap-highlight-color:transparent;
}


/* ============================================================
   Сургучная печать на конверте

   Печать нарисована на фоновом кадре (rest-04.jpg, 720x1276):
   сургуч занимает X 30.8%..70.8%, Y 72.7%..93.7% кадра, кромка
   конверта — 61.9%. Поэтому и надписи, и кликабельный кружок
   привязаны к КАДРУ: на вытянутых телефонах экранная привязка
   увела бы их с сургуча.
   ============================================================ */
.copy--seal{
  /* ---- метка сургуча ----
     Центр и диаметр диска измерены по самому кадру rest-04.jpg
     (720x1276): центр (373, 1078) px, диаметр ~272 px. Всё, что
     нажимается, светится и расходится вокруг печати, привязано
     ТОЛЬКО к этим трём числам — поэтому на любой пропорции экрана
     оно остаётся ровно на сургуче и не съезжает.
     Меняете кадр — перемерьте центр и диаметр здесь, и остальное
     подтянется само. */
  --seal-x:50.8%;   /* центр печати по ширине кадра. Геометрия кадра даёт
                       51.8% (373/720), но справа к сургучу вплотную
                       подходит кромка клапана конверта, и свечение на неё
                       заезжало — уводим на 1% левее замеренного центра. */
  --seal-y:84.5%;   /* центр печати по высоте кадра  (1078/1276) */
  --seal-d:37.8%;   /* диаметр сургуча в долях ШИРИНЫ кадра (272/720) */

  pointer-events:none;
  /* Долгий тап по надписям иногда триггерил системное выделение
     текста с шарингом (iOS) — на этом экране оно не нужно. */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.copy--seal.is-active{pointer-events:none}   /* ловит касания только кнопка */

.seal-open{
  position:absolute;
  left:50%;
  /* Текст сменился на «Послание для тебя» (было «Тебе послание»),
     заодно подняли и саму строку: ink теперь 63.65%..70.68% высоты
     кадра, центр 67.2% (было 70.4%) — замер по «04 экран референс.jpg». */
  top:67.2%;
  -webkit-transform:translate(-50%,-50%) translateZ(0);
  transform:translate(-50%,-50%) translateZ(0);
  width:92%;
  text-align:center;
  font-family:'Betmo',cursive;
  /* кегль 113px на кадре 1080 в референсе */
  font-size:clamp(28px,calc(var(--fw) * .1046),56px);
  line-height:1;
  white-space:nowrap;
  color:#6a4f2c;
  /* Раньше писалась пером по буквам (.hand); теперь просто
     проявляется из прозрачности вместе с экраном — медленно. */
  opacity:0;
  transition:opacity 2.4s linear;
}
.copy--seal.is-active .seal-open{opacity:1}

/* Подсказка «вдавлена» в бумагу: тёмная тень сверху даёт глубину
   выемки, светлая снизу — блик на её нижней кромке. Свет считаем
   падающим сверху, как на самом конверте. Раньше строка лежала ниже
   печати, у края конверта (97.6%); в обновлённом макете её подняли
   вплотную под рукописную строку, заметно выше печати: ink 70.73%..
   72.86%, центр 71.8% — замер по «04 экран референс.jpg». */
.seal-hint{
  position:absolute;
  left:50%;
  top:71.8%;
  -webkit-transform:translate(-50%,-50%) translateZ(0);
  transform:translate(-50%,-50%) translateZ(0);
  width:92%;
  text-align:center;
  font-style:italic;
  font-weight:300;
  /* Кегль взят из фигмы: 30px на кадре 1080 = 2.78% ширины; границы
     clamp опущены в той же пропорции. Прежние 3.85% (41.6px) были
     подобраны на глаз по рендеру и оказались крупнее макета.
     Осторожно: сам «04 экран референс.jpg» нарисован ещё крупнее
     фигмовских 30 — по пикселям там заглавная 26px и x-height 19px,
     то есть кегль ~37px. Строка на сайте намеренно мельче картинки. */
  font-size:clamp(9px,calc(var(--fw) * .0278),15px);
  line-height:1.2;
  white-space:nowrap;
  color:#a2917c;
  text-shadow:
    0 -1px 1px rgba(96,78,58,.42),
    0 1px 0 rgba(255,253,248,.75);
}

/* Кнопка садится ровно на метку — её бокс и есть сам сургуч. */
.seal{
  position:absolute;
  left:var(--seal-x);
  top:var(--seal-y);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:var(--seal-d);
  aspect-ratio:1/1;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
/* Фолбэк для браузеров без aspect-ratio: квадрат держит padding */
@supports not (aspect-ratio:1/1){
  .seal{height:0;padding-bottom:var(--seal-d)}
}

/* Свечение отдельным слоем, а не box-shadow на самой кнопке: у кнопки
   есть :active-масштаб (sealTap), и тень масштабировалась бы вместе
   с ней. Бокс кнопки уже совпадает с сургучом, поэтому здесь просто
   inset:0 — никаких ручных сдвигов. */
.seal::before{
  content:'';
  position:absolute;
  left:0;top:0;right:0;bottom:0;
  border-radius:50%;
  pointer-events:none;
  /* Сургуч на кадре почти белый: чтобы стало понятно, что по нему
     стучат, добавляем еле заметное тёплое свечение. */
  -webkit-animation:sealGlow 2.8s ease-in-out infinite;
  animation:sealGlow 2.8s ease-in-out infinite;
}
@-webkit-keyframes sealGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(184,148,96,0)}
  50%    {box-shadow:0 0 26px 6px rgba(184,148,96,.28)}
}
@keyframes sealGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(184,148,96,0)}
  50%    {box-shadow:0 0 26px 6px rgba(184,148,96,.28)}
}

/* Отклик на касание: печать проседает, от неё расходится кольцо */
.seal.is-hit{
  -webkit-animation:sealTap .32s var(--ease);
  animation:sealTap .32s var(--ease);
}
@-webkit-keyframes sealTap{
  0%  {-webkit-transform:translate(-50%,-50%) scale(1)}
  40% {-webkit-transform:translate(-50%,-50%) scale(.94)}
  100%{-webkit-transform:translate(-50%,-50%) scale(1)}
}
@keyframes sealTap{
  0%  {transform:translate(-50%,-50%) scale(1)}
  40% {transform:translate(-50%,-50%) scale(.94)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

.seal-ring{
  position:absolute;
  /* Раньше здесь стоял ручной сдвиг (-9%/9%), потому что бокс кнопки
     не совпадал с сургучом на кадре. Теперь кнопка сама стоит по
     метке --seal-x/y/d, и кольца просто повторяют её бокс. */
  left:0;top:0;right:0;bottom:0;
  border-radius:50%;
  border:1px solid rgba(140,110,72,.5);
  opacity:0;
  pointer-events:none;
  -webkit-animation:ripple 3s ease-out infinite;
  animation:ripple 3s ease-out infinite;
}
.seal-ring--2{-webkit-animation-delay:1.5s;animation-delay:1.5s}

/* Палец подсказывает жест. Стоит на кромке сургуча, чтобы не закрывать
   вензель, и мягко постукивает. */
.seal-finger{
  position:absolute;
  right:2%;
  bottom:2%;
  display:block;
  color:#8a6f4c;
  opacity:.75;
  pointer-events:none;
  -webkit-animation:tapHint 2.8s ease-in-out infinite;
  animation:tapHint 2.8s ease-in-out infinite;
}
.seal-finger svg{display:block;width:7.4vw;max-width:34px;height:auto}
@-webkit-keyframes tapHint{
  0%,72%,100%{-webkit-transform:translate3d(0,0,0)}
  80%        {-webkit-transform:translate3d(0,-14%,0)}
  88%        {-webkit-transform:translate3d(0,6%,0)}
}
@keyframes tapHint{
  0%,72%,100%{transform:translate3d(0,0,0)}
  80%        {transform:translate3d(0,-14%,0)}
  88%        {transform:translate3d(0,6%,0)}
}

@media (prefers-reduced-motion:reduce){
  .seal,.seal::before,.seal-ring,.seal-finger,.s3-wave{
    -webkit-animation:none;
    animation:none;
  }
  .seal::before{box-shadow:0 0 20px 4px rgba(184,148,96,.22)}
}


/* ============================================================
   Экран 5 — письмо
   Метрики с «05_референс с текстом.jpg» (1080x1920). Рукописные
   здесь только заголовок и клятва внизу; само письмо набрано тем же
   печатным шрифтом, что остальные экраны, и «печатается» посимвольно.
   Внизу кадра облака, их кромка на 80.41% высоты — текст живёт
   строго над ней.
   ============================================================ */
.copy--5{
  left:0;
  right:0;
  top:0;
  bottom:19.6%;              /* 100% - 80.41%: ниже начинаются облака */
  display:flex;
  flex-direction:column;
}
.copy--5.is-active{pointer-events:auto}

.s5-scroll{
  position:relative;
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:3.6svh 4.4vw 2svh;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Заголовок больше не рукописный: в новом макете набран тем же
   начертанием, что заголовок четвёртого экрана (.s4-head). */
.s5-title{
  font-weight:300;
  /* Общий кегль заголовков: Light 64 на кадре 1080 */
  font-size:clamp(20px,5.926vw,64px);
  line-height:1.2;
  color:#6c593d;
  margin-bottom:.45em;      /* эталон — .s4-head */
}

.s5-text p{
  /* Кегль и интерлиньяж по эталону (.s4-text p) */
  font-size:clamp(13px,3.85vw,21px);
  line-height:1.2;
  color:#675437;
}
.s5-text p + p{margin-top:1.06em}
.s5-text b{font-weight:700}

/* Клятва теперь разбита на две строки, вторая крупнее и обе
   прижаты вправо — как в макете. */
.s5-vow1{
  margin-top:1.6em;
  font-family:'Betmo',cursive;
  font-size:clamp(19px,7.29vw,39px);
  line-height:1.3;
  white-space:nowrap;
  color:#52432c;
  text-align:right;
}
.s5-vow2{
  margin-top:.05em;
  font-family:'Betmo',cursive;
  font-size:clamp(20px,7.75vw,42px);
  line-height:1.3;
  white-space:nowrap;
  color:#52432c;
  text-align:right;
}
.s5-heart{
  display:block;
  width:12.87vw;
  max-width:70px;
  height:auto;
  margin:.1em 0 0 auto;      /* прижато вправо, как в макете */
}

/* ============================================================
   Экран 6 — «Я исполняю все твои желания»
   Метрики с «06_Референс с текстом.jpg» (1080x1920): блок стоит
   с 31.93% по 69.58% высоты, то есть примерно по центру — поэтому
   центрируем, а не прибиваем к верху: так он держится на любой высоте.
   ============================================================ */
.copy--6{
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
}
.copy--6.is-active{pointer-events:auto}

.s6-scroll{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:6svh 8.8vw;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Заголовок больше не рукописный: тонкое (Thin) начертание системного
   шрифта, кегль 64px на кадре 1080 — как на экранах 4–5. */
.s6-title{
  /* Общий кегль заголовков: Light 64 на кадре 1080. При Light строка
     занимает 77% ширины вместо прежних 74.35% — в поля укладывается. */
  font-weight:300;
  font-size:clamp(20px,5.926vw,64px);
  line-height:1.2;
  color:#856046;
  white-space:nowrap;
  margin-bottom:.45em;      /* эталон — .s4-head */
}

.s6-text p{
  color:#675438;
  /* Начертание общее для всей презентации — Light, как на четвёртом
     экране. Раньше здесь стоял Thin (100), и текст шестого экрана
     заметно выпадал из остальных. */
  font-weight:300;
  /* Раньше кегль был свой (3.543vw): в макете шаг строк этого экрана
     4.444% ширины против 4.722% у экранов 3–4. Теперь весь основной
     текст презентации набран одинаково, по эталону (.s4-text p). */
  font-size:clamp(13px,3.85vw,21px);
  line-height:1.2;
}
.s6-text p + p{margin-top:1.06em}
.s6-text b{font-weight:700}

.s6-quote{
  margin-top:1.9em;
  padding-left:2.4vw;
  color:#675438;
  font-style:italic;
  font-weight:400;
  font-size:clamp(14px,4.21vw,24px);
  line-height:1.28;
}



/* ============================================================
   Экран «6-7» — светящийся шар
   Метрики с «67 слайд текст референс.png» (1084x1920): рукописный
   заголовок на 12.0%..17.7% высоты, каомодзи на 18.2%..23.4%,
   подпись под шаром — 76.4%..80.4% (две строки). Шар лежит в фоне,
   поэтому надписи просто расставлены по этим отметкам.
   ============================================================ */
.copy--67{
  left:0;
  right:0;
  top:0;
  bottom:0;
  text-align:center;
}

.s67-title{
  position:absolute;
  left:2%;
  right:2%;
  top:12.1%;
  font-family:'Betmo',cursive;
  /* 8.55% ширины даёт ink 53.1% — как в макете */
  font-size:clamp(21px,8.55vw,46px);
  line-height:1.05;
  white-space:nowrap;
  color:#482b09;
}

/* Каомодзи набран не Betmo: японских знаков в нём нет, и подстановка
   рвала бы строку по разным шрифтам. Берём системный, но крупно —
   в макете он заметно больше заголовка. */
.s67-face{
  position:absolute;
  left:2%;
  right:2%;
  top:18.2%;
  font-size:clamp(24px,9.6vw,52px);
  font-weight:200;
  line-height:1.05;
  letter-spacing:.02em;
  white-space:nowrap;
  color:#482b09;
}

.s67-note{
  position:absolute;
  left:4%;
  right:4%;
  top:76.4%;
  font-size:clamp(12px,3.543vw,20px);
  line-height:1.35;
  color:#685538;
}


/* ============================================================
   Экран 7 — «Расплывчато / точно»
   Метрики с «07_Референс с текстом.jpg» (1080x1920).
   Пример-таблица в макете набрана посторонней гарнитурой
   с засечками; здесь она приведена к шрифтам презентации —
   отличается только начертанием, структура и цвета сохранены.
   ============================================================ */
.copy--7{
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
}
.copy--7.is-active{pointer-events:auto}

/* Заголовка на этом экране больше нет, а хвостовой абзац убран —
   в новом макете всё содержимое умещается в один экран телефона,
   и листать его не нужно. Прокрутка оставлена страховкой на самых
   низких экранах (16:9 с панелями Safari). */
.s7-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:6.25svh 7.5vw max(4svh, calc(env(safe-area-inset-bottom,0px) + 16px));
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.s7-text p{
  color:#675437;
  font-size:clamp(13px,3.85vw,21px);    /* эталон — .s4-text p */
  line-height:1.2;
}
.s7-text p + p{margin-top:1.06em}
.s7-text b{font-weight:700}

.s7-lead{
  margin-top:2.1em;
  margin-bottom:.75em;
  color:#675438;
  font-weight:400;
  /* 4.11vw: ink 58.43% ширины. Считано по метрикам iOS —
     системный шрифт там шире десктопного */
  font-size:clamp(13px,4.11vw,23px);
  line-height:1.2;
}

/* --- пример: расплывчато / точно ---
   Карточка обведена рамкой, разделителя между колонками нет —
   в финальном макете колонки разделены только воздухом.
   X 8.70%..92.50% ширины, Y 54.79%..78.90% высоты. */
.s7-table{
  position:relative;
  margin-left:1.2vw;                       /* карточка сдвинута правее текста */
  width:calc(100% - 1.2vw);
  background:#fdf8f4;
  border:1px solid #ddd4c6;
  border-radius:8px;
  padding:2.1svh 2.78vw 2.4svh;
}
/* Линейка между колонками идёт во всю высоту карточки, включая её
   внутренние отступы, — поэтому она псевдоэлемент самой карточки,
   а не граница ячейки. X 39.35% ширины экрана = 36.6% ширины карточки. */
.s7-table::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:36.6%;
  width:1px;
  background:#ddd4c6;
}
.s7-row{
  display:grid;
  grid-template-columns:39.5% 1fr;
  align-items:start;
  padding:.55em 0;
}
.s7-vague{
  color:#99938b;
  font-size:clamp(10px,2.34vw,14px);
  line-height:1.32;
}
.s7-exact{
  color:#675438;
  font-size:clamp(10px,2.34vw,14px);
  line-height:1.32;
}
.s7-row--head{padding-bottom:.9em}
.s7-row--head .s7-vague,
.s7-row--head .s7-exact{
  color:#9d8448;
  font-size:clamp(10px,2.77vw,16px);
  letter-spacing:0;
  text-transform:none;
  line-height:1.25;
}


/* ============================================================
   Экран 8 — «Задание 1»
   Метрики с «08_Референс с текстом.png» (1080x1920).
   Кегли решены по ink-ширине конкретных строк макета; для
   системного шрифта применён множитель 0.978 — поправка на iOS.
   ============================================================ */
.copy--8{
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
}
.copy--8.is-active{pointer-events:auto}

.s8-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  /* Верхнее поле больше макетного: у Betmo росчерк «С» уходит заметно
     выше строки, а прокручиваемый блок режет всё, что вылезло за его
     padding-box. На 7.08svh заголовок «Список 1» срезало по верху. */
  padding:9.2svh 8.8vw max(4svh, calc(env(safe-area-inset-bottom,0px) + 16px));
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color:#685538;
}

.s8-title{
  font-family:'Betmo',cursive;
  font-size:clamp(22px,9.346vw,50px);   /* ink 35.46% ширины */
  line-height:1.05;
  color:#866146;
  white-space:nowrap;
  /* та же причина, что у верхнего поля: петля «С» выходит влево */
  margin:0 0 .35em .14em;
}

.s8-head{
  /* Общий кегль заголовков: Light 64 на кадре 1080 */
  font-size:clamp(20px,5.926vw,64px);
  font-weight:300;
  line-height:1.2;
  margin-bottom:.45em;      /* эталон — .s4-head */
}

.s8-text p{
  /* Раньше кегль был свой (3.423vw, ink 81.11% на строке макета) —
     самый мелкий в презентации. Теперь по эталону (.s4-text p). */
  font-size:clamp(13px,3.85vw,21px);
  line-height:1.2;
}
.s8-text p + p{margin-top:1.06em}
.s8-text b{font-weight:700}
.s8-text + .s8-quote{margin-top:1.5em}
.s8-quote + .s8-text{margin-top:1.6em}

/* Цитата с вертикальной чертой слева — черта выходит за строку
   сверху и снизу, как в макете (32.03%..37.29% против текста 33.80%..35.83%) */
.s8-quote{
  position:relative;
  padding-left:3.6vw;
  font-size:clamp(13px,3.825vw,21px);
  font-weight:400;
  line-height:1.25;
}
.s8-quote::before{
  content:'';
  position:absolute;
  left:0;
  top:-.55em;
  bottom:-.55em;
  width:2px;
  background:#685538;
}

.s8-note{
  margin-top:1.7em;
  font-style:italic;
  font-size:clamp(10px,2.676vw,15px);
  line-height:1.245;
}

/* Подпись под текстом: рукописная строка и смайл поменьше справа.
   Смайл — отдельный элемент, потому что внутри .hand не должно быть
   ничего, кроме одного текстового узла (разбивка на строки иначе
   не работает), а кегль у него свой. */
.s8-sign-row{position:relative}

.s8-sign{
  /* Отступ считается от кегля самой подписи, а он крупный (9.19vw),
     поэтому 1.5em давали зазор в полсотни пикселей — подпись висела
     слишком низко под сноской. Смайл справа привязан к .s8-sign-row
     абсолютом и поднимается вместе со строкой. */
  margin-top:1em;
  font-family:'Betmo',cursive;
  /* 9.19% ширины: ink строки «Пиши Я подглядываю» встаёт на 65.9%,
     как в макете. Раньше строка была короче («Пиши Я смотрю») и стоял
     кегль 8%. */
  font-size:clamp(24px,9.19vw,49px);
  line-height:1.15;
  white-space:nowrap;
  color:#685538;
}

/* Смайл: тот же Betmo, но 3.53% ширины против 9.19% у строки — ink
   10.0% по ширине и 2.76% по высоте кадра, как в макете. Привязан
   к правому краю: так гарантированно не съедет, если строка слева
   окажется другой ширины. */
.s8-smile{
  position:absolute;
  right:4.94%;
  bottom:.58em;
  font-family:'Betmo',cursive;
  font-size:clamp(9px,3.64vw,20px);
  line-height:1;
  white-space:nowrap;
  color:#685538;
}


/* ============================================================
   Экран 9 — «Сомни свой список в комочек»
   Метрики с «09 слайд - референс текст.jpg» (1080x1920).
   Бумажный комочек — часть фона (последний кадр перехода) и стоит
   на 43.2%..55.2% высоты; кадр покоя сходится с макетом до половины
   процента, поэтому надписи просто расставлены вокруг него по
   отметкам макета, а не сложены в общий поток.
   ============================================================ */
.copy--9{
  left:0;
  right:0;
  top:0;
  bottom:0;
  text-align:center;
}

.s9-title{
  position:absolute;
  left:2%;
  right:2%;
  top:28.9%;
  font-family:'Betmo',cursive;
  /* Кегль подобран заново под текущий текст: из строки ушло «Теперь»,
     и на прежних 8.23% ink давал 58% вместо 66.9% («09 слайд —
     референс текст.jpg», замер по пикселям). 9.4% возвращают строку
     к макетной ширине; границы clamp подняты в той же пропорции. */
  font-size:clamp(23px,9.4vw,50px);
  line-height:1.15;
  color:#482b09;
  white-space:nowrap;
}

/* Ни дуг ◡, ни стяжки ‿ в Betmo нет — их подставляет системный шрифт,
   ровно как и в исходном макете. Кегль здесь НЕ подгонялся под общую
   ширину строки: в макете ‿ уже дуги (34px против 48px), а фолбэк
   рисует её шире их, и вся связка выходит на треть длиннее. Ужать её
   до макетной ширины значило бы уменьшить и сами глаза-дуги, которые
   сейчас совпадают с макетом с точностью до 10%. */
.s9-face{
  position:absolute;
  left:2%;
  right:2%;
  top:33.3%;
  font-family:'Betmo',cursive;
  font-size:clamp(20px,8.23vw,44px);
  line-height:1.2;
  color:#482b09;
  white-space:nowrap;
}

.s9-note{
  position:absolute;
  left:8.5%;
  right:8.5%;
  top:75.3%;
  font-size:clamp(12px,3.543vw,20px);
  line-height:1.36;
  color:#675437;
}
.s9-note b{font-weight:700}

/* Кот нарисован от руки, стоит справа: X 73.1%..91.7% ширины,
   Y 56.3%..67.2% высоты — вырезан из макета с прозрачным фоном */
.s9-cat{
  position:absolute;
  left:73.1%;
  top:56.3%;
  width:18.6%;
  height:auto;
  opacity:0;
  -webkit-animation:catIn .6s ease 1.2s forwards;
  animation:catIn .6s ease 1.2s forwards;
}
@-webkit-keyframes catIn{from{opacity:0;-webkit-transform:translateY(6px)}to{opacity:1;-webkit-transform:translateY(0)}}
@keyframes catIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .s9-cat{opacity:1;-webkit-animation:none;animation:none}
}


/* ============================================================
   Экран 10 — «Я причина изменений»
   Метрики с «10_Референс по тексту.jpg» (1080x1920).
   Фон — порванная бумага с лицом, последний кадр перехода.
   Сверху заклинание, слева внизу — обещание рассказать про него
   в конце. Подписи «Афродита» в новом макете больше нет.
   ============================================================ */
.copy--10{
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.s10-lead{
  position:absolute;
  left:0;
  right:0;
  top:7.3%;
  padding:0 6vw;
  text-align:center;
  font-size:clamp(11px,3.24vw,18px);
  line-height:1.2;
  color:#675437;
}
.s10-lead b{font-weight:700}

.s10-spell{
  position:absolute;
  left:2%;
  right:2%;
  top:10.4%;
  text-align:center;
  font-family:'Betmo',cursive;
  /* 8.9% ширины даёт ink 76.9% — как в макете */
  font-size:clamp(22px,8.9vw,48px);
  line-height:1.2;
  white-space:nowrap;
  color:#472a08;
}

/* Привязано к вьюпорту, а не к кадру: это типографика на листе,
   ей важнее ровное поле от края экрана */
.s10-tease{
  position:absolute;
  left:10%;
  right:6%;
  top:87.6%;
}
.s10-teaseTitle{
  font-size:clamp(13px,4.07vw,23px);
  font-weight:300;
  line-height:1.15;
  color:#675437;
}
.s10-teaseText{
  margin-top:.3em;
  font-size:clamp(9px,2.6vw,15px);
  line-height:1.2;
  color:#6a583c;
}


/* ============================================================
   Экраны 11–14 — текстовые листы на белом
   Метрики сняты с четырёх макетов и совпали между собой:
   поле 8.8% ширины, шаг строк 2.50% высоты (тот же кегль, что
   на 6–7 экранах), заголовок 4.48% ширины на всех трёх листах,
   где он есть. Поэтому один общий стиль, а не четыре копии.
   ============================================================ */
.copy--sheet{
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
}
.copy--sheet.is-active{pointer-events:auto}

.sheet{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:6.67svh 8.8vw max(4svh, calc(env(safe-area-inset-bottom,0px) + 16px));
  color:#675438;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* Четырнадцатый лист стоит по центру, а не от верха: в макете его
   блок занимает 31.5%..71% высоты */
.copy--sheet-mid .sheet{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:6svh;
}

.sheet-title{
  font-family:'Betmo',cursive;
  font-size:clamp(22px,9.28vw,50px);   /* ink 27.2% / 52.0% / 57.3% по макетам */
  line-height:1.1;
  color:#866146;
  white-space:nowrap;
  margin-bottom:.5em;
}

.sheet-head{
  /* Общий кегль заголовков: Light 64 на кадре 1080 */
  font-size:clamp(20px,5.926vw,64px);
  font-weight:300;
  line-height:1.2;
  margin-bottom:.45em;      /* эталон — .s4-head */
}

.sheet-text p{
  font-size:clamp(13px,3.85vw,21px);    /* эталон — .s4-text p */
  line-height:1.2;
}
.sheet-text p + p{margin-top:1.06em}
.sheet-text b{font-weight:700}
.sheet-text--after{margin-top:1.9em}

/* Цитата с вертикальной чертой слева — как на восьмом экране */
.sheet-quote{
  position:relative;
  margin:1.7em 0 0;
  padding-left:3.6vw;
  font-size:clamp(13px,3.813vw,21px);
  font-weight:400;
  line-height:1.25;
}
.sheet-quote::before{
  content:'';
  position:absolute;
  left:0;
  top:-.5em;
  bottom:-.5em;
  width:2px;
  background:#685538;
}

.sheet-label{
  margin-top:1.7em;
  font-size:clamp(12px,3.452vw,19px);
  line-height:1.25;
}

.sheet-list{
  margin:1.1em 0 0;
  padding-left:5.6vw;
  list-style:decimal;
}
.sheet-list li{
  font-size:clamp(12px,3.543vw,20px);
  line-height:1.28;
  padding-left:1.4vw;
}
.sheet-list li + li{margin-top:.25em}


/* --- дополнения к листам: экраны 15–19 --- */

/* Заголовок шестнадцатого листа раньше выделялся жирным; теперь
   все заголовки одинаковые — Light 64, и модификатор не нужен. */

/* Курсивное примечание (16) и выделенный блок (18) */
.sheet-note{
  margin-top:2.2em;
  font-style:italic;
  font-size:clamp(11px,3.2vw,17px);
  line-height:1.3;
}
.sheet-note b{font-weight:700}
/* В новом макете «Важно…» обведено рамкой со всех сторон */
.sheet-callout{
  margin-top:2.6em;
  padding:1.15em 4vw;
  border:1px solid #9a9188;
  font-size:clamp(12px,3.543vw,20px);
  line-height:1.28;
}
.sheet-callout b{font-weight:700}

/* Юридическая сноска под кнопкой в инстаграм */
.sheet-legal{
  margin-top:.9em;
  text-align:center;
  font-size:clamp(7px,1.85vw,10px);
  line-height:1.25;
  color:#b5aa9c;
}

/* Пятнадцатый: улыбка и подпись под вопросом */
.s15-smile{
  margin-top:2.6em;
  text-align:center;
  font-size:clamp(26px,9vw,48px);
  font-weight:200;
  line-height:1;
  color:#675437;
}
.s15-sign{
  margin-top:.35em;
  text-align:center;
  font-family:'Betmo',cursive;
  /* Была самой мелкой из рукописных строк (7.2vw) и терялась под
     вопросом. Поднята до кегля остальных подписей — тот же 9.19vw,
     что у «Пиши Я подглядываю» на восьмом экране. */
  font-size:clamp(23px,9.19vw,49px);
  line-height:1.15;
  white-space:nowrap;
  color:#866146;
}

/* Подписи от руки внизу листа */
.sheet-sign{
  margin-top:1.1em;
  font-family:'Betmo',cursive;
  font-size:clamp(16px,7.84vw,42px);
  line-height:1.15;
  color:#866146;
  white-space:nowrap;
}
.sheet-sign--right{text-align:right}

/* Семнадцатый: карточка с римскими пунктами.
   В макете набрана гарнитурой с засечками — приведена к нашим шрифтам.
   Карточка X 8.43%..91.20%, разделители #dacaa6. */
.steps{
  margin:1.6em 0 0;
  padding:2.4svh 4.6vw;
  list-style:none;
  background:#f7f3ea;
}
.steps li{
  display:grid;
  grid-template-columns:7.2vw 1fr;
  column-gap:1.6vw;
  align-items:start;
  padding:1.1em 0;
}
.steps li + li{border-top:1px solid #dacaa6}
.steps-num{
  color:#ab8b3d;
  font-size:clamp(11px,3.2vw,17px);
  line-height:1.32;
  text-align:center;
}
.steps-body{
  color:#2c251c;
  font-size:clamp(11px,3.446vw,19px);
  line-height:1.32;
}
.steps-body b{font-weight:700}

/* Стрелка .s17-arrow убрана вместе с подписью под ней: по референсу
   лист семнадцатого экрана заканчивается абзацем «Возвращайся к
   спискам…». Правило удалено, чтобы не оставлять мёртвый стиль —
   картинка assets/img/arrow.png осталась на месте. */

/* Девятнадцатый: кнопка в инстаграм */
.sheet-btn{
  display:block;
  /* 38.24vw — доля ЭКРАНА, как в макете. В процентах она считалась
     бы от колонки листа и выходила заметно уже. */
  width:38.24vw;
  min-width:132px;
  max-width:230px;
  margin:2.6em auto 0;
  padding:1.5svh 2vw;
  border:1px solid #f0e7dd;
  border-radius:4px;
  background:#fdf8f4;
  color:#675438;
  /* 2.738vw: надпись занимает 27.5% ширины, как в макете.
     Раньше здесь стояла ширина самой кнопки — текст переносился. */
  font-size:clamp(10px,2.738vw,15px);
  line-height:1.2;
  white-space:nowrap;
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.sheet-btn:active{background:#f7f0e8}

/* ============================================================
   Экран-зеркало между 17 и 18
   Метрики с «1718_слайд Референс по тексту и дазайну.jpg».
   Рамка нарочно пустая: картинка внутри неё — отражение читательницы
   в чёрном стекле телефона, рисовать там нечего.
   ============================================================ */
.copy--mirror{
  left:0;
  right:0;
  top:0;
  bottom:0;
  padding:0 8.8vw;
  color:var(--cream);
}

.mirror-lead{
  position:absolute;
  left:8.8vw;
  right:8.8vw;
  /* Текст на два абзаца, как в референсе, — старт выше, чтобы на
     коротких экранах он не наезжал на рамку */
  top:4.2%;
  font-size:clamp(12px,3.543vw,20px);
  line-height:1.3;
  color:#cfc4b6;
}
.mirror-lead b{font-weight:700;color:var(--cream)}

/* Рамка — одна сплошная обводка со скруглёнными углами, замерено по
   пикселям «1718_слайд Референс по тексту и дазайну.jpg» (1080x1920):
   обводка 12–13px (1.1% ширины кадра), радиус угла ~6px (0.56%).
   Рамка в референсе не по центру: слева 94px (8.7%), справа 139px
   (12.9%) — то есть смещена влево. Низ рамки — 300px (15.6%) —
   не менялся ни разу, весь ход у верхней кромки. Сначала из второго
   абзаца убрали два предложения, текст освободил место, и верх подняли
   с 482px (25.1%) до 370px (19.27%). Теперь во второй абзац вернули
   «присмотрись внимательно в рамку, кого ты там видишь?», он снова
   занял строку — и верх опустили до 433px (22.55%). Рамка стала ниже
   ростом на ту же разницу. */
.mirror-box{
  position:absolute;
  left:8.8vw;
  right:12.9vw;
  top:22.55%;
  bottom:15.6%;
  border:clamp(2px,1.1vw,4px) solid #f3e0c8;
  border-radius:3px;
}

.mirror-foot{
  position:absolute;
  left:0;
  right:0;
  bottom:12%;
  text-align:center;
  font-size:clamp(11px,3.24vw,18px);
  line-height:1.2;
  color:#cfc4b6;
}
.mirror-foot b{font-weight:700;color:var(--cream)}

.mirror-spell{
  position:absolute;
  left:2%;
  right:2%;
  bottom:5.6%;
  text-align:center;
  font-family:'Betmo',cursive;
  font-size:clamp(22px,8.9vw,48px);
  line-height:1.2;
  white-space:nowrap;
  color:#f3e0c8;
}


/* ============================================================
   Финальный экран — бабочки
   Метрики с «20 референс по тексту.jpg» (1080x1920). Белая плашка
   под кнопкой впечатана в саму картинку (X 29.4%..67.4%,
   Y 78.0%..83.2% кадра), поэтому кнопка привязана к КАДРУ и просто
   ложится на неё: даже если промахнётся на пиксель, белое по белому
   не видно.
   ============================================================ */
.copy--20{pointer-events:none}

.s20-title{
  position:absolute;
  left:3%;
  right:3%;
  top:4.9%;
  text-align:center;
  font-family:'Betmo',cursive;
  /* Текст сменился на «Я причина изменений» (было «Помни моя
     хорошая») — при прежнем кегле 9.1% ink давал только 62.9% вместо
     нужных 76.2% (замер по «20 референс по тексту.jpg»), новая строка
     у Betmo уже прежней. Подобрано заново под текущий текст. */
  font-size:clamp(28px,calc(var(--fw) * .11),58px);
  line-height:1.1;
  white-space:nowrap;
  color:#675437;
}

/* Новый макет: цитата выключена по левому краю (не по центру, как
   было раньше) — все строки начинаются от одного отступа 8.8%. */
.s20-quote{
  position:absolute;
  left:8.8%;
  /* 8.8% справа трогать нельзя: на 20:9 кадр шире экрана, и эта
     граница ложится ровно на правый край телефона. Расширишь —
     перенос уедет за пределы видимой области. */
  right:8.8%;
  top:13%;
  text-align:left;
  font-style:italic;
  font-size:clamp(11px,calc(var(--fw) * .0333),18px);
  line-height:1.3;
  /* Из-за чего строка ломалась: iOS раздувает кегль в блоках, которые
     считает основным текстом, и цитата вылезала за кадр — «может»
     срывалось на отдельную строку, хотя в десктопном превью всё
     влезало. Остальные текстовые блоки в файле уже прибиты этим же
     правилом поштучно, цитату пропустили. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Перенос задан вручную: <br> после запятой делит цитату на две
     почти равные половины (285px против прежних 318px в самой длинной
     строке — запас до края вырос с 1.13x до 1.26x). Если на каком-то
     экране половина всё же не влезет, balance разложит её пополам,
     а не оставит одно слово внизу; Safari < 17.5 свойство игнорирует
     и переносит по-старому. */
  text-wrap:balance;
  color:#675437;
}

/* Атрибуция цитаты — новый элемент, которого раньше не было.
   Кегль замерен по x-height букв относительно цитаты: 25px против
   10.8px на кадре 1080, то есть ~43% (.0333 / 2.31 = .0144). */
.s20-attrib{
  position:absolute;
  left:8.8%;
  right:8.8%;
  top:19.6%;
  text-align:left;
  font-size:clamp(9px,calc(var(--fw) * .0144),13px);
  line-height:1.35;
  color:#675437;
}

.s20-btn{
  position:absolute;
  left:29.4%;
  top:78%;
  width:38%;
  height:5.2%;
  padding:0 1vw;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#6f5c41;
  font-family:inherit;
  font-size:clamp(10px,calc(var(--fw) * .0287),16px);
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  -webkit-animation:btnBreathe 3s ease-in-out infinite;
  animation:btnBreathe 3s ease-in-out infinite;
}
.s20-btn:active{background:#f6f1ea}
@-webkit-keyframes btnBreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(150,124,92,0)}
  50%    {box-shadow:0 0 20px 5px rgba(150,124,92,.22)}
}
@keyframes btnBreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(150,124,92,0)}
  50%    {box-shadow:0 0 20px 5px rgba(150,124,92,.22)}
}
@media (prefers-reduced-motion:reduce){
  .s20-btn{-webkit-animation:none;animation:none}
}


/* ============================================================
   Письмо от руки
   Каждая строка проявляется слева направо с постоянной скоростью
   пера, строки идут по очереди. Настоящую отрисовку штриха дал бы
   только шрифт с осевыми контурами — у Betmo их нет, поэтому здесь
   последовательное раскрытие: для связного курсива читается как
   бегущее перо.
   Скорость и паузы задаёт JS через --dur и --del на каждой строке.
   ============================================================ */
.hand-line{
  display:block;
  /* Запас со всех сторон: у Betmo росчерки выходят за обводку строки —
     заглавные вверх, петли вниз и вправо, «П» и «Д» влево. Без запаса
     клип срезал верх заглавных и превращал «П» в две палочки.
     109% справа при -9% слева даёт нулевую ширину: иначе у ещё не
     написанной строки торчал бы хвостик. */
  /* Хватает ли -30% сверху, чтобы клип не срезал заглавные: базовая
     линия стоит на L/2 + 0.2735em от верха строки, чернила заглавной
     поднимаются на 1.030em над ней, клип даёт 0.30L запаса. Неравенство
     сходится при line-height >= 0.95em — у всех рукописных строк здесь
     от 1.0 до 1.3, так что клип чист. Причина обрезанных заглавных была
     не тут, а в метриках шрифта (см. @font-face наверху). */
  -webkit-clip-path:inset(-30% 109% -30% -9%);
  clip-path:inset(-30% 109% -30% -9%);
}
.hand-line.is-writing{
  -webkit-animation:write var(--dur,.8s) linear var(--del,0s) forwards;
  animation:write var(--dur,.8s) linear var(--del,0s) forwards;
}
/* Отрицательные отступы по бокам: у Betmo росчерки выходят за обводку
   строки — заглавная «П» влево, хвосты петель вправо. Без запаса
   первая буква срезается по вертикали, последняя петля обрубается. */
@-webkit-keyframes write{
  from{-webkit-clip-path:inset(-30% 109% -30% -9%)}
  to  {-webkit-clip-path:inset(-30% -4% -30% -9%)}
}
@keyframes write{
  from{clip-path:inset(-30% 109% -30% -9%)}
  to  {clip-path:inset(-30% -4% -30% -9%)}
}
/* Пока строки не разбиты (шрифт ещё грузится) — текст не мигает */
.hand-line.is-done{
  -webkit-animation:none;
  animation:none;
  -webkit-clip-path:inset(-30% -4% -30% -9%);
  clip-path:inset(-30% -4% -30% -9%);
}

@media (prefers-reduced-motion:reduce){
  .hand-line,.hand-line.is-writing{
    -webkit-animation:none;
    animation:none;
    -webkit-clip-path:inset(-30% -4% -30% -9%);
    clip-path:inset(-30% -4% -30% -9%);
  }
}

/* ============================================================
   Подсказка «листай» и точки прогресса
   ============================================================ */
.cue{
  position:absolute;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  z-index:5;
  width:44px;
  height:30px;
  border:0;
  background:none;
  cursor:pointer;
  opacity:0;
  transition:opacity .5s ease;
  -webkit-appearance:none;
  appearance:none;
}
.cue.is-ready{opacity:.75}
.cue.is-hidden{opacity:0;pointer-events:none}
/* Оба шеврона — псевдоэлементы самой кнопки, а не вложенные друг в друга:
   вложенный ::after наследовал бы поворот родителя и крутился дважды. */
.cue span{display:none}
.cue::before,.cue::after{
  content:'';
  position:absolute;
  left:50%;
  width:11px;
  height:11px;
  margin-left:-5.5px;
  /* Тёмная стрелка по умолчанию: светлый фон у всех экранов, кроме
     первого. Перечислять номера экранов оказалось ошибкой — правило
     легко забыть обновить, а на белом белая стрелка просто исчезает. */
  border-right:1.6px solid #9a8f86;
  border-bottom:1.6px solid #9a8f86;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-animation:cue 1.9s var(--ease) infinite;
  animation:cue 1.9s var(--ease) infinite;
}
.cue::before{top:4px}
.cue::after{top:11px;-webkit-animation-delay:.18s;animation-delay:.18s}
@-webkit-keyframes cue{0%{opacity:0;margin-top:-5px}45%{opacity:1}100%{opacity:0;margin-top:7px}}
@keyframes cue{0%{opacity:0;margin-top:-5px}45%{opacity:1}100%{opacity:0;margin-top:7px}}

.dots{
  position:absolute;
  right:calc(env(safe-area-inset-right,0px) + 12px);
  top:50%;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(90,80,72,.28);
  transition:background .35s ease, transform .35s ease;
}
.dot.is-active{background:#7a6f66;-webkit-transform:scale(1.5);transform:scale(1.5)}


/* ============================================================
   Поворот телефона в ландшафт
   ============================================================ */
/* Первый экран — единственный тёмный, там навигация светлая */
.stage[data-slide="0"] .cue::before,
.stage[data-slide="0"] .cue::after,
.stage[data-slide="18"] .cue::before,
.stage[data-slide="18"] .cue::after{border-color:var(--cream)}
.stage[data-slide="0"] .dot,
.stage[data-slide="18"] .dot{background:rgba(255,255,255,.45)}
.stage[data-slide="0"] .dot.is-active,
.stage[data-slide="18"] .dot.is-active{background:var(--cream)}

.rotate{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  background:#2c2621;
  color:#e8ded4;
  font-size:15px;
  line-height:1.5;
}
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .rotate{display:flex}
}

/* ============================================================
   Заглушка для компьютера. Мобильная версия — единственная.
   Условие: широкий экран + мышь. Телефон сюда не попадает:
   он рапортует hover:none и pointer:coarse.
   ============================================================ */
.desktop{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:40px;
  text-align:center;
  background:#efe9e3;
  color:#4a3f36;
}
.desktop__mark{
  font-family:'Betmo',cursive;
  font-size:44px;
  color:#8a6a3a;
  line-height:1;
}
.desktop__title{
  font-size:19px;
  font-weight:700;
  letter-spacing:.01em;
  max-width:22ch;
}
.desktop__text{
  font-size:14px;
  line-height:1.6;
  color:#7a6d62;
  max-width:36ch;
}
.desktop__hint{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#a2958a;
}

@media (min-width:700px) and (hover:hover) and (pointer:fine){
  .desktop{display:flex}
  .stage,.rotate{display:none}
  body{overflow:auto;touch-action:auto;background:#efe9e3}
}

@media (prefers-reduced-motion:reduce){
  .layer,.copy,.plaque,.s2-title,.caption h1 span,.caption .sub{transition-duration:.01ms}
  .cue::before,.cue::after{-webkit-animation:none;animation:none;opacity:.8}
  .slide0.is-ready .s0-start{-webkit-animation:none;animation:none;opacity:1}
}