/* ═══════════════════════════════════════════════════════════════════════════
   МИР «ПУТЕШЕСТВИЕ» — сайт kydaidy.com, 30.08.2026
   Пара к js/put.js и js/klass-a.js. Заменяет собой миры «Коллаж» и «Книга»:
   на странице пути не подключается ни kollazh.css, ни vitrazh.css.

   ОТКУДА МИР. Референсы Кая 30.08: реальная фотография города, поверх неё
   нарисованная героиня и каракули кислотных цветов; заголовки — буквы,
   вырезанные из журнала. Фотография уходит на второй план (цвет приглушён
   ЗАПЕЧЁННО в scripts/goroda_sborka.py, не фильтром), рисованное читается первым.

   ОДИН МИР, БЕЗ ТЁМНОЙ ВЕРСИИ. Ground — белый лист, как в референсах с
   вырезанными буквами; кислотные цвета на нём и держат страницу. Инверсия
   этого мира ломает его смысл, поэтому токены под [data-theme="dark"]
   повторены ТЕМИ ЖЕ значениями — это заявленный выбор, а не забытая ветка.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bumaga: #ffffff;
  --bumaga2: #f1eee7;          /* тень листа, полоски-разделители */
  --tush: #14110e;
  --tush2: #4a423a;            /* второй уровень текста, 8.8:1 на белом */

  /* Кислотная семёрка — из референсов. Те, что отмечены «заливка», в текст
     не идут никогда: на белом они не добирают 4.5:1, и подкручивать их
     светлоту значит потерять сам цвет. Ограничение честнее подмены. */
  --ultramarin: #2b3ae8;       /* 8.0:1 — текст можно */
  --fuksiya: #d1116f;          /* 5.6:1 — текст можно */
  --biryuza: #0a7f72;          /* 5.3:1 — текст можно */
  --oranzh: #f2571b;           /* заливка и крупный текст */
  --laym: #b8f02a;             /* заливка */
  --zheltyy: #ffc81f;          /* заливка */
  --nebo: #7fd0f5;             /* заливка */

  --shag: clamp(1rem, 2.2vw, 1.6rem);
  --polya: clamp(1.15rem, 5vw, 4.5rem);
  --lenta: 3.5rem;             /* высота билета-маршрута */
}

/* ── Поверхности, которые рисует браузер. Их не видно в макете, но именно они
   выдают собранную страницу: подсветка выделения, каретка, полоса прокрутки,
   кольцо фокуса по умолчанию не принадлежат ни одному дизайну. ── */
::selection { background: var(--laym); color: var(--tush); }
:root { caret-color: var(--fuksiya); scrollbar-color: var(--tush) var(--bumaga2); accent-color: var(--ultramarin); }
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ultramarin);
  outline-offset: 3px;
  border-radius: 2px;
}

* { box-sizing: border-box; }

/* Текст только для читалки: номер ступени рядом с цифрой на билете. Цифра «3»
   сама по себе диктору ничего не говорит. */
.skrytno {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

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

body {
  margin: 0;
  background: var(--bumaga);
  color: var(--tush);
  font: 400 clamp(1.02rem, 1.15vw, 1.19rem)/1.55 Onest, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ═══ БИЛЕТ-МАРШРУТ ═══════════════════════════════════════════════════════
   Человек всё время видит, на какой он ступени и сколько осталось. Это не
   декоративная навигация: лестница Ханта — смысл страницы, и её обязано быть
   видно. Полоса белая и непрозрачная — над фотографией города любой полу-
   прозрачный слой отдаёт текст на милость случайного кадра. */
.bilet {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--shag);
  height: var(--lenta);
  padding: 0 var(--polya);
  background: var(--bumaga);
  border-bottom: 2px solid var(--tush);
}

.bilet__marka {
  font: 700 .78rem/1 Unbounded, Onest, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tush);
  white-space: nowrap;
}

.bilet__put { display: flex; align-items: center; gap: .55rem; margin-left: auto; }

.bilet__tochka {
  --cvet: var(--tush);
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 2px solid var(--tush);
  border-radius: 50%;
  font: 600 .78rem/1 Oswald, Onest, sans-serif;
  color: var(--tush);
  text-decoration: none;
  background: var(--bumaga);
  transition: background .22s cubic-bezier(.16,1,.3,1), color .22s, transform .22s cubic-bezier(.16,1,.3,1);
}
.bilet__tochka:hover { transform: translateY(-2px); }
.bilet__tochka[data-proydeno] { background: var(--tush); color: var(--bumaga); }
.bilet__tochka[data-zdes] { background: var(--laym); border-width: 3px; transform: scale(1.14); }

.bilet__gde { display: none; font: 600 .78rem/1 Oswald, Onest, sans-serif; letter-spacing: .04em; }

@media (max-width: 760px) {
  .bilet__put { display: none; }
  .bilet__gde { display: block; margin-left: auto; }
}

/* ═══ ГОРОД — одна ступень ════════════════════════════════════════════════
   Высокая секция, внутри липкий экран. Ход прокрутки приходит в --ka-t из
   klass-a.js: один слушатель на страницу, дальше всё считает CSS. */
.gorod {
  position: relative;
  min-height: calc(100svh * var(--hod, 2.4));

  /* Ход сцены с надбавкой. --srazu поднимает стартовое значение для сцен,
     которые обязаны быть готовы ДО первой прокрутки: у первого экрана нечего
     раскрывать, его ещё никто не листал. Пустая фотография вместо заголовка —
     это не сдержанность, это потерянный человек.
     --vidno — общая доля появления. Одна формула на карточку, каракули и
     буквы: пороги, разъехавшиеся по трём местам, расходятся молча. */
  --t: calc(var(--ka-t, 0) + var(--srazu, 0));
  --vidno: clamp(0, (var(--t) - .03) * 11, 1);
}
.gorod:first-of-type { --srazu: .30; }

.gorod__ramka {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  /* Фон рамки виден лишь мгновение до загрузки фотографии. Тёмный давал
     чёрную вспышку посреди белого мира и делал рамку видимой границей, к
     которой полноэкранные дети прижаты вплотную. Цвет бумаги честнее: пауза
     не мигает, границы нет. */
  background: var(--bumaga);

  /* Заголовок и реплика стоят в сетке, а не абсолютно. Абсолютом их развести
     нельзя: длина фразы меняется от города к городу, и в «К вечеру встало как
     было» третья строка легла прямо на карточку. Сетка делает наложение
     невозможным по построению, а не по удачно подобранным отступам. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: calc(var(--lenta) + 3svh) var(--polya) clamp(1rem, 4svh, 3rem);
}

/* Фотография: медленный наезд и увод вверх по ходу прокрутки. Разная скорость
   у фото и у фигуры даёт глубину без второго слоя разметки. */
.gorod__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kadr, 50% 50%);
  transform: scale(calc(1.1 - var(--ka-t, 0) * .1)) translateY(calc(var(--ka-t, 0) * -4svh));
  will-change: transform;
}

/* Верх кадра гасим под белый билет, низ — под текст. Градиент от прозрачного
   к цвету бумаги, а не серая вуаль: вуаль пачкает фотографию, градиент
   выводит её в лист. */
.gorod__ramka::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #fff 0, #fff0 14%),
    linear-gradient(0deg, #fff 0, #fff0 34%);
}

/* ── Героиня ── */
.gorod__figura {
  position: absolute;
  left: 0;
  bottom: 0;
  height: min(64svh, 42vw);
  width: auto;
  z-index: 3;
  transform:
    translateX(calc(var(--ot, 52vw) + var(--ka-t, 0) * var(--proyti, 24vw)))
    translateY(calc((sin(var(--ka-t, 0) * 14rad) - 1) * .45svh))
    scaleX(var(--storona, 1));
  filter: drop-shadow(0 1.6svh 2.2svh rgba(20, 17, 14, .34));
  will-change: transform;
}
/* Без sin() шаг просто ровный — фигура всё равно идёт, просто не покачивается. */
@supports not (transform: translateY(calc(sin(1rad) * 1px))) {
  .gorod__figura { transform: translateX(calc(var(--ot, 52vw) + var(--ka-t, 0) * var(--proyti, 24vw))) scaleX(var(--storona, 1)); }
}

/* ── Каракули: рисованный слой поверх фотографии ──
   Всё рисуется в SVG прямо в разметке: это линии, а не изображения, поэтому
   они ничего не весят, остаются резкими на любом экране и красятся токенами. */
.karakuli {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.karakulya {
  position: absolute;
  height: auto;
  overflow: visible;
  transform-origin: center;
  opacity: clamp(0, (var(--t, 0) - var(--kogda, .04)) * 10, 1);
  transform:
    translate(calc(var(--t, 0) * var(--sdvig-x, 0px)), calc(var(--t, 0) * var(--sdvig-y, -3vh)))
    rotate(calc(var(--t, 0) * var(--krutit, 0deg)))
    scale(clamp(.6, (var(--t, 0) - var(--kogda, .04)) * 7, 1));
}

/* ── Текст ступени ──
   Лежит на белом листе, вырванном из полосы: у бумаги есть край, поэтому
   текст никогда не оказывается прямо на фотографии. */
.gorod__rech {
  position: relative;
  z-index: 4;
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  max-width: 40rem;
  /* Только прозрачность. Свой сдвиг был ВНИЗ на 2.4rem, а карточка прижата к
     низу кадра, где запаса 36 px, — на входе сцены она уезжала за край и
     обрезалась. Движение кадра и так делает klass-a.css (30 px, укладывается
     в отступ): два сдвига поверх друг друга — это и лишнее, и опасное. */
  opacity: var(--vidno, 1);
}
.gorod--sprava .gorod__rech { grid-column: 2; justify-self: end; }

/* Крючок [data-ka-scena] несёт не только механику, но и ОФОРМЛЕНИЕ из
   css/klass-a.css: там ему заданы position:sticky, min-height:100svh и
   align-content:center. Взяв крючок ради смены реплик, я вместе с ним получил
   растяжку карточки на весь экран — третья строка сетки потребовала 900 px, и
   текст уехал за нижний край. Снимаем ровно размер, механику не трогаем:
   стопку кадров, их появление и уход вверх модуль делает сам и делает лучше,
   поэтому своего дубля здесь нет. */
.gorod__rech[data-ka-scena] {
  position: relative;
  min-height: 0;
  align-content: end;
}

.rech__list {
  background: var(--bumaga);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 1.4rem 3rem -1rem rgba(20, 17, 14, .3);
  clip-path: polygon(0 1.1%, 12% 0, 34% .8%, 61% 0, 88% .9%, 100% 0,
                     100% 99%, 76% 100%, 49% 99.2%, 23% 100%, 0 99%);
}

.rech__lid {
  margin: 0 0 .7em;
  font: 700 clamp(1.16rem, 2.1vw, 1.6rem)/1.34 Onest, sans-serif;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.rech__telo { margin: 0; max-width: 42ch; color: var(--tush2); }
.rech__telo + .rech__telo { margin-top: .7em; }

/* ── Кнопка ── */
.knopka {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.15rem;
  padding: .82rem 1.5rem;
  background: var(--tush);
  color: var(--bumaga);
  font: 600 1rem/1 Onest, sans-serif;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(1% 0, 99% 2%, 100% 100%, 2% 98%);
  transition: background .2s cubic-bezier(.16,1,.3,1), color .2s;
}
.knopka:hover, .knopka:focus-visible { background: var(--fuksiya); color: var(--bumaga); }
.knopka__strelka { width: 1.05em; height: 1.05em; flex: none; }
.knopka + .knopka { margin-left: .7rem; }
.knopka--tihaya { background: none; color: var(--tush); box-shadow: inset 0 0 0 2px var(--tush); }
.knopka--tihaya:hover, .knopka--tihaya:focus-visible { background: var(--tush); color: var(--bumaga); }

/* ═══ ЗАГОЛОВОК ИЗ ВЫРЕЗАННЫХ БУКВ ════════════════════════════════════════
   Разбивает на буквы js/zhizn.js. Каждая буква — своя гарнитура, свой наклон,
   своя плашка: это и есть приём из референса, а не эффект поверх шрифта.
   Слово не рвётся переносом: буквы сидят внутри .slovo с nowrap. */
/* Размер и место заголовка держит АТРИБУТ, а не класс: класс `vyrezka`
   добавляет скрипт после разрезания на буквы, и до этого момента заголовок
   иначе остаётся без единого правила. */
[data-vyrezka] {
  position: relative;
  z-index: 5;
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  margin: 0;
  font-size: clamp(1.9rem, 6.2vw, 4.9rem);
  line-height: .96;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* Ещё не разрезан — читается сам по себе, на собственной плашке. Прежде его
   читаемость держалась на тёмном фоне сцены: стоило поменять фон рамки, и
   заголовок стал белым по белому. Состояние обязано быть самодостаточным. */
[data-vyrezka]:not(.vyrezka) {
  color: var(--tush);
  background: var(--bumaga);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .06em .14em;
}

.vyrezka .slovo { white-space: nowrap; }
.gorod--sprava [data-vyrezka] { grid-column: 2; justify-self: end; text-align: right; }

.vyrezka .bukva {
  display: inline-block;
  padding: .06em .12em;
  font-style: normal;
  color: var(--tush);
  background: var(--bumaga);
  text-shadow: none;
  --poyavilas: clamp(0, (var(--t, 1) - var(--i, 0) * .006 - .01) * 26, 1);
  opacity: var(--poyavilas);
  transform: translateY(calc((1 - var(--poyavilas)) * -.45em)) rotate(var(--naklon, 0deg));
}
.vyrezka .bukva:nth-child(6n+1) { font-family: Unbounded, sans-serif; font-weight: 900; --naklon: -3.5deg; }
.vyrezka .bukva:nth-child(6n+2) { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-style: italic; --naklon: 2.5deg; background: var(--zheltyy); }
.vyrezka .bukva:nth-child(6n+3) { font-family: Oswald, sans-serif; font-weight: 600; --naklon: 4deg; }
.vyrezka .bukva:nth-child(6n+4) { font-family: "Rubik Mono One", monospace; --naklon: -2deg; background: var(--tush); color: var(--bumaga); }
.vyrezka .bukva:nth-child(6n+5) { font-family: Unbounded, sans-serif; font-weight: 700; --naklon: 3deg; background: var(--nebo); }
.vyrezka .bukva:nth-child(6n+6) { font-family: "Playfair Display", Georgia, serif; font-weight: 900; --naklon: -4deg; background: var(--laym); }

/* ═══ ЗЕРНО ПЛЁНКИ ════════════════════════════════════════════════════════
   Приём с эталонов framerate.space (разбор research/RAZBOR-FRAMERATE-2026-08-30.md):
   шум инлайн-SVG под soft-light. Ноль дополнительных запросов, одна материя на
   всю страницу — фотография и рисованное садятся на общую поверхность. */
.zerno {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E");
}

/* ═══ РАЗДЕЛ ВОПРОСОВ И ПОДВАЛ (обычный поток, без фотографий) ═══════════ */
.list {
  padding: 3.6rem var(--polya);
  background: var(--bumaga);
}
.list__zag {
  margin: 0 0 1.8rem;
  font: 900 clamp(1.7rem, 4vw, 3rem)/1.05 Unbounded, sans-serif;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.list--dve {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .list--dve { grid-template-columns: 1fr; } }
.list--dve .list__zag { margin: 0; position: sticky; top: calc(var(--lenta) + 1.5rem); }
@media (max-width: 860px) { .list--dve .list__zag { position: static; margin-bottom: 1.4rem; } }

.vopros { border-top: 2px solid var(--tush); }
.vopros:last-of-type { border-bottom: 2px solid var(--tush); }
.vopros > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0;
  position: relative;
  font: 600 1.22rem/1.32 Onest, sans-serif;
}
.vopros > summary::-webkit-details-marker { display: none; }
.vopros > summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.45rem;
  width: .8rem;
  height: .8rem;
  border-right: 2px solid var(--tush);
  border-bottom: 2px solid var(--tush);
  transform: rotate(45deg);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.vopros[open] > summary::after { transform: rotate(-135deg); }
.vopros__otvet { margin: 0 0 1.2rem; max-width: 44ch; color: var(--tush2); }

.podval {
  padding: 2.6rem var(--polya) 3rem;
  border-top: 2px solid var(--tush);
  color: var(--tush2);
}
.podval a { color: var(--tush); }
.podval > p { max-width: 58ch; }
.podval__snoska { max-width: 56ch; font-size: .78rem; line-height: 1.5; }

/* ═══ ТЕЛЕФОН ════════════════════════════════════════════════════════════
   Липкий экран остаётся: он держится на position:sticky, а не на перехвате
   прокрутки, и жестам Telegram WebView не мешает. Уменьшаем только ход —
   на телефоне длинная сцена читается как зависшая страница. */
@media (max-width: 760px) {
  .gorod { min-height: calc(100svh * var(--hod-tel, 1.9)); }
  .gorod__ramka { grid-template-columns: 1fr; gap: .6rem; padding-top: calc(var(--lenta) + 1.4svh); }
  /* Самая длинная реплика (Мюнхен, три строки лида) не помещалась на экран
     телефона на 5 px. Выигрыш берём отступом и интерлиньяжем лида, а не
     обрезкой текста: текст — товар, поля — нет. */
  .rech__list { padding: .95rem 1.1rem; }
  /* Финальная сцена несёт две кнопки, и на проде — где шрифты приходят из
     Google и метрики чуть шире локальных — карточка вылезала на 6 px за низ
     экрана. Отступ кнопки меньше именно на телефоне: место дороже воздуха. */
  .knopka { margin-top: .8rem; padding: .72rem 1.25rem; }
  .gorod--sprava [data-vyrezka], .gorod--sprava .gorod__rech { grid-column: 1; justify-self: stretch; text-align: left; }
  /* Дорожку на телефоне задаём САМИМ transform, а не переменными --ot/--proyti:
     они стоят инлайном в разметке, а инлайн-стиль сильнее любого правила в
     media-блоке. Прежняя мобильная версия молча жила по десктопным числам, и
     фигура вылезала за правый край на 20 px. */
  .gorod__figura {
    height: min(33svh, 46vw);
    bottom: 44svh;
    transform:
      translateX(calc(52vw + var(--ka-t, 0) * 12vw * var(--storona, 1)))
      translateY(calc((sin(var(--ka-t, 0) * 14rad) - 1) * .3svh))
      scaleX(var(--storona, 1));
  }
  @supports not (transform: translateY(calc(sin(1rad) * 1px))) {
    .gorod__figura { transform: translateX(calc(52vw + var(--ka-t, 0) * 12vw * var(--storona, 1))) scaleX(var(--storona, 1)); }
  }


}

/* ═══ ДВИЖЕНИЕ ВЫКЛЮЧЕНО ══════════════════════════════════════════════════
   Выключаем целиком, а не наполовину: klass-a.js в этом режиме ставит --ka-t
   сразу в 1, поэтому всё видно, но ничто не едет. Липкость снимаем — иначе
   человек, отключивший движение, получит семь экранов, которые не листаются
   привычным образом. */
@media (prefers-reduced-motion: reduce) {
  .gorod { min-height: 0; }
  .gorod__ramka { position: static; height: auto; min-height: 78svh; display: block; padding: 0; }
  .gorod__foto, .gorod__figura, .karakulya, .vyrezka .bukva { transform: none; }
  .gorod__rech { opacity: 1; padding: 1.5rem var(--polya) 2.5rem; max-width: none; }
  .gorod__rech [data-ka-kadr] { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  [data-vyrezka] { padding: 1rem var(--polya) 0; }
  .knopka { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВНУТРЕННИЕ СТРАНИЦЫ (/razbor, /programma)
   Тот же мир: город-ступень в шапке, дальше содержание на белом листе.
   Город берётся тот, на котором страница стоит в маршруте, — человек видит,
   что не ушёл с пути, а открыл его ступень крупнее.
   ═══════════════════════════════════════════════════════════════════════════ */

.nazad {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 600 .78rem/1 Oswald, Onest, sans-serif;
  letter-spacing: .04em;
  color: var(--tush);
  text-decoration: none;
}
.nazad svg { width: 1.05em; height: 1.05em; transform: scaleX(-1); }
.nazad:hover { color: var(--fuksiya); }

.stupen {
  margin-left: auto;
  font: 600 .78rem/1 Oswald, Onest, sans-serif;
  letter-spacing: .04em;
  color: var(--tush);
}

/* Полоса чисел: три факта о встрече, набранные крупно. Не «hero-metric» —
   это не витрина достижений, а условия: сколько идёт, с кем, сколько стоит. */
.uslovia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: 2rem var(--polya);
  border-bottom: 2px solid var(--tush);
}
.uslovie__chto { font: 900 clamp(1.8rem, 4vw, 3rem)/1 Unbounded, sans-serif; letter-spacing: -.03em; }
.uslovie__kak { margin: .5rem 0 0; color: var(--tush2); max-width: 26ch; }

/* Ход встречи. Нумерация здесь несёт смысл — это порядок во времени, без него
   расписание нечитаемо; в остальных местах номеров нет. */
.hod { counter-reset: shag; }
.hod__shag {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: 1.3rem 0;
  border-top: 2px solid var(--tush);
}
.hod__shag:last-child { border-bottom: 2px solid var(--tush); }
.hod__kogda { font: 600 1rem/1.2 Oswald, Onest, sans-serif; letter-spacing: .02em; }
.hod__chto { margin: 0; max-width: 52ch; }
.hod__chto b { font-weight: 700; }

.spisok { margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.spisok li {
  position: relative;
  padding: .7rem 0 .7rem 2.1rem;
  border-bottom: 1px solid var(--bumaga2);
}
.spisok li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.15rem;
  width: .85rem;
  height: .85rem;
  background: var(--laym);
  clip-path: polygon(6% 0, 100% 8%, 94% 100%, 0 92%);
}

.smetka {
  max-width: 40rem;
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--bumaga2);
  color: var(--tush2);
  clip-path: polygon(0 2%, 24% 0, 58% 1.4%, 100% 0, 100% 98%, 62% 100%, 27% 98.4%, 0 100%);
}
.smetka b { color: var(--tush); }

.list + .list { border-top: 2px solid var(--tush); }

/* На телефоне две колонки в расписании не помещаются: текстовая ужимается до
   трёх слов в строку и читается лесенкой. Ставим одну колонку — время сверху,
   описание под ним. */
@media (max-width: 700px) {
  .hod__shag { grid-template-columns: 1fr; gap: .5rem; }
  .hod__kogda br { display: none; }
  .hod__kogda { color: var(--tush2); }
}
.list__nabor { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
.list__vvod { max-width: 52ch; margin: 0 0 1.6rem; color: var(--tush2); }


/* Крупные экраны: те же контейнеры дышат шире. Одним явным шагом вместо clamp()
   в каждом правиле — значение остаётся читаемым и человеку, и проверке. */
@media (min-width: 900px) {
  .uslovia { padding: 3.4rem var(--polya); }
  .hod__shag { padding: 2rem 0; }
  .list { padding: 6.4rem var(--polya); }
  .podval { padding: 4rem var(--polya) 3rem; }
}