/* Вамос — оформление сайта «фильм одного дня».
   Здесь — базовая читаемая страница (режимы «тихий» и «без js»), полоса, индекс, лист, плашка,
   слои-панели, карточка заезда, форма, титры, режим проверки образцов.
   Всё движение фильма — в фильм.css и только под html.film.
   Правила вида и откуда взяты числа — штаб/проект/стиль.md, разделы «Цвета» и «Фильм».
   Разработчик ставит классы; размеры и цвета живут только здесь. */

/* ---------- Шрифты: свои файлы, кириллица и латиница отдельно ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("шрифты/playfair-display-cyrillic.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  src: url("шрифты/playfair-display-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("шрифты/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("шрифты/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Переменные: те же цвета и шрифты, что в постах Instagram ---------- */
:root {
  /* цвета (контраст посчитан в стиль.md) */
  --фон: #F6F1E7;
  --поверхность: #FFFCF6;
  --текст: #1B3326;
  --текст-тихий: #44554A;          /* 7.06 на фоне */
  --зелёный: #1E3B2C;
  --зелёный-глубокий: #14261C;
  --терракота: #B4502F;            /* только кнопка заявки */
  --терракота-тёмная: #9A3F25;
  --песок: #E9C9A9;
  --мяч: #D9E85B;                  /* только в движении: линия индекса, точка знака, кольцо фокуса */
  --линия: #DDD3C2;
  --белый: #FFFFFF;
  --сезон-тёплый: #F4E6D6;         /* тихий текст на нём 6.48 */
  --сезон-прохладный: #E4EBE5;     /* тихий текст на нём 6.55 */
  --рамка-поля: var(--текст-тихий);
  --затемнение-слоя: rgba(20, 38, 28, 0.6);   /* фильм за открытым слоем */
  /* Затемнения поверх фото сцен (верхняя полоса, низ под текстом, подпись «Фото: …») — почти чёрный без оттенка,
     три числа для rgb(… / прозрачность). Зелёная тень на голубом небе и светлых камнях давала серо-бурую муть
     (смотрители, 14.10); чёрный только темнит фото, цвет неба остаётся синим */
  --тень-фото: 8 10 12;
  --скругление-фото: 4px;          /* фото в слоях; кнопки — пилюли, карточки и теги — прямые */

  /* шрифты */
  --шрифт-заголовков: "Playfair Display", Georgia, "Times New Roman", serif;
  --шрифт-основной: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;

  /* размеры текста: 390 → 1440 */
  --размер-строки: clamp(2.75rem, 1.72rem + 4.19vw, 5.5rem);   /* строка сцены 44 → 88 */
  --размер-титра: clamp(2rem, 1.71rem + 1.14vw, 2.5rem);        /* заголовок карточки и слоя 32 → 40 */
  --размер-h3: clamp(1.375rem, 1.3rem + 0.29vw, 1.5rem);        /* 22 → 24 */
  --размер-основной: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); /* 17 → 18 */
  --размер-тега: 1rem;                                          /* 16: мельче основного текста нет */

  /* отступы */
  --поле: clamp(20px, 9.6px + 2.67vw, 48px);    /* боковое поле 20 → 48 */
  --полоса: 56px;                               /* высота полосы сверху */
  --низ: calc(76px + env(safe-area-inset-bottom, 0px));   /* высота плашки телефона: в ней шкала-солнце, ей нужен рост */
}
@media (min-width: 900px) {
  :root { --полоса: 72px; --низ: 0px; }
}

/* ---------- Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--зелёный-глубокий);
  scroll-padding-top: var(--полоса);        /* якоря без js не уходят под полосу */
}
body {
  margin: 0;
  background: var(--зелёный-глубокий);
  color: var(--фон);
  font-family: var(--шрифт-основной);
  font-size: var(--размер-основной);
  line-height: 1.55;
  overflow-x: clip;                          /* без горизонтальной прокрутки; clip не ломает sticky */
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }       /* на hidden построены ошибки формы, итог заявки, даты */
p { margin: 0; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--шрифт-заголовков); font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: lining-nums; text-wrap: balance;
}
:focus-visible { outline: 3px solid var(--мяч); outline-offset: 3px; }   /* на тёмном — мяч */

/* «Перейти к заявке» — видна только с клавиатуры */
.propusk {
  position: fixed; left: 8px; top: 8px; z-index: 100;
  padding: 12px 16px; background: var(--фон); color: var(--текст); font-weight: 600;
  transform: translateY(-200%);
}
.propusk:focus { transform: none; }
.propusk:focus-visible { outline-color: var(--текст); }

/* ---------- Кнопка заявки: пилюля, терракота — только у неё ---------- */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--терракота);
  border-radius: 999px;                      /* единственное скругление на фильме */
  background: var(--терракота); color: var(--белый);   /* 5.09 */
  font: 600 1.0625rem/1.2 var(--шрифт-основной);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopka:hover, .knopka:active { background: var(--терракота-тёмная); border-color: var(--терракота-тёмная); }   /* 6.75 */
/* вторичная (в форме): рамка без заливки */
.knopka--kontur { background: transparent; border-color: currentColor; color: var(--текст); }
.knopka--kontur:hover, .knopka--kontur:active { background: var(--текст); border-color: var(--текст); color: var(--фон); }

/* ---------- Знак ---------- */
.znak-ssylka {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; color: var(--фон); text-decoration: none;
}
.znak { width: 32px; height: 32px; flex: none; }
.znak__tochka { fill: var(--мяч); }
.znak-ssylka__slovo { font-family: var(--шрифт-заголовков); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; }

/* ---------- Полоса сверху: прозрачная, поверх фильма ---------- */
.polosa {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--полоса);
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--поле);
}
.polosa::before {                            /* мягкая тень неба под знаком: кость читается и на светлом небе */
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--полоса) + 72px); z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 38, 28, 0.55), rgba(20, 38, 28, 0));
  pointer-events: none;
}
/* без js под полосой идут светлые разделы: полоса сплошная, тени под ней нет */
html:not(.js) .polosa { background: var(--зелёный-глубокий); }
html:not(.js) .polosa::before { display: none; }
.polosa .znak-ssylka { margin-right: auto; }
.polosa .knopka { min-height: 44px; padding: 0 22px; font-size: 1rem; }
.podrobno {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  /* своя тёмная подложка-пилюля: на 03 кнопка стоит наполовину на светлом небе, наполовину на тёмной кроне,
     и голая кость на небе давала около 2.6. На подложке 68% — не меньше 5.5 даже над белым пикселем */
  background: rgba(14, 26, 20, 0.68); border: 0; border-radius: 999px; color: var(--фон);
  font: 600 1rem/1 var(--шрифт-основной); cursor: pointer;
}
.podrobno:hover { background: rgba(14, 26, 20, 0.86); }
.podrobno svg { width: 18px; height: 12px; }
.podrobno[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 899px) {
  .polosa .podrobno, .polosa .knopka { display: none; }   /* на телефоне — только знак; кнопка на плашке */
}

/* ---------- Сцены: база (тихий режим и без js) — кадр на экран, текст внизу ---------- */
.film { position: relative; }
.scena { position: relative; }
.scena__kadr {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;     /* текст длиннее экрана (низкий телефон боком) — кадр растёт, не режет */
  overflow: hidden;
  background: var(--зелёный-глубокий);      /* пока картинки нет — тёмный фон, а не битый значок */
}
@media (max-height: 479px) { .scena__kadr { min-height: 480px; } }
/* с js (живой и тихий режим) кадр прозрачный: под ним мир, который скрипт ставит в состояние сцены */
html.js .scena__kadr { background: none; }
/* без js мир — неподвижный рассвет за первым экраном: первый кадр тоже прозрачный, иначе фон его закрывает */
#utro .scena__kadr { background: none; }

.scena__tekst {
  position: relative; z-index: 3;
  isolation: isolate;
  padding: calc(var(--полоса) + 48px) var(--поле) calc(var(--низ) + 36px);   /* 36 — воздух над плашкой */
}
/* Подложка под текст сцены — ОДНА на все сцены и все варианты фото (с 14.10; стиль.md, «Фото сцен: любой
   вариант»). Фото сцены выбирается случайно из нескольких: светлое небо, белый песок, ночь — заранее
   неизвестно, что ляжет под заголовок. Поэтому подложка рассчитана на худший случай — белый пиксель под
   буквами, — а не подогнана под один снимок, как было до 14.10 (у 01, 02, 04, 05, 06, 07 стояли свои
   урезанные пятна и плотности). Сверх подложки — мягкий ореол под самими буквами (ниже, у .scena__stroka). */
.scena__tekst::before {                     /* затемнение — только градиент под текстом, кадр выше открыт */
  content: ""; position: absolute; inset: auto 0 0 0; height: calc(100% - var(--полоса) + 92px); z-index: -1;
  /* 140 точек от верха слоя — ровно верх метки. 0 → 64% у метки → 78% к середине текста → 86% у ссылки:
     метка 16 точек над белым пикселем ≥ 4.8, крупная строка ≥ 6, теги и ссылка — на своих подложках ещё темнее */
  /* цвет — почти чёрный без оттенка (--тень-фото): с 14.10 так же, как верхняя полоса мира (мир.css) */
  background: linear-gradient(to bottom, rgb(var(--тень-фото) / 0) 0, rgb(var(--тень-фото) / 0.64) 140px,
                              rgb(var(--тень-фото) / 0.78) 55%, rgb(var(--тень-фото) / 0.86) 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .scena__tekst { width: min(62vw, 900px); padding: calc(var(--полоса) + 48px) 0 64px var(--поле); }
  /* Подложка на компьютере — с 14.10 тот же запас, что на телефоне: 64 % тёмного у метки, 78 % к середине
     текста, 86 % у низа. Прежнее круглое пятно из угла (84 → 0 по эллипсу) к метке и концам строк уже гасло
     до 30–50 %, и на светлых камнях, скамье, кроссовках метка и куски заголовка садились на светлое
     (смотрители: корт-в/г/д/е, утро-в/г/д/з на 1440).
     Теперь — ровная полоса снизу во всю ширину экрана: начинается на 150 выше коробки текста и набирает
     темноту мягкой кривой (без видимого края) ровно к метке — 270 точек = 150 + верхний отступ коробки 120.
     У метки 62 %, к середине текста 72 %, у низа 80 % — на 4–6 пунктов легче телефона: строки здесь крупнее
     (88 точек), а полоса шире — с 86 % низ экрана становился бурым (первая проба: море-б, утро-д).
     Вправо, за текстом, она слабеет маской до 30 % — правая часть кадра остаётся солнечной, края нигде нет */
  .scena__tekst::before {
    inset: -150px calc(min(62vw, 900px) - 100vw) 0 0; height: auto;
    background: linear-gradient(to bottom,
      rgb(var(--тень-фото) / 0) 0, rgb(var(--тень-фото) / 0.04) 60px, rgb(var(--тень-фото) / 0.13) 115px,
      rgb(var(--тень-фото) / 0.28) 170px, rgb(var(--тень-фото) / 0.46) 225px, rgb(var(--тень-фото) / 0.62) 270px,
      rgb(var(--тень-фото) / 0.72) 60%, rgb(var(--тень-фото) / 0.8) 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 48%, rgb(0 0 0 / 0.3) 100%);
            mask-image: linear-gradient(to right, #000 0, #000 48%, rgb(0 0 0 / 0.3) 100%);
  }
}

.scena__metka {
  margin: 0 0 12px;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35;
}
.scena__stroka {
  font-size: var(--размер-строки); line-height: 1.02; letter-spacing: -0.015em;
  max-width: 11em; color: var(--белый);
}
/* Ореол под буквами метки и заголовка: узкая тень даёт край букве на светлом пятне (песок, облако),
   широкая — мягкое тёмное облачко за строкой. На тёмном фото его не видно, на светлом он держит
   контраст там, где подложка уже гаснет (конец длинной строки справа). У 03 «Заезд» текст тёмный на
   светлой карточке — ореол ему не нужен */
.scena:not(#zaezd) :is(.scena__stroka, .scena__metka) {
  text-shadow: 0 1px 2px rgba(10, 20, 15, 0.5), 0 0 28px rgba(10, 20, 15, 0.45);
}
/* строка получает фокус от скрипта (tabindex="-1") после щелчка по индексу — рамка ей не нужна:
   это не кнопка и не ссылка, а место, откуда продолжится Tab */
.scena__stroka:focus, .scena__stroka:focus-visible { outline: none; }
.scena__tegi {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.scena__teg {
  padding: 7px 11px 6px;
  border: 1px solid rgba(246, 241, 231, 0.55);   /* рамка без скругления: «титр», не кнопка */
  /* своя тёмная подложка: на яркой воде и белой скатерти тег читается и без градиента под ним
     (вместе с градиентом низа кадра — не меньше 80% тёмного под буквами) */
  background: rgba(20, 38, 28, 0.55);
  font-weight: 600; font-size: var(--размер-тега); line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em;
  color: var(--фон);
}
.scena__sloy {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding-right: 1.6em;
  font-weight: 600; font-size: 1rem; color: var(--фон);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
/* стрелка — рисунок, диктор её не читает; вынесена из потока, чтобы подчёркивание её не тянуло */
.scena__sloy::after {
  content: "→"; content: "→" / "";
  position: absolute; right: 0; top: 50%; transform: translateY(-52%);
}
.scena__sloy:hover { text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .scena__metka { margin-bottom: 16px; }
  .scena__tegi { margin-top: 28px; gap: 10px; }
}

/* служебная строка «Фото: место — автор, лицензия…» — мелко, в спокойном углу, на своей подложке.
   390 — под знаком слева; 1440 — внизу справа. С 14.10 текст меняется вместе со случайным фото сцены
   (мир.js берёт его из data-podpis варианта), длина — от 50 до ~110 знаков, а под ним может оказаться
   и белое небо, и ночь. Поэтому подложка плотная (74 %) и стоит над всеми затемнениями — читается на любом кадре */
.scena .sluzhebnoe {
  /* слой 4 — над подложкой текста сцены (слой 3): на 1440 эта подложка шла во всю ширину и ложилась
     поверх подписи — буквы выходили серо-бежевыми (смотрители, 14.10) */
  position: absolute; z-index: 4; margin: 0;
  left: var(--поле); top: calc(var(--полоса) + 2px);
  padding: 4px 10px;
  /* С 14.10 подложка мягкая: скругление 6, без светлой рамки, плотность 74 %. Прямоугольник 88 % со светлой
     рамкой на светлом небе стоял «наклейкой» (утро-а/в/г/д на 390). Полужирные 13–15 точек кости над белым
     пикселем под 74 % тёмного — около 8 (нужно 4.5); ночью подложка тонет в небе, но буквы светлые и чёткие */
  background: rgb(var(--тень-фото) / 0.74);
  border-radius: 6px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em;
  color: var(--фон);
}
/* телефон (смотритель, 13.10): строка стояла в 2 точках под полосой и липла к знаку. Теперь на 16 ниже
   полосы — между знаком и строкой воздух; справа то же поле, что слева. Буквы 13 (полужирный на подложке
   88% — кость читается): короткие подписи в одну строку, длинная («Вамос») — в две, перенос после запятой.
   text-wrap: balance не берём — он рвал «Порт-/де-ла-Сельва» по дефису */
@media (max-width: 899px) {
  .scena .sluzhebnoe {
    top: calc(var(--полоса) + 16px);
    max-width: calc(100vw - 2 * var(--поле));
    font-size: 0.8125rem;
  }
}
@media (min-width: 900px) {
  /* ширина — не больше 30rem: длинная подпись идёт в две строки в углу, а не полосой через полэкрана
     под заголовком. text-wrap: balance не берём (рвёт по дефису, см. выше) */
  /* справа от коробки текста сцены (её ширина — min(62vw, 900px)) и в 16 точках от неё: на узком компьютере
     (1024) подпись в 30rem заходила на теги 01 «заезд каждый месяц» — теперь она там уже и в три строки */
  .scena .sluzhebnoe {
    left: auto; top: auto; right: var(--поле); bottom: 24px;
    max-width: min(32rem, calc(100vw - min(62vw, 900px) - var(--поле) - 16px));
  }
  /* на компьютере читают с расстояния вытянутой руки — 15 точек вместо 14 (смотрители: «мелкая») */
  .scena .sluzhebnoe { font-size: 0.9375rem; padding: 5px 12px; }
}
/* С js мир один на все сцены — строка стоит на экране всё время, пока идут сцены (не только на 01).
   Слои, лист и титры лежат выше по слою и закрывают её сами, когда сцены кончились. */
html.js .scena .sluzhebnoe { position: fixed; }
/* 01: подпись «Фото: …» — про само фото, а фото видно только в сцене utro (мир.css, «Мир из фото»).
   Ушли из 01 — подпись гаснет за 0,4 с, иначе она висит над фото следующей сцены и врёт.
   Скрываем и для чтения (visibility — после угасания). Вернулись в 01 — проявляется.
   Строка «Рисунки… иллюстративные» стоит в листе «Подробно» и этим правилом не задета.
   «Меньше движения» — без угасания: общий запрет переходов внизу файла */
html.js body:has(.mir__foto) #utro .sluzhebnoe {
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
html.js body:has(.mir__foto):has(.mir[data-scena]:not([data-scena="utro"])) #utro .sluzhebnoe {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
/* Мир из фото, сцены 02–07 (мир.css, «МИР ИЗ ФОТО: все сцены»): у каждой сцены с фото своя строка-подпись
   (что за фото, «корт для примера — снят не в Льорете» и т. п.; слова — копирайтера), в разметке —
   p.sluzhebnoe внутри своей секции. Стоят в одном месте экрана (position: fixed), видна только строка
   текущей сцены: смена — то же угасание 0,4 с. Нет строки в секции — правило ничего не делает */
html.js :is(#kort, #zaezd, #more, #turnir, #uzhin, #vamos) .sluzhebnoe {
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
html.js body:has(.mir[data-scena]:not([data-scena="kort"]))   #kort .sluzhebnoe,
html.js body:has(.mir[data-scena]:not([data-scena="zaezd"]))  #zaezd .sluzhebnoe,
html.js body:has(.mir[data-scena]:not([data-scena="more"]))   #more .sluzhebnoe,
html.js body:has(.mir[data-scena]:not([data-scena="turnir"])) #turnir .sluzhebnoe,
html.js body:has(.mir[data-scena]:not([data-scena="uzhin"]))  #uzhin .sluzhebnoe,
html.js body:has(.mir[data-scena]:not([data-scena="vamos"]))  #vamos .sluzhebnoe {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* До 14.10 здесь стояли заплатки под конкретные снимки: на телефоне у 05 и 06 подложка плотнее
   (под фигурами игроков и столом), на компьютере у 04 строка в три коротких ряда (лодка в бухте правее
   текста). Фото теперь случайное — заплатки сняты; общая подложка выше стала плотнее (почти как прежняя
   заплатка 05/06: была .68/.84/.9, теперь у всех .64/.78/.86) и вместе с ореолом букв держит любой кадр. */

/* ---------- Карточка заезда (сцена 03): светлый «билет» на тёмном фильме ---------- */
#zaezd .scena__tekst { padding-bottom: calc(var(--низ) + 16px); }
#zaezd .scena__tekst::before { display: none; }
#zaezd .scena__tekst > div {
  background: var(--фон); color: var(--текст);
  padding: 20px 20px 16px;
}
#zaezd .scena__stroka { font-size: var(--размер-титра); line-height: 1.05; color: var(--текст); max-width: none; }
/* колонка подписей — по самой длинной подписи («Тренеры»), данным остаётся всё остальное */
.kartochka { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; }
.kartochka__ryad {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--линия);
}
@supports not (grid-template-columns: subgrid) {
  .kartochka__ryad { grid-template-columns: 4.6em 1fr; column-gap: 16px; }
}
.kartochka dt { font-size: 1rem; line-height: 1.35; color: var(--текст-тихий); }   /* 7.06 */
.kartochka dd {
  margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35;
  font-variant-numeric: tabular-nums lining-nums;
}
/* видна одна дата: без js — первая, с js — ближайшая (класс ставит сайт.js) */
.kartochka .data { display: none; }
.kartochka .data:first-child { display: inline; }
html.js .kartochka .data:first-child { display: none; }
html.js .kartochka .data.blizhayshiy { display: inline; }
#zaezd .scena__tekst p {                     /* ссылки внизу карточки */
  display: flex; flex-wrap: wrap; column-gap: 28px;
  margin: 4px 0 0; padding: 6px 0 2px; border-top: 1px solid var(--линия);
}
#zaezd .scena__sloy { color: var(--текст); margin-top: 0; }
#zaezd :focus-visible { outline-color: var(--текст); }
@media (min-width: 900px) {
  #zaezd .scena__tekst { width: 540px; padding: calc(var(--полоса) + 32px) 0 48px var(--поле); }
  #zaezd .scena__tekst > div { padding: 28px 32px 16px; }
  .kartochka { column-gap: 24px; }
  .kartochka__ryad { padding: 11px 0; }
  .kartochka dd { font-size: 1.0625rem; }
}

/* ---------- Сцена 07 «Вамос»: ночная бухта. Строка и большая кнопка — внизу слева, как у всех сцен:
   луна, лунная дорожка и ракетка на перилах остаются открыты (по центру текст ложился на них) ---------- */
#vamos .scena__tekst { display: flex; flex-direction: column; align-items: flex-start; }
#vamos .scena__stroka { max-width: 10em; }
@media (max-width: 899px) {
  /* на телефоне «по-испански» не рвётся на «по-» / «испански»: строка мельче, первая часть встаёт целиком */
  #vamos .scena__stroka { font-size: 2rem; line-height: 1.08; }
}
#vamos .knopka {
  margin-top: 32px;
  min-height: 60px; padding: 0 40px; max-width: 100%;
  font-size: 1.25rem; white-space: normal; text-align: center;
}
#vamos .scena__sloy { margin-top: 12px; }
@media (max-width: 899px) {
  /* на телефоне внизу уже стоит та же кнопка на плашке — терракотовая остаётся одна, там;
     большая кнопка сцены — контур цвета кости: крупная цель для пальца, но не второй акцент */
  #vamos .knopka { background: rgba(20, 38, 28, 0.35); border-color: var(--фон); color: var(--фон); }
  #vamos .knopka:hover, #vamos .knopka:active { background: var(--фон); border-color: var(--фон); color: var(--текст); }
}

/* ---------- Шкала без js, лист и список «Подробно» ----------
   Без js: шкала — обычный список сцен, «Подробно» — список ссылок; оба на зелёном после фильма.
   С js: шкала-солнце — в мир.css. 1440 — «Подробно» маленькой панелью под кнопкой в полосе;
   телефон — лист снизу над плашкой: сцены (по кнопке на дуге) и «Подробно». */
.list {
  position: relative; z-index: 10;
  display: grid; gap: 32px;
  padding: 48px var(--поле) calc(var(--низ) + 48px);
  background: var(--зелёный);
}
.list__zagolovok,
html:not(.js) .indeks::before {
  display: block;
  margin: 0 0 8px;
  font-family: var(--шрифт-основной); font-weight: 600; font-size: 1rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(246, 241, 231, 0.8);   /* 7.6 на зелёном */
}
.indeks ol, .list__sceny ol, .podrobno-spisok ul { margin: 0; padding: 0; list-style: none; }
.indeks__punkt, .list__sceny a, .podrobno-spisok a {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--фон); text-decoration: none;
  font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums;
}
.podrobno-spisok a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.indeks__nomer { letter-spacing: 0.04em; opacity: 0.86; }
.indeks__liniya { display: none; }

/* без js: шкала — список сцен над «Подробно», дуга не нужна */
html:not(.js) .indeks {
  position: relative; z-index: 10;
  padding: 48px var(--поле) 0;
  background: var(--зелёный);
}
html:not(.js) .indeks::before { content: "Сцены"; content: "Сцены" / ""; }   /* у nav есть aria-label — диктору повтор не нужен */
html:not(.js) .indeks__duga { display: none; }
html:not(.js) .list { padding-top: 32px; }
@media (min-width: 900px) {
  html:not(.js) .indeks ol,
  html:not(.js) .podrobno-spisok ul { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); column-gap: 24px; }
}

/* телефон с js: лист снизу над плашкой */
@media (max-width: 899px) {
  html.js .list {
    position: fixed; z-index: 58; left: 0; right: 0; bottom: var(--низ);
    max-height: calc(92svh - var(--низ)); overflow-y: auto; overscroll-behavior: contain;
    gap: 24px;
    padding: 28px var(--поле) 24px;
    background: var(--зелёный-глубокий);
    border-top: 1px solid rgba(246, 241, 231, 0.25);
    visibility: hidden; transform: translateY(calc(100% + var(--низ)));
  }
  html.js .list--otkryt {
    visibility: visible; transform: none;
    box-shadow: 0 0 0 100vmax rgba(20, 38, 28, 0.55);   /* затемнение мира за листом; плашка выше по слою */
  }
  /* сцены в листе: две колонки, номер — мелкими цифрами перед именем */
  html.js .list__sceny ol,
  html.js .podrobno-spisok ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  html.js .list__sceny a { gap: 10px; }
  html.js .list__sceny .indeks__nomer { min-width: 1.6em; font-size: 0.875rem; opacity: 0.7; }
  html.js .list__sceny .indeks__imya { font-size: 1.0625rem; }
  /* текущая сцена — черта слева и цвет солнца у номера (класс сцены ставит мир.js) */
  html.js:has(#utro.scena--tekushchaya)   .list__sceny a[href="#utro"],
  html.js:has(#kort.scena--tekushchaya)   .list__sceny a[href="#kort"],
  html.js:has(#zaezd.scena--tekushchaya)  .list__sceny a[href="#zaezd"],
  html.js:has(#more.scena--tekushchaya)   .list__sceny a[href="#more"],
  html.js:has(#turnir.scena--tekushchaya) .list__sceny a[href="#turnir"],
  html.js:has(#uzhin.scena--tekushchaya)  .list__sceny a[href="#uzhin"],
  html.js:has(#vamos.scena--tekushchaya)  .list__sceny a[href="#vamos"] {
    /* черта вынесена в поле слева: номер текущей стоит в одну линию с остальными */
    box-shadow: inset 2px 0 0 var(--фон); margin-left: -12px; padding-left: 12px;
  }
  html.js:has(#utro.scena--tekushchaya)   .list__sceny a[href="#utro"] .indeks__nomer,
  html.js:has(#kort.scena--tekushchaya)   .list__sceny a[href="#kort"] .indeks__nomer,
  html.js:has(#zaezd.scena--tekushchaya)  .list__sceny a[href="#zaezd"] .indeks__nomer,
  html.js:has(#more.scena--tekushchaya)   .list__sceny a[href="#more"] .indeks__nomer,
  html.js:has(#turnir.scena--tekushchaya) .list__sceny a[href="#turnir"] .indeks__nomer,
  html.js:has(#uzhin.scena--tekushchaya)  .list__sceny a[href="#uzhin"] .indeks__nomer,
  html.js:has(#vamos.scena--tekushchaya)  .list__sceny a[href="#vamos"] .indeks__nomer { color: #FFE2A8; opacity: 1; }
}

/* компьютер с js: сцены — метки шкалы, «Подробно» — панель под кнопкой в полосе */
@media (min-width: 900px) {
  html.js .list { display: contents; }
  html.js .list__sceny { display: none; }
  html.js .podrobno-spisok .list__zagolovok {   /* заголовок — только для диктора: на экране и так ясно */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
  }
  html.js .podrobno-spisok {
    display: none;
    position: fixed; z-index: 61;
    top: calc(var(--полоса) - 4px); right: var(--поле);
    width: 300px; padding: 12px 24px 16px;
    background: var(--фон); color: var(--текст);
    box-shadow: 0 12px 32px rgba(10, 20, 15, 0.28);
  }
  html.js .list--otkryt .podrobno-spisok { display: block; }
  html.js .podrobno-spisok a { color: var(--текст); }
  html.js .podrobno-spisok li + li a { border-top: 1px solid var(--линия); }
  html.js .podrobno-spisok :focus-visible { outline-color: var(--текст); outline-offset: -3px; }
}

/* появление листа и панели «Подробно» — только если человек не просил меньше движения */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 899px) {
    html.js .list {
      transition: transform 0.24s cubic-bezier(.4, 0, 1, 1), visibility 0s linear 0.24s, box-shadow 0.24s ease;
    }
    html.js .list--otkryt {
      transition: transform 0.32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s, box-shadow 0.32s ease;
    }
  }
  @media (min-width: 900px) {
    html.js .list--otkryt .podrobno-spisok { animation: panel-vkhod 0.22s cubic-bezier(.2, .7, .2, 1) both; }
  }
}
@keyframes panel-vkhod { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Плашка телефона: кнопка индекса + заявка ---------- */
.plashka {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  min-height: var(--низ);
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--поле) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 38, 28, 0.94);
}
.plashka .knopka { flex: 1; min-width: 0; }
.indeks__knopka {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 92px; min-height: 48px; padding: 0 14px;
  background: none; color: var(--фон);
  border: 1px solid rgba(246, 241, 231, 0.5);   /* прямоугольник: скруглена только пилюля */
  font: 600 1rem/1 var(--шрифт-основной); font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
}
.indeks__knopka[aria-expanded="true"] { background: rgba(246, 241, 231, 0.14); border-color: var(--фон); }
.indeks__knopka svg { width: 14px; height: 14px; flex: none; }
@media (min-width: 900px) { .plashka { display: none; } }
@media (max-width: 359px) { .plashka .knopka { padding: 0 12px; font-size: 1rem; } }

/* открыта заявка — кнопка заявки в полосе и на плашке не нужна */
html:has(#zayavka.sloy--otkryt) .polosa .knopka,
html:has(#zayavka.sloy--otkryt) .plashka .knopka { visibility: hidden; }

/* ---------- Слои подробностей ----------
   Без js — обычные разделы после фильма на кости, всё читается подряд.
   С js — 1440: панель справа min(560px, 45vw) во всю высоту; телефон: лист снизу до 92svh.
   Обёртка .sloi — затемнение: щелчок по ней мимо слоя закрывает слой. Выезд — ниже, под «с js». */
.sloi { position: relative; z-index: 10; background: var(--фон); color: var(--текст); }
.sloy {
  padding: 56px var(--поле);
  background: var(--фон); color: var(--текст);
  font-size: var(--размер-основной); line-height: 1.6;
}
.sloy + .sloy { border-top: 1px solid var(--линия); }
.sloy :focus-visible { outline-color: var(--текст); }
.sloy > * { max-width: 680px; }
.sloy__zagolovok { font-size: var(--размер-титра); line-height: 1.08; margin-bottom: 20px; }
.sloy__zagolovok:focus { outline: none; }    /* фокус ставит скрипт при открытии; кольцо у заголовка не нужно */
.sloy h3 { font-size: var(--размер-h3); line-height: 1.2; margin: 32px 0 12px; }
.sloy p + p { margin-top: 10px; }
.sloy ul, .sloy ol { margin: 0; padding-left: 1.3em; }
.sloy li { padding-left: 4px; }
.sloy li + li { margin-top: 6px; }
.sloy li::marker { color: var(--текст-тихий); }
.sloy ul + p, .sloy ol + p, .sloy div + p { margin-top: 12px; }
.sloy strong { font-weight: 700; }
.sloy > .knopka { margin-top: 32px; }

/* фото в слое: во всю ширину колонки, пропорции из width/height разметки (место держится до загрузки).
   Скругление чуть заметное — фото «лежит» на кости, а не вырезано; пилюлей скруглена только кнопка */
.sloy__foto { margin: 8px 0 28px; }
.sloy__foto img {
  display: block; width: 100%; height: auto; max-width: none;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--скругление-фото);
  background: var(--поверхность);          /* пока фото грузится — спокойная плашка, не дыра */
}
.sloy__foto figcaption {
  margin-top: 8px;
  font-size: 1rem; line-height: 1.4; color: var(--текст-тихий);   /* 7.06 на кости */
}
h3 + .sloy__foto, p + .sloy__foto { margin-top: 16px; }
@media (max-width: 899px) {
  /* на телефоне фото выходит под самые края листа — кадр крупнее, колонка текста не теряет поля */
  .sloy__foto { margin-inline: calc(var(--поле) * -1); }
  .sloy__foto img { border-radius: 0; }
  .sloy__foto figcaption { padding-inline: var(--поле); }
}
.sloy a:not(.knopka) { font-weight: 600; text-underline-offset: 4px; }

/* карточки внутри слоя (тренеры, кому подойдёт, сезоны): прямые, на поверхности */
.sloy .sloy__kartochki {
  display: grid; gap: 12px;
  margin: 20px 0; padding: 0; list-style: none;
}
.sloy__kartochki > li {
  margin: 0; padding: 16px 20px;
  background: var(--поверхность); border: 1px solid var(--линия);
}
.sloy__kartochki h3 { margin: 0 0 6px; font-size: 1.25rem; }
.sloy__kartochki p { color: var(--текст-тихий); }
.sloy__kartochki p + p { margin-top: 4px; }
#cena .sloy__kartochki > li:first-child { background: var(--сезон-тёплый); }
#cena .sloy__kartochki > li:last-child { background: var(--сезон-прохладный); }

/* список дат в слое «Даты и цена»: прошедшие прячет сайт.js, ближайшая — с чертой слева */
.sloy .daty {
  list-style: none; padding: 0; margin: 12px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px;
  font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
}
.sloy .daty li { margin: 0; padding: 10px 0 10px 14px; border-top: 1px solid var(--линия); }
.sloy .daty .blizhayshiy { box-shadow: inset 3px 0 0 var(--текст); }

/* вопросы: плюс справа, у открытого — минус */
.sloy details { border-bottom: 1px solid var(--линия); }
.sloy details:first-of-type { border-top: 1px solid var(--линия); }
.sloy summary {
  position: relative; display: block; min-height: 44px;
  padding: 16px 40px 16px 0;
  font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none;
}
.sloy summary::-webkit-details-marker { display: none; }
.sloy summary::before, .sloy summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 16px; height: 2px; margin-top: -1px; background: var(--текст);
}
.sloy summary::after { transform: rotate(90deg); }
.sloy details[open] > summary::after { transform: none; }
.sloy details > p { padding: 0 0 16px; color: var(--текст-тихий); }
.sloy details + p { margin-top: 24px; }

/* кнопка «Закрыть»: крестик 44×44 в правом верхнем углу, остаётся видна при прокрутке слоя */
.sloy__zakryt {
  position: sticky; top: 4px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -8px -10px 0 auto; padding: 0;
  background: var(--фон); color: var(--текст); border: 0; cursor: pointer;
}
.sloy__zakryt svg { width: 24px; height: 24px; }
.sloy__zakryt span {                          /* слово — для диктора; на экране крестик */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sloy__zakryt:hover { background: var(--линия); }
.sloy__zakryt + .sloy__zagolovok { margin-top: -36px; padding-right: 48px; }

/* с js: слои — выдвижные панели поверх фильма */
html.js .sloi {
  position: fixed; inset: 0; z-index: 80;
  background: none; pointer-events: none;
}
html.js .sloi::before {                      /* затемнение фильма: --зелёный-глубокий 60%, без размытия */
  content: ""; position: absolute; inset: 0;
  background: var(--затемнение-слоя); opacity: 0;
}
html.sloy-otkryt .sloi { pointer-events: auto; }
html.sloy-otkryt .sloi::before { opacity: 1; }
html.js .sloy {
  position: absolute; z-index: 1;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
  border: 0;
}
html.js .sloy--otkryt { visibility: visible; transform: none; }   /* открытый виден сразу — иначе фокус не встанет */
/* выезд слоя и затемнение: открытие мягко тормозит, закрытие быстрее; при «меньше движения» — сразу */
@media (prefers-reduced-motion: no-preference) {
  html.js .sloi::before { transition: opacity 0.24s ease; }
  html.js .sloy { transition: transform 0.24s cubic-bezier(.4, 0, 1, 1), visibility 0s linear 0.24s; }
  html.js .sloy--otkryt { transition: transform 0.32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s; }
}
html.js .sloy > * { max-width: none; }
html.sloy-otkryt { overflow: hidden; }       /* прокрутка под слоем заперта, место в фильме не теряется */

@media (min-width: 900px) {
  html.js .sloy {
    top: 0; right: 0; bottom: 0; width: min(560px, 45vw);
    padding: 32px 48px 48px;
    transform: translateX(100%);
  }
}
@media (max-width: 899px) {
  html.js .sloy {
    left: 0; right: 0; bottom: 0; max-height: 92svh;
    padding: 28px var(--поле) calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  html.js .sloy::before {                    /* полоса-ручка сверху листа — только рисунок */
    content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    background: var(--линия);
  }
}
html.js .sloy--otkryt { transform: none; }

/* кнопка заявки в конце слоя прилипает к низу панели; полоса кости вокруг неё закрывает текст,
   который уезжает под кнопку. Это сплошная заливка тенью без размытия — по сути фон, не тень;
   панель режет её по краям. Нижняя тень с большим разносом закрывает и скруглённые углы. */
html.js .sloy > .knopka:last-child {
  --knopka-niz: 16px;                        /* от кнопки до края панели */
  position: sticky; bottom: var(--knopka-niz); z-index: 2;
  display: flex; width: 100%;
  margin-top: 64px;                          /* в конце прокрутки растворение (ниже) не ложится на последний текст */
  box-shadow:
    -64px 0 0 20px var(--фон),
    64px 0 0 20px var(--фон),
    0 44px 0 44px var(--фон);
}
@media (max-width: 899px) {
  html.js .sloy > .knopka:last-child { --knopka-niz: calc(16px + env(safe-area-inset-bottom, 0px)); }   /* над полосой «домой» айфона */
}
/* подвал панели над прилипшей кнопкой: сплошная кость на 24 точки выше заливки кнопки и тонкая линия по
   верху. Раньше тут было растворение за 40 точек — строка, уходившая под кнопку, висела в нём полупрозрачной
   и читалась смазанной полосой под «Пример дня». Теперь текст уходит под ровную линию, как под край подвала.
   Места в потоке не занимает (отрицательный отступ); в конце прокрутки последний текст выше линии
   (у кнопки отступ 64 > 24 + 20) */
html.js .sloy:has(> .knopka:last-child)::after {
  content: ""; display: block; position: sticky; z-index: 1;
  bottom: calc(var(--knopka-niz-sloya, 16px) + 48px + 20px);
  height: 24px; margin-top: -24px; pointer-events: none;
  background: var(--фон);
  box-shadow: inset 0 1px 0 var(--линия);
}
@media (max-width: 899px) {
  html.js .sloy { --knopka-niz-sloya: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Форма заявки (вид как был, теперь в панели) ---------- */
.forma {
  margin-top: 20px; padding: 20px;
  background: var(--поверхность);
  border: 1px solid var(--линия); border-radius: 16px;
}
.pole + .pole { margin-top: 20px; }
.pole__podpis { display: block; margin-bottom: 8px; font-weight: 600; }
.pole__neobyaz { margin-left: 4px; font-size: 1rem; font-weight: 400; color: var(--текст-тихий); }
.pole__vvod {
  display: block; width: 100%;
  min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--рамка-поля); border-radius: 10px;
  background: var(--белый); color: var(--текст);
  font: inherit; font-size: 1.0625rem; line-height: 1.4;   /* не меньше 16, иначе телефон увеличивает страницу */
}
.pole__vvod::placeholder { color: var(--текст-тихий); opacity: 1; }
select.pole__vvod {
  appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231B3326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px;
  cursor: pointer;
}
.pole__vvod:focus-visible { outline: 3px solid var(--текст); outline-offset: 2px; }
.pole__vvod[aria-invalid="true"] { border-color: var(--терракота-тёмная); border-width: 2px; }
.pole__oshibka { margin-top: 8px; font-size: 1rem; font-weight: 600; color: var(--терракота-тёмная); }
.forma__knopki { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.forma__knopki .knopka { min-height: 52px; }
.forma__knopki .knopka--kontur { border-color: transparent; padding-inline: 12px; text-decoration: underline; text-underline-offset: 4px; }
.forma__podskazka { margin-top: 16px; font-size: 1rem; color: var(--текст-тихий); }
@media (min-width: 900px) {
  .forma { padding: 24px 28px 28px; }
}

/* итог заявки: сообщения, готовый текст, кнопка «Скопировать» */
.zayavka__itog { margin-top: 20px; }
.zayavka__soobshenie { font-weight: 600; }
.zayavka__itog > .zayavka__soobshenie,
.zayavka__obrazec {
  padding: 16px 20px;
  background: var(--поверхность);
  border: 1px solid var(--линия); border-left: 3px solid var(--текст); border-radius: 10px;
}
.zayavka__obrazec .zayavka__soobshenie + .zayavka__soobshenie { margin-top: 4px; font-weight: 400; color: var(--текст-тихий); }
.zayavka__tekst {
  display: block; width: 100%; margin-top: 12px; padding: 16px;
  border: 1.5px solid var(--рамка-поля); border-radius: 10px;
  background: var(--белый); color: var(--текст);
  font: inherit; font-size: 1rem; line-height: 1.5;
  min-height: calc(6 * 1.5em + 32px + 3px);  /* все 5 строк заявки и запас */
  field-sizing: content; resize: vertical;
}
.zayavka__tekst:focus-visible { outline: 3px solid var(--текст); outline-offset: 2px; }
.zayavka__kopirovat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }

/* ---------- Титры = подвал: идут обычной прокруткой после сцены 07 ---------- */
.titry {
  position: relative; z-index: 10;
  display: grid; gap: 12px; align-content: start;
  padding: 72px var(--поле) calc(var(--низ) + 56px);
  background: var(--зелёный); color: var(--фон);
  font-size: 1rem; line-height: 1.6;
}
/* Порядок в подвале (с 14.10, договор — штаб/проект/фото-замена.md): знак · девиз · «Кто организует» ·
   организатор · контакты · про данные формы · строка про фото · «Фотографии» · вводная · 7 свёрнутых сцен
   (details, внутри 42 строки фото) · ©. Правила держатся за устройство, а не за номера строк (nth-child на
   прежние восемь детей сняты): число фото в сценах может меняться, вид — нет. */
.titry > * { max-width: 40em; }
.titry > p:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 1.125rem; }
.titry > p:first-child strong { font-family: var(--шрифт-заголовков); font-weight: 600; font-size: 1.75rem; }
.titry .znak { width: 40px; height: 40px; }
/* девиз — последняя реплика фильма: крупно, шрифтом заголовков, песком */
.titry > p:first-child + p {
  margin-top: 8px;
  font-family: var(--шрифт-заголовков); font-weight: 500; font-size: var(--размер-h3); line-height: 1.25;
  color: var(--песок);                       /* 7.80 на зелёном */
}
.titry h2 { margin-top: 28px; font-size: var(--размер-h3); line-height: 1.2; }
.titry ul { margin: 4px 0 0; padding: 0; list-style: none; }
.titry li + li { margin-top: 4px; }
/* мелкое под контактами — кость без прозрачности (10.86 на зелёном), 16 точек: читается, а не угадывается.
   Линия отделяет его от «Кто организует»: первая строка после списка контактов */
.titry > ul:first-of-type + p { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(246, 241, 231, 0.28); }

/* «Фотографии»: семь сцен — семь свёрнутых блоков
     <details class="titry-foto__scena"><summary><h3>Утро</h3></summary><ul><li data-foto>…</li>…</ul></details>
   (42 строки целиком тянули подвал телефона на шесть экранов). Вид — как вопросы в слоях: строка во всю
   ширину, линии сверху и снизу, справа плюс, у раскрытой — минус. Вся строка — цель нажатия, не ниже 44.
   Подзаголовок сцены — маленький титр песком, заглавными, шрифтом текста (как метка сцены в фильме) */
.titry > details { border-bottom: 1px solid rgba(246, 241, 231, 0.22); }
.titry > :not(details) + details { margin-top: 12px; border-top: 1px solid rgba(246, 241, 231, 0.22); }
.titry > details + details { margin-top: -12px; }   /* сцены вплотную друг к другу: общий шаг сетки (12) снят */
.titry summary {
  position: relative; display: block; min-height: 44px;
  padding: 13px 44px 13px 0;
  cursor: pointer; list-style: none;
}
.titry summary::-webkit-details-marker { display: none; }
.titry summary h3 {
  margin: 0;
  font-family: var(--шрифт-основной); font-size: 0.875rem; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--песок);                       /* 7.80 на зелёном */
}
/* плюс справа из двух черт; у раскрытой сцены вертикальная черта ложится — остаётся минус */
.titry summary::before, .titry summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 14px; height: 2px; margin-top: -1px; background: var(--песок);
  transition: transform 0.2s ease;
}
.titry summary::after { transform: rotate(90deg); }
.titry details[open] > summary::after { transform: none; }
.titry summary:hover h3 { color: var(--фон); }                         /* кость: строка отзывается на мышь */
.titry summary:hover::before, .titry summary:hover::after { background: var(--фон); }
.titry summary:focus-visible { outline-offset: -3px; }                 /* рамка мяча — внутри строки, не режется */
/* список фото сцены: строка — одно фото (место — автор, лицензия, ссылка, что изменено). 15 точек на телефоне,
   14 на компьютере (там две колонки и строка до 70 знаков), кость: 42 строки — это справка, а не основной
   текст, но читаться должна без прищура (контраст 10.86) */
.titry details > ul { margin: 2px 0 0; padding-bottom: 16px; }
.titry details > ul > li {
  font-size: 0.9375rem; line-height: 1.5;
  overflow-wrap: break-word;                 /* длинное имя автора или ссылки не выталкивает строку за экран */
}
.titry details > ul > li + li { margin-top: 10px; }
.titry > p:last-child { margin-top: 32px; }  /* © — отдельно, после всех фото */

@media (min-width: 900px) {
  /* верх — две колонки, обе заполнены: слева знак и девиз крупно, справа «Кто организует» с контактами.
     Ниже, через линию, во всю ширину — про данные формы, строка про фото и «Фотографии»: строка сцены
     во всю ширину, у раскрытой фото — в две колонки (одной лентой строки тянулись бы на полэкрана каждая).
     До 1120: правая колонка не подходит к правому краю, где во время фильма стоит индекс */
  .titry {
    grid-template-columns: 5fr 6fr; column-gap: 96px; row-gap: 12px;
    padding: 120px max(var(--поле), calc((100% - 1120px) / 2)) 64px;
  }
  .titry > * { grid-column: 1 / -1; }        /* всё, что не расставлено ниже, — во всю ширину, по порядку */
  .titry > p:first-child { grid-column: 1; grid-row: 1; align-self: start; }
  .titry > p:first-child + p {               /* девиз на компьютере — титр размером с заголовок слоя */
    grid-column: 1; grid-row: 2 / span 3; align-self: start;
    margin-top: 16px; font-size: var(--размер-титра); line-height: 1.15; max-width: 12em;
  }
  .titry > h2:first-of-type { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; }
  .titry > h2:first-of-type + p { grid-column: 2; grid-row: 2; margin-top: 16px; }
  .titry > h2:first-of-type + p + ul { grid-column: 2; grid-row: 3; }
  .titry > ul:first-of-type + p { margin-top: 56px; max-width: none; }
  .titry > details { max-width: none; }
  .titry > :not(details) + details { margin-top: 16px; }
  .titry details > ul { columns: 2; column-gap: 48px; padding-bottom: 14px; }
  /* отступ между строками — снизу и внутри строки (padding), а не margin сверху: у верха второй колонки
     не появляется лишний сдвиг, и строка не рвётся между колонками */
  .titry details > ul > li { font-size: 0.875rem; padding-bottom: 10px; break-inside: avoid; }
  .titry details > ul > li + li { margin-top: 0; }
}

/* Подвал под полосой и шкалой (14.10). Полоса сверху прозрачная, шкала-солнце висит над небом сцены —
   над подвалом сквозь них шёл текст титров (на 1440 дуга и номера ложились на строки, знак — на «Фотографии»).
   Отступ сверху тут не спасает: подвал выше экрана, и строки всё равно проходят под полосой.
   Чиним прокруткой, без js: подвал — именованная шкала прокрутки (view-timeline --titry). Когда верх подвала
   подходит к низу полосы, полоса за 48 точек прокрутки заливается зелёным подвала и сливается с ним —
   строки уходят под неё, как под обычную шапку; знак, «Подробно» и «Получить программу» остаются.
   Шкала на компьютере гаснет раньше, пока до неё не дошла первая строка: сцены кончились, ей нечего показывать.
   Отсчёт — от верха подвала («cover 0%» — верх подвала у низа экрана), поэтому низкий подвал на высоком экране,
   который до полосы не доезжает, ничего не меняет. !important — чтобы общий запрет анимаций при «меньше
   движения» (низ файла) этого не снимал: здесь нет движения, только фон и прозрачность от места прокрутки. */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  html.js body { timeline-scope: --titry; }
  html.js .titry { view-timeline: --titry block; }
  html.js .polosa {
    animation: polosa-nad-titrami linear both !important;
    animation-timeline: --titry !important;
    animation-range: cover calc(100dvh - var(--полоса) - 48px) cover calc(100dvh - var(--полоса)) !important;
  }
  @media (min-width: 900px) {
    html.js .indeks {
      animation: shkala-nad-titrami linear both !important;
      animation-timeline: --titry !important;
      /* верх подвала 260 → 140 от верха экрана; первая строка подвала (отступ 120) в этот миг ниже 260,
         а шкала кончается на 138 — строка до неё не доходит */
      animation-range: cover calc(100dvh - 260px) cover calc(100dvh - 140px) !important;
    }
  }
}
@keyframes polosa-nad-titrami { from { background-color: transparent; } to { background-color: var(--зелёный); } }
@keyframes shkala-nad-titrami { to { opacity: 0; visibility: hidden; } }   /* скрыта — и для Tab тоже */
/* Браузер без анимации от прокрутки (сейчас — Firefox): на компьютере подвал просто ложится выше полосы
   и шкалы и накрывает их — текст чистый, шапка над подвалом не видна. На телефоне так нельзя: плашка
   с заявкой снизу стоит на том же слое, что полоса, и ушла бы под подвал */
@supports not ((animation-timeline: view()) and (timeline-scope: none)) {
  @media (min-width: 900px) {
    html.js .titry { z-index: 62; }
  }
}

/* ---------- Служебное: линейка высоты экрана для js ---------- */
.film__mera {
  position: absolute; top: 0; left: 0; width: 1px;
  height: 100vh; height: 100svh;
  visibility: hidden; pointer-events: none;
}

/* ---------- Вход: в базе его нет ----------
   Класс vhod по договору стоит и на <html>, и на слое div.vhod — слой выбираем только как div.vhod */
div.vhod { display: none; }

/* ---------- Режим проверки образцов (?obrazcy=1 → класс на <html>) ---------- */
.obrazcy [data-образец] {
  outline: 2px dashed var(--терракота);
  outline-offset: 2px;
  background: rgb(217 232 91 / 0.45);
}
.obrazcy .scena [data-образец] { color: var(--текст); }   /* на фото подсветка мяча + белый текст не читались бы */

/* ---------- Без анимации по просьбе системы ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}