/* ГЛАВНАЯ СТРАНИЦА — файл дорожки 2 переноса вида (спецификация `docs/spec/v10-visual-transfer.md`,
   раздел 5). Первый экран, кнопки и экраны 3–5 ленты.

   🔴 ФАЙЛ ПОДКЛЮЧАЕТСЯ В `head` СВОЕЙ ЖЕ СТРАНИЦЫ, а не в рамке сайта: страница сорта
   не везёт стили первого экрана, а раздел — стилей блоков главной.

   🔴 НИ ОДНОГО КОДА ЦВЕТА. Все цвета — именами из `tokens.css`, и это не стиль, а способ
   не получить три разных зелёных на одной странице: UI строится тремя дорожками одновременно.
   Проверяется машиной (`core/site/tests/test_catalog_appearance.py`, проверка 9А-0в-01).

   ⛔ НИ ОДНОГО `@keyframes` В ЭТОМ ФАЙЛЕ, и это не вкус. Сторож границ (`chuzhie_obekty_glavnoy`)
   разворачивает `@media` и `@supports`, а на незнакомом @-правиле ОТКАЗЫВАЕТ с ошибкой —
   намеренно, чтобы не толковать доли `0%` и `to` как селекторы. Заведи здесь `@keyframes` —
   и три проверки (`test_0_1_11`, `test_9a_3_25a`, `test_9a_3a_34`) упадут разбором, а не
   находкой. Поэтому движение на главной сделано переходами состояний, а не своими анимациями.

   🔴 СОБСТВЕННЫХ ФОНОВ У ГЛАВНОЙ БОЛЬШЕ НЕТ. Спецификация v10, раздел 4. Под каждой страницей
   лежит ОДИН закреплённый слой видео с вуалью (`.backdrop` в `site.css`), и всё, что рисует
   этот файл, стоит ПОВЕРХ него: стекло, кромка, тень. Первый экран вёз свой снимок со своей
   завесой, и на его нижней границе был виден стык двух разных полей — это первое, что Кирилл
   назвал, разбирая прототип. ⛔ Возвращать сюда `background-image` полосой нельзя: стык
   вернётся вместе с ним. */

/* ── Первый экран главной ─────────────────────────────────────────────────── */
/* 🔴 ПОЛОСА ЖИВЁТ ВНЕ ТЕКСТОВОЙ КОЛОНКИ — она вставлена в блок `vo_vsyu_shirinu` шаблона
   рамки, до `main`. Поэтому она широкая по устройству страницы, а не по уловке с тенью
   и обрезкой, которая умела размазать краску за колонку и не умела изображение.

   🔴 ЧТО ЗДЕСЬ ТЕПЕРЬ НЕ ОБЪЯВЛЕНО ВОВСЕ: `background-color`, `background-image` и пара
   правил под ширину окна, выбиравшая снимок в 78 КБ телефону и в 212 КБ монитору. Снимок
   первого экрана больше не нужен: под текстом идёт то же видео, что и под остальной
   страницей, а читаемость светлого текста держит общая вуаль (`--vual`) плюс тени текста
   ниже. Файлы `img/pervyy-ekran-1200.jpg` и `img/pervyy-ekran-2000.jpg` этой страницей
   больше не используются — их судьба за координатором, удалять чужую статику дорожка
   не вправе.

   🔴🔴 ЭКРАН НЕ РАВЕН ОКНУ — правка Кирилла 04.08.2026, дословно: «стартовая картинка
   слишком большая (фото 1), не должна занимать 100% первого экрана, экран не = ВЕСЬ экран,
   может быть переход». Под полосой обязано остаться видно начало следующего блока, и это
   замеряется: `tools/zamer/site-appearance.py` требует не меньше полусотни точек хвоста.

   ⚠️ `svh` — «маленькая» высота окна: на телефоне адресная строка то появляется, то исчезает,
   и `100vh` там больше настоящего экрана. Вычитаются 5rem закреплённой шапки — её высота
   тоже замеряемый предел (≤ 80 точек).

   🔴 ДОЛЯ ПОДНЯТА С 38 ДО 43 — 07.08.2026, правка Кирилла: «лого наталии сдвинь немного вниз,
   что бы сверху растояния больше было от шапки… блок с 8мью иконнками сдвинь немного вниз,
   снизу оч большой отступ стал». Обе просьбы про одно и то же — про то, где кончается первый
   экран: он тянет за собой и логотип внутри себя, и блок плиток под собой.

   Ниже по файлу поле сверху сделано втрое больше поля снизу (`--o-8` против `--o-5`) —
   иначе прибавка высоты разошлась бы поровну вверх и вниз, а вниз она не нужна.
   Замер на 2540×1300: логотип отошёл от шапки с 91 точки до 159, свободного фона под
   плитками стало 89 вместо 154.

   🔴🔴 ДОЛЯ ДО ЭТОГО БЫЛА УМЕНЬШЕНА С 55 ДО 38 — задача Кирилла 06.08.2026, дословно: «давай поднимем
   чуть экран с каталогам по типам, что бы на первом экране уже был виден каталог.
   И оставалось небольшое пространство снизу, что бы экран не упирался „в рамку монитора“,
   а было еще чуть фона свободного, немного».

   Требование этим стало сильнее прежнего. Раньше под полосой хватало «видно начало
   следующего блока»; теперь на первом экране обязан помещаться ЦЕЛЫЙ РЯД ПЛИТОК РАЗДЕЛОВ,
   и под ним ещё оставаться полоса свободного фона. Числа замера — в докладе окна;
   сторож хвоста (`tools/zamer/site-appearance.py`) держит нижнюю границу и краснеет,
   если хвост под полосой стал меньше полусотни точек. */
/* 🔴 РАСКЛАДКА ТЯНЕТСЯ ЗА ОКНОМ — 6 % поля, 88 % ряд плиток, левый край заголовка
   совпадает с левым краем первой плитки (решение Кирилла 11.08.2026, замер на 2464). */
.pervyy-ekran {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  /* ⚠️ Сдвига шапки здесь нет намеренно: на узком экране он равен нулю, а на широком это
     правило целиком перекрыто медиазапросом от 801 точки в конце файла — там он и стоит. */
  padding: var(--o-4) 0 var(--o-3);
  /* 🔴 ОБРЕЗКА ПО ГОРИЗОНТАЛИ УБИРАЕТ ПОЛОСУ ПРОКРУТКИ ВНИЗУ СТРАНИЦЫ. Слои затемнения шире
     окна на четверть с каждой стороны — это их устройство, иначе у зоны была бы видимая
     кромка. Но вылет вправо считается шириной страницы: замер 12.08.2026 на окне 1440 дал
     360 точек лишней ширины, и вся главная ездила вбок.

     Видно от обрезки ничего не пропадает: у правого края слоя маска равна нулю задолго
     до его границы, а левый край слоя и так лежит за краем окна.

     ⚠️ `clip`, а не `hidden`: `hidden` завёл бы здесь свою прокрутку и сломал закрепление
     фона. Тот же приём и по тому же поводу стоит у блока разделов ниже. */
  overflow-x: clip;
}
/* 🔴 СЛОЙ ЗАТЕМНЕНИЯ ЗАКРЕПЛЁН ЗА ОКНОМ, А НЕ ЗА СЕКЦИЕЙ, И ЭТО ЛЕЧЕНИЕ ВИДИМОГО ШВА.
   Кирилл 12.08.2026: «под кнопкой и слева от кнопки я вижу наше затемнение прямо глазами,
   а у нас уговор: области затемнения и швы глазами не видно».

   Что было: слой лежал внутри `.pervyy-ekran` с `inset: 0`, то есть обрывался ровно
   по краям секции. Замер вклада слоя — два снимка, со слоем и без, с ОСТАНОВЛЕННЫМ видео,
   иначе кадр успевает смениться, — дал перепад силы 66–69 % на высоте 52 точки. Это верхняя
   граница блока: прямая линия во всю ширину экрана, её и видно.

   Теперь слой закреплён за окном (`fixed`), краёв у него нет вовсе, а сила гаснет только
   самим градиентом — той самой дугой, которую Кирилл рисовал от руки.

   ⚠️ `z-index` держит слой НАД видео, но ПОД содержимым: у первого экрана свой `z-index: 1`
   на `__vnutri`, у ряда плиток — своя зона. */
.pervyy-ekran__ten {
  /* 🔴 СЛОЙ ЕДЕТ ВМЕСТЕ С ТЕКСТОМ, А НЕ СТОИТ В ОКНЕ. Кирилл 12.08.2026: «я мотаю страницу,
     а область размытия переносится с мотанием — ты должен был закрепить область за текстом».

     Прежде слой был `fixed`, чтобы у него не было краёв: `absolute` внутри секции обрывался
     по её границе, и Кирилл видел прямую линию во всю ширину (замер дал перепад 66–69 %
     на высоте 52 точки).

     Теперь оба условия выполнены разом: слой `absolute` — значит прокручивается с текстом, —
     но САМ ОН ВТРОЕ ВЫШЕ СЕКЦИИ и в полтора раза шире окна. Зона гаснет внутри него задолго
     до его собственных краёв, поэтому обрываться нечему.

     ⚠️ Проценты у `inset` считаются от размера секции, у эллипса — от размера слоя. Поэтому
     доли эллипса пересчитаны: центр 31 % / 49 % от слоя — это середина блока строк. */
  position: absolute;
  inset: -100% -25%;
  z-index: 0;
  pointer-events: none;
  background: var(--zalivka-zony-teksta);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: var(--zona-teksta-maska);
  -webkit-mask-image: var(--zona-teksta-maska);
  /* 🔴 ДВЕ ЗОНЫ СКЛАДЫВАЮТСЯ, А НЕ ПЕРЕКРЫВАЮТ ДРУГ ДРУГА. Вторая — левая часть блока,
     которую Кирилл обвёл красным 12.08.2026 и попросил затемнить сильнее. `add` даёт
     сумму прозрачностей, поэтому в обведённом месте зона гуще, а по краям обе гаснут
     той же плавной кривой — новой границы не появляется.

     ⛔ Вебкитовского дубля здесь нет намеренно: `-webkit-mask-composite` понимает другой
     набор значений и, стоя рядом, ПЕРЕБИВАЕТ стандартное свойство. На плитках это уже
     ломало маску, и зона превращалась в прямоугольник с кромкой. */
  /* 🔴 `intersect`, а не `add`: маски по осям обязаны ПЕРЕМНОЖАТЬСЯ. Сложение дало бы крест
     из двух полос во всю ширину и высоту, а не пятно вокруг текста.

     ⛔ Вебкитовского дубля нет намеренно: `-webkit-mask-composite` понимает другой набор
     значений и, стоя рядом, перебивает стандартное свойство. На плитках это уже ломало
     маску, и зона превращалась в прямоугольник с кромкой. */
  mask-composite: intersect;
}

/* Широкая зона: своё поле у слоя больше, чем у первой зоны, — он обязан доставать
   до низа окна, а первая кончается на уровне плиток. Краёв у него всё так же нет:
   зона гаснет внутри слоя задолго до его границ. */
.pervyy-ekran__ten--shirokaya {
  position: absolute;
  inset: -90% -25% -220% -25%;
  z-index: 0;
  pointer-events: none;
  background: var(--zalivka-zony-shirokoy);
  /* ⛔ Размытия здесь нет, и это не забывчивость: слово Кирилла «а РАЗМЫТИЕ вообще не надо».
     Общий класс `.pervyy-ekran__ten` его несёт, поэтому здесь оно снимается явно. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: var(--zona-shirokaya-maska);
  -webkit-mask-image: var(--zona-shirokaya-maska);
  mask-composite: intersect;
}

.pervyy-ekran__vnutri {
  position: relative;
  z-index: 1;
  width: var(--shirina-ryada);
  max-width: none;
  margin: 0;
  margin-left: var(--pole-okna);
  padding: 0;
  text-align: left;
}

/* 🔴 НАДЗАГОЛОВОК СТОИТ ПОД «DERVO», А НЕ НАД НИМ — слово Кирилла 12.08.2026: «ставь её
   под Dervo». Вместе с ним под маркой идёт и «с посадкой и гарантией», и обе строки набраны
   ОДИНАКОВО: один шрифт, один кегль, одна кремовая краска — «цвет у обоих предложений
   кремовый».

   ⚠️ Обе строки блочные и лежат внутри `h1`: так страница называется роботам полной фразой
   «DERVO Полный цикл озеленения с посадкой и гарантией», а не одной маркой. Разрядку
   заголовка снимаем обеим — она задана марке, а не человеческим словам.

   ⚠️ Левый край у всех трёх строк один: отрицательные поля стоят только у «DERVO»
   и гасят её собственную разрядку и боковой просвет буквы «D». */
.pervyy-ekran__nadzagolovok,
.pervyy-ekran__podzagolovok {
  display: block;
  margin: 0;
  /* 🔴 КРАСКА — МЯГКОЕ МОЛОКО, А НЕ ТИХАЯ. Решение Кирилла 12.08.2026 после замера.

     Тихую краску он же и просил днём раньше — «тоже делаем цвета как нижняя фраза», — и на
     ровном фоне она верна: строки не спорят с маркой. Но на фотографии неба она не тянет,
     и это не вкус, а предел: у роли `--tekst-tihiy` потолок контраста 55,4 — столько она даёт
     даже на абсолютно чёрном фоне, то есть порога 60 ею не взять никаким затемнением.

     ⚠️ Кодов цвета здесь нет и в пояснении: сторож 9А-0в-01 ищет их по всему файлу, включая
     комментарии. Первая редакция этой записи назвала краски кодами и покраснела на себе же.

     Замер строк на небе до правки: 36,1 · 36,9 · 48,8. Мягкое молоко даёт 65,8 сразу,
     оставаясь на полтона тише белого — марка по-прежнему главная на экране.

     Проверка: `tools/zamer/kontrast-pervogo-ekrana.py`. */
  color: var(--moloko-myagkoe);
  /* 🔴 ГРОТЕСК, А НЕ АНТИКВА — слово Кирилла 12.08.2026: «убираем засечки на словах,
     и на нижней фразе тоже засечки убираем». Засечки на первом экране остались ровно
     у одного слова — у марки; всё, что читается предложением, набрано гротеском.

     ⚠️ Кегль не тронут, а строка на вид стала крупнее: у гротеска строчные буквы выше
     при том же кегле. Проверяется долей от ширины окна, а не подгонкой числа. */
  font-family: var(--shrift-podzagolovka);
  font-size: var(--kegl-podvodki);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  text-shadow: var(--ten-teksta);
  text-transform: none;
}

/* 🔴 ОПТИЧЕСКИЙ СДВИГ СТОИТ НА САМОЙ МАРКЕ, А НЕ НА ЗАГОЛОВКЕ ЦЕЛИКОМ. Пока он был задан
   всему `h1`, он тащил за собой и обе строки под маркой: замер 12.08.2026 дал разброс левых
   краёв 12 точек — «DERVO» 144, «Полный цикл» 149, «с посадкой» 138, кнопка 148, плитка 149.

   У прописной «D» боковой просвет больше, чем у строчной «с», поэтому сдвиг нужен ей одной.
   Проверка — не чтение правил, а числа: левые края всех строк первого экрана и левый край
   первой плитки сходятся в пределах пары точек. */
.pervyy-ekran__zagolovok > .sfon:first-child {
  /* -.028em, а не -.05: при половине эма марка перелетала на пять точек левее
     остальных строк. Число подобрано замером, а не на глаз. */
  margin-left: -.028em;
}

/* 🔴 СТРОКА ИЗ ДВУХ ФРАЗ ЖИВЁТ СО СВОИМ КЕГЛЕМ, И ЭТО ДЕРЖИТ ВЫСОТУ ПЕРВОГО ЭКРАНА.
   Высоту строчного бокса задаёт кегль того, кто строку содержит. Внутри заголовка это кегль
   марки — 8,8 % ширины окна, на мониторе 217 точек, — и одна строка мелких букв занимала бы
   ровно столько. Замер 12.08.2026 без обёртки: заголовок 434 точки вместо 276, и ряд плиток
   ушёл за нижний край окна на 53 точки.

   Отступ от марки стоит здесь же: у строчного элемента верхнее поле строки не раздвигает. */
.pervyy-ekran__stroka {
  display: block;
  margin-top: var(--o-2);
  /* Сдвиг на боковой просвет буквы «П» в гротеске — тот же приём, что у марки строкой выше,
     и то же основание: Кирилл выравнивает по видимому штриху, а не по коробке строки.
     Замер по точкам снимка 12.08.2026 до сдвига: штрих марки 149, штрих фразы 151. */
  margin-left: -.05em;
  font-size: var(--kegl-podvodki);
  /* 🔴 РАЗРЯДКА И ШРИФТ СНИМАЮТСЯ ЗДЕСЬ, ИНАЧЕ ПРОБЕЛ МЕЖДУ ФРАЗАМИ РАСТЁТ ВТРОЕ.
     Сами фразы своё начертание задают, а вот пробел между ними принадлежит обёртке
     и рисуется её шрифтом. Обёртка лежит в заголовке с разрядкой .2em и антиквой —
     на снимке 12.08.2026 это дало провал между «озеленения» и «с посадкой» шире буквы. */
  font-family: var(--shrift-podzagolovka);
  letter-spacing: normal;
  line-height: 1.3;
}

/* ⚠️ ОТДЕЛЬНОГО ПРАВИЛА У ПОДЗАГОЛОВКА ЗДЕСЬ БОЛЬШЕ НЕТ. Его нижнее поле держало расстояние
   до «Создаём живые пространства», а с 12.08.2026 подзаголовок — строчный блок: такое поле
   попадает внутрь строки, а не раздвигает соседей. Расстояние теперь задано самому заголовку
   (`--o-3` ниже по файлу), одним объявлением вместо двух складывающихся. */

/* 🔴 ОТСТУПЫ ПЕРВОГО ЭКРАНА — ДОЛИ КЕГЛЯ, А НЕ СТУПЕНИ ЛЕСЕНКИ. Правка Кирилла 12.08.2026
   по референсу Наталии: «посмотри на скрин Наталии и расстояние между надписями… как будто
   у неё одно, а у нас другое, можем ближе к её референсу расстояния сделать?».

   Замер обоих экранов по точкам, в долях от ВЫСОТЫ ПРОПИСНЫХ «DERVO» — только так две
   картинки разного размера сравнимы:

       промежуток                      Наталия   было у нас
       DERVO → «с посадкой…»             0,373        0,397
       «с посадкой…» → «Создаём…»        0,467        0,220
       между строками «Создаём…»         0,147        0,163
       «Создаём…» → кнопки               0,653        0,298

   Два промежутка из четырёх были вдвое теснее. Ступени лесенки (`--o-3`, `--o-4`) их задать
   не могут: это постоянные числа, а надписи тянутся за шириной окна, и на мониторе 2464
   ступень в 12 точек рядом с буквой высотой 141 читается как слипшиеся строки. Поэтому
   здесь доли эма — они едут вместе с кеглем. */
.pervyy-ekran__zagolovok {
  margin: 0 0 .215em;
  color: var(--tekst);
  font-family: var(--shrift-zagolovka);
  font-size: var(--kegl-zagolovka);
  font-weight: 400;
  letter-spacing: .2em;
  margin-right: -.2em;
  line-height: 1;
  text-shadow: var(--ten-teksta-krupnogo);
}

/* ⚠️ ОТДЕЛЬНОГО ПРАВИЛА У ПОДЗАГОЛОВКА БОЛЬШЕ НЕТ, и это не потеря. С 12.08.2026 он набран
   ровно так же, как «Полный цикл озеленения» — одна пара строк под маркой, — и оба описаны
   выше общим правилом. Пока правило стояло здесь, оно перебивало общее по порядку: кегль
   держался на 65,8 точки против 38,4 у соседа, хотя в стилях уже было написано «одинаково».
   Замер это и показал. */

.pervyy-ekran__tekst {
  /* 🔴 ШИРИНА ПОДНЯТА С 34 ДО 42 РЕМ ВМЕСТЕ СО СМЕНОЙ ШРИФТА. Гротеск шире антиквы при
     том же кегле, и на мониторе 2464 фраза «Создаём живые пространства, которые растут
     вместе с вами» разошлась на три строки вместо двух — на референсе Наталии их две.
     Замер 12.08.2026: 34 рема → 3 строки на 2464 и 2 на 1920; 42 рема → 2 строки на всех. */
  max-width: 42rem;
  /* Доля своего кегля, а не ступень лесенки: у Наталии от нижней фразы до кнопок 0,653
     высоты буквы «D», у нас было 0,298 — разбор в правиле заголовка выше. */
  margin: 0 0 1.7em;
  /* Та же правка и по тому же замеру: тихая краска на небе даёт 48,8 при пороге 60. */
  color: var(--moloko-myagkoe);
  /* Гротеск, как и у пары строк над ним: «и на нижней фразе тоже засечки убираем». */
  font-family: var(--shrift-podzagolovka);
  font-size: var(--kegl-podvodki);
  line-height: 1.4;
  text-shadow: var(--ten-teksta);
}

/* 🔴 ПОДЛОЖКА СТРОК — ОТДЕЛЬНЫЙ СЛОЙ `::before`, а не маска на элементе: маска на тексте
   съедает края букв. Размытие 0,75 точки — вдвое слабее прежнего (решение Кирилла 11.08). */
.pervyy-ekran .sfon {
  position: relative;
  isolation: isolate;
  display: inline-block;
}

/* 🔴 ПЕРЕНОС СТРОКИ ДЕЛАЕТ МАРКА, А ОБЕ ФРАЗЫ СТОЯТ В ОДНУ СТРОКУ. Слово Кирилла
   12.08.2026: «„Полный цикл озеленения с посадкой и гарантией“ — делаем в одну строку,
   выравниваем ровно по слову Dervo».

   Раньше строку начинала каждая из фраз (`display: block` у обеих), и под маркой стояло
   три строки вместо двух. Теперь блочная только марка, а фразы — строчные блоки, и разделяет
   их обычный пробел в разметке.

   🔴 `width: fit-content` У МАРКИ ОБЯЗАТЕЛЕН И ДЕРЖИТ ПОДЛОЖКУ. Блочный элемент занимает
   всю колонку целиком, а подложка `.sfon::before` рисуется по его коробке — без этой строки
   размытая плашка растянулась бы во всю ширину экрана. Ровно так она однажды и встала,
   и это первое, что было видно на снимке.

   ⚠️ Проверяется не наличием строк, а замером: левые края марки и первой фразы обязаны
   сходиться в пределах пары точек — на них же стоит левый край первой плитки ряда. */
.pervyy-ekran__zagolovok > .sfon:first-child {
  display: block;
  width: fit-content;
}

.pervyy-ekran__zagolovok .pervyy-ekran__nadzagolovok.sfon,
.pervyy-ekran__zagolovok .pervyy-ekran__podzagolovok.sfon {
  display: inline-block;
}

.pervyy-ekran .sfon::before {
  content: "";
  position: absolute;
  inset: -.1em -.2em;
  z-index: -1;
  border-radius: 6px;
  backdrop-filter: blur(.75px);
  mask-image: var(--maska-sfona-vert), var(--maska-sfona-gor);
  mask-composite: intersect;
}

.pervyy-ekran__knopki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
}

.pervyy-ekran__knopki .knopka {
  padding: var(--o-3) var(--o-5);
  font-size: var(--t-s);
}

.pervyy-ekran__knopka-proekty {
  gap: var(--o-3);
}

.pervyy-ekran__play {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--tekst);
}

.pervyy-ekran__play-znak {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

/* ── Кнопки главной ───────────────────────────────────────────────────────── */
/* 🔴 ПЕСОЧНЫХ КНОПОК НА САЙТЕ НЕ ОСТАЛОСЬ НИ ОДНОЙ. Требование Кирилла 04.08.2026, дословно:
   «я уже говорил что песочные кнопки это пиздец, их надо убрать». Цвет действия теперь один —
   зелёный (`--akcent`), и он же заливает главную кнопку. Вторая кнопка не «второй цвет»,
   а стекло: полупрозрачная плашка со светлой кромкой, сквозь которую видно то же видео.

   ⚠️ Скругление взято `--r-pill`, а не общее `--skruglenie`: в прототипе обе кнопки —
   таблетки, и это заметная часть его характера.

   ⚠️ Переходы перечислены поимённо, а не `transition: all`: `all` тянет за собой и те
   свойства, которые браузер считает заново каждым кадром. Набор тот же, что у плитки
   товара (`card.css`) — второй набор на одном сайте читался бы как две разные механики. */
.knopka {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  padding: var(--o-4) var(--o-6);
  /* Кромка КНОПКИ, а не блока: у кнопки нет ни снимка, ни заголовка — её опознают по краю,
     и на кромке блока (.12) стеклянная кнопка на живом фоне перестаёт читаться кнопкой.
     Роль заведена координатором 05.08.2026 по отчёту этой дорожки. */
  border: 1px solid var(--frame-knopki);
  border-radius: var(--r-pill);
  background: var(--steklo-panel);
  box-shadow: var(--ten-1);
  color: var(--tekst);
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--hod), border-color var(--hod), box-shadow var(--hod);
}

/* 🔴 ЦВЕТ НАДПИСИ ПОВТОРЁН В СОСТОЯНИИ НАВЕДЕНИЯ, И ЭТО ПОЧИНКА, А НЕ ПЕРЕСТРАХОВКА.
   В рамке сайта стоит `a:hover { color: var(--akcent-navedenie) }` — вес такого селектора
   ВЫШЕ, чем у одного класса, поэтому под курсором надпись обеих кнопок перекрашивалась
   в светло-зелёный. На стеклянной это было незаметно, а на залитой зелёной означало
   светло-зелёный текст на светло-зелёном фоне, то есть надпись пропадала под курсором.
   Проверить это тестом нечем: страница отдаётся одинаковой, поломка живёт в браузере. */
.knopka:hover {
  transform: translateY(-2px);
  border-color: var(--frame-navedenie);
  box-shadow: var(--ten-2);
  color: var(--tekst);
}

/* 🔴 ГЛАВНОЕ ДЕЙСТВИЕ САЙТА — ЗАЛИВКА ЗЕЛЁНЫМ, одна на все страницы. Надпись поверх неё
   ТЁМНАЯ, и это замер, а не вкус: отношение яркостей тёмного к зелёному 9,0 : 1, светлого
   к нему же — 1,8 : 1 при пороге 4,5 (`tokens.css`).

   Кромка снята в прозрачность, а не удалена: рамка в одну точку у стеклянной кнопки задаёт
   её общий размер, и убери её здесь совсем — залитая кнопка стала бы на две точки ниже
   соседней и встала бы с ней вразнобой. `transparent` цветом не является. */
.knopka--zalivkoy {
  border-color: transparent;
  background: var(--akcent);
  box-shadow: var(--ten-akcenta);
  color: var(--tekst-na-akcente);
}

.knopka--zalivkoy:hover {
  border-color: transparent;
  background: var(--akcent-navedenie);
  box-shadow: var(--ten-akcenta-navedenie);
  color: var(--tekst-na-akcente);
}

/* 🔴 ЧЕЛОВЕК, ПОПРОСИВШИЙ СИСТЕМУ УБРАТЬ ДВИЖЕНИЕ, НЕ ПОЛУЧАЕТ ЕГО И ЗДЕСЬ. Просьба
   приходит настройкой системы, а не кнопкой на сайте, и относится ко всему движению
   страницы, а не только к фону. Цвет и тень при этом остаются: они не движутся. */
@media (prefers-reduced-motion: reduce) {
  .knopka { transition: none; }
  .knopka:hover { transform: none; }
}

/* ── Полоса обещаний ─────────────────────────────────────────────────────── */
.blok--obeshaniya .obeshaniya {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: var(--width-catalog);
  margin: 0 auto;
  padding: var(--o-3) var(--o-4);
  list-style: none;
  border-top: 1px solid var(--frame);
  border-bottom: 1px solid var(--frame);
}

.blok--obeshaniya .obeshaniya__punkt {
  display: flex;
  align-items: center;
  gap: var(--o-2);
  padding: var(--o-2) var(--o-3);
}

.blok--obeshaniya .obeshaniya__punkt + .obeshaniya__punkt {
  border-left: 1px solid var(--frame);
}

.blok--obeshaniya .obeshaniya__znak {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-pill);
  color: var(--akcent-detal);
}

.blok--obeshaniya .obeshaniya__znak svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.blok--obeshaniya .obeshaniya__tekst {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.blok--obeshaniya .obeshaniya__stroka {
  display: block;
  color: var(--tekst);
  font-size: var(--t-s);
  line-height: 1.2;
  text-transform: lowercase;
}

.blok--obeshaniya .obeshaniya__stroka--vtoraya {
  color: var(--tekst-tihiy);
}

@media (max-width: 56rem) {
  .blok--obeshaniya .obeshaniya {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blok--obeshaniya .obeshaniya__punkt:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--frame);
  }

  .blok--obeshaniya .obeshaniya__punkt:nth-child(4) {
    border-top: 1px solid var(--frame);
  }
}

/* ── Блоки главной ────────────────────────────────────────────────────────── */
/* 🔴 ВОЗДУХ МЕЖДУ БЛОКАМИ ЗАДАН СТУПЕНЬЮ ЛЕСЕНКИ, А НЕ ЧИСЛОМ. `--o-8` — это «между
   разделами страницы»; было 2,5 рема, и блоки читались как один сплошной список. */
.blok {
  margin: var(--o-8) 0 0;
}

/* 🔴 Отступ уводит «Выбор сезона» за нижний край окна — формула та же, что была у
   `.blok--katalog`, только опорная высота снята с низа полосы обещаний (869 на 1440). */
.blok.blok--obeshaniya {
  margin-top: var(--o-3);
  margin-bottom: max(var(--o-8), calc(100svh - 749px));
}

/* 🔴 БЛОК РАЗДЕЛОВ ЗАКРЫВАЕТ ПЕРВЫЙ ЭКРАН: СЛЕДУЮЩИЙ НАЧИНАЕТСЯ ЗА НИЖНИМ КРАЕМ ОКНА.
   Правка Кирилла 07.08.2026, дословно: «на первом экране ДО пролистывания НЕ ДОЛЖНО БЫТЬ
   окна с выбором сезона — он ниже идет, только после прокрутки, опусти эту деталь второго
   экрана ниже».

   Замер 07.08.2026 на окне 2540×1300 показывает, почему обычной ступени между блоками мало:

       низ последнего ряда плиток      1121
       нижний край окна                1300
       «Выбор сезона» при ступени 96   1217  — то есть заголовок влезал в окно на 83 точки

   Требование зависит от ВЫСОТЫ ОКНА, а ступень лесенки — число постоянное, поэтому одним
   числом оно не выражается: на мониторе повыше заголовок вылез бы снова.

   `100svh - 1130px` — это «сколько окна остаётся под плитками, плюс запас». Число снято
   замером: низ последнего ряда 1211, минус восемьдесят точек запаса. `max` со ступенью держит
   нижний край: на невысоком окне разность уходит в ноль или в минус, и отступ остаётся обычным.

   ⚠️ Число переснято 07.08.2026 (было 1040): плитки стали крупнее на пятую часть, а первый
   экран выше, и низ последнего ряда уехал с 1121 на 1211.

   Замер после правки, то же окно 2540×1300: заголовок «Выбор сезона» начинается на 1381,
   свободного фона под плитками 89 точек — запас лежит ЗА краем окна и на вид первого экрана
   не влияет вовсе.

   ⚠️ ЧИСЛО УСТАРЕЕТ, ЕСЛИ У РАЗДЕЛОВ ПОЯВИТСЯ ТРЕТИЙ РЯД ПЛИТОК, и молча — заголовок
   просто снова выглянет. Поэтому оно не оставлено на честное слово: замер вида
   (`tools/zamer/site-appearance.py`, проверка 10) ходит по главной браузером и краснеет,
   если следующий за разделами блок начался до нижнего края окна. */
.blok--katalog {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Вычитание `--sdvig-shapki` гасит опускание шапки: сколько первый экран прибавил себе
     сверху, столько ряд снимает со своего отступа и остаётся на прежней высоте.

     🔴 ЧИСЛО ПЕРЕСНЯТО 12.08.2026, КОГДА КОРНЕВОЙ КЕГЛЬ СТАЛ ЕХАТЬ ЗА ШИРИНОЙ ОКНА (разбор
     в начале `tokens.css`). Формула вычитает `rem`, а на широком мониторе `rem` теперь
     меньше: ряд плиток уехал вверх, и под ним открылась дыра в 377 точек вместо прежних 76.
     Замер после пересъёмки — свободного места под рядом:

         2560 → 73 · 2464 → 59 · 1920 → 95 · 1440 → 180 · 1366 → 216

     ⚠️ Прежние 28 ремов держались на постоянном корне 16 и теперь неверны навсегда.
     Правишь масштаб — переснимай это число замером, а не пересчитывай на бумаге. */
  margin-top: calc(93svh - 32rem - 11vw - var(--sdvig-shapki));
  margin-bottom: 0;
  /* 🔴 ЗОНА РАЗМЫТИЯ ПОД РЯДОМ ВЫХОДИТ ЗА РЯД НА 128 ТОЧЕК С КАЖДОЙ СТОРОНЫ — так задумано,
     иначе у неё была бы видимая кромка. Но на узком экране этот вылет упирается в край окна
     и двигает ВСЮ страницу вбок.

     Замер 12.08.2026, насколько главная шире окна: 1440 → 42 точки, 1920 → 13, 2464 → 0.
     Числа сходятся с вылетом точно: правый край ряда на 1440 равен 1354, плюс 128 даёт 1482
     при окне 1440. На бою этого не было — дефект наш, он приехал с новой шириной ряда.

     ⚠️ `clip`, а не `hidden`: `hidden` завёл бы здесь свою прокрутку и сломал закрепление
     фона, а `clip` просто обрезает по горизонтали. Вертикальный вылет зоны — вверх и вниз —
     не трогается: он и делает переход к фону мягким. */
  overflow-x: clip;
}

/* ⚠️ Отдельного отступа для широких окон больше нет. Он правил ровно то, что теперь
   делает сам масштаб: на широком мониторе корень мельче, и формула выше садится вместе
   с ним. Второе объявление того же смысла разъехалось бы с первым при первой же правке. */

/* 🔴 Старый вылет сетки на 120 % снят: ряд теперь 88 % окна с полями 6 %, а не 74 rem. */

/* Заголовок блока начертанием берёт общее правило рамки сайта (полужирный, гротеск):
   собственное `font-weight: 400` стояло здесь с прежнего макета и делало заголовки
   на живом фоне тонкими до потери. Второго объявления веса заголовков не заводим —
   владелец у него один.

   🔴 ЗАГОЛОВОК СТОИТ ПО СЕРЕДИНЕ КОЛОНКИ. Правка Кирилла 07.08.2026, дословно: «НАДПИСЬ
   КАТАЛОГ ПО ТИПАМ НА ГЛАВНОЙ НЕ ОТЦЕНТРИРОВАНА относительно надписи „Ваш участок станет
   зелёным сегодня, а не через десять лет“, исправь. „Выбор сезона“ — АНАЛОГИЧНО».

   Обе надписи он назвал вместе, и правило поэтому одно на все заголовки блоков,
   а не два одинаковых у двух из них.

   ⚠️ Совпадение середин держится тем, что первый экран и `main` считают ширину ОТ ОДНОГО
   предела (`--width-catalog`) и имеют одинаковые боковые поля, — разбор у `.pervyy-ekran__vnutri`
   выше. Без этого середина заголовка и середина обещания разошлись бы на половину разницы
   колонок, и никакое `text-align` этого не исправило бы. */
.blok h2 {
  margin: 0;
  font-size: var(--t-xl);
  text-align: center;
}

/* ── Девятая плитка «Сажаем сейчас» ───────────────────────────────────────── */
/* 🔴 СТОИТ В СЕТКЕ РАЗДЕЛОВ, НО РАЗДЕЛОМ НЕ ЯВЛЯЕТСЯ, и оформление обязано это показывать:
   выгляди она как соседи, человек читал бы её как девятый раздел, которого нет ни в меню,
   ни в каноне.

   🔴 ЭТО ЕДИНСТВЕННОЕ МЕСТО ГЛАВНОЙ, ГДЕ ЗЕЛЁНЫЙ РАБОТАЕТ ЗАЛИВКОЙ, А НЕ ДЕЙСТВИЕМ, —
   тот же приём, что у выделенной плитки ряда фактов в прототипе: одна плитка на блок,
   и не больше. Заливка полупрозрачная, поэтому видео под ней продолжается.

   ⚠️ Прежняя обводка `outline` снята: она была обходом того, что рамка добавила бы плитке
   толщину и сдвинула бы содержимое относительно соседей по ряду. Здесь меняется ЦВЕТ уже
   существующей рамки плитки (`card.css`), а не заводится вторая, — сдвигать нечему. */
.blok__seychas {
  background: var(--zalivka-glavnaya);
  border-color: var(--kromka-glavnaya);
}

/* ⛔ ЗЕЛЁНАЯ ПОДПИСЬ У ПЛИТКИ «САЖАЕМ СЕЙЧАС» СНЯТА 11.08.2026 по слову Кирилла: «сажаем
   сейчас зелеными буквами почему-то, сделай как у всех».

   Она стояла вторым признаком выделения — заливка, кромка и подпись. После того как все
   восемь подписей получили одно начертание и один шрифт, зелёная строка стала единственной
   выпадающей из ряда и читалась ошибкой, а не выделением.

   Выделенной плитка остаётся двумя признаками из трёх: зелёной заливкой (`--zalivka-glavnaya`)
   и зелёной кромкой — они выше, в правиле `.blok__seychas`, и не тронуты. */

/* ── Экран 3: проекты ─────────────────────────────────────────────────────── */
/* 🔴 ПАНЕЛЬ-СТЕКЛЯШКА С БОКОВОЙ ЧЕРТОЙ — раскладка, которой больше нигде на странице нет
   (правило 6 дизайн-стандарта: раскладки секций не повторяются). Соседи заняли текст поверх
   фона, сетку плиток, разворот в две колонки и середину.

   Панель набрана стеклом (`--steklo-panel`), а не заливкой карточки: она крупная, во всю
   ширину колонки, и сплошным фоном перерезала бы видео поперёк страницы — тот самый стык,
   ради снятия которого фон и переделан. Плотность стекла падает сверху вниз, поэтому нижний
   край панели растворяется в фоне, а не обрывается.

   ⚠️ Боковая черта — ПЕСОЧНАЯ, и это единственное её применение на главной. Песочный
   с 04.08.2026 живёт только тонкой деталью: линия, номер шага, стрелка. Заливок и кнопок
   этим цветом не осталось ни одной.

   ⚠️ Экран сегодня показывает одну честную строку — проектов ноль (`core/site/projects.py`).
   Правило при этом не «заготовка на будущее»: разметка экрана существует и лежит
   в `home/_proekty.html`, просто снимка в ней пока нет. */
.blok--proekty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60svh;
  padding: var(--o-6);
  background: var(--steklo-panel);
  /* 🔴 РАМКА ОДНА И ТА ЖЕ СО ВСЕХ ЧЕТЫРЁХ СТОРОН — песочная, непрозрачная. Правка Кирилла
     06.08.2026, второй заход: «рамка недоделана опять».

     ⛔ Прозрачные кромки (`--frame`, `--kromka-yarkaya`) здесь не работают в принципе:
     они белые с прозрачностью, а лежат поверх ЖИВОГО ВИДЕО, и яркость под ними разная
     сверху и снизу. Замер пикселей на живой странице: слева песочная черта давала разницу
     с фоном 136, сверху 59, справа 16, снизу 10 — то есть двух сторон не было видно вовсе.
     Непрозрачный цвет из палитры этой зависимости не имеет и виден одинаково везде. */
  border: 1px solid var(--akcent-detal);
  border-radius: var(--r-xl);
}

/* 🔴 ПАНЕЛЬ ВЫХОДИТ ЗА КОЛОНКУ РОВНО НА СВОИ ПОЛЯ, чтобы её СОДЕРЖИМОЕ встало на одну
   вертикаль с соседними экранами. Правка Кирилла 06.08.2026: «не симметричны по ширине
   верхняя и нижняя панель относительно этого экрана».

   Замер до правки на окне 1600: рамка панели 224…1376 — ровно как у плиток сверху и кромки
   снизу, а заголовок внутри неё 267…1335. То есть совпадали КОРОБКИ, а глаз сравнивает
   содержимое, и экран проектов читался у́же остальных на 43 точки с каждой стороны.

   ⚠️ Вылет включается только там, где для него есть место: колонка страницы 74rem плюс
   поля панели должны поместиться в окно, иначе панель упрётся в край экрана и появится
   горизонтальная прокрутка. */
@media (min-width: 1280px) {
  /* ⚠️ Вычитается поле ПЛЮС толщина рамки: без неё содержимое встаёт на точку мимо соседних
     экранов. Рамка теперь одинаковая со всех сторон, поэтому и вылет одинаковый. */
  .blok--proekty { margin-inline: calc(-1 * var(--o-6) - 1px); }
}

/* Текст пишет человек руками, и длинное неразрывное слово (название посёлка) выехало бы
   за панель. Та же строка стоит у описания на странице проектов. */
.blok__proekt-tekst {
  margin: 0 0 var(--o-5);
  color: var(--tekst-myagkiy);
  overflow-wrap: anywhere;
}

/* ── Лента проектов на главной ────────────────────────────────────────────────
   Раскладка выбрана Кириллом 06.08.2026: карточки в ряд, соседние выглядывают краем,
   прокрутка с прилипанием. Скриптов здесь нет ни строки — прокрутку, прилипание,
   клавиатуру и палец делает сам браузер. Это и есть сегодняшний отраслевой способ:
   своя обработка касаний ломается первой на телефоне, где палец уводит страницу. */
.blok__lenta {
  display: flex;
  gap: var(--o-4);
  /* ⛔ ЛЕНТА БОЛЬШЕ НЕ ВЫХОДИТ ЗА ПОЛЯ ПАНЕЛИ. Здесь стоял вылет на ширину полей, и правый
     край карточки упирался прямо в рамку, тогда как слева от первой карточки поле оставалось.
     Правка Кирилла 06.08.2026: «слева в окне есть отступ от фотки, а справа нету, фото
     врезается в край ui-окна. Обязан быть симметричный отступ как слева».
     Теперь лента живёт внутри полей панели, и обрез выглядывающей карточки отстоит
     от рамки ровно настолько же, насколько первая карточка отстоит слева. */
  margin: var(--o-5) 0;
  padding: 0 0 var(--o-3);
  list-style: none;
  overflow-x: auto;
  /* Логическая запись, а не `x`: на будущих языках справа налево ось совпадает сама. */
  scroll-snap-type: inline mandatory;
  /* Полоса прокрутки убрана НАМЕРЕННО, и вместо неё роль указателя играет выглядывающий
     сосед: он и говорит, что лента длиннее экрана. */
  scrollbar-width: none;
  /* 🔴 РАЗРЕШЕНЫ ОБЕ ОСИ, И ЭТО ИСПРАВЛЕНИЕ, А НЕ УКРАШЕНИЕ. Здесь стояло `pan-y pinch-zoom`
     с пояснением «палец по вертикали листает страницу, по горизонтали ведёт ленту» —
     и пояснение говорило ровно обратное тому, что делает строка. `pan-y` означает «по этому
     элементу браузер ведёт ТОЛЬКО вертикально», то есть горизонтальный свайп ленте
     не доставался вовсе.

     ⚠️ Поймано замером касаний 06.08.2026, а не глазами: до этого лента проверялась колесом,
     клавишами и стрелками — тремя способами, ни один из которых не трогает `touch-action`.
     Три проверки одного класса это одна проверка. */
  touch-action: pan-x pan-y pinch-zoom;
  /* Лента живёт своим слоем: под страницей идёт видео, и без этой строки каждый кадр
     прокрутки заставлял браузер пересобирать кусок фона под панелью. Замер средней
     длительности кадра при шаге стрелкой: 97 мс против 73 с этой строкой. */
  will-change: scroll-position;
}
.blok__lenta::-webkit-scrollbar { display: none; }

/* Лента — область прокрутки, и ей нужны и порядковый обход клавишей, и своё имя: без них
   человек с клавиатуры не доберётся до карточек, а озвучка экрана не скажет, куда попала.
   Это требование к любому прокручиваемому блоку, а не украшение. */
.blok__lenta:focus-visible { outline: 3px solid var(--akcent); outline-offset: 4px; }

/* Строка «лента и стрелки»: управление стоит в поле справа, а не над лентой. */
.blok__lenta-ryad { display: flex; align-items: center; gap: var(--o-4); }
/* `min-width: 0` обязателен: без него гибкий элемент не даёт себя сжать ниже содержимого,
   и лента вместо прокрутки растягивает строку, выталкивая стрелки за панель. */
.blok__lenta-ryad .blok__lenta { flex: 1 1 auto; min-width: 0; }

.blok__lenta-karta {
  /* 🔴 РОВНО ДВЕ КАРТОЧКИ В ВИДИМОЙ ЧАСТИ, третья уезжает целиком. Ширина считается
     от ленты, а не задана числом: иначе на другом окне третья карточка снова полезет
     обрезанным куском в кадр — ровно то, что Кирилл назвал «убого». */
  flex: 0 0 calc((100% - var(--o-4)) / 2);
  /* Доля окна, а не сотня: из-за края экрана обязан выглядывать следующий кадр — иначе
     лента неотличима от одиночной картинки, и её никто не потянет. Замер 06.08.2026
     на окне 390: при 82 % сосед начинался за краем экрана и не выглядывал вовсе. */
  max-width: 82vw;
  scroll-snap-align: center;
}

@media (max-width: 860px) {
  /* На узком экране ленту ведут пальцем, и две кнопки отняли бы у карточки четверть ширины.
     Карточка при этом занимает долю окна, чтобы сосед выглядывал из-за края. */
  .blok__strelka { display: none; }
  .blok__lenta-karta { flex-basis: 74vw; }
}

.blok__lenta-ssylka { display: block; color: inherit; }
/* ⛔ ЗАГОЛОВОК КАРТОЧКИ НАБРАН ТЕМ ЖЕ ШРИФТОМ, ЧТО И ВЕСЬ ТЕКСТ СТРАНИЦЫ. Здесь стоял
   заголовочный шрифт с засечками, и на трёх карточках подряд он спорил и с заголовком
   экрана, и с фактами под собой. Правка Кирилла 06.08.2026: «что с шрифтами и выделением?
   шрифт как на главной, выделять ничего не надо, весь шрифт один». */
.blok__lenta-imya {
  display: block;
  margin: var(--o-3) 0 var(--o-1);
  font-size: var(--t-m);
  line-height: 1.3;
  /* Строку результата пишет человек руками, и на телефоне последнее слово вылезало
     за край карточки на несколько точек — «в день посадки» показывалось как «в ден».
     Та же строка стоит у всякого человеческого текста в проекте. */
  overflow-wrap: anywhere;
}
.blok__lenta-ssylka:hover .blok__lenta-imya { color: var(--akcent); }

/* Кадр карточки — это блок переключателя «до / после» (`compare.css`). Здесь остаются
   только его размеры на этой странице: скругление на ступень мельче панельного и кромка.

   🔴 `touch-action` ПЕРЕОПРЕДЕЛЁН, И БЕЗ ЭТОГО ЛЕНТА НЕ ЛИСТАЛАСЬ БЫ ПАЛЬЦЕМ. На странице
   проектов у переключателя стоит `pan-y`: там он занимает всю ширину колонки, и горизонтальный
   жест принадлежит только ему. Здесь кадр лежит В ЛЕНТЕ, и горизонтальный жест по снимку
   обязан листать её. Перетаскивание шва при этом никуда не делось — оно живёт на полосе
   захвата, у которой свой `touch-action: none`. */
.blok__lenta-kadr {
  border-radius: var(--r-m);
  border: 1px solid var(--frame);
  touch-action: pan-x pan-y;
  margin: 0;
}
.blok__lenta-kadr:hover { border-color: var(--frame-navedenie); }
.blok__lenta-foto { display: block; width: 100%; height: auto; }


/* Факты одной строкой и ОДНИМ начертанием: числа здесь не выделяются ничем, кроме порядка
   слов. Жирные числа вперемешку с тихой подписью на трёх карточках подряд дают рябь,
   а не акцент — правка Кирилла 06.08.2026: «выделять ничего не надо, весь шрифт один». */
.blok__lenta-fakty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-4);
  font-size: var(--t-s);
  color: var(--tekst-tihiy);
}
.blok__lenta-fakty b { font-weight: inherit; color: inherit; }

/* 🔴 СТРЕЛКИ — НАСТОЯЩИЕ КНОПКИ, И ЭТО НЕ ИЗЛИШЕСТВО. Замер 06.08.2026 на живой странице:
   колесо мыши над лентой НЕ двигает её ни на точку (`0 → 0`), потому что браузер не переводит
   вертикальное колесо в горизонтальную прокрутку. Палец, трекпад и клавиши работают, а человек
   с обычной мышью упирается в неподвижную ленту — ровно то, что Кирилл и увидел в прототипе.

   ⛔ Колесо мы при этом НЕ перехватываем скриптом, хотя так делают многие: перехват отнимает
   прокрутку у страницы, и человек, листающий главную, застревает на ленте. Стандартный ответ —
   стрелки на мыши, жест на пальце.

   ⚠️ Кнопки браузера из `::scroll-button()` сюда не годятся: их рисует только Chrome, а лента
   должна вести себя одинаково везде. */
/* ⚠️ КНОПКА ПОЛУПРОЗРАЧНАЯ, А НЕ БЕЛАЯ. Правка Кирилла 06.08.2026: «стрелки делай слегка
   прозрачные, не ярко белые, добавь легкую анимацию им». Яркий круг поверх снимка спорит
   с самим снимком за внимание, а лента — это про кадры, не про управление. */
.blok__strelka {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kromka);
  border-radius: 50%;
  background: var(--fon-metki);
  color: var(--tekst-tihiy);
  font-size: var(--t-l);
  line-height: 1;
  cursor: pointer;
  /* Движение по трём осям сразу: цвет, кромка и лёгкий подъём. Длительность 0,25 с —
     столько глаз читает как отклик, а не как отдельную анимацию. */
  transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.blok__strelka:hover:not(:disabled) {
  color: var(--tekst);
  border-color: var(--kromka-silnaya);
  transform: scale(1.08);
}
/* Нажатие возвращает кнопку на место: без этого кадра палец не чувствует ответа. */
.blok__strelka:active:not(:disabled) { transform: scale(0.96); }
.blok__strelka:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
/* Край ленты: кнопка гаснет, но остаётся на месте — исчезающая кнопка сдвигает соседей
   и заставляет глаз ловить её заново. */
/* ⚠️ Край ленты гасит кнопку слабо: втрое приглушённая кнопка читается не как «дальше
   ничего нет», а как кривая вёрстка — так это и было названо 06.08.2026. */
.blok__strelka:disabled { opacity: .45; cursor: default; }

/* Знак стрелки — общий файл-иконка, «назад» это его отражение. Типографские «‹ ›»,
   стоявшие здесь раньше, несимметричны: разная посадка на строке в любом шрифте. */
.blok__znak { display: block; margin: 0 auto; }
.blok__znak--nazad { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .blok__strelka { transition: none; }
  .blok__strelka:hover:not(:disabled) { transform: none; }
}

/* ── Экран 4: сотрудничество ──────────────────────────────────────────────── */
/* Разворот в две колонки: текст слева, действие справа. Тонкая светлая кромка сверху вместо
   панели — так экран отделяется от товаров, не становясь ещё одной карточкой. На живом фоне
   линия обязана быть светлой и полупрозрачной: тёмный штрих поверх видео читается
   как царапина на стекле.

   ⚠️ `wrap` обязателен и заменяет точку перелома под телефон: на узком экране действие
   уходит под текст само.

   ⚠️ 60 процентов окна, а не 100. Экран с одной утверждённой строкой, растянутый на весь
   монитор, читается как недоделка: содержания «Сотрудничества» у нас пока нет, и честнее
   дать блоку вес, чем изобразить полноту. Придёт текст Кирилла — число поднимается. */
/* 🔴 РАЗВОРОТ В ДВЕ КОЛОНКИ СНЯТ 07.08.2026 ПРАВКОЙ КИРИЛЛА ПО СТЕНДУ: «на главной
   не оцентрирован текст вообще, кнопку переноси под оцентрированный текст и тоже центрируй».
   Было: текст слева, кнопка справа. Стало: столбик по центру, кнопка под текстом.

   ⚠️ Раскладка теперь совпадает с экраном «Контакты», и правило вида, запрещающее повтор
   раскладки соседних секций, здесь отступает перед прямым решением владельца. Различие
   между экранами держат заголовок, перечень с чертами и кнопка, которой у контактов нет. */
.blok--sotrudnichestvo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60svh;
  padding-top: var(--o-7);
  border-top: 1px solid var(--frame);
}

/* Заголовки трёх последних экранов на ступень крупнее обычных `h2`: экран без крупного
   заголовка читается как продолжение предыдущего, сколько бы места ему ни отвели. Ступень
   берётся из шкалы и остаётся НИЖЕ витринного заголовка — иерархия страницы держится тем,
   что самый крупный заголовок на ней ровно один. */
.blok--proekty h2,
.blok--sotrudnichestvo h2,
.blok--kontakty h2 {
  margin: 0 0 var(--o-2);
  font-size: var(--t-xxl);
}

/* ⚠️ ДВА ЭКРАНА ИЗ ПЯТИ ЗАГОЛОВОК ПО СЕРЕДИНЕ НЕ БЕРУТ, и это не исключение ради исключения.
   У «Проектов» заголовок стоит в панели с боковой чертой и открывает СТОЛБИК текста слева;
   у «Сотрудничества» — левую половину разворота в две колонки. Середина в обоих случаях
   оторвала бы заголовок от того, что он объявляет.

   ⚠️ «Контакты» здесь не названы: у них середина уже задана всему блоку (`text-align: center`
   у `.blok--kontakty`), и второе объявление того же смысла разъехалось бы с первым.

   `start`, а не `left`: логическая запись, на языке справа налево сторона совпадёт сама. */
/* ⚠️ «Сотрудничество» из этого правила вынуто: его экран собран по вертикальной оси, и всё
   на нём — заголовок, текст, кнопка — стоит по середине. Разбор устройства экрана ниже. */
.blok--proekty h2 {
  text-align: start;
}

/* Текстовая половина забирает остаток строки, но не уже 18 рем: сожмись она сильнее —
   заголовок «Сотрудничество» разорвался бы посреди слова. */
.blok__tekst {
  flex: 1 1 18rem;
}

/* Текст центрированного экрана не расходится на всю ширину каталожной колонки: строка
   в полтора метра на мониторе 2540 читается по диагонали, сколько её ни центрируй.

   🔴 `flex: 0 0 auto` ОБЯЗАТЕЛЕН и снимает растяжение по высоте. Общее правило даёт тексту
   `flex: 1 1 18rem` — в развороте это доля ШИРИНЫ, а в столбике та же единица становится
   долей ВЫСОТЫ: блок распирало на весь экран, и кнопка отъезжала от текста на треть окна.
   Это первое, что видно на снимке стенда.

   ⚠️ Тени текста здесь свои: экран лежит прямо на видео, и светлый туман кадра съедает
   и заголовок, и тихие строки перечня. Роли те же, что на странице раздела. */
.blok--sotrudnichestvo .blok__tekst {
  flex: 0 0 auto;
  max-width: var(--width-text);
}

/* Заголовок делит браузер, ровно: короткая надпись не должна разрываться в случайном месте.
   ⚠️ У лида балансировка СНЯТА: он теперь выключен по левому краю в общей колонке, и делить
   его на строки равной длины больше незачем — ровность держит левый край, а не длина строк. */
.blok--sotrudnichestvo h2 {
  text-wrap: balance;
}

/* 🔴 КЕГЛЬ ЭКРАНА ПОДНЯТ В ПОЛТОРА РАЗА. Правка Кирилла 07.08.2026: «экран с сотрудничеством
   получается на 70% пустой, давай увеличим текст раза в полтора как минимум». Экран занимает
   больше половины окна по высоте, и текст страничного кегля в нём выглядел подписью
   под пустым полем. Ступени взяты из шкалы, а не набраны числами. */
.blok--sotrudnichestvo h2 {
  font-size: calc(var(--t-xxl) * 1.5);
}

.blok--sotrudnichestvo .blok__lid {
  font-size: var(--t-xxl);
}

.blok--sotrudnichestvo .blok__perechen {
  font-size: var(--t-xl);
}

/* Кнопка идёт следом за текстом и растёт вместе с ним: на общем кегле 17 рядом со строками
   в 24 она читалась случайно оставшейся мелкой деталью. Прибавка на одну ступень, не больше:
   кнопка не должна спорить с заголовком. */
.blok--sotrudnichestvo .knopka {
  font-size: var(--t-l);
}

.blok--sotrudnichestvo h2 {
  text-shadow: var(--ten-teksta-krupnogo);
}

/* 🔴 ПЕРЕЧЕНЬ НАБРАН ОБЫЧНЫМ ЦВЕТОМ, А НЕ ТИХИМ. Правка Кирилла: «у них шрифт нечитаем
   на фоне фона, делай его обычным». Тихий цвет заведён для оговорок на СВОЁМ фоне — карточка,
   корзина, панель; поверх светлого тумана видео он теряется, а это три главные строки экрана,
   ради которых человек здесь и остановился. */
.blok--sotrudnichestvo .blok__perechen {
  color: var(--tekst);
}

.blok--sotrudnichestvo .blok__lid,
.blok--sotrudnichestvo .blok__perechen {
  text-shadow: var(--ten-teksta);
}

/* Перечень трёх дверей на экране «Сотрудничество». Маркер — короткая бронзовая черта той же
   краски, что обводит снимки в примерах работ и кнопку заявки: одна деталь, повторённая
   в трёх местах, читается как фирменная, три разные — как небрежность.

   ⚠️ Точка списка убрана намеренно: строки здесь не перечисление свойств, а три адреса,
   и точка приравняла бы их к обычному списку услуг. Черта же ведёт глаз по левому краю,
   не добавляя веса. */
/* 🔴 ОДНА КОЛОНКА, ОДИН ЛЕВЫЙ КРАЙ — 07.08.2026, третья правка Кирилла по этому экрану подряд.
   Было три разных выравнивания в одном блоке: заголовок по центру, лид по центру со своей
   шириной, перечень по левому краю и шире лида. Каждый элемент по отдельности выглядел
   исправным, а вместе — рассыпанным.

   Теперь ширина у лида и перечня ОДНА и задана в одном месте (`--kolonka-ekrana`), а внутри
   неё текст выключен по левому краю. Колонка целиком стоит по центру экрана: середину держит
   она, а не выключка каждой строки. */
/* 🔴 УСТРОЙСТВО ЭКРАНА ЗАДАНО КИРИЛЛОМ 07.08.2026 ДОСЛОВНО, и оно держится на одной величине:
   «СОТРУДНИЧЕСТВО ОТКРЫВАЕТ ЭКРАН, КНОПКА — ЗАКРЫВАЕТ, ОНИ ОДИНАКОВО ДРУГ ОТНОСИТЕЛЬНО ДРУГА
   ВЫРАВНЕНЫ», а расстояние от кнопки до последней строки текста обязано быть «ТАКОЕ ЖЕ 1 В 1»,
   как от заголовка до первой.

        Сотрудничество        ← по середине, открывает
             ↕  --shag-ekrana
        текст и перечень      ← по той же оси
             ↕  --shag-ekrana   (ровно столько же)
     Условия сотрудничества   ← по середине, закрывает

   🔴 ШАГ ОБЪЯВЛЕН ОДИН РАЗ И ВЗЯТ ДВАЖДЫ. Два одинаковых числа в двух правилах — это два числа,
   которые разъедутся на первой же правке, и симметрия, ради которой всё делалось, исчезнет
   молча. Здесь их физически не может быть два. */
.blok--sotrudnichestvo {
  --kolonka-ekrana: 44rem;
  --shag-ekrana: var(--o-7);
  text-align: center;
}

.blok--sotrudnichestvo .blok__tekst,
.blok--sotrudnichestvo .blok__deystvie {
  width: min(100%, var(--kolonka-ekrana));
  margin-left: auto;
  margin-right: auto;
}

/* Заголовок отбит от текста шагом экрана. Своё поле снизу у `h2` при этом снимается: иначе
   расстояние сложилось бы из двух слагаемых и перестало совпадать с нижним. */
.blok--sotrudnichestvo h2 {
  margin-bottom: var(--shag-ekrana);
}

.blok--sotrudnichestvo .blok__deystvie {
  margin-top: var(--shag-ekrana);
}

.blok__perechen {
  display: block;
  margin: var(--o-5) auto 0;
  padding: 0;
  list-style: none;
  color: var(--tekst-tihiy);
}

.blok__perechen li {
  margin: 0 0 var(--o-3);
}

/* 🔴 У ПОСЛЕДНЕЙ СТРОКИ ПОЛЕ СНИМАЕТСЯ, и это не косметика: оно складывалось с шагом экрана,
   и расстояние до кнопки выходило 76 точек против 64 сверху. Замер показал ровно эти 12 —
   собственный отступ строки. Требование Кирилла было «ТАКОЕ ЖЕ 1 В 1», и одинаковыми числа
   становятся только тогда, когда снизу нет второго слагаемого. */
.blok__perechen li:last-child {
  margin-bottom: 0;
}

/* ⛔ БРОНЗОВАЯ ЧЕРТА-МАРКЕР СНЯТА. Она требовала левого края у каждой строки, а экран собран
   по вертикальной оси: маркеры вставали лесенкой, каждый на своей вертикали, потому что строки
   разной длины. Между тремя строками теперь работает воздух, а не значок. */

/* ── Экран 5: контакты ────────────────────────────────────────────────────── */
/* По середине — последняя из пяти раскладок ленты. Экран закрывает страницу, и центрированный
   столбик читается как её завершение, а не как ещё один блок в потоке. */
.blok--kontakty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60svh;
  text-align: center;
}

/* Номер набран как заголовок — тем же начертанием и почти того же размера. На экран
   «Контакты» приходят ровно за ним, и искать его внутри абзаца человек не будет. */
.blok__telefon {
  margin: var(--o-5) 0 0;
  font-family: var(--shrift-podzagolovka);
  font-size: var(--t-xxl);
  font-weight: 600;
}

/* ── Общее у экранов 3–5 ──────────────────────────────────────────────────── */
/* Первая строка экрана: она и есть его ответ, остальное — подробности. Ширина в знаках,
   а не в ремах: строка длиной в сетку из четырёх плиток не читается, а предел в знаках
   едет вместе с кеглем. */
.blok__lid {
  max-width: 46ch;
  margin: var(--o-4) 0 0;
  font-size: var(--t-lid);
  color: var(--tekst-myagkiy);
}

/* Строка действия. Отдельным объектом, а не отступом у ссылки: у экрана «Контакты» это
   обычная ссылка, у остальных — кнопка, и отступ обязан быть одним и тем же в обоих случаях. */
/* 🔴 `max-width: none` СНИМАЕТ МЕРУ СТРОКИ, и без него центровка кнопки не работает вовсе.
   Строка действия набрана абзацем, а рамка сайта ограничивает КАЖДЫЙ абзац мерой строки
   в единицах кегля (`p { max-width: var(--shirina-stroki) }`). Замер на 1440: панель
   «Проектов» 1234 точки, а строка действия внутри неё — 707, и кнопка, поставленная
   по середине, вставала по середине этих 707, то есть на 222 точки левее оси экрана.
   Это второй случай того же класса за вечер: там мера резала абзацы страницы. */
.blok__deystvie {
  margin: var(--o-6) 0 0;
  max-width: none;
}

/* 🔴 КНОПКА «ПРОЕКТОВ» СТОИТ НА ОСИ СЛЕДУЮЩЕГО ЭКРАНА. Правка Кирилла 07.08.2026: «она должна
   быть выровнена относительно слова "сотрудничество", которое идет на след экране».

   Экран «Сотрудничество» собран по вертикальной оси окна, и кнопка, закрывающая предыдущий
   экран, обязана стоять на ней же: иначе взгляд, идущий сверху вниз, дважды перескакивает
   влево-вправо на стыке двух экранов. Замер на 1440: середина кнопки 720, середина заголовка
   «Сотрудничество» 720.

   ⚠️ Центрируется ТОЛЬКО строка действия, а не весь экран: заголовок и текст «Проектов»
   остаются у левого края своей панели — там они открывают столбик, и середина оторвала бы
   их от него. */
.blok--proekty .blok__deystvie {
  text-align: center;
}

/* ⛔ ЗДЕСЬ СТОЯЛО ОБНУЛЕНИЕ ОТСТУПА — оно было верным, пока действие стояло сбоку от текста
   и зазор ему задавала строка разворота. С 07.08.2026 кнопка стоит ПОД текстом, и отступ
   ей нужен обычный, общий для всех экранов ленты. */

/* ── Широкий экран ────────────────────────────────────────────────────────── */
/* Единственное, что меняется с шириной окна, — воздух вокруг витринного заголовка.
   ⚠️ Здесь же раньше подменялся файл снимка первого экрана; снимка больше нет, и правило
   осталось ровно с той работой, ради которой стоит сейчас. */
@media (min-width: 801px) {
  /* 🔴 ПОЛЕ УМЕНЬШЕНО СО СТУПЕНИ `--o-9` (128 точек) ДО `--o-6` (40) — 06.08.2026, та же
     задача Кирилла, что и доля высоты выше: «что бы на первом экране уже был виден каталог».

     Долю высоты одну править было мало, и это видно замером. Полоса берёт БОЛЬШЕЕ из двух —
     заданной высоты и высоты собственного содержимого с полями. При поле в 128 точек сверху
     и снизу второе слагаемое давало 507 точек само по себе, то есть доля высоты не работала
     вовсе: сколько её ни уменьшай, полоса оставалась прежней.

     Замер на окне 1440×900 после обеих правок — в докладе окна.

     🔴 ПОЛЕ СВЕРХУ ВТРОЕ БОЛЬШЕ ПОЛЯ СНИЗУ — 96 точек против 24, и это не вкус.
     Правка Кирилла 07.08.2026 просила ДВЕ РАЗНЫЕ вещи сразу: логотип опустить ниже
     от шапки, а воздух под плитками, наоборот, убавить. Полоса выкладывает содержимое
     по середине, поэтому равные поля развели бы её в обе стороны одинаково — логотип
     опустился бы, и низ уехал бы ровно настолько же. Разные поля двигают только верх. */
  /* 🔴 ПОЛЯ УБАВЛЕНЫ 11.08.2026, КОГДА ЗАГОЛОВОК ВЫРОС В 2,6 РАЗА. Прежние 96 точек сверху
     складывались с прежним кеглем и держались в высоте окна. С кеглем по доле Наталии
     (5,7 % ширины) первый экран перестал помещаться: замер на 2464×1305 дал низ ряда
     на 100,3 % высоты, то есть плитки ушли за нижний край.
     Соотношение полей сохранено — верхнее втрое больше нижнего, как просил Кирилл
     07.08.2026; уменьшены оба на ступень. */
  .pervyy-ekran {
    /* ⚠️ Поле сверху убавлено ещё на 44 точки 12.08.2026: надзаголовок вырос с 10,8 до 38,4
       по слову Кирилла, и весь экран поехал вниз — низ ряда плиток ушёл с 95 % высоты окна
       на 99 %, то есть первый экран перестал закрываться с запасом. Прибавку кегля гасим
       ровно тем же числом сверху, чтобы ряд вернулся на прежнюю высоту. */
    /* ⚠️ СДВИГ ШАПКИ СТОИТ ЗДЕСЬ, А НЕ В БАЗОВОМ ПРАВИЛЕ, И ЭТО НЕ ДУБЛЬ. Базовое правило
       на мониторе не действует вовсе — оно целиком перекрыто этим медиазапросом, и первая
       редакция правки 12.08.2026 прибавила сдвиг именно туда: замер показал верхнее поле
       0 точек, шапка не сдвинулась ни на точку. */
    padding: calc(var(--o-6) - 44px + var(--sdvig-shapki)) 0 var(--o-3);
  }
}