@font-face{font-family:'Mabry Pro';src:url(медиа/шрифты/Mabry-Regular.ttf) format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Mabry Pro';src:url(медиа/шрифты/Mabry-Bold.ttf) format('truetype');font-weight:700;font-display:block}

:root{
  --фон:#000; --текст:#F4F2F0; --текст-тихо:#8E8A86; --текст-совсем-тихо:#5B5854;
  --поля:max(24px,4.2vw);
  --вязко:cubic-bezier(.16,1,.2,1);
  --мягко:cubic-bezier(.22,1,.26,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--фон);color:var(--текст);
  font-family:'Mabry Pro',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── СЛОИ ───────────────────────────────────────────────────────────
   0 — круг (видеокарта), 1 — заставка, 2 — содержимое, 20 — шапка.
   Заставка выше круга: пока листаются кадры, круга не видно вовсе. */
#сцена{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#000;will-change:transform}
#круг{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;
  opacity:0;transition:opacity 4200ms cubic-bezier(.33,0,.2,1)}
.круг-виден #круг{opacity:1}
.заставка{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:1;transition:opacity 2600ms cubic-bezier(.4,0,.25,1)}
/* Полотно уходит В НОЛЬ, а не в притемнённый остаток: владелец просил
   чистую черноту после заставки, и «почти чёрный кадр» ею не является. */
.знак-щёлкает .заставка{opacity:0}
main{position:relative;z-index:2}

/* ── СТЕКЛО РИСУЕТ СЦЕНА ───────────────────────────────────────────
   Тело панели, преломление, спектр дисперсии и нить по курсору живут в
   шейдере — там же, где на дашборде. CSS оставлен только как запасной
   вид для машин, где видеочип не поднялся: без него стекло исчезает
   молча, а страница выглядит замыслом. */
.стекло{position:relative;
  /* `background:none` здесь не украшение. Заводская отделка `button` —
     светлая заливка `buttonface`; пока стекло рисовал CSS, она была накрыта
     собственным фоном, а как только фон ушёл на видеокарту, кнопка стала
     белой пилюлей с невидимым текстом. Тот же промах, что был с кнопкой
     «Свяжитесь со мной» в шапке. */
  background:none;border:0}
/* НИ ОДНОГО ПЕРЕХОДА НА `transform` И `opacity` У СТЕКЛЯННОГО УЗЛА.
   Эти два свойства сцена пишет сама, каждый кадр: подъём под курсором,
   нажатие, вход. Переход поверх них даёт второго хозяина одного свойства —
   стекло едет по числу сцены, а текст внутри догоняет его по кривой CSS.
   Владелец увидел это точно: «подпрыгивают, потом падают, а текст,
   подпрыгнув, остаётся». Вход капсул перенесён на обёртку — там своё
   свойство и свой хозяин. */
html:not(.gpu) .стекло{
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 50%,rgba(255,255,255,.040)),rgba(0,0,0,.30);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 6px 18px -12px rgba(0,0,0,.95)}

/* ── ШАПКА ──────────────────────────────────────────────────────────*/
.шапка{position:fixed;top:clamp(14px,1.8vh,22px);left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 var(--поля);pointer-events:none;gap:14px}
.капсула{pointer-events:auto;display:flex;align-items:center;
  height:48px;border-radius:24px;padding:0 6px 0 9px;gap:2px}
.капсула .знак{display:flex;align-items:center;padding:0 12px 0 6px}
.капсула .знак img{width:26px;height:23px}
.капсула nav{display:flex;gap:2px;padding-right:4px;align-items:center}
.капсула nav a,.капсула .упр{
  font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--текст-тихо);text-decoration:none;
  font-family:inherit;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;
  transition:color .34s var(--мягко),background .34s var(--мягко)}
.капсула nav a:hover,.капсула .упр:hover{color:var(--текст);background:rgba(255,255,255,.07)}
/* Активный пункт — тёмное пятно с еле заметной кромкой, тот же приём, что
   у выбранного раздела на дашборде. Матовой наклейки поверх страницы нет. */
.капсула nav a[aria-current]{color:var(--текст);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 50%,rgba(255,255,255,.04)),rgba(0,0,0,.34);
  box-shadow:
    inset 3px 4px 10px -7px rgba(255,255,255,.9),
    inset -3px -4px 10px -7px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.10)}
.значок{display:grid;place-items:center;width:36px;height:36px;border:0;background:none;
  color:var(--текст-тихо);cursor:pointer;border-radius:18px;
  transition:color .34s var(--мягко),background .34s var(--мягко)}
.значок:hover{color:var(--текст);background:rgba(255,255,255,.07)}
.значок svg{width:19px;height:19px;fill:currentColor}
.черта{width:1px;height:20px;background:rgba(255,255,255,.14);margin:0 6px}

/* ── ЭКРАН: три пояса, знак ровно в середине ────────────────────────*/
.экран{position:relative;min-height:100lvh;padding:0 var(--поля)}
.пояс-верх,.пояс-центр,.пояс-низ{position:absolute;left:var(--поля);right:var(--поля);
  display:flex;flex-direction:column;align-items:center}
.пояс-верх{top:calc(clamp(14px,1.8vh,22px) + 48px + 7vh)}
.пояс-центр{top:50%;transform:translateY(-50%)}
.пояс-низ{bottom:calc(clamp(20px,3vh,34px) + 7.5vh)}

.над{font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--текст-тихо);text-align:center}
.слоган{font-size:17px;line-height:1.62;color:var(--текст-тихо);text-align:center;max-width:44ch}
.studio{font-size:clamp(11px,1.02vw,15px);letter-spacing:.58em;color:var(--текст-тихо);
  text-align:center;text-indent:.58em}
h1{font-weight:700;letter-spacing:-.035em;line-height:.98;text-align:center;
  font-size:clamp(30px,3.4vw,50px)}

/* ── ЗНАК: кадры живут ВНУТРИ штрихов ───────────────────────────────
   Кадр не растягивается под коробку знака — коробка широкая, кадр
   вертикальный, растяжение и давало сплющенные лица. `cover` обрезает. */
.маска{position:relative;margin:0 auto}
.маска .кадры,.маска .чернила{position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.маска .кадры{background-size:100vw 100vh;background-position:center;background-repeat:no-repeat;
  opacity:1;transition:opacity 1400ms var(--мягко),filter 1400ms var(--мягко)}
.маска .чернила{background:var(--текст);opacity:.38;transition:opacity 1400ms var(--мягко)}
/* Такт второй: под кадром зажигаются чернила. Без них знак пропадает на
   тёмных кадрах — а их в его сериях большинство, — и три секунды главного
   такта уходят в никуда.
   ФИЛЬТРА НА КАДРЕ ЗДЕСЬ НЕТ И БЫТЬ НЕ МОЖЕТ. Стояло `brightness(1.75)
   contrast(1.06)` — я высветлял снимок автора, чтобы поверх него читался
   знак. Это прямое нарушение §18: цвет его кадров машина не трогает ничем.
   Читаемость берётся нашим слоем под кадром, а не правкой самого кадра. */
.знак-щёлкает .маска .чернила{opacity:.10}
/* Такт третий: знак становится сплошным белым, кадр внутри уходит совсем. */
.знак-белый .маска .чернила{opacity:1}
.знак-белый .маска .кадры{opacity:0}

/* ── ВЫХОД ЭЛЕМЕНТОВ ПО ОЧЕРЕДИ ─────────────────────────────────────
   Порядок владельца: знак → STUDIO → слоган → надзаголовок → кнопки →
   шапка. Каждый выходит своей задержкой, а не все одним кадром. */
.выход{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity 1500ms var(--мягко),transform 1700ms var(--вязко)}
.вышел .выход{opacity:1;transform:none}
.т1{transition-delay:0ms}.т2{transition-delay:520ms}.т3{transition-delay:1060ms}
.т4{transition-delay:1620ms}.т5{transition-delay:2180ms}
/* У СТЕКЛЯННОГО УЗЛА НЕТ СОБСТВЕННОГО ПОЯВЛЕНИЯ. ВООБЩЕ.
   Панель рисует сцена и она же пишет элементу `opacity` и `transform`
   каждый кадр — то есть текст и значки внутри выходят ровно тем же числом
   и в тот же миг, что и стекло под ними. Любое появление, заведённое
   поверх этого стилем, снова разводит подложку и текст: сцена показывает
   панель по своему расписанию, CSS проявляет содержимое по своему.
   Первый раз это дало прыжок с отставанием текста, второй — подложки,
   появившиеся задолго до надписей. Хозяин один: сцена.
   Момент выхода задаётся вызовом `Сцена.показать()` в `Экран.js`. */
.капсула-въезд{display:contents}

/* ── ДЕЙСТВИЯ ───────────────────────────────────────────────────────*/
.действия{display:flex;align-items:center;gap:24px}
.кнопка{display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:1px 42px 0;border:0;border-radius:18px;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.20em;
  text-indent:.20em;text-transform:uppercase;color:var(--текст)}

/* ══════════ ОТСТУПЫ В КНОПКЕ СЧИТАЮТСЯ ОТ КРАСКИ БУКВЫ ══════════
   Он писал про это каждую итерацию правок, и каждый раз я мерил не то.
   Дословно: «должны быть больше отступы от текста в кнопке справа и слева
   и небольшие сверху и снизу. Но право-лево равны и верх-низ равны».

   ПОЧЕМУ РАНЬШЕ ВЫХОДИЛО КРИВО, ХОТЯ ПОЛЯ БЫЛИ СИММЕТРИЧНЫ.
   Две причины, и обе не видны по коробке — только по пикселям снимка:

   · РАЗРЯДКА ДОБАВЛЯЕТ ПРОСВЕТ ПОСЛЕ ПОСЛЕДНЕЙ БУКВЫ. При `.20em` на
     кегле 11 это 2,2 px, и они входят в ширину строки. Строка центрируется
     вместе с ними, поэтому краска стоит на 2,2 px левее середины. Замер по
     пикселям: слева 26,5 — справа 29,0. Лечится `text-indent`, равным
     разрядке: он добавляет столько же перед первой буквой, и краска снова
     ровно посередине.
   · ПРОПИСНАЯ НЕ ЗАПОЛНЯЕТ СТРОКУ ПО ВЫСОТЕ. Браузер центрирует строку
     целиком — с местом под выносные элементы, которых у капса нет. Замер:
     сверху 13,0 — снизу 14,0. Лечится сдвигом строки вниз на этот пиксель.

   ПРОПОРЦИЯ. Высота кнопки и поля по бокам подобраны так, чтобы КРАСКА
   стояла в отношении 3:1 — по бокам втрое больше, чем сверху и снизу.
   Прописная Mabry Bold на кегле 11 — 7,69 px, значит:
     монитор: высота 36 → сверху и снизу по 14,2, по бокам 42;
     телефон: высота 28 → сверху и снизу по 10,2, по бокам 30.
   Проверяет `телефон5.py` разделом «кнопки»: он снимает каждую кнопку
   каждой страницы в обеих темах и меряет пиксели надписи. */
/* Правило висит на САМОЙ кнопке, а не на надписи внутри: у кнопки первого
   экрана надписи-узла нет вовсе, там голый текст, и правило на
   `.кнопка-текст` её не касалось — замер показал 31,0 слева против 34,0
   справа там, где у остальных было 32,5 и 33,0. `text-indent` наследуется и
   применяется к тексту в любом виде, а верхний пиксель поля опускает
   строку на пол-пикселя вниз — ровно на столько прописная стояла выше. */
/* ══════════ ШАПКА ЖИВЁТ ПО ТОМУ ЖЕ ЗАКОНУ, ЧТО И КНОПКА ══════════
   Его слово 13.08.2026: «правило кнопок с отступами по бокам и сверху-снизу
   касается также шапки. Шапка должна быть похожа на кнопки, и отступы
   должны быть по такому же принципу».
   Замер до правки на 390: слева 14,5 — справа 13,5, сверху 10,0 — снизу
   12,0, то есть бока всего в 1,35 раза шире вертикали вместо трёх.

   ПИЛЮЛЯ СТАЛА НИЖЕ, А ЦЕЛЬ ДЛЯ ПАЛЬЦА ОСТАЛАСЬ ПРЕЖНЕЙ. Уменьшить высоту
   и не потерять попадание можно только разведя видимое и нажимаемое:
   пилюля — это сам узел, а невидимый удлинитель `::after` возвращает ему
   высоту капсулы. Так пропорция краски держится, а палец по-прежнему
   попадает в сорок пикселей. */
.капсула nav a,.капсула .упр{text-indent:.20em;padding-top:1px;position:relative}
.капсула nav a{height:26px;border-radius:13px;padding-left:22px;padding-right:22px}
.капсула .упр{height:26px;border-radius:13px;padding-left:22px;padding-right:22px}
.капсула nav a::after,.капсула .упр::after{content:'';position:absolute;
  left:0;right:0;top:-7px;bottom:-7px}
.ссылка-действие{font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--текст-тихо);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.ссылка-действие:hover{color:var(--текст)}
.ссылка-действие i{display:block;width:22px;height:1px;background:currentColor;
  transition:transform .7s var(--вязко)}
.ссылка-действие:hover i{transform:translateX(8px)}

.низ{position:absolute;left:var(--поля);right:var(--поля);bottom:clamp(20px,3vh,34px);
  display:flex;justify-content:space-between;font-size:11px;font-weight:700;
  letter-spacing:.20em;text-transform:uppercase;color:var(--текст-совсем-тихо)}

@media (max-width:760px){
  .капсула nav a{letter-spacing:.05em;font-size:10px}
  .капсула nav{gap:0;padding-right:2px}
  .шапка .капсула:has(nav){padding:0 clamp(6px,1.7vw,9px) 0 clamp(11px,3.0vw,14px)}
  .шапка .капсула:has(.значок){padding:0 clamp(5px,1.4vw,8px)}
  .капсула .знак{padding:0 clamp(9px,2.5vw,12px) 0 2px}
  .шапка{gap:8px}
  .капсула .значок{width:30px;height:30px;border-radius:15px}
  .капсула .черта{display:none}
  .капсула .упр{display:none}
  .действия{flex-direction:column;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .выход,.шапка .капсула{opacity:1;transform:none;transition:none}
  .заставка{display:none}
  #круг{opacity:1;transition:none}
}

.над,.слоган,.studio,.низ,.ссылка-действие,.маска .чернила{mix-blend-mode:difference}
/* НА СТЕКЛЕ ВЫЧИТАНИЕ ВЕШАЕТСЯ НА САМ УЗЕЛ, А НЕ НА НАДПИСЬ ВНУТРИ.
   Сцена пишет стеклянному узлу `transform` и `opacity` каждый кадр, а это
   создаёт свой слой: надпись внутри вычитается уже внутри него, то есть
   не из круга, а из пустоты, и остаётся белой над белым. Владелец увидел
   это на нижней кнопке. Вычитание переносится на узел целиком — тогда
   всё его содержимое, надпись и значки, вычитается из того, что под ним. */
/* ВЫЧИТАНИЕ СНЯТО С КАПСУЛЫ И КНОПКИ, ВЫЧИТАЕТСЯ ТОЛЬКО НАДПИСЬ.
   Браузер отключает `backdrop-filter` у узла, который смешивается с
   подложкой: стекло и вычитание на одном узле несовместимы. Владелец
   выбрал сам и дважды: «Шапка и кнопки стеклянные. Это не меняется» и
   «Тогда лучше просто оставь нечитабельный, чем ту позорную обводку».
   Значит узел стеклянный, а вычитание уходит на текст внутри — там оно
   размытию не мешает. */
.кнопка>*,.капсула>*{mix-blend-mode:difference}
/* Слой не должен изолироваться от холста, иначе вычитать будет нечего. */
main,.экран,.пояс-верх,.пояс-центр{isolation:auto}

/* ── ПЕРВЫЙ ЭКРАН ПО ЦЕНТРУ. ОТМЕНА ЛЕВОГО ВЫРАВНИВАНИЯ ──────────
   Второй пак правок требовал левого края («идёт разнобой» с блочными
   заголовками). Третий пак это отменил дословно: «Главный экран стал
   выглядеть хуже, у нас всё посыпалось и свалилось налево. Возвращай
   расположение по центру с соблюдением иерархии заголовков и того, что
   H1 должен быть больше, чем H2». Действует последнее.

   Центровка живёт в исходном стиле (`.пояс-*{align-items:center}`,
   `text-align:center` у трёх строк) — здесь просто НЕТ правил, которые её
   отменяли. Иерархия кеглей ниже сохранена без изменений. */
/* КЕГЛЬ H1 НА ГЛАВНОЙ. Заголовком служит сам знак — картинка, и её
   оптический размер 318 px, то есть втрое крупнее любого H2. Но всякая
   проверка, включая приёмку и разбор SEO, читает ЧИСЛО `font-size`, а у
   обёртки оно оставалось наследованным (50 px против 100 у H2). Кегль
   задаётся явно и выше H2: видимого текста в этом заголовке нет, поэтому
   на вид не влияет ничего, а инвариант «H1 крупнее H2» становится
   проверяемым числом на обеих ширинах. */
.знак-заголовок{margin:0;display:block;font-size:clamp(46px,7.8vw,120px);
  line-height:1}
/* Строка для поиска и диктора: заголовок главной — сам знак, а знак это
   картинка. Строка не видна глазом и не занимает места. */
.скрытая-строка{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ── H1 КРУПНЕЕ H2 ───────────────────────────────────────────────
   Требование владельца дословно: «H1 обязан быть хоть немного крупнее H2».
   Замер до: H1 внутренних страниц clamp(38,6.2vw,92) — на 1512 это 92 px
   против 100 px у H2, то есть заголовок страницы был МЕЛЬЧЕ заголовка блока.
   Стало clamp(46,7.6vw,116): 115 против 100 на мониторе и 46 против 40 на
   телефоне. На главной заголовком служит знак — он шире 300 px и спорить
   тут не с чем. */
.экран--внутри h1{font-size:clamp(40px,6.6vw,100px);letter-spacing:-.03em;
  line-height:1.04;text-transform:uppercase}

/* ── H1 НАБИРАЕТСЯ КАПСОМ, КАК И ВСЕ ЗАГОЛОВКИ ───────────────────
   Владелец: «на всех трёх страницах все заголовки H1 сделать так же капсом,
   как и все остальные заголовки в проекте; сейчас странно выбивается, что
   H1 с большой буквы, а все остальные капсом. Если из-за количества слов
   не будет помещаться — делай его чуть меньше, но тогда и чуть меньше все
   остальные, чтобы не рушить иерархию».
   Капс шире строчных примерно на четверть, поэтому кегль H1 приведён к
   кеглю H2, а иерархию держит H2: он опущен на ступень ниже. Само правило
   для H2 стоит в `блоки_инженер`: стиль блоков дописывается последним и
   перебил бы его отсюда. Числа после правки на 1512: H1 100, H2 84. */

/* ── ОРЕОЛА ПОД ТЕКСТОМ БОЛЬШЕ НЕТ ───────────────────────────────
   Здесь стояли `.ореол`, `.ореол-заголовок`, `.ореол-строка`, `.ореол-h2`
   и `.ореол-пара`: слой-двойник по форме букв с чёрной тенью в семь
   повторов. Он поднимал контраст на светлой кромке круга и рисовал вокруг
   каждой буквы тёмный контур.

   Снято по прямому слову владельца 11.08.2026: «Тогда лучше просто оставь
   нечитабельный, чем ту позорную обводку, которую ты сделал». Вместе с
   ореолом снят и подобранный под него тон тихих строк первого экрана
   (был `rgba(255,255,255,.88)`) — он держался на том, что ореол
   ограничивает диапазон подложки. Строки вернулись к исходному
   `var(--текст-тихо)` из базового стиля.

/* ── ЧЁРНЫХ ПЯТЕН ПОД ПОЯСАМИ ПЕРВОГО ЭКРАНА БОЛЬШЕ НЕТ ───────────
   Здесь стояли `::before` у трёх поясов и у нижней строки: мягкие чёрные
   радиальные пятна, гасившие светлую кромку круга под текстом, чтобы
   вычитание фона не попадало в свою слепую точку (подложка ровно в
   половину тона буквы).

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

   Остаётся только то, что к затемнению отношения не имеет: пояса не
   изолируются от холста, иначе вычитать будет нечего. */
.пояс-верх,.пояс-центр,.пояс-низ,.низ{isolation:auto}
.низ{position:absolute}

/* ── ЗАГОЛОВКИ ВНУТРЕННИХ СТРАНИЦ ────────────────────────────────
   Знак на главной мелкий по замыслу: первый экран держит воздух и
   тишину. Внутри сайта это правило не действует — там заголовок
   работает, а не задаёт настроение. */
/* Вторая строка надзаголовка — перечень, а не заголовок: тише и мельче. */
/* Вторая строка надзаголовка — перечень, а не заголовок: тише и мельче.
   Но не настолько: на самом тихом сером (#5B5854) поверх кромки круга
   замер дал 2,43 на мониторе и 2,90 на телефоне при пороге 3,0, то есть
   строку приходилось угадывать. Ступень вверх, до #8E8A86: она остаётся
   тише первой строки (#F4F2F0), но читается. */
.над-второй{display:block;margin-top:.62em;color:var(--текст-тихо);letter-spacing:.16em}
/* Кегль H1 задан выше, в блоке «H1 крупнее H2». */

/* ── ВЯЗКАЯ ПРОКРУТКА ────────────────────────────────────────────
   Полотно со всем содержимым закреплено и едет само, а страница
   только задаёт диапазон прокрутки распоркой нужной высоты. Другого
   способа нет: панель стекла рисует холст кадром скрипта, а родная
   прокрутка живёт на композиторе и успевает раньше — догнать её
   рисованием нельзя, у движения должен быть один хозяин. Здесь хозяин
   один: число вязкости уходит и в сдвиг полотна, и в сцену, в одном
   кадре. На касании вязкости нет: у iOS прокрутка живёт на композиторе,
   и своя надстройка над ней либо повторяет её работу, либо соревнуется
   за кадры — ровно на этом 09.08.2026 встал сайт-меню. */
.полотно{position:fixed;inset:0;z-index:2;will-change:transform;
  backface-visibility:hidden}
.распорка{pointer-events:none;visibility:hidden}
/* Родной прокрутки на курсоре нет вовсе: полосу ведёт скрипт. Пока цель
   бралась из `scrollY`, она прыгала туда, куда браузер уже поставил
   страницу, и вязкость сводилась к одному кадру отставания — движение
   читалось обычным. Числа взяты с сайта-меню, где владелец вязкость
   принял: догон цели 0,075 за кадр, бросок после отрыва пальца ×26. */
html:not(.касание),html:not(.касание) body{overflow:hidden;height:100%}
/* На касании прокрутка родная: браузер крутит распорку, а полотно
   едет за ней в кадре скрипта. Перехватывать касание своим кодом
   нельзя — инерция iOS живёт на композиторе и повторить её нечем. */
html.касание{overscroll-behavior-y:none}
/* ПОКА ОТКРЫТО ОКНО, РОДНОЙ ПРОКРУТКИ У СТРАНИЦЫ НЕТ. Иначе палец крутит то
   окно, то страницу под ним — владелец: «иногда скроллится под поп-апом
   поле, а сам поп-ап не скроллится через раз». Класс вешает и снимает
   `ЗаморозитьСтраницу`, она же возвращает положение при закрытии. */
html.окно-открыто,html.окно-открыто body{overflow:hidden}
/* Окно крутится само и не отдаёт прокрутку странице под собой. */
.окно{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* НА КАСАНИИ ХОЗЯИН ДВИЖЕНИЯ ТОТ ЖЕ, ЧТО НА КУРСОРЕ, И ЭТО ГЛАВНОЕ.
   Полотно на касании стояло статикой: содержимое ехало родной прокруткой на
   композиторе, а панели стекла рисовал холст в кадре скрипта. Это ДВА
   хозяина одного движения, и разъезд подложки с надписью там не дефект
   настройки, а свойство схемы — на быстром пальце композитор уходит вперёд
   на кадр, и надпись улетает от своей панели. Владелец назвал это трижды:
   «Снова текст живёт отдельно от кнопок».

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

   Холст сцены при этом обязан оставаться размером с ЭКРАН, а не с документ:
   `will-change:transform` делает полотно содержащим блоком для закреплённых
   потомков, и при статичном полотне холст `height:100%` вырастал до высоты
   документа — на 390x844 выходил 390x2254, круг уезжал на середину
   документа, и владелец назвал это искорёженным кругом. Закреплённое
   полотно эту ловушку снимает по построению. */

/* ── ПЕРВЫЙ ЭКРАН ЗАКРЕПЛЁН, И ЭТО НЕ УКРАШЕНИЕ ──────────────────
   Панель стекла рисует холст, а холст перерисовывается кадром скрипта.
   Родная прокрутка живёт на композиторе и успевает раньше: текст внутри
   кнопки уезжает вместе со страницей, а панель под ним догоняет через
   кадр. Отсюда и желейное подрагивание подложки без текста — догнать
   композитор рисованием нельзя в принципе, у движения должен быть один
   хозяин. Поэтому первый экран не едет вовсе: он стоит, а следующий блок
   наезжает на него сверху. Панель и надпись перестают расходиться по
   построению, а не по подгонке. */
.экран{position:relative;min-height:100lvh}
/* НА ШАПКЕ НЕТ НИ ОДНОГО `transform`, И ЭТО ЗАПРЕТ.
   Стояло `translateZ(0)` плюс покадровое гашение сдвига полотна. В
   Chromium это ничего не стоит, а WebKit от любого `transform` поднимает
   узел в собственный слой и делает его корнем подложки: `backdrop-filter`
   внутри такого узла берёт только его же содержимое, то есть пустоту.
   Владелец видел это прямо: на самом верху страницы стекло есть (матрица
   там единичная), а после первой же прокрутки — «просто прозрачный шейп».
   Шапка вынесена из полотна и стоит неподвижно сама по себе, гасить ей
   нечего. То же и с холстом стекла. */
.шапка{transform:none}
/* ── ТЕЛЕФОН ─────────────────────────────────────────────────────
   Знак меряется долей ширины экрана, а не той же долей, что на
   мониторе: `min(26vw,318px)` на 390 даёт 101 px, и подпись STUDIO
   с разрядкой .58em выходила ШИРЕ самого знака. Владелец увидел это
   первым же взглядом. Разрядка подписи на узком экране тоже режется —
   иначе она тянется во всю строку и спорит со знаком.

   Дальше — первый экран телефона дословно по диктовке:
   «убрать Москву и Листайте», «убрать слоган над кнопкой», «кнопки
   сплющить: отступы сверху и снизу от текста слишком большие, справа и
   слева нормальные». Узлы не выбрасываются из разметки, а снимаются с
   показа: на мониторе они остаются, и это одна и та же страница. */
@media (max-width:760px){
  .экран .низ{display:none}
  .экран .слоган{display:none}
  /* СПЛЮЩИВАНИЕ — ТОЛЬКО ПО ВЕРТИКАЛИ, ПО ГОРИЗОНТАЛИ НЕ ТРОНУТО.
     Замер на 390 до правки: кнопка первого экрана 38 px при кегле 11 — по
     14 px воздуха над словом и под ним; пункт шапки 36 px при кегле 10 — по
     13 px. Стало: кнопка 34 (12/12), пункт шапки 28 (9/9), капсула 40,
     значок 32. Поля слева и справа прежние (26 у кнопки, 8 у пункта). */
  .экран .кнопка{height:28px;border-radius:14px}
  .капсула{height:40px;border-radius:20px}
  .капсула nav a,.капсула .упр{height:28px;border-radius:14px}
  .значок{width:32px;height:32px;border-radius:16px}
  .маска{width:min(68vw,340px)!important}
  .знак-подпись{width:min(68vw,340px)!important}
  .studio{font-size:10px;letter-spacing:.38em;text-indent:.38em}
  .над{font-size:10px;letter-spacing:.16em}
  .слоган{font-size:15px}
  .пояс-верх{top:calc(clamp(14px,1.8vh,22px) + 48px + 5vh)}
  /* КНОПКА ПОДНИМАЕТСЯ К КРУГУ. Цель владельца названа им самим: «чтобы
     цеплял шапку — на десктопе он цепляет и кнопку, и шапку, и там сразу
     видно дисперсию». Верхняя дуга сквозь шапку прошла подъёмом круга;
     нижняя на телефоне кончается около 500 px, а кнопка стояла на 713 —
     между ними 213 px пустоты, которая и образовалась, когда по диктовке
     ушли слоган, «Москва» и «Листайте». Кнопка встаёт на нижнюю дугу: и
     пустоты нет, и дисперсия под ней видна. */
  .пояс-низ{top:70vh;bottom:auto}
}


/* ── СТЕКЛО НАД СОДЕРЖИМЫМ СТРАНИЦЫ ──────────────────────────────
   ЧТО ВИДЕЛ ВЛАДЕЛЕЦ: «Почему шапка стеклянная только в первом блоке? А
   дальше чёрная!!!» — и он прав до пикселя. Панель рисует сцена, а сцена
   умеет преломлять только то, что нарисовала сама: круг и свет. Содержимое
   страницы — кадры, обложки, карточки — ей неизвестно вовсе. Над красной
   фотографией панель честно рисует черноту, потому что в её мире там
   чернота. Никакой настройкой шейдера это не лечится: материала нет.

   ЧТО СДЕЛАНО. Ниже первого экрана стекло собирается вторым способом —
   `backdrop-filter` берёт то, что реально нарисовано под капсулой в самой
   странице, и размывает его. Это настоящее стекло над содержимым: под ним
   видно, что проезжает, и оно искажается.

   ПОЧЕМУ ЭТО НЕ ВОЗВРАТ К СНЯТОМУ ПРИТЕМНЕНИЮ. Снято было `brightness(.10)`
   на САМОЙ капсуле: оно гасило панель сцены в девять десятых и убивало
   дисперсию на первом экране. Здесь фильтр живёт на отдельном слое
   `::before`, не несёт затемнения вовсе и включается ТОЛЬКО после того, как
   страница поехала. Первый экран остаётся ровно тем, что владелец принял:
   панель сцены, кромка, дисперсия, ничего сверху.

   ПОЧЕМУ НА ПСЕВДОЭЛЕМЕНТЕ. Chrome отключает `backdrop-filter` у узла, на
   котором стоит `mix-blend-mode`, а вычитание фона на капсуле нужно для
   читаемости пунктов. Разведены по разным узлам: наложение на капсуле,
   стекло на её подложке. */
/* ═══ СТЕКЛО СОБИРАЕТСЯ ИЗ ДВУХ СЛОЁВ, И ОБА НУЖНЫ ═══
   Круг, по которому мы ходили шесть раз, держался на том, что каждый слой
   пробовали ПООДИНОЧКЕ.

   · Только сцена: панель едет поверх содержимого, но ниже первого экрана
     она чёрная — сцена не знает про кадры и карточки. Владелец: «начиная
     с развилки у нас чёрная шапка».
   · Только браузер: размытие берёт содержимое, но у него нет ни кромки,
     ни дисперсии, ни нити по курсору. Владелец: «это просто матовый
     пластик, ничего общего с дашбордом».

   РАЗДЕЛЕНИЕ ТРУДА ПО СПОСОБНОСТЯМ. Материал даёт браузер: он единственный,
   кто видит нарисованную страницу, и его `backdrop-filter` берёт из-под
   пилюли то, что там реально лежит, — кадры, обложки, заголовки. Оптику
   даёт шейдер: кромка, концентрация света, внутренняя фаска, направленный
   блик, собственный спектр дисперсии и нить по курсору.

   ЧТОБЫ ОПТИКА НЕ ЗАКРЫЛА МАТЕРИАЛ, холст стекла несёт не стекло, а
   РАЗНИЦУ между стеклом и фоном — только тот свет, который стекло
   добавляет (см. `стекло_поверх_содержимого` в сборке). Над чернотой
   разница равна нулю, холст там прозрачен, и содержимое видно один в один.
   Ложится холст сложением: `plus-lighter` — точное сложение, `screen` —
   тот же смысл там, где первого нет.

   ПОЧЕМУ ПРОШЛЫЕ ЗАХОДЫ ДАВАЛИ «БЕЛЫЕ ПРОПЛЕШИНЫ». Складывали КОПИЮ куска
   холста сцены, а в ней лежал фон вместе со стеклом: непрозрачная картинка
   целиком, и сложение осветляло всю полосу. Складывать можно только то, в
   чём вне кромки честный ноль. */

/* ── ХОЛСТ СТЕКЛА. Лежит между содержимым (слой 2) и надписями шапки
   (слой 20): блоки он перекрывает, текст шапки — нет. Событий не ловит и
   в поток не входит. Один на весь экран, поэтому работает одинаково и на
   капсулах шапки, и на кнопках внутри любого блока. */
#стекло{position:fixed;inset:0;width:100%;height:100%;display:block;
  z-index:19;pointer-events:none;
  mix-blend-mode:screen;mix-blend-mode:plus-lighter}

/* ── МАТЕРИАЛ ПОД ПИЛЮЛЕЙ. Отдельным слоем, а не на самом узле: браузер
   отключает `backdrop-filter` у узла, который смешивается с подложкой, а
   вычитание на надписях внутри капсулы нам нужно.
   ЧИСЛА ПОДОБРАНЫ ЗАМЕРОМ, А НЕ НА ГЛАЗ. Размытие 15 px: при семи чужой
   текст под пилюлей оставался читаемым и сталкивался с пунктами шапки
   («ГЛАВНАЯ» поверх «Каждая серия — отдельная съёмка»), при двадцати с
   лишним содержимое пропадает вовсе и остаётся матовый пластик, который
   владелец забраковал. Насыщенность 200 %: у толстого стекла цвет подложки
   выходит на поверхность, это его примета, и она же держит стекло цветным
   там, где размытие всё усреднило.

   ПРИТЕМНЕНИЕ ВЕРНУЛОСЬ, И ТЕПЕРЬ ОНО НИЧЕГО НЕ ГАСИТ. Раньше `brightness`
   стоял на самой капсуле поверх панели сцены и убивал её в девять десятых —
   вместе с кромкой и дисперсией; владелец увидел это первым вопросом.
   Теперь оптика лежит ОТДЕЛЬНЫМ слоем поверх (холст `#стекло`, сложение),
   и притемнение подложки её не касается вовсе: кромка, спектр и нить по
   курсору прибавляются уже после. Само по себе притемнение — свойство
   толстого стекла, оно есть и в шейдере дашборда (`col *= mix(0.90, 1.0,
   rim)`). Без него пункты шапки над светлым кадром давали контраст 1,4–2,4
   при пороге 3,0, то есть их приходилось угадывать. */
.стекло::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  pointer-events:none;
  backdrop-filter:blur(15px) saturate(200%) brightness(.38);
  -webkit-backdrop-filter:blur(15px) saturate(200%) brightness(.38)}
/* Без видеочипа стекло рисует сам узел — двух стёкол на одном узле быть
   не должно. */
html:not(.gpu) .стекло::before{display:none}

/* ── ПУНКТЫ ШАПКИ ЧИТАЮТСЯ НА ЛЮБОЙ ПОДЛОЖКЕ ─────────────────────
   Тихий серый `--текст-тихо` (#8E8A86) задуман для текста на черноте. В
   капсуле он лежит на стекле, а под стеклом проезжает то кадр, то заголовок
   во всю ширину: замер `читаемость5.py` давал 1,4–2,4 при пороге 3,0 —
   пункт приходилось угадывать. Владелец назвал это прямо: «логотип не
   читается, кнопки не читаются, перепроверить все элементы по всем
   страницам».
   Ореола под текстом здесь нет и не будет — он его запретил. Читаемость
   держат две вещи, и обе относятся к стеклу, а не к тексту.

   ПЕРВОЕ: ВЫЧИТАНИЕ С ПУНКТОВ ШАПКИ СНЯТО. Вычитание слепо ровно там, где
   подложка в половину тона: |фон − текст| снова даёт середину, и пункт
   пропадает. Замер это и показывал: сколько ни осветляй надпись, контраст
   стоит на 2,1. Под стеклом вычитать больше и не нужно — стекло само
   притемняет то, что под ним.
   ВТОРОЕ: ПРИТЕМНЕНИЕ ПОДЛОЖКИ. Оно свойство толстого стекла и живёт на
   отдельном слое, оптику сцены не трогая (см. выше).

   ТИШИНУ НЕАКТИВНЫХ ПУНКТОВ ДЕРЖИТ НЕ ТОН, А КАПСУЛА. Текущий раздел и
   так обведён своей пилюлей — второй раз отличать его тоном значит платить
   за это читаемостью двух остальных. Тон у всех пунктов один. */
.шапка .капсула>*{mix-blend-mode:normal}
.капсула nav a,.капсула .упр{color:var(--текст)}
.капсула nav a[aria-current],.капсула nav a:hover,.капсула .упр:hover{color:var(--текст)}

/* ── ШАПКА И КНОПКИ СТЕКЛЯННЫЕ. ЭТО ЗАПРЕТ, А НЕ НАСТРОЙКА ───────
   Слова владельца 11.08.2026: «Шапка и кнопки стеклянные. Это не меняется.
   Я запрещаю это менять».

   ЧТО ЗДЕСЬ СТОЯЛО И ПОЧЕМУ УБРАНО. Стояло притемнение задника под
   капсулой: `backdrop-filter: blur(12px) saturate(150%) brightness(.62)`
   плюс снятое вычитание, потому что Chrome глушит `backdrop-filter` у
   узла с `mix-blend-mode`. Правка чинила контраст пунктов меню на кромке
   круга — и ценой стекла: `backdrop-filter` применяется ко ВСЕМУ, что
   нарисовано ниже, а ниже там панель сцены. То есть фильтр гасил и
   размывал ровно то стекло, ради которого капсула существует. Замер
   11.08.2026 на живой сборке (`шапка_замер.py`, ретина ×2): медиана
   яркости под капсулой 0,004–0,154, насыщенность кромки 0,000–0,031,
   цветных пикселей 0,0 % — то есть под панелью не было ни преломления,
   ни дисперсии, одна чёрная пилюля. Владелец увидел это первым вопросом:
   «Куда делась, блядь, стеклянная кнопка в шапке?»

   СТЕКЛО И ВЫЧИТАНИЕ РАЗВЕДЕНЫ ПО РАЗНЫМ СЛОЯМ, А НЕ ВЫБРАНЫ ОДНО ИЗ ДВУХ.
   Стекло рисует сцена на холсте — это отдельный узел ниже по слоям, и
   `mix-blend-mode` на капсуле его не касается вовсе. Несовместимы с
   наложением были `backdrop-filter` и только он. Значит капсула
   возвращается к общему правилу `.кнопка,.капсула{mix-blend-mode:difference}`
   (оно объявлено выше), панель под ней рисует сцена, а никакого CSS-стекла
   и никакого притемнения на этом узле больше нет.

   Читаемость пунктов на кромке круга держит вычитание — как на кнопке
   первого экрана, которую владелец принял. Там, где вычитание слепо
   (подложка ровно в половину тона), пункт читается хуже; это его
   собственный выбор, сказанный прямым текстом: «Тогда лучше просто оставь
   нечитабельный, чем ту позорную обводку». */

/* ── ЗАСТАВКА ВЫШЕ ХОЛСТА ──────────────────────────────────────
   Регресс найден бисекцией на живой странице: холст сцены переехал внутрь
   полотна и получил его слой z2, а заставка осталась на z1. Кадры всё это
   время исправно щёлкали ВО ВЕСЬ ЭКРАН — под непрозрачной чернотой холста. */
.заставка{z-index:3}
/* И УХОДИТ СОВСЕМ, КОГДА ОТЫГРАЛА. Здесь стояло только `opacity:0`, то есть
   слой во весь экран оставался жить НАД всем содержимым (z3 против z2 у
   полотна) до конца визита. Невидимый слой поверх страницы — это не ноль
   стоимости: композитор держит его отдельным слоем и растрирует плитками,
   а нерастрированная плитка выходит чёрной. Ровно на это владелец жаловался
   дважды: «слева страницы что-то перекрывает логотипы чёрным квадратом,
   периодически залипает» и «Яндекс едет по странице и просто начинает
   мигать, поверх него чёрное пятно». Растворение при этом видно целиком:
   `знак-белый` вешается через три секунды после `знак-щёлкает`, а переход
   прозрачности длится 1,4 с. */
.знак-белый .заставка,.без-заставки .заставка{display:none}

/* ═══════════════ ВЫЧИТАНИЕ ФОНА НА ВСЁМ ═══════════════
   Владелец повторил это четыре раза: «когда я пролистываю контент, и он
   попадает на наш белый круг, он не читается. Логотип не читается, кнопки
   не читаются. Перепроверить все элементы по всем страницам».

   ГДЕ ВЫЧИТАНИЕ РАБОТАЕТ, А ГДЕ НЕТ — ЭТО НЕ ВКУС, А УСТРОЙСТВО БРАУЗЕРА.
   `mix-blend-mode` смешивает только внутри своего контекста наложения.
   Любой `transform` или `opacity` у предка контекст создаёт, а сцена пишет
   стеклянному узлу и то и другое КАЖДЫЙ КАДР. Значит текст внутри стеклянной
   карточки вычитать не из чего — под ним не круг, а пустота карточки.
   Поэтому:
     · всё, что лежит прямо на черноте, вычитает фон и читается на круге;
     · всё, что лежит на стекле, читается за счёт самого стекла: панель
       темнит подложку втрое (замер ворот: снаружи 0.481 → под стеклом 0.152).
   Изображения исключены везде — они и есть содержимое (§18). */
.блок :is(h2,p,span,a,li,label,b,figcaption,button,input),
.подвал :is(p,span,a,li),
.шапка :is(a,button,span),
.экран :is(p,h1,span,a,button){mix-blend-mode:difference}
/* На стеклянном узле вычитание вешается на САМ УЗЕЛ, а не на надпись внутри:
   иначе надпись вычитается из пустоты карточки и остаётся белой над белым.
   На карточках с кадрами узел не вычитается вовсе — вычитание группы
   перекрасило бы кадр автора, а это §18. Внутри карточки вычитание снимается
   явно: оно там всё равно ничего не делает, а честная разметка нужна воротам
   — иначе проверка «везде ли стоит difference» проходит на бумаге и молчит
   о том, что половина текста держится не на нём, а на стекле. */
.карточка :is(h2,p,span,a,b,figcaption,label,blockquote,input){mix-blend-mode:normal}
/* Слой не должен изолироваться от холста, иначе вычитать будет нечего. */
.остальное,.блок,.отзывы,.лента-блок,.подвал{isolation:auto}

/* ═══════════════ СЕТКА ═══════════════ */
:root{
  /* ПОЛЯ СТРАНИЦЫ. Правка владельца 11.08.2026: «Про 10 пикселей я говорил
     только про мобилку. Ты нахуевертил то же самое и на десктопе. На
     десктопе хотя бы 100». Верхняя граница держит поле от разрастания на
     широком мониторе: на 1512 это ровно 100, на 2560 — 150. */
  --поля:clamp(100px,6.6vw,150px);
  --жёлоб:20px;
  --шаг:8px;
  --радиус-карточки:22px;
  --поле-карточки:28px;
}
@media (max-width:760px){
  :root{ --поля:10px; --жёлоб:12px; --радиус-карточки:18px; --поле-карточки:20px }
}

/* ── ВОЗДУХ МЕЖДУ РАЗДЕЛАМИ ────────────────────────────────────────
   Владелец забраковал обе крайности: 192 назвал «критической уродской
   ошибкой», а после правки до 80 сказал «всё слиплось». Взята середина, и
   считается она по ВИДИМОМУ зазору между содержимым соседних блоков, а не
   по объявленному полю: поле входит в зазор дважды, снизу верхнего блока и
   сверху нижнего. Отсюда 70+70 = 140 на мониторе, 55+55 = 110 на планшете,
   44+44 = 88 на телефоне. Замеряет `отступы_замер.py` на живой странице. */
.блок{position:relative;z-index:2;padding:70px var(--поля)}
@media (max-width:1100px){ .блок{padding:55px var(--поля)} }
@media (max-width:760px){ .блок{padding:44px var(--поля)} }

.сетка{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--жёлоб)}
.к12{grid-column:1 / span 12} .к8{grid-column:1 / span 8}
.к7{grid-column:1 / span 7}  .к6{grid-column:1 / span 6}
/* ── СЕРТИФИКАТ. Владелец о прежнем виде: «огромнейший заголовок в одну
   строку, хотя логичнее перенести; описание ты делишь пополам, хотя его
   логичнее в одну строку; а за ним карточка, которая справа на 70 % просто
   пустота». Здесь всё три правки: заголовок переносится по смыслу, строка
   раздела идёт во всю ширину, карточка занимает шесть колонок из
   двенадцати и заполнена. */
#certificates h2{max-width:12ch}
#certificates .строка-раздела{max-width:none}
/* КАРТОЧКА ПО СОДЕРЖИМОМУ, А НЕ ПО КОЛОНКАМ. Владелец дважды: «карточка,
   которая справа на 70 % просто пустота» и «ты её выровнял под карточку
   предыдущего блока, но там по-прежнему 60 % пустого места». Раньше ширину
   задавали колонки сетки (сначала семь, потом шесть), а содержимого в
   карточке на треть от них. Теперь карточка занимает ровно столько, сколько
   в ней есть: шаги идут в строку, кнопка рядом с условием. */
.сертификат{grid-column:1 / -1;width:max-content;max-width:100%;
  gap:calc(var(--шаг)*2);align-items:flex-start}
.сертификат .услуга-пункты{gap:10px;font-size:15px}
.сертификат .якорь-карточки{margin-top:calc(var(--шаг)*2);padding-top:0}
@media (max-width:760px){ .сертификат{width:auto} }
.к5{grid-column:1 / span 5}  .к4{grid-column:span 4}
/* Вторая карточка ряда — единственное исключение, и оно тоже по колонкам. */
.вторая6{grid-column:7 / span 6}
@media (max-width:760px){
  .к8,.к7,.к6,.к5,.к4,.вторая6{grid-column:1 / span 12}
}

/* ── ЗАГОЛОВКИ. Размер снят с действующего grayking.ru, а не по памяти:
   там 118 px на мониторе и 44 на телефоне, Mabry Pro 700, капсом.
   Владелец разрешил «чуть меньше, чем там» — стоит 100 и 40.
   `max-width` в ch снят явно: из-за него «Съёмка или дизайн» билось на две
   строки при 701 px текста в 1044 доступных. */
/* Двойник заголовка набирается тем же правилом: он `span`, и правила тега
   `h2` его не касаются. Одна копия чисел, а не две. */
/* H2 ОПУЩЕН НА СТУПЕНЬ, ПОТОМУ ЧТО H1 СТАЛ КАПСОМ. Капс шире строчных
   примерно на четверть, и H1 набором в капсе сравнялся бы с H2 по
   оптическому весу. Иерархия держится числом: 100 против 84 на мониторе,
   40 против 34 на телефоне. */
.блок h2{
  font-size:clamp(34px,5.6vw,84px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.04;margin:0 0 calc(var(--шаг)*4);
  max-width:none}
/* ── ОРЕОЛА ПОД ТЕКСТОМ БЛОКОВ БОЛЬШЕ НЕТ ─────────────────────────
   Здесь стояли `.ореол`, `.ореол-строка` и `.ореол-h2`: слой-двойник по
   форме букв с чёрной тенью, который держал контраст тихих строк и
   заголовков на светлой кромке круга. Снят целиком 11.08.2026 по слову
   владельца: «Какие-то обводки, какие-то артефакты чёрные… Тогда лучше
   просто оставь нечитабельный, чем ту позорную обводку».
   Тон строк вернулся к исходному `var(--текст-тихо)`: поднимали его тоже
   под ореол, а без него подбирать нечего. */
.строка-раздела{font-size:17px;line-height:1.6;color:var(--текст-тихо);
  max-width:52ch;margin:0 0 calc(var(--шаг)*4)}

/* ── КАРТОЧКА. Рисует её СЦЕНА, не CSS.
   Класс `карточка` — договор со сценой: она берёт узел в реестр, рисует под
   ним стекло с дисперсией и сама заводит проявление. Поэтому здесь нет ни
   `transform`, ни `opacity`, ни собственных переходов. */
/* ТЁМНАЯ ПОДЛОЖКА ПОД СТЕКЛОМ — НЕ УКРАШЕНИЕ, А ЧИТАЕМОСТЬ.
   Панель сцены преломляет то, что нарисовал холст, и над яркой кромкой круга
   она остаётся светлой. Замер по 355 узлам на свету: подпись отзыва давала
   контраст 2,37 при пороге 3,0 — то есть ровно то, на что владелец ругался
   («попадает на наш белый круг — не читается»). Вычитание фона тут не
   работает по построению: сцена пишет карточке transform, а это свой
   контекст наложения. Поэтому под текстом стоит чернота на 30–38 %: кромка
   и дисперсия сквозь неё видны (они ярче), а текст перестаёт спорить со
   светом. Заливка ТЁМНАЯ — светлую ворота ловят как заводскую отделку. */
.карта{position:relative;border-radius:var(--радиус-карточки);
  padding:var(--поле-карточки);display:flex;flex-direction:column;
  gap:calc(var(--шаг)*2);background:rgba(0,0,0,.30);border:0;color:var(--текст)}
a.карта{text-decoration:none;color:inherit}
/* ИМЯ КАРТОЧКИ — ВТОРОЙ УРОВЕНЬ, А НЕ ПОДПИСЬ. Было clamp(24,2.6vw,38):
   при заголовке блока в 100 px это 38 % от него, и «Фото» читалось подписью
   под заголовком, а не именем раздела. Стало 64 px на 1512 — 64 % от
   заголовка: разница уровней видна, спора за главенство нет. */
.карта .имя{font-size:clamp(30px,4.2vw,64px);font-weight:700;
  letter-spacing:-.03em;line-height:1.02;margin:0}
.карта .кому{font-size:16px;line-height:1.5;color:var(--текст-тихо);margin:0}

/* Одно место под изображение, внутри — карусель, листается сама.
   Кадр автора без единого фильтра: только обрезка (§18). */
.карусель{position:relative;aspect-ratio:4/3;border-radius:14px;
  overflow:hidden;background:#0a0a0a}
.карусель img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 32%;opacity:0;transition:opacity 900ms ease}
.карусель img.виден{opacity:1}
@media (prefers-reduced-motion:reduce){ .карусель img{transition:none} }

.таблетки{display:flex;flex-wrap:wrap;gap:var(--шаг)}
.таблетка{font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;
  color:var(--текст-тихо);border:1px solid rgba(255,255,255,.12)}

/* ── РАЗВИЛКА: КАРТОЧКА РАСТЁТ В СТОРОНУ ВТОРОЙ ──────────────────
   Правка владельца: «при наведении карточка растёт в сторону второй, а
   вторая соответственно уменьшается. Не лёгкий подъём, а заметный обмен
   весом». Обмен идёт колонками сетки, а не масштабом: масштаб растянул бы
   кадр внутри и нарушил бы §18, а колонки двигают только раскладку.
   7/5 вместо 6/6 — это 90 px на 1512, видно сразу.
   Вязкость та же, что у всего движения на сайте. Панель стекла сцена
   пересчитывает сама: она читает раскладку каждый кадр. */
/* ПОЧЕМУ НЕ КОЛОНКИ СЕТКИ. Здесь стоял обмен `grid-column` — 7/5 вместо
   6/6. Свойство дискретное: между «шесть колонок» и «семь» нет
   промежуточных значений, поэтому браузер не анимирует его вовсе, а
   переключает. Владелец увидел это сразу: «меняется супер резко с каким-то
   передёргиванием». Плюс менялась только ширина: «она уменьшается и
   остаётся такой же по высоте. Это не то, что я хотел».

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

   Масштабом (`transform:scale`) это не делается: преобразование не меняет
   раскладку, а панель стекла сцена считает по раскладке — подложка
   осталась бы на месте, а карточка уехала. Этот класс дефекта здесь уже
   ловили трижды.

   Длительность 1900 мс против прежних 620: «должно быть гораздо мягче
   анимировано». Кривая своя, с очень пологим началом: замер показал, что
   на общей вязкой первые 150 мс съедали половину пути — глазом это и
   читается как рывок, даже когда значение меняется непрерывно. */
/* ВЫСОТА РЯДА ЗАКРЕПЛЕНА, И ЭТО НЕ ОФОРМЛЕНИЕ. Пока ряд тянулся по
   содержимому, растущая карточка поднимала высоту всего блока, и лента
   логотипов под ним прыгала на каждое наведение. Владелец: «при этой
   анимации развилки снизу прыгает резко строчка с логотипами».
   Отношение сторон ряда посчитано под самый крупный возможный кадр: две
   карточки с жёлобом, из них наведённая занимает 1,16 доли. Карточки
   центрируются в ряду, поэтому в покое остаётся воздух сверху и снизу, а
   при наведении он расходуется — блок не двигается вовсе. */
/* ── ВЫСОТА РЯДА ИДЁТ ЗА СОДЕРЖИМЫМ, А НЕ ЗА КАДРОМ.
   Отношение 1,63 у ряда и квадрат у карточек считались под карусель: она
   и задавала рост. Карусели больше нет (его правка 13.08.2026), а числа
   остались — карточки вытянулись в две пустые простыни во весь экран.
   Теперь ряд меряется тем, что в нём лежит: имя, строка и перечень.
   Обмен весом при наведении не тронут — он про ширину, а не про высоту. */
.развилка .сетка{display:flex;gap:var(--жёлоб);align-items:stretch;
  transition:none}
/* ПРАВИЛО ПРИВЯЗАНО К РАЗВИЛКЕ, А НЕ К КЛАССУ КОЛОНОК. Селектор был
   `.карта.к6` — то есть «любая карточка в шесть колонок», — и квадрат
   развилки доставался заодно карточке пресетов на «Фото». Содержимого там
   на 294 px, а коробка выходила 638×638: владелец увидел ровно это —
   «что за карточка в пресетах пустая на весь экран, это откуда вообще
   взялось». Отношение сторон нужно только двум карточкам развилки. */
.развилка .карта.к6,.развилка .карта.вторая6{
  flex:1 1 0;min-width:0;
  transition:flex-grow 1900ms cubic-bezier(.16,.62,.14,1)}
@media (hover:hover) and (min-width:761px){
  .развилка .сетка:has(.к6:hover) .к6{flex-grow:1.16}
  .развилка .сетка:has(.к6:hover) .вторая6{flex-grow:.84}
  .развилка .сетка:has(.вторая6:hover) .к6{flex-grow:.84}
  .развилка .сетка:has(.вторая6:hover) .вторая6{flex-grow:1.16}
}
@media (max-width:760px){
  .развилка .сетка{flex-direction:column;aspect-ratio:auto}
  .развилка .карта.к6,.развилка .карта.вторая6{aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){
  .развилка .карта.к6,.развилка .карта.вторая6{transition:none}
}

/* ── ЛЕНТА ЗАКАЗЧИКОВ. Не блок: зацикленная строка на вылет.
   Заголовка нет, полей вокруг нет, реакции на курсор нет.
   Маски-градиента по краям тоже нет: именно она и была тем «чёрным
   квадратом слева, который периодически залипает». */
.лента-блок{position:relative;z-index:2;padding:calc(var(--шаг)*5) 0;
  overflow:hidden;pointer-events:none}
/* ПЕТЛЯ БЕСШОВНА ТОЛЬКО ЕСЛИ ПОЛОВИНА ЛЕНТЫ РАВНА ОДНОМУ ПРОХОДУ.
   Владелец: «едет до определённого момента, потом сбрасывается, дёргается и
   начинает движение сначала». Причина арифметическая: зазор задавался
   `gap` у контейнера, поэтому ширина двух проходов равнялась
   2×проход + gap, а сдвиг на `-50%` приходился на середину лишнего зазора —
   и лента прыгала ровно на половину зазора каждый цикл.
   Теперь зазор принадлежит самому знаку (`margin-right`), ширина двух
   проходов ровно вдвое больше одного, и `-50%` попадает в стык. */
/* ЛЕНТУ ВЕДЁТ КАДР СКРИПТА, А НЕ CSS-АНИМАЦИЯ. Это тот же закон, что на
   всём сайте: у движения один хозяин. Анимация на композиторе шла своим
   ходом, а поверх страницы лежит холст стекла со сложением — он заставляет
   браузер пересобирать всё, что под ним, и плитки трёхтысячепиксельного
   слоя не успевали растрироваться. Наружу это выходило ровно так, как
   видел владелец: «постоянно обрывается линия, закрывается чёрным, потом
   мигает и появляется из ниоткуда».
   Теперь лента едет тем же кадром, что и сцена, и живёт в собственном
   слое — пересобирать под ней нечего. */
.лента{display:flex;align-items:center;width:max-content;
  will-change:transform;backface-visibility:hidden;
  transform:translate3d(0,0,0)}
.лента img{margin-right:clamp(36px,4vw,64px)}
@media (prefers-reduced-motion:reduce){ .лента{transform:none!important} }
/* НИ ОДНОГО ФИЛЬТРА НА ЗНАКАХ (§18): они приведены к белому в самих файлах.
   Высоты считает `_высоты_знаков()` по одной формуле — см. её пояснение. */
.лента img{width:auto;display:block;height:30px;flex:0 0 auto}
.лента img[data-знак="Forbes"]{height:min(30.9px,2.04vw)}
.лента img[data-знак="Yandex"]{height:min(19.9px,1.31vw)}
.лента img[data-знак="MTS"]{height:min(27.3px,1.81vw)}
.лента img[data-знак="Avito"]{height:min(31.4px,2.07vw)}
.лента img[data-знак="WISEADVICE"]{height:min(30.4px,2.01vw)}
.лента img[data-знак="BIONIKA"]{height:min(28.6px,1.89vw)}
.лента img[data-знак="DION"]{height:min(30.4px,2.01vw)}
.лента img[data-знак="Sincura"]{height:min(32.1px,2.12vw)}
@media (max-width:760px){
  .лента img[data-знак="Forbes"]{height:min(30.9px,8.17vw)}
  .лента img[data-знак="Yandex"]{height:min(19.9px,5.26vw)}
  .лента img[data-знак="MTS"]{height:min(27.3px,7.23vw)}
  .лента img[data-знак="Avito"]{height:min(31.4px,8.29vw)}
  .лента img[data-знак="WISEADVICE"]{height:min(30.4px,8.04vw)}
  .лента img[data-знак="BIONIKA"]{height:min(28.6px,7.57vw)}
  .лента img[data-знак="DION"]{height:min(30.4px,8.05vw)}
  .лента img[data-знак="Sincura"]{height:min(32.1px,8.48vw)}
}

/* ── ФОРМА В ОДНУ СТРОКУ, как на действующем сайте. */
/* ПОЛЯ КОРОЧЕ, КНОПКА СОРАЗМЕРНА (правка владельца: «поля длинные, кнопка
   крошечная»). Замер до: три поля по 470 px на 1512 и кнопка 143x48 —
   отношение ширины поля к кнопке 3,3. Стало: поле не длиннее 240 px, кнопка
   той же высоты, что и поле (56), отношение 1,3. Ряд прижат влево, как и всё
   остальное на странице. */
/* ЧЕТЫРЕ РАВНЫХ СТОЛБЦА, А НЕ ТРИ ПЛЮС `auto`. Требование владельца,
   повторное: «Кнопка в форме такой же длины, как поля формы». При `auto`
   кнопка меряется своей надписью — на мониторе выходило 159 против 240 у
   поля. Теперь ширину всем четырём задаёт одна и та же колонка. */
.форма-строкой{display:grid;grid-template-columns:repeat(4,minmax(150px,240px));
  justify-content:start;gap:calc(var(--шаг)*2);align-items:start}
.поле-блок{display:flex;flex-direction:column;min-width:0}
.метка-скрытая{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* ── ПОЛЕ И КНОПКА ФОРМЫ РОВНО ТАКИЕ ЖЕ, КАК КНОПКА ПЕРВОГО ЭКРАНА.
   Владелец: «почему у тебя выше текста и ниже текста отступы в форме
   больше, чем отступы в кнопке на главном блоке? Также текст не оцентрован,
   он выше центра — и тот, который вводится, и тот, который есть».
   Замер краски подтвердил обе жалобы: поле было 56 px против 48 у кнопки, а
   буквы в нём стояли на 9,75 px выше середины. Причина второй — фиксированная
   высота у `input`: внутреннюю строку браузер при ней не центрирует, а
   прижимает к верху. Высота теперь набирается симметричными полями от
   строки, и центр получается сам. */
/* ── ПОЛЕ И КНОПКА — ОДНА ФОРМА, И ЭТО ЕГО ПРЯМОЕ СЛОВО 13.08.2026:
   «если ты заменил форму кнопки по новым правилам, тогда ты меняешь и
   форму полей ввода — они точно не могут отличаться в рамках единой формы
   обратной связи». Значит высота, радиус и поля по бокам берутся у кнопки
   один в один: 36 и 42 на мониторе, 28 и 30 на телефоне. Кегль поля
   остаётся 16 — меньше нельзя, айфон на фокусе сам подтягивает страницу. */
.форма-строкой input{border-radius:18px;
  border:1px solid rgba(255,255,255,.16);background:none;
  color:var(--текст);height:36px;padding:0 42px;line-height:34px;
  font:inherit;font-size:16px;width:100%;
  -webkit-appearance:none;appearance:none;
  transition:border-color .34s var(--мягко)}
.форма-строкой input:hover{border-color:rgba(255,255,255,.36)}
.форма-строкой input::placeholder{color:var(--текст-тихо)}
.форма-строкой .кнопка{align-self:start;width:100%}
/* ВОЛОСЯНАЯ КРОМКА У КНОПОК В БЛОКАХ СНЯТА. Она стояла, пока панель стекла
   над чернотой была почти невидима: кнопка читалась просто надписью. Теперь
   кромка светит собственным светом на любом фоне (см. `кромка_светит_сама`),
   и вторая, нарисованная стилем, делала кнопки в блоках непохожими на
   кнопку первого экрана. Владелец: «я же сказал, все кнопки одинаковые по
   всему сайту, мы соблюдаем стилевое единство». */
.ошибка{font-size:13px;line-height:1.4;color:var(--текст);margin:0}
.ошибка:not(:empty){padding-left:16px;position:relative;margin-top:calc(var(--шаг)*.5)}
.ошибка:not(:empty)::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;
  border-radius:2px;background:#EC0704}
input[aria-invalid="true"]{border-color:#EC0704}
.точка{display:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.идёт .точка{display:block;animation:пульс 1.2s ease-in-out infinite}
@keyframes пульс{0%,100%{opacity:.25}50%{opacity:1}}
.согласие{font-size:13px;line-height:1.5;color:var(--текст-тихо);
  margin:calc(var(--шаг)*2) 0 0;max-width:64ch}
.согласие a{color:var(--текст-тихо)}
.долго{font-size:13px;color:var(--текст);margin-top:var(--шаг)}
.ответ{display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(var(--шаг)*2);max-width:56ch}
/* `hidden` — АТРИБУТ, и его `display:none` живёт в стиле браузера с нулевой
   специфичностью: любое своё правило с `display` перебивает его молча.
   Так на странице оставался блок ответа после сброса формы и так же
   показались все двенадцать серий вместо шести — в разметке при этом честно
   стоял `hidden`. Правило общее, чтобы эта порода дефекта не возвращалась
   с каждым новым классом. */
[hidden]{display:none!important}
.ответ .з1{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.015em}
.ответ p{font-size:17px;line-height:1.62;color:var(--текст-тихо)}
.ловушка{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.ловушка label,.ловушка input{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);margin:0;padding:0;border:0;font-size:1px;line-height:1}
.ловушка input{background:none;border:0;color:var(--текст)}
@media (max-width:760px){
  /* СПЛЮЩЕНО ПО ВЕРТИКАЛИ, ПО ГОРИЗОНТАЛИ НЕ ТРОНУТО (правка владельца).
     Замер до: поле 56, кнопка 48 при кегле 11 — 19 px воздуха над словом и
     столько же под ним. Стало: поле 48, кнопка 44, воздух 16. Поля слева и
     справа те же 22 и 26. */
  .форма-строкой{grid-template-columns:1fr}
  .форма-строкой input{height:28px;line-height:26px;border-radius:14px;padding:0 30px}
  /* Ширину кнопки формы задаёт пак правок 13.08.2026 ниже: по надписи и
     по центру. Здесь стояло `width:100%` — второй адрес того же числа. */
}

/* ── ОБО МНЕ. Портрет на вылет справа: заходит за поле и затемняется в
   сторону контента, уходя в черноту. Не скруглённая фигура — кадр без рамки.
   Затемнение отдельным слоем ПОВЕРХ кадра: тон снимка не трогаем (§18). */
/* ── ОБО МНЕ: ФОТОГРАФИЯ ВСТРОЕНА, А НЕ ПРИСТАВЛЕНА ─────────────
   Правка владельца (решение первое из двух его собственных): «размыть
   фотографию по трём сторонам, оставив нетронутой сторону вылета, и дать ей
   заходить на предыдущий и следующий блоки — это нормально для динамики».
   Прежде кадр отрезался ровным вертикальным градиентом, а на телефоне
   сверху шла резкая полоса из черноты прямо в фотографию.

   §18 СОБЛЮДЁН БУКВАЛЬНО: тон кадра не трогается вовсе. Растушёвка — это
   МАСКА прозрачности (`mask-image`), то есть форма, а не цвет. Ни `filter`,
   ни `mix-blend-mode`, ни затемняющей плёнки поверх кадра больше нет —
   прежний `::after` с чёрным градиентом снят совсем. */
.обо-мне{position:relative;min-height:min(78vh,760px)}
.фото-вылет{position:absolute;top:calc(var(--шаг)*-14);
  right:calc(var(--поля)*-1);width:min(52%,700px);
  height:calc(100% + var(--шаг)*19);
  /* Заход на соседние блоки НЕСИММЕТРИЧЕН, и это замер, а не вкус: вверх
     112 px — там чернота блока связи, и кадр входит в неё мягко; вниз 40 px
     — ниже начинается подвал, и при заходе на 112 px правый столбец ссылок
     ложился прямо на светлую часть кадра. Вычитание фона там бессильно:
     кадр даёт середину тона. */
  /* РАСТВОРЕНИЕ ИДЁТ ПО ВСЕМ ЧЕТЫРЁМ СТОРОНАМ И ПОЛОГО. Владелец: «при
     том, что вверху, слева и внизу размытые края, она всё равно выглядит
     прямоугольной — она не растворяется в сайте, а должна». Прежние маски
     доводили край до полной непрозрачности за 22 % высоты, и на границе
     оставалась видимая линия. Здесь переходы длиннее (34–40 %), добавлен
     правый край, а поверх лежит радиальная маска: она снимает сами углы,
     от которых форма и читалась прямоугольником. */
  /* ФОРМУ ЗАДАЁТ ОДНО ПЯТНО, А НЕ ПЕРЕСЕЧЕНИЕ ПОЛОС. Пересечение линейных
     масок оставляет прямые участки по краям, и кадр всё равно читается
     прямоугольником — владелец сказал это дважды. Здесь ведущая маска
     радиальная: она задаёт овал, у которого прямых кромок нет вовсе, а
     правый край дополнительно гасится к самому краю окна. */
  /* РАСТВОРЕНИЕ ВЖЖЕНО В САМ ФАЙЛ (`Служебное/Растворение_кадров.py`).
     CSS-маска из нескольких слоёв работала в Chromium и молча отваливалась
     в другом движке — кадр оставался прямоугольным, и владелец повторил это
     тридцать раз. Файл с альфой одинаков везде. */}
.фото-вылет img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media (max-width:760px){
  .обо-мне{min-height:0}
  /* На телефоне стороны вылета нет: кадр стоит в потоке, а не справа.
     ВЫСОТА, ШИРИНА И МАСКА ЗАДАЮТСЯ НИЖЕ, в паке правок 13.08.2026 — здесь
     их больше нет намеренно. Раньше они стояли и тут, и там: два адреса у
     одного числа, и правка доходила только до одного из них. */
  .фото-вылет{position:relative;top:auto;right:auto;
    margin-left:calc(var(--поля)*-1);
    margin-block:calc(var(--шаг)*-6) calc(var(--шаг)*2)}
}
.обо-мне .содержимое{position:relative;z-index:2}
/* ── ТЕКСТ ИДЁТ ВО ВСЮ СВОЮ КОЛОНКУ, А НЕ СТОЛБИКОМ ──────────────
   Владелец: «блок шире, текст не столбиком; сейчас текст идёт узкой
   колонкой, а центр экрана — пустота». Пустоту давал предел `46ch` — при
   колонке в 765 px строка обрывалась на 430. Предел поднят до 62 знаков:
   это верх удобной для чтения строки, и колонку он больше не режет. */
.био{font-size:17px;line-height:1.62;color:var(--текст-тихо);max-width:62ch;
  margin:0 0 calc(var(--шаг)*2)}
/* Полный текст на мониторе, сокращённый на телефоне — оба в разметке. */
.био-телефон{display:none}
@media (max-width:760px){
  .био-монитор{display:none}
  .био-телефон{display:block}
}
/* ── ЦИФРЫ СТОЯТ МЕЖДУ ТЕКСТОМ И ФОТОГРАФИЕЙ ─────────────────────
   Владелец: «цифры внизу в длинной карточке — переделать форму и поставить
   между текстом и фотографией». Длинной карточки во всю ширину больше нет:
   три цифры идут столбцом в том самом просвете, где текст уже кончился, а
   кадр ещё не начался. Стеклянной подложки под ними тоже нет — на черноте
   они читаются вычитанием, как весь остальной текст блока. */
/* ЦИФРЫ ЛЕЖАТ В КАРТОЧКЕ И СТОЯТ ПО ЛИНИИ ТЕКСТА. Голым столбцом по центру
   экрана они «просто болтались, не выровненные ни по тексту, ни по фото» —
   слова владельца. Карточка возвращена, её левый край совпадает с левым
   краем текста, правый — с началом просвета перед кадром. */
.обо-текст{grid-column:1 / span 7}
.регалии{grid-column:1 / span 7;margin-top:calc(var(--шаг)*4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--жёлоб)}
/* Карточка цифры — не узкая полоска: она квадратнее, цифра стоит крупно
   сверху, подпись прижата к низу. Нижний якорь тут сама подпись. */
.регалия{display:flex;flex-direction:column;justify-content:space-between;
  gap:calc(var(--шаг)*2);min-width:0;min-height:184px;
  padding:var(--поле-карточки);border-radius:var(--радиус-карточки);
  background:rgba(0,0,0,.30)}
@media (max-width:760px){
  .обо-текст,.регалии{grid-column:1 / -1}
  .регалии{grid-template-columns:1fr;gap:calc(var(--шаг)*3)}
}
.регалия b{display:block;font-size:clamp(30px,2.8vw,40px);font-weight:700;line-height:1;
  margin-bottom:calc(var(--шаг)*.5);font-feature-settings:'tnum' 1}
.регалия span{font-size:14px;line-height:1.45;color:var(--текст-тихо)}

/* ── ПОЛОСА С КАДРОМ. Три блока подряд шли сплошной чернотой; кадр стоит
   за ними справа во всю их высоту. Слой ниже содержимого (`z-index:0` при
   `z-index:2` у блоков), событий не ловит.
   §18: тон кадра не тронут ни на шаг. Растворение краёв — МАСКА, то есть
   форма, а не цвет: ни фильтра, ни затемняющей плёнки поверх снимка. */
.полоса-с-кадром{position:relative}
/* ВЫСОТА КАДРА ОГРАНИЧЕНА, А НЕ РАВНА ВЫСОТЕ ПОЛОСЫ. Растянутый на все три
   блока (около 3500 px) кадр при `cover` показывал 17 % своей ширины — на
   экране оставалась одна бровь. Коробка держит близкую к кадру пропорцию,
   и в неё входят голова и торс целиком.
   РАСТВОРЕНИЕ ПО ВСЕМ СТОРОНАМ, А НЕ ПО ТРЁМ. Владелец: «ты слишком грубо
   обрезаешь, угловато». Прямые маски снимают только края, а углы остаются
   и держат прямоугольник; радиальная маска поверх снимает и их. */
.кадр-полосы{position:absolute;right:calc(var(--поля)*-1);
  width:min(52%,720px);z-index:0;pointer-events:none;overflow:hidden;
  /* Растворение вжжено в файл, масок нет. */}
.кадр-полосы img{object-position:52% 30%}
/* На «Дизайне» полоса короче по числу блоков, поэтому кадру там дают всю
   её высоту: иначе он висит в середине и до подвала не доходит. */
/* ДО САМОГО ПОДВАЛА. Владелец сказал это дважды: «растянуть фото Феликса,
   чтобы оно доходило внизу до подвала». Полоса кончается там, где начинается
   подвал, значит кадру отдаётся вся её высота, а не доля. */
.полоса-с-кадром .кадр-полосы{top:0;height:100%}
/* На «Дизайне» под кадром лежит плитка услуг во всю ширину: широкий кадр
   светил сквозь стеклянные карточки правого столбца и съедал их текст.
   Кадр у́же и уходит правее — карточки остаются читаемыми. */
.полоса-длинная .кадр-полосы{top:0;height:100%;width:min(40%,560px)}
/* Растворение снизу при этом остаётся: его держит радиальная маска. */
.кадр-полосы img{width:100%;height:100%;object-fit:cover;object-position:52% 22%;
  display:block}
.полоса-с-кадром .блок{position:relative;z-index:2}
/* На телефоне кадра нет: он там либо накрывает текст, либо сжимается в
   полоску. Читаемость дороже украшения. */
@media (max-width:760px){ .кадр-полосы{display:none} }

/* ── ОТЗЫВЫ. Один экран, лента крутится сама. */
.отзывы .лента-отзывов{margin-top:calc(var(--шаг)*2);display:flex;gap:var(--жёлоб);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:calc(var(--шаг)*1) 0 calc(var(--шаг)*2);
  /* Лента выходит за поля до края окна: обрезанная полем лента читается
     законченной, и человек не догадывается, что она едет дальше. */
  margin-inline:calc(var(--поля)*-1);padding-inline:var(--поля);
  overscroll-behavior-x:contain;cursor:grab}
.лента-отзывов::-webkit-scrollbar{display:none}
.лента-отзывов.тянут{cursor:grabbing}
/* ── НА ПАЛЬЦЕ ЛЕНТУ ВЕДЁМ МЫ, А НЕ КОМПОЗИТОР ────────────────────
   Владелец 12.08.2026: «когда я тяну пальцем карточки, у меня подрагивают
   и тянутся стекляшки, подложки, и не дёргается и не тянется текст — он
   опять живёт отдельную жизнь от карточек».
   Это тот же закон, что и на прокрутке страницы: у движения один хозяин.
   Родная прокрутка вбок живёт на композиторе, а панель стекла рисует холст
   в кадре скрипта — и на быстром пальце холст отстаёт на кадры. Догнать
   композитор записью в холст нельзя в принципе.
   Поэтому на касании родной прокрутки у ленты нет вовсе: `scrollLeft`
   пишет наш кадр, и сцена читает то же число тем же кадром — скрипт блоков
   стоит в разметке ВЫШЕ `Сцена.js`, значит его кадр идёт первым.
   `pan-y` обязателен: без него браузер считает косое движение своим,
   отменяет наши события и лента замирает под пальцем. */
html.касание .лента-отзывов{overflow-x:hidden;touch-action:pan-y;cursor:auto}
.отзыв-карта{flex:0 0 auto;width:clamp(260px,23vw,330px);margin:0;
  border-radius:var(--радиус-карточки);padding:calc(var(--шаг)*3);
  display:flex;flex-direction:column;gap:calc(var(--шаг)*2);
  background:rgba(0,0,0,.38);border:0;min-height:clamp(180px,17vh,220px)}
.отзыв-карта blockquote{margin:0}
.отзыв-карта blockquote p{font-size:15px;line-height:1.5;color:var(--текст);margin:0}
.отзыв-карта figcaption{margin-top:auto;font-size:14px;color:var(--текст-тихо)}
@media (max-width:760px){ .отзыв-карта{width:clamp(240px,72vw,280px)} }

/* ── ЛЕНТА УСЛУГ. Та же идиома, что у отзывов: родная прокрутка вбок,
   тянется курсором, едет сама. Карточка узкая — в ней три-четыре слова и
   цена, растягивать её на полэкрана незачем. Внизу карточки стоит якорь
   «Подробности»: пустота внизу читается дырой, а прижатая к низу строка
   превращает её в воздух (правило владельца из четвёртого пака). */
/* ── УСЛУГИ «ДИЗАЙНА» ЛЕЖАТ СЕТКОЙ. По три в ряд на мониторе, по две на
   планшете, по одной на телефоне. Ряд у сетки один на всех, поэтому
   карточки в нём одной высоты, а `height:100%` на самой карточке доводит
   до этой высоты и её подложку — иначе нижняя кнопка гуляла бы по ряду. */
/* ── ПЛИТКА УСЛУГ. Ряд по три, карточки одного размера, обмен весом при
   наведении — та же идиома, что у развилки: доля в ряду дробная и меняется
   непрерывно, поэтому движение вязкое, а не ступенькой. */
.плитка-услуг{margin-top:calc(var(--шаг)*2);display:flex;flex-direction:column;
  gap:var(--жёлоб)}
.ряд-услуг{display:flex;gap:var(--жёлоб);align-items:stretch}
.ряд-услуг .услуга{flex:1 1 0;min-width:0;min-height:228px;
  transition:flex-grow 1200ms cubic-bezier(.16,.62,.14,1)}
/* Одинаковый размер значит одинаковый и МЕЖДУ рядами, а не только внутри
   ряда: без общей нижней границы вторая тройка выходила ниже первой. */
/* Нижний якорь карточки услуги: одно слово, одинаковое у всех. Цены в
   карточках нет — её называют в переписке, кнопка так и подписана. */
.цена-по-задаче{font-size:14px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--текст)}
/* Имя работы в окне услуги — ссылка на сам сайт, и это видно. */
.работы-ссылки{display:flex;flex-wrap:wrap;gap:calc(var(--шаг)*1) calc(var(--шаг)*3)}
.ссылка-работы{font-size:14px;color:var(--текст);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:2px}
.ссылка-работы i{display:block;width:16px;height:1px;background:currentColor;
  transition:transform .7s var(--вязко)}
.ссылка-работы:hover{border-bottom-color:var(--текст)}
.ссылка-работы:hover i{transform:translateX(5px)}

@media (hover:hover) and (min-width:1181px){
  .ряд-услуг:has(.услуга:hover) .услуга{flex-grow:.90}
  .ряд-услуг .услуга:hover{flex-grow:1.20}
}
@media (prefers-reduced-motion:reduce){ .ряд-услуг .услуга{transition:none} }
@media (max-width:1180px){ .ряд-услуг{flex-wrap:wrap}
  .ряд-услуг .услуга{flex:1 1 calc(50% - var(--жёлоб))} }
@media (max-width:760px){ .ряд-услуг{flex-direction:column} }
.якорь-карточки{margin-top:auto;padding-top:calc(var(--шаг)*2)}
/* Ссылка-обёртка вида не несёт вовсе: весь вид у кнопки внутри. */
/* Обёртки-ссылки больше нет: ссылка сама и есть кнопка. */
a.кнопка{text-decoration:none}

/* ── МЕЖСТРОЧНЫЕ В КАРТОЧКАХ ПАКЕТОВ ─────────────────────────────
   Владелец: «в карточках пакетов межстрочные расстояния больше самих
   строк». Так и было: у карточки `gap: шаг*1.5` (12 px) между КАЖДОЙ парой
   абзацев, и у самих абзацев интерлиньяж 1,5 — на кегле 15 это 22 px
   строки при 12 px зазора плюс поля абзаца. Зазор режется вдвое, строки
   остаются. */
.пакет{gap:calc(var(--шаг)*0.75)}
.пакет .услуга-строка{line-height:1.42}

/* ── РАБОТЫ (страница «Дизайн»). Кадр в карточке идёт без фильтров. */
.работа{margin:0;border-radius:var(--радиус-карточки);overflow:hidden;
  background:rgba(0,0,0,.30);border:0;display:flex;flex-direction:column}
/* `height:auto` здесь обязателен. У кадра стоят атрибуты `width`/`height`
   (они держат место до загрузки и убирают сдвиг вёрстки), а браузер
   превращает их в подсказку стиля `height:990px`. Заданная высота отменяет
   `aspect-ratio` вовсе: карточка выходила 478x990 вместо 478x358, и на
   странице «Дизайн» работы стояли башнями. */
.работа img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.работа figcaption{display:flex;flex-direction:column;gap:4px;
  padding:calc(var(--шаг)*2) calc(var(--шаг)*1)}
.работа figcaption b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.работа figcaption span{font-size:14px;color:var(--текст-тихо)}

/* ── КАРТОЧКА ПРОЕКТА И СЕРИИ ──────────────────────────────────
   Квадратная и нормального размера: в ряду четыре на мониторе, две на
   планшете, одна на телефоне. Прежняя редакция ставила шесть карточек во
   всю ширину подряд — «огромные вертикальные карточки на весь экран,
   впритык от края до края, ни воздуха, ни пространства». */
.к3{grid-column:span 3}
@media (max-width:1100px){ .к3{grid-column:span 6} }
@media (max-width:760px){ .к3{grid-column:1 / span 12} }
.категория{margin-bottom:calc(var(--шаг)*8)}
.категория:last-child{margin-bottom:0}
.имя-категории{font-size:clamp(20px,2vw,30px);font-weight:700;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 calc(var(--шаг)*1)}
.строка-категории{font-size:15px;color:var(--текст-тихо);margin:0 0 calc(var(--шаг)*3)}

/* ── ГАЛЕРЕЯ: СЕТКА С ПРОПУСКАМИ ─────────────────────────────────
   Числа сняты с действующего grayking.ru, а не выбраны: карточка 196x260 при
   экране 1512, старты на нечётных колонках, между рядами 54 и волосяная
   линия, свободного фона около 70 %. Прежняя раскладка — четыре квадрата
   354x354 впритык — и есть то «укатанное от края до края», на которое
   владелец ругался дважды. */
.ряд{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--жёлоб);
  align-items:start;padding:27px 0}
/* Имя класса с суффиксом не для красоты: `.черта` уже занята вертикальным
   разделителем значков в шапке, и общее правило ломало его. */
.черта-ряда{border:0;border-top:1px solid rgba(255,255,255,.14);margin:0}
.ячейка{position:relative;min-width:0}
/* Кадр карточки: пропорция 3:4, никакой заливки и полей вокруг — карточка
   здесь и есть работа, а не плитка с текстом. */
.проект{position:relative;display:block;padding:0;border:0;background:none;
  color:var(--текст);font:inherit;text-align:left;cursor:pointer;width:100%;
  /* Радиус объявлен на самой карточке: сцена читает его с узла и по нему
     строит панель. Без этого панель скруглялась по умолчанию (26 px), а
     кадр — по своему правилу, и углы не совпадали. */
  border-radius:var(--радиус-карточки);
  -webkit-appearance:none;appearance:none}
/* УГЛЫ КАДРА — УГЛЫ КАРТОЧКИ, И ЭТО НЕ МЕЛОЧЬ. Панель стекла под карточкой
   скруглена, а кадр лежал с радиусом 2 px: из круглой подложки торчали
   острые углы прямоугольной фотографии. Владелец: «либо острые углы, либо
   помести их внутрь карточки с закруглёнными углами». Радиус берётся тот
   же, что у панели сцены (`п.r`, 26 px по умолчанию), поэтому кадр садится
   в подложку ровно. */
.проект-кадр{display:block;aspect-ratio:3/4;border-radius:var(--радиус-карточки);
  overflow:hidden;background:#0a0a0a}
.проект-кадр img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s var(--вязко)}
.проект:hover .проект-кадр img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .проект-кадр img{transition:none} }
/* Обложка кейса на «Дизайне» горизонтальная: сайт и знак в вертикальной
   рамке пришлось бы резать, а §18 запрещает кроп ради формы. */
.работы .категория .проект-кадр{aspect-ratio:11/7}

/* Подпись стоит В ПРОПУСКЕ ряда, а не под кадром: пропуск не пустое место,
   а место для номера и имени — так у него на сайте. Ширину считает CSS от
   числа свободных колонок, поэтому она верна на любой ширине экрана. */
.подпись{position:absolute;top:0;bottom:0;pointer-events:none;
  --кол:calc((100% - (var(--сп) - 1) * var(--жёлоб)) / var(--сп));
  width:calc(var(--пк) * var(--кол) + (var(--пк) - 1) * var(--жёлоб) - 43px);
  display:flex;flex-direction:column;justify-content:space-between}
.подпись-справа .подпись{left:100%;margin-left:19px}
.подпись-слева .подпись{right:100%;margin-right:19px;text-align:right;align-items:flex-end}
.подпись-ячейка{align-self:stretch}
.подпись-ячейка .подпись{position:relative;top:auto;bottom:auto;height:100%;
  width:auto;padding-left:14px}
.низ-подписи{display:flex;flex-direction:column;gap:4px}
.номер{font-size:13px;letter-spacing:.12em;color:var(--текст)}
.имя{font-size:14px;letter-spacing:.10em;text-transform:uppercase;font-weight:700;
  line-height:1.25}
.подпись .строка{font-size:12px;color:var(--текст-тихо);line-height:1.4}
/* Цена работы — отдельной строкой под подписью, у всех карточек одинаково:
   человек сравнивает цифру взглядом по вертикали, а не вычитывает её из
   текста (требование Art Director, принято 11.08.2026). */
.цена-работы{display:block;margin-top:6px;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--текст);font-feature-settings:'tnum' 1}

/* Каждая ширина показывает свою композицию, а не сжатую соседнюю: на 834
   карточка в две колонки вырождается в 89 px. */
.для-планшет,.для-телефон{display:none}
@media (max-width:1180px) and (min-width:761px){
  .для-монитор{display:none}
  .для-планшет{display:block}
  .ряд{padding:24px 0}
}
@media (max-width:760px){
  .для-монитор{display:none}
  .для-телефон{display:block}
  .ряд{padding:28px 0}
  /* Ширину подписи на телефоне считает экран, а не колонки: расчётное
     значение уводило страницу в горизонтальную прокрутку. */
  .подпись-ячейка .подпись{padding-left:12px}
}

/* ── ОКНО ПРОЕКТА ──────────────────────────────────────────────
   Родной `dialog`: он сам держит фокус, закрывается клавишей и не требует
   своей ловушки фокуса.

   МАТЕРИАЛ. Панель сцены сюда не достаёт: окно живёт в верхнем слое
   браузера, а холст — на нулевом слое страницы, и рисовать под окном сцена
   не может по построению. Но стекло здесь не отменяется, а собирается
   вторым способом — `backdrop-filter` берёт всё, что нарисовано ниже, то
   есть затемнённую страницу вместе с кругом, и размывает его под окном.
   Замер до правки: под окном разброс яркости 0,000 при медиане 0,002 —
   плоская чернота #070708, ровно то, на что и была жалоба. Материал тот
   же, что у стеклянных блоков: две световые кромки внутрь, волосяная
   обводка, тёмная заливка на 58 %.

   ЗАДНИК ТЕМНЕЕТ, НО НЕ ГАСНЕТ. Было `rgba(0,0,0,.82)` — под ним от круга
   оставалось 18 %, и окно читалось вырезанным из черноты. Стало .62 плюс
   собственное размытие: страница уходит из фокуса внимания, свет сцены
   остаётся, и сквозь окно есть что преломлять. */
.окно{
  /* ГЕОМЕТРИЯ ПО КОЛОНКАМ, А НЕ ПО КРУГЛОМУ ЧИСЛУ.
     Было `max-width:min(1100px,94vw)` при `*{margin:0}`: авторазмётка
     `dialog` убита сбросом, окно прижималось влево (замер: поле слева 0,
     справа 412) и обрывалось на 1100 — между колонками 8 и 9.
     Стало: десять колонок из двенадцати, поля по колонке с каждой стороны.
     На 1512 это 1240 px, края на 136 и 1376 — ровно левая кромка второй
     колонки и правая одиннадцатой. `margin:auto` возвращён явно. */
  --кол:calc((100% - var(--поля)*2 - var(--жёлоб)*11) / 12);
  width:calc(var(--кол)*10 + var(--жёлоб)*9);
  max-width:calc(100% - var(--поля)*2);margin:auto;
  border:0;padding:0;max-height:88dvh;color:var(--текст);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 50%,rgba(255,255,255,.040)),rgba(3,3,4,.58);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-radius:var(--радиус-карточки);overflow:auto;
  box-shadow:
    inset 3px 4px 12px -7px rgba(255,255,255,.95),
    inset -3px -4px 12px -7px rgba(255,255,255,.60),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 24px 60px -30px rgba(0,0,0,1)}
/* На телефоне окно занимает все двенадцать колонок: поля те же 10 px, что
   у любого блока страницы. */
@media (max-width:760px){
  .окно{width:calc(100% - var(--поля)*2)}
}
.окно::backdrop{background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px) saturate(115%);
  -webkit-backdrop-filter:blur(8px) saturate(115%)}
/* Шапка окна липкая: под ней проезжают кадры проекта, поэтому она темнее
   тела и со своим размытием — иначе имя проекта наезжает на кадр. */
.окно-шапка{position:sticky;top:0;z-index:2;
  background:rgba(6,6,8,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  display:flex;align-items:center;justify-content:space-between;gap:var(--шаг);
  padding:calc(var(--шаг)*2) calc(var(--шаг)*3);
  border-bottom:1px solid rgba(255,255,255,.08)}
.окно-имя{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;margin:0}
.окно-крест{width:40px;height:40px;flex:0 0 auto;--радиус-фокуса:18px}
.окно-крест svg{width:20px;height:20px}
.окно-тело{padding:calc(var(--шаг)*3);display:flex;flex-direction:column;
  gap:calc(var(--шаг)*3)}
/* ── ОКНО УСЛУГИ В ДВА СТОЛБЦА. Владелец: «не помещается вся информация
   в поп-ап, ссылки на проекты не видны, кнопка не видна; можно же спокойно
   переместить это наверх, писать во второй столбец». Слева — описание,
   состав, ссылки и кнопка; справа — примеры работ. Всё видно сразу, без
   прокрутки. */
.окно:not(.узкое) .окно-тело{display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:calc(var(--шаг)*3) calc(var(--шаг)*4);align-content:start}
.окно:not(.узкое) .окно-тело > *{grid-column:1}
.окно:not(.узкое) .окно-тело > .карусель-окна{grid-column:2;grid-row:1 / span 12;
  align-self:start}
.окно:not(.узкое) .кадры-окна{height:min(56dvh,520px)}
@media (max-width:900px){
  .окно:not(.узкое) .окно-тело{display:flex;flex-direction:column}
}
/* ОКНО БЕЗ ОПИСАНИЯ НЕ ДЕРЖИТ ЛИШНЕЙ ШИРИНЫ. Владелец: «после того, как
   уберёшь описание, по бокам будет очень много свободного места — его нужно
   убрать; должна лаконично вмещаться карусель, крестик и название».
   Ширину задаёт сам кадр: он вертикальный 3:4 и при высоте 62dvh занимает
   меньше половины прежнего окна. */
.окно.узкое{width:min(720px,calc(100% - var(--поля)*2))}
.окно.узкое .кадры-окна{height:min(70dvh,720px)}
.окно.узкое .окно-кадр{max-width:64%}
.окно.узкое .окно-кадр.сосед-слева{transform:translateX(-74%) scale(.84)}
.окно.узкое .окно-кадр.сосед-справа{transform:translateX(74%) scale(.84)}
.окно-строка{font-size:17px;line-height:1.62;color:var(--текст-тихо);max-width:64ch;margin:0}
/* Ссылка в окне занимает ширину своей надписи, а не всю колонку. В
   `.окно-тело` — колонка `flex`, и без этой строки якорь растягивался на
   1192 px при надписи в 150: невидимая цель во всю ширину окна и кольцо
   фокуса поперёк всего окна (видно на снимке `фокус_ссылка.png`). */
.окно-тело .ссылка-действие{align-self:flex-start}
/* ── КАДР В ОКНЕ ВПИСЫВАЕТСЯ ЦЕЛИКОМ ─────────────────────────────
   Стояло `width:100%;height:auto` при квадратной обложке и вертикальном
   кадре — от портрета оставалась половина головы, и окно уезжало в
   прокрутку на двенадцать снимков. Теперь кадр один, вписан целиком
   (`contain`), высота ограничена окном: пропорции не тронуты, обрезки нет,
   прокручивать нечего. Владелец: «Там должна открыться картинка, никак не
   кропнутая… примерно три четверти высоты окна». */
.карусель-окна{position:relative}
.кадры-окна{position:relative;height:min(62dvh,620px);
  display:flex;align-items:center;justify-content:center}
.окно-кадр{position:absolute;inset:0;margin:auto;max-width:78%;max-height:100%;
  width:auto;height:auto;object-fit:contain;border-radius:2px;display:none;
  transition:opacity 420ms var(--мягко),transform 620ms var(--вязко)}
.окно-кадр.виден{display:block;opacity:1;transform:none;z-index:2}
/* Соседи: уменьшены и затенены, выглядывают за края текущего кадра.
   Затемнение — прозрачностью, а не фильтром: тон кадра не трогается (§18). */
/* СОСЕДА ЛИСТАЮТ НАЖАТИЕМ. Владелец: «хочешь в них нажать, а ничего не
   происходит». Стояло `pointer-events:none` — сосед был картинкой, а не
   кнопкой. Теперь по нему можно нажать, и под курсором он подсвечивается:
   иначе непонятно, что он живой. */
.окно-кадр.сосед-слева,.окно-кадр.сосед-справа{display:block;opacity:.28;
  z-index:1;pointer-events:auto;cursor:pointer;max-width:52%;max-height:76%}
.окно-кадр.сосед-слева:hover,.окно-кадр.сосед-справа:hover{opacity:.52}
.окно-кадр.сосед-слева{transform:translateX(-64%) scale(.86)}
.окно-кадр.сосед-справа{transform:translateX(64%) scale(.86)}
@media (max-width:760px){
  .окно-кадр{max-width:84%}
  .окно-кадр.сосед-слева{transform:translateX(-72%) scale(.8)}
  .окно-кадр.сосед-справа{transform:translateX(72%) scale(.8)}
}
@media (prefers-reduced-motion:reduce){ .окно-кадр{transition:none} }
/* ── ЛУПА. Кадр во весь экран поверх окна проекта: ни рамки, ни заливки,
   ни скругления — только сам снимок и крест. Тон не тронут ничем (§18).
   Окно `dialog` растянуто на весь экран, а не на долю: смысл лупы в том,
   что кадр берёт всё доступное место. */
.лупа{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  margin:0;border:0;padding:0;background:none;overflow:hidden;
  display:none;place-items:center}
.лупа[open]{display:grid}
.лупа::backdrop{background:rgba(0,0,0,.92)}
/* Во весь экран — значит во весь: полей у лупы нет вовсе, иначе кадр
   выходит всего на восьмую крупнее того, что уже видно в окне. */
.лупа-кадр{max-width:100vw;max-height:100dvh;
  width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-out}
.лупа-крест{position:fixed;top:14px;right:14px;width:44px;height:44px;
  border-radius:22px;background:rgba(0,0,0,.5);color:var(--текст)}
.лупа-крест svg{width:20px;height:20px}
/* Кадр в карусели окна нажимается и на мониторе — не только на телефоне. */
.окно-кадр.виден{cursor:zoom-in}
.карусель-окна.одна .кадры-окна{height:auto}
.карусель-окна.одна .окно-кадр{position:static;display:block;
  max-height:min(62dvh,620px);margin:0 auto}
.окно-управление{display:flex;align-items:center;justify-content:center;
  gap:calc(var(--шаг)*2);margin-top:calc(var(--шаг)*2)}
.окно-стрелка{width:44px;height:44px;--радиус-фокуса:22px;
  border:1px solid rgba(255,255,255,.16);border-radius:22px;background:none;
  color:var(--текст);cursor:pointer;display:grid;place-items:center}
.окно-стрелка:hover{border-color:rgba(255,255,255,.40)}
.окно-стрелка svg{width:20px;height:20px}
.окно-стрелка.вперёд svg{transform:rotate(180deg)}
.окно-счёт{margin:0;font-size:12px;letter-spacing:.16em;color:var(--текст-тихо);
  font-feature-settings:'tnum' 1;min-width:70px;text-align:center}
/* Внутри окна вычитание не работает по построению — верхний слой браузера
   лежит выше холста, и вычитать нечего. Поэтому здесь обычный режим и
   собственная тёмная подложка. */
.окно :is(p,span,a,b,li,img,button){mix-blend-mode:normal}
/* КНОПКА ВНУТРИ ОКНА ОБЯЗАНА ВЫГЛЯДЕТЬ КНОПКОЙ. Содержимое окна — копия
   узла из склада, и в реестр сцены эта копия не попадает; холст стекла
   вдобавок лежит НИЖЕ верхнего слоя браузера, где живёт `dialog`, и
   дорисовать ей панель не может по построению. Без подложки от
   `.стекло{background:none;border:0}` оставалась голая надпись — владелец
   увидел это дважды: «в поп-апе вместо кнопки просто текст».
   Здесь стекло собирается тем же запасным способом, что и на машинах без
   видеочипа: те же числа, тот же вид. */
.окно .стекло{
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.016) 50%,rgba(255,255,255,.055)),rgba(0,0,0,.34);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 22px -14px rgba(0,0,0,.95)}
.окно .стекло:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 8px 22px -14px rgba(0,0,0,.95)}
/* Спецификация принта — не абзац, а строка данных. */
.окно-строка.спецификация{color:var(--текст);font-weight:700;letter-spacing:.04em;
  font-feature-settings:'tnum' 1}
/* ФОКУС В ОКНЕ — СВОЁ КОЛЬЦО, А НЕ СИНЕЕ БРАУЗЕРНОЕ.
   Замер до правки: в коробке вокруг креста 10,1 % пикселей синие
   (синий канал выше красного и зелёного на 24 и больше) — чужой интерфейс
   поверх его сайта. Фокус не снимается: он обязан быть виден с клавиатуры.
   Кольцо собрано той же идиомой, что обводка стеклянных блоков, — тёплое
   и холодное пятно разнесены, между ними белое: на кромке свет
   раскладывается, а не белеет. */
.окно :focus-visible,.лупа :focus-visible{outline:none;position:relative;
  box-shadow:0 0 22px -6px rgba(255,255,255,.42)}
.окно :focus-visible::after,.лупа :focus-visible::after{content:'';position:absolute;inset:-4px;
  border-radius:calc(var(--радиус-фокуса,12px) + 4px);pointer-events:none;
  padding:1.6px;
  /* Радиусы в долях коробки, а не в пикселях. На кресте 40×40 пятна в
     70 px давали кольцо, а на широкой ссылке те же 70 px рассыпались на
     три отдельных светящихся куска поперёк окна. В долях пятно всегда
     накрывает узел целиком, какого бы он ни был размера. */
  background:
    radial-gradient(112% 112% at 72% 80%,rgba(255,148,120,.98) 0%,rgba(255,148,120,.34) 40%,rgba(255,148,120,0) 76%),
    radial-gradient(112% 112% at 28% 20%,rgba(140,205,255,.98) 0%,rgba(140,205,255,.34) 40%,rgba(140,205,255,0) 76%),
    radial-gradient(130% 130% at 50% 50%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.30) 46%,rgba(255,255,255,0) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude}
@supports not (mask-composite: exclude){
  /* Кольцо вырезать нечем — фокус держится белой обводкой и красным
     контуром бренда. Невидимым он не остаётся ни при каком раскладе. */
  .окно :focus-visible::after,.лупа :focus-visible::after{display:none}
  .окно :focus-visible,.лупа :focus-visible{outline:2px solid var(--текст);outline-offset:3px;
    box-shadow:0 0 0 3px #000,0 0 0 5px #EC0704}
}

/* ── УСЛУГИ, ПАКЕТЫ, ПРЕСЕТЫ, СЕРТИФИКАТЫ ──────────────────────
   Цена — та же строка, тот же кегль, никаких сносок: абонплата пишется
   рядом с разовой суммой словами. */
/* ПУСТОТА ВНИЗУ КАРТОЧКИ — ДЫРА, ПУСТОТА В ТЕЛЕ — ВОЗДУХ. Правило
   владельца 11.08.2026: «в блоке услуги внизу есть слово „подробности“,
   которое логично выравнивает вес карточки… а в блоке „Почему я“ на том же
   месте внизу ничего нет, и из-за этого карточка кажется пустой». Отсюда
   нижний якорь `.якорь-карточки` и растяжка колонки под него. */
.услуга,.пакет{position:relative;display:flex;flex-direction:column;
  gap:calc(var(--шаг)*1.5);padding:var(--поле-карточки);border:0;
  background:rgba(0,0,0,.30);border-radius:var(--радиус-карточки);height:100%}
/* Карточка услуги — кнопка: она открывает окно, значит доступна клавиатуре
   и диктору. Заводскую отделку кнопки снимаем, текст выравниваем влево. */
/* СНИМАЕТСЯ ОДНИМ ПРАВИЛОМ НА ВСЕ КАРТОЧКИ-ОРГАНЫ УПРАВЛЕНИЯ, а не
   поимённо: список поимённо и был причиной того, что карточка пакета,
   став кнопкой, поехала по центру и почернела. Здесь и `button`, и плашка
   с ролью кнопки — у второй заводской отделки нет, но правило общее, и
   расходиться им негде. */
button.услуга,button.пакет,.пакет[role="button"],.услуга[role="button"]{
  font:inherit;color:var(--текст);text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none}
button.услуга .услуга-имя,button.услуга .услуга-строка,
button.пакет .услуга-имя,button.пакет .услуга-строка{display:block}
.услуга-имя{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
/* Межстрочный 1,2 — классика для описаний в карточке. Владелец повторил
   это несколько раз: расстояние между строками не может быть больше самой
   строки, иначе абзац рассыпается и иерархия рушится. */
.услуга-строка{font-size:15px;line-height:1.2;color:var(--текст-тихо);margin:0}
.цена{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;margin:0;
  font-feature-settings:'tnum' 1}
.цена-строка{font-size:15px;line-height:1.5;color:var(--текст-тихо);margin:0}
/* Тон вернулся к общему тихому серому: ступень вверх подбиралась под
   ореол, а ореола больше нет. */
.услуга-пункты{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;
  font-size:14px;line-height:1.2;color:var(--текст-тихо)}
.метка{position:absolute;top:calc(var(--шаг)*2);right:calc(var(--шаг)*2);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--текст);margin:0}
.номиналы{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--жёлоб)}
@media (max-width:760px){ .номиналы{grid-template-columns:1fr} }
.номинал b{display:block;font-size:24px;font-weight:700;font-feature-settings:'tnum' 1}
.номинал span{font-size:14px;color:var(--текст-тихо)}
.строка-после{margin-top:calc(var(--шаг)*3)}
/* ── ХВОСТ РАЗДЕЛА. Два абзаца об условиях съёмки читаются одним
   массивом, а не двумя отдельными областями: внутри зазор меньше, чем
   снаружи. Тот же закон ступеней, что и у заголовка с подписью. */
.хвост-раздела{margin-bottom:calc(var(--шаг)*6)}
.хвост-раздела .строка-раздела{margin-bottom:calc(var(--шаг)*1.5)}
.хвост-раздела .строка-раздела:last-child{margin-bottom:0}
.якорь-раздела{margin-top:calc(var(--шаг)*3)}
.блок .ссылка-действие{margin-top:calc(var(--шаг)*2);align-self:flex-start}

/* ── ПОДВАЛ ПО ОБРАЗЦУ ДЕЙСТВУЮЩЕГО САЙТА. Строка ссылок капсом, под ней
   правовые ссылки, ниже «Сделано Grayking Studio» и реквизиты в три строки.
   Воздуха вдвое больше прежнего: страница обязана кончаться тишиной. */
.подвал{position:relative;z-index:2;overflow:hidden;
  padding:calc(var(--шаг)*16) var(--поля) 0;
  display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--шаг)*3);text-align:center}
/* ── ЗНАК ВНАВЫЛЕТ. Шире экрана, прижат к самому низу и обрезан им: буквы
   уходят за левый, правый и нижний край. Сверху не ровная линия, а
   растворение — маска гасит верх, а лёгкое размытие снимает с неё
   геометрическую прямоту. */
/* ЗНАК СТОИТ ПОД ТЕКСТОМ ПОДВАЛА, ВО ВСЮ ШИРИНУ ОКНА И В ПОЛНУЮ СИЛУ.
   Владелец: «поверх надписи нет никакого текста, эта надпись ниже текста
   шапки и ничем не затемнена», «надпись в подвале на всю ширину».
   Значит это не фон, а последний элемент подвала: обычный блок в потоке,
   никакой прозрачности и никакого притемнения.
   ОБРЕЗАН СНИЗУ. Видна верхняя часть букв, нижняя уходит за конец
   страницы: коробка сама режет знак по высоте, а отрицательное нижнее
   поле убирает лишнюю высоту документа. Сверху растворение — о нём он
   просил отдельно. */
.подвал-знак{display:block;width:100vw;max-width:none;height:auto;
  margin:calc(var(--шаг)*8) calc(50% - 50vw) 0;
  pointer-events:none;
  /* ВЕРХ ЗНАКА СХОДИТ НА НЕТ, А НЕ ОБРЫВАЕТСЯ. Владелец: «текст в подвале
     вверху — видны края, должно быть размыто немного больше, чтобы самого
     края видно не было, должен сходить на нет в фон». Переход был 26 % от
     высоты знака и на такой крупной надписи читался линией; стало 52 %, и
     ещё одна ступень в середине делает его не линейным, а затухающим. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 26%,#000 52%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 26%,#000 52%)}
/* Обрезка: коробка ниже знака, всё лишнее уходит за её край. */
.подвал-обрез{overflow:hidden;width:100vw;margin:0 calc(50% - 50vw);
  height:calc(100vw / 2.088 * 0.62)}
@media (max-width:760px){
  .подвал-знак{margin-top:calc(var(--шаг)*5)}
  /* Доля видимой части знака задаётся в паке правок 13.08.2026, ниже. */
}
.подвал-связи{display:flex;flex-wrap:wrap;justify-content:center;
  gap:calc(var(--шаг)*2) calc(var(--шаг)*5)}
.подвал-связи a{font-size:13px;font-weight:700;letter-spacing:.20em;
  text-transform:uppercase;color:var(--текст);text-decoration:none;
  transition:opacity .34s var(--мягко)}
.подвал-связи a:hover{opacity:.6}
.подвал-право{display:flex;flex-wrap:wrap;justify-content:center;
  gap:calc(var(--шаг)*1) calc(var(--шаг)*4)}
.подвал-право a{font-size:13px;color:var(--текст-тихо);text-decoration:none}
.подвал-право a:hover{color:var(--текст)}
.подвал-сделано{margin:calc(var(--шаг)*4) 0 0;font-size:13px;font-weight:700;
  letter-spacing:.20em;text-transform:uppercase;color:var(--текст)}
.подвал-реквизиты{display:flex;flex-direction:column;gap:2px}
.подвал-реквизиты span{font-size:12px;line-height:1.5;color:var(--текст-совсем-тихо)}
@media (max-width:760px){
  .подвал{padding-top:calc(var(--шаг)*10);gap:calc(var(--шаг)*2)}
  .подвал-связи{gap:calc(var(--шаг)*1.5) calc(var(--шаг)*3)}
}

.неразрывно{white-space:nowrap}
.только-телефон{display:none}
@media (max-width:760px){
  .только-телефон{display:block}
  .только-монитор{display:none}
}

/* ── ШАПКА НАД СОДЕРЖИМЫМ СТРАНИЦЫ: СТЕКЛО И НИЧЕГО СВЕРХУ ──────
   Здесь стояло притемнение задника под капсулой —
   `backdrop-filter: blur(12px) saturate(150%) brightness(.10)` в прокрутке
   и на внутренних страницах, — чтобы пункты меню читались над светлым
   кадром. Убрано целиком по прямому запрету владельца 11.08.2026: «Шапка
   и кнопки стеклянные. Это не меняется. Я запрещаю это менять».

   Довод не про вкус: `backdrop-filter` берёт ВСЁ, что нарисовано ниже, а
   ниже — панель стекла, которую рисует сцена. `brightness(.10)` гасит её
   в девять десятых, то есть стекло исчезает вместе с кромкой и дисперсией.
   Замер `шапка_замер.py` до правки (ретина ×2): под капсулой медиана
   яркости 0,004, насыщенность кромки 0,000, цветных пикселей 0,0 %.
   Стекло и `backdrop-filter` на одном узле несовместимы по построению —
   и выигрывает стекло.

   Читаемость пунктов над светлым кадром держит вычитание фона: общее
   правило `.шапка :is(a,button,span)` и `.кнопка,.капсула` в первом экране.
   Где вычитание слепо — пункт читается хуже, и это выбор владельца,
   сказанный дословно: «Тогда лучше просто оставь нечитабельный». */

@media (prefers-reduced-motion:reduce){
  .идёт .точка{animation:none;opacity:1}
  .форма-строкой input{transition:none}
}

/* Рамка фокуса трёхслойная: белое кольцо читается на чёрном, чёрная
   прослойка отделяет его от светлого кадра, красный контур снаружи держит
   бренд. Только по `:focus-visible`. */
:where(.блок,.подвал) :focus-visible{outline:2px solid var(--текст);
  outline-offset:3px;box-shadow:0 0 0 3px #000,0 0 0 5px #EC0704}

/* ── КЕГЛИ НА ТЕЛЕФОНЕ. Владелец: «очень маленький заголовок H1, выглядит
   как грязь; растягивай по максимуму». Заголовок берёт всю ширину между
   полями; число подобрано по самому длинному слову страниц («ЗАРАБАТЫВАТЬ»
   на «Дизайне», двенадцать знаков) — при большем оно вылезает за поля.
   H2 идёт следующей ступенью, иерархия сохранена. */
@media (max-width:760px){
  .экран--внутри h1{font-size:11.6vw;line-height:.98;letter-spacing:-.05em}
  .блок h2{font-size:10.2vw;line-height:1;letter-spacing:-.035em}
}


/* ═════════ ТЕЛЕФОН: ПАК ПРАВОК ВЛАДЕЛЬЦА 12.08.2026 ═════════
   Одиннадцать замечаний одним заходом. Здесь только те, что решаются
   стилем; кадр в окне, прокрутка под окном и лента отзывов — в скрипте.

   ЗАКОН ИЕРАРХИИ, КОТОРЫЙ ОН СФОРМУЛИРОВАЛ САМ И ДВАЖДЫ:
   «У тебя не может быть отступ от подзаголовка до карточки меньше, чем от
   заголовка до подзаголовка» и «отступ до следующего абзаца больше, чем
   отступ до предыдущей карточки — это ошибка, текст разваливается на
   несвязанные области, а должен выглядеть единым массивом из двух абзацев».
   Отсюда три ступени, и они считаются от `--шаг`, а не подбираются:
     · внутри одной мысли (заголовок и его подпись, абзац и абзац) — 1
     · от мысли к содержимому (подпись и карточки, абзац и кнопка) — 3,5
     · от блока к новой мысли (карточки и текстовый хвост) — 5
   Замер до правки на 390: заголовок → подпись 47 px, подпись → карточка
   40 px (перевёрнуто), абзац → абзац 32 при 24 от карточки (перевёрнуто). */
@media (max-width:760px){
  /* ── 1. ЗАГОЛОВОК И ЕГО ПОДПИСЬ — ОДНА МЫСЛЬ. */
  .блок h2{margin-bottom:calc(var(--шаг)*3.5)}
  .блок h2:has(+ .строка-раздела){margin-bottom:var(--шаг)}
  /* Подпись под заголовком отдаёт содержимому целую ступень, а соседнему
     абзацу — одну: два абзаца подряд обязаны читаться одним массивом. */
  .строка-раздела{margin-bottom:var(--шаг)}
  .блок h2 + .строка-раздела{margin-bottom:calc(var(--шаг)*3.5)}
  .строка-после{margin-top:calc(var(--шаг)*5)}
  /* Хвост раздела — единый массив: внутри него абзацы стоят теснее, чем
     он сам отстоит от заголовка сверху и от карточек снизу. Владелец:
     «у тебя опять внешние отступы меньше внутренних». */
  .хвост-раздела{margin-bottom:calc(var(--шаг)*4)}
  .хвост-раздела .строка-раздела{margin-bottom:var(--шаг)}
  .хвост-раздела .строка-раздела:last-child{margin-bottom:0}
  .якорь-раздела{margin-top:calc(var(--шаг)*3.5)}

  /* ── 2. МЕЖСТРОЧНЫЙ 1,2 — ЕГО ЧИСЛО, НЕ МОЁ.
     «Мы обсуждали с тобой межстрочные интервалы 1,2. На вид здесь больше».
     Так и было: 1,62 у текста «Обо мне», у подписей разделов и у строк в
     окне. На телефоне все они идут одним числом. */
  .био,.строка-раздела,.окно-строка,.ответ p,.регалия span{line-height:1.2}
  /* Имя карточки и строка под ним — та же пара, что заголовок и подпись:
     между ними ступень «одна мысль», а не общий зазор карточки. */
  .карта .имя{margin-bottom:calc(var(--шаг)*-1)}
  .био{margin-bottom:calc(var(--шаг)*1.5)}

  /* ── 3. КНОПКА НА САЙТЕ ОДНА, И ОТСТУПЫ У НЕЁ ОДНИ.
     «Я 300 раз просил сделать широкие отступы от текста в кнопке справа и
     слева и узкие сверху и снизу. Один принцип на все кнопки, стеклянные
     они или плоские, как в поп-апах». Прежде сплющена была только кнопка
     первого экрана (34 px), а все остальные — включая кнопки в окнах —
     оставались 48: воздух над словом 11,5 против 18,5. Теперь высота и
     поля объявлены один раз для всех `.кнопка`, где бы она ни лежала. */
  .кнопка{height:28px;border-radius:14px;padding:1px 30px 0}

  /* ── ПУНКТ ШАПКИ НА ТЕЛЕФОНЕ. Поля текучие: на 375 половины шапки
     сходятся впритык, и разводить их шире некуда. При 13 px по бокам
     краска стоит к вертикали как 2,1, при 17 на широком экране — 2,6.
     Правило стоит здесь, а не в правках первого экрана: стиль блоков
     дописывается последним, и только отсюда оно перебивает мониторную
     высоту 26 px. */
  /* Отступ первой строки равен разрядке, иначе он перекручивает: на
     телефоне разрядка .05em, а не .20em, и прежние два пикселя уводили
     краску вправо на 0,65 (замер: слева 16,5 против 15,2 справа). */
  .капсула nav a,.капсула .упр{text-indent:.05em;height:20px;border-radius:10px;
    padding-left:clamp(14.5px,3.9vw,18px);padding-right:clamp(14.5px,3.9vw,18px)}
  .капсула nav a::after,.капсула .упр::after{top:-10px;bottom:-10px}

  /* ── 4. ФОРМА: ПОЛЯ ВО ВСЮ ШИРИНУ, КНОПКА — КАК НА ПЕРВОМ ЭКРАНЕ.
     «Во всю ширину остаются без изменений поля ввода, а кнопка становится
     меньше, такая же, как в первом блоке». Значит ширину ей задаёт надпись,
     а не колонка сетки. */
  .согласие{margin-top:calc(var(--шаг)*2)}

  /* ── 5. ПОДВАЛ: ЗНАК ОБРЕЗАН МЕНЬШЕ.
     «В подвале слишком обрезана подпись Gray King, нужно чуть больше
     выдвинуть её вверх». Коробка показывала 58 % высоты знака, стало 76 %:
     буквы читаются целиком, нижняя засечка по-прежнему уходит за край. */
  .подвал-обрез{height:calc(100vw / 2.088 * 0.76)}

  /* ── 6. ОКНО ПРОЕКТА: ГАЛЕРЕЯ ПО ЦЕНТРУ И КРУПНЕЕ.
     «Крошечные фотографии почему-то слева, хотя справа куча места» — и это
     не вкус, а дефект: у карусели в окне стоит `align-self:start` от
     двухстолбцовой раскладки монитора, а на телефоне тело окна становится
     колонкой, и `start` по поперечной оси означает «шириной по содержимому».
     Замер на 430: карусель 190 px при 362 доступных.
     Вторая половина того же замечания — «сверху и снизу от фотографий
     огромные отступы»: коробка кадров держала постоянную высоту 56dvh, а
     кадр вписывался в неё целиком, и остаток выходил пустотой. Теперь
     высоту задаёт сам кадр. */
  .окно .карусель-окна{align-self:stretch;width:auto}
  .окно .кадры-окна{height:auto;min-height:0;overflow:hidden;
    padding:calc(var(--шаг)*1) 0}
  .окно:not(.узкое) .кадры-окна{height:auto}
  .окно.узкое .кадры-окна{height:auto}
  .окно .окно-кадр.виден{position:relative;inset:auto;margin:0 auto;
    max-width:92%;max-height:62dvh;cursor:zoom-in}
  .окно.узкое .окно-кадр{max-width:92%}
  .окно .окно-кадр.сосед-слева,.окно .окно-кадр.сосед-справа{
    max-width:42%;max-height:64%}
  .окно .окно-кадр.сосед-слева{transform:translateX(-78%) scale(.86)}
  .окно .окно-кадр.сосед-справа{transform:translateX(78%) scale(.86)}
  .окно-тело{gap:calc(var(--шаг)*2)}

  /* ── КАРТОЧКИ УСЛУГ НА ТЕЛЕФОНЕ ОДНОЙ ВЫСОТЫ. Его слово 13.08.2026:
     «в мобилке карточки услуг в дизайне разной высоты, много раз говорил
     об этом, СДЕЛАТЬ ОДИНАКОВЫМИ».
     Гибкий ряд равнять не умеет: в колонке `flex-basis` считается по
     высоте, и вместо равенства выходил один и тот же `min-height:228px` у
     всех — с дырой под коротким текстом. Здесь ряд становится сеткой в одну
     колонку с равными строками: высоту задаёт самая высокая карточка,
     остальные дотягиваются до неё, а нижний якорь превращает остаток в
     воздух под кнопкой — ровно так, как он это правило и сформулировал. */
  .ряд-услуг{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;
    gap:var(--жёлоб)}
  .ряд-услуг .услуга{flex:none;height:100%;min-height:0}

  /* ── КНОПКА ФОРМЫ ПО ЦЕНТРУ. Его правка: «в форме обратной связи кнопка
     „Отправить“ по центру, а не слева». Поля ввода остаются во всю ширину. */
  .форма-строкой .кнопка{width:auto;justify-self:center}
  .окно-тело .якорь-карточки{padding-top:calc(var(--шаг)*1)}

  /* ── 7. «ОБО МНЕ»: СНАЧАЛА КАДР С ЗАГОЛОВКОМ, ПОТОМ ЦИФРЫ, ПОТОМ ТЕКСТ.
     «Непонятно, откуда вообще взялась фотка после формы обратной связи, и
     только под этим фото начинается раздел „Обо мне“. Это нелогично».
     Заголовок уезжает НА кадр, в его верхний край, — там маска уводит
     снимок в черноту, и белая надпись читается без всякой подложки.
     «Поменять местами карточки и описание» — порядком в колонке.
     Кадр сдвинут вправо: он взят крупнее (коробка выше, чем кадр по
     ширине), и окно обрезки уведено к левому краю снимка — плечо и колено
     уходят за края экрана, слева открывается тёмное поле под заголовок. */
  /* Коробка кадра шире экрана — без обрезки страница поехала бы вбок. */
  .обо-мне{padding-top:calc(var(--шаг)*9);overflow:hidden}
  /* Отсчёт заголовка идёт от самого блока, а не от колонки содержимого:
     иначе `top:0` попадает под кадр, а не на него. Колонке при этом
     ничего не нужно — на телефоне кадр стоит в потоке выше неё и не
     перекрывается, значит и слой ей не требуется. */
  .обо-мне .содержимое{position:static;display:flex;flex-direction:column;
    gap:calc(var(--шаг)*4)}
  .обо-мне .обо-текст > h2{position:absolute;top:calc(var(--шаг)*6);
    left:var(--поля);right:var(--поля);z-index:3;margin:0}
  .обо-мне .регалии{order:1;margin-top:0}
  .обо-мне .обо-текст{order:2}
  /* КАДР ВЗЯТ КРУПНЕЕ И УВЕДЁН ВПРАВО. Коробка шире экрана на 40vw, а
     левым краем стоит по полю страницы: снимок целиком едет вправо, плечо
     и правое колено выходят за правый край, слева остаётся стена. Тёмным
     это поле делает не плёнка поверх кадра (§18 её запрещает), а маска:
     единственная радиальная, смещённая вправо, — она гасит левый край,
     верх и низ разом, и под ним видна чернота страницы. Одним слоем, без
     `mask-composite`: у двух его написаний разные ключевые слова, и при
     несовпадении браузер молча отбрасывает маску целиком (грабля № 1). */
  /* РАСТВОРЕНИЕ НА ТЕЛЕФОНЕ ДЕРЖИТ ТОЛЬКО МАСКА, И ОНА ОБЯЗАНА ДОХОДИТЬ
     ДО НУЛЯ ВНУТРИ КОРОБКИ. Вжженная в файл альфа здесь не работает вовсе:
     файл 875×1600 (отношение 0,547), а коробка на 390 выходит 546×608
     (0,899) — `object-fit:cover` срезает ровно те края, в которые
     растворение и вжигали (грабля № 2). Владелец увидел это сразу: «видно
     край фото, обрезается некрасиво, должно сходить на нет».
     Поэтому переходы стали длиннее и начинаются раньше: непрозрачное ядро
     кончается на 14 %, а ноль наступает на 74 % — то есть последняя
     четверть коробки со всех сторон пуста, и кромке взяться неоткуда. */
  .фото-вылет{height:72vh;
    width:calc(100% + var(--поля)*2 + 40vw);
    margin-left:calc(var(--поля)*-1);
    /* ── ТОТ ЖЕ ЭЛЛИПС, ЧТО ВЖЖЕН В ФАЙЛ, ТОЛЬКО СЧИТАННЫЙ БРАУЗЕРОМ.
       Вжженная альфа здесь не работает: файл 875×1600 (отношение 0,547), а
       коробка на 390 выходит 546×608 (0,899) — `object-fit:cover` срезает
       ровно те края, в которые растворение и вжигали (грабля № 2).
       Закон повторён один в один: непрозрачное ядро, дальше линейное
       падение до нуля НА САМОМ ЭЛЛИПСЕ. Радиусы подобраны так, что эллипс
       целиком внутри коробки слева, сверху и снизу — 60 % ширины при
       центре на 62 % и 50 % высоты при центре на 50 %. Справа он выходит
       за экран, и там кадр срезан рамкой: это и есть «срезанный по правой
       части эллипс», о котором он просил. Прямых участков не осталось ни
       одного — форму задаёт одна функция, а не пересечение полос. */
    /* Ступени внутри градиента повторяют ту же кубическую кривую, что
       вжжена в файл: линейный спад читается кромкой в двух местах — там,
       где он начинается, и там, где кончается. */
    -webkit-mask-image:radial-gradient(60% 50% at 62% 50%,#000 22%,rgba(0,0,0,.86) 45%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.10) 86%,transparent 100%);
    mask-image:radial-gradient(60% 50% at 62% 50%,#000 22%,rgba(0,0,0,.86) 45%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.10) 86%,transparent 100%)}
  .фото-вылет img{object-position:50% 20%}
}


/* ═══════════════ СВЕТЛАЯ ВЕРСИЯ САЙТА ═══════════════
   Кнопка солнца в шапке стояла с первого дня и не делала ничего. Владелец
   12.08.2026: «Нигде ни на мобилке, ни на десктопе нет светлой версии
   сайта, для которой мы сделали кнопку в шапке».

   ДВА ЕГО ЧИСЛА, И ОБА НЕ КРАЙНИЕ. «Фон становится не абсолютно белым, а
   чуть-чуть, там, несколько процентов серого, чтобы он был не критически
   контрастно. А чёрный, который будешь использовать для чёрных элементов
   инвертированных, должен быть не абсолютно чёрным, а чуть-чуть
   сероватым». Отсюда лист #F0EEEB (шесть процентов серого, тёплый) и
   тушь #17171A вместо чистого чёрного.

   ФОН РИСУЕТ СЦЕНА, А НЕ CSS: у неё для этого есть `uTheme`, и подложка,
   свет, стекло и кадры пересчитываются одним числом. Здесь только то, что
   лежит поверх холста, — текст, подложки карточек, кромки и знаки.

   ВЫЧИТАНИЕ ФОНА СНИМАЕТСЯ ЦЕЛИКОМ. `difference` держит читаемость белого
   текста на светлой кромке круга: над чернотой буква светлая, над светом —
   тёмная. В светлой теме это работает наоборот и в минус: тёмная буква над
   светлым листом вычитается в светлую и пропадает. Читаемость там держит
   сам цвет, а не наложение. Два холста из-под правила выведены — на них
   вся оптика стекла. */
:root[data-тема="light"]{
  /* Лист на десять процентов темнее прежнего — его правка 13.08.2026.
     То же число стоит в подложке сцены и в круге: три места, одно число. */
  --фон:#D8D6D3;
  --текст:#17171A;
  --текст-тихо:#56534F;
  --текст-совсем-тихо:#807C78;
}
:root[data-тема="light"] body :not(#стекло):not(#сцена){mix-blend-mode:normal}
/* Подложки карточек, окон и полей переворачиваются из черноты в лист.
   Прозрачность прежняя: сквозь них по-прежнему видно круг и кадры. */
/* ── КАРТОЧКА В СВЕТЛОЙ ТЕМЕ — ТО ЖЕ СТЕКЛО, ТОЛЬКО НА ЛИСТЕ.
   Владелец: «поправить карточки и кнопки, сейчас это просто белые плашки,
   нет никаких эффектов по аналогии с тёмной темой». Так и было: одна
   заливка без единой кромки.
   Идиома взята из тёмной темы целиком и перевёрнута по знаку: там свет
   приходит сверху и кромка светлая, здесь свет тот же, а тень снизу —
   тёмная. Четыре слоя, как и там: блик по верхней кромке, тень по нижней,
   волосяная обводка и мягкая тень под карточкой. Плюс размытие подложки:
   сквозь карточку по-прежнему проезжает круг. */
/* ЗАЛИВКА ЛЁГКАЯ, И ЭТО НЕ ВКУС, А УСЛОВИЕ РАБОТЫ СТЕКЛА. Владелец:
   «карточки почему-то стали супер матовыми и практически непрозрачными,
   нужно чуть-чуть добавить прозрачности». Плотная заливка не только
   выглядит матовой — она закрывает панель, которую сцена рисует ПОД
   содержимым, вместе с её кромкой и переливом. Сквозь лёгкую видно и круг,
   и оптику. */
:root[data-тема="light"] :is(.карта,.услуга,.пакет,.регалия,.сертификат,.отзыв-карта){
  background:linear-gradient(150deg,rgba(255,255,255,.44),rgba(255,255,255,.16) 52%,rgba(255,255,255,.36)),rgba(255,255,255,.08);
  backdrop-filter:blur(11px) saturate(140%);
  -webkit-backdrop-filter:blur(11px) saturate(140%);
  box-shadow:
    inset 3px 4px 12px -7px rgba(255,255,255,1),
    inset -3px -4px 12px -7px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 18px 40px -26px rgba(0,0,0,.34)}
/* Кнопка — та же порода, только плотнее: она обязана читаться нажимаемой. */
:root[data-тема="light"] .кнопка{
  background:linear-gradient(150deg,rgba(255,255,255,.56),rgba(255,255,255,.24) 52%,rgba(255,255,255,.48)),rgba(255,255,255,.14);
  box-shadow:
    inset 3px 4px 10px -7px rgba(255,255,255,1),
    inset -3px -4px 10px -7px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(0,0,0,.09),
    0 10px 22px -14px rgba(0,0,0,.38)}
:root[data-тема="light"] .кнопка:hover{
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.36) 52%,rgba(255,255,255,.62)),rgba(255,255,255,.22);
  box-shadow:
    inset 3px 4px 12px -7px rgba(255,255,255,1),
    inset -3px -4px 12px -7px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 16px 30px -16px rgba(0,0,0,.42)}
/* ── МЯГКАЯ ТЕНЬ ПОД НЕПРОЗРАЧНЫМИ КАРТОЧКАМИ ГАЛЕРЕИ И ПРИНТОВ.
   Его правка дословно: «в светлой версии добавить очень мягкие пушистые
   тени под карточками в галерее и принтах, только в них, прозрачные
   карточки не трогаем». Тень висит на КОРОБКЕ кадра, а не на самом кадре:
   `filter` на снимке автора запрещён (§18), а `box-shadow` его не касается
   вовсе. Два слоя — близкий и дальний: один даёт контакт с листом, второй
   пушистость. */
/* ── ЗНАК КНОПКИ ТЕМЫ ПОКАЗЫВАЕТ, КУДА НАЖАТИЕ УВЕДЁТ, А НЕ ГДЕ ТЫ СЕЙЧАС.
   Владелец: «в шапке в тёмной теме есть иконка солнышка, которая включает
   светлую тему. В светлой теме на этом месте должна быть иконка полумесяца,
   которая переключит тему снова на тёмную. Сейчас и там и там солнышко».
   Оба знака лежат в разметке, показывает нужный сам атрибут темы —
   переключение не ждёт скрипта и не мигает при загрузке. */
.значок .знак-темы{display:none;line-height:0}
.значок .знак-солнце{display:block}
html[data-тема="light"] .значок .знак-солнце{display:none}
html[data-тема="light"] .значок .знак-луна{display:block}

/* ── ОБВОДКА, ЧУВСТВИТЕЛЬНАЯ К КУРСОРУ, В СВЕТЛОЙ ТЕМЕ ────────────
   Владелец: «обводку карточек и кнопок, чувствительную к курсору, в
   светлой теме сделать сильно ярче, используй не разбавленные, чистые,
   100% насыщенные цвета нашей палитры».

   ПОЧЕМУ ЕЁ НЕ МОЖЕТ НАРИСОВАТЬ СЦЕНА. Холст стекла отдаёт наружу
   `max(col - scene, 0)` и ложится сложением. На чёрной странице прибавка
   цвета и есть цвет. На листе 0,85 прибавка алого (1,00; 0,08; 0,12)
   поднимает зелёный и синий до единицы и выбеливается в розовый: чтобы
   краснить светлое, надо ВЫЧИТАТЬ зелёное и синее, а сложение этого не
   умеет. Поэтому в светлой теме кольцо рисует стиль — там доступно любое
   наложение, и цвет остаётся тем, что задан.

   Цвета взяты из спектра сцены без разбавления: алый, скарлет, маджента,
   фиолет и холодный синий — те же пять, что раскладывает шейдер.
   Кольцо вырезано маской: заливка минус её же content-box. */
html[data-тема="light"] :is(.стекло,.карточка){position:relative}
html[data-тема="light"] :is(.стекло,.карточка)::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:2.4px;z-index:3;
  /* РАДИУСЫ В ДОЛЯХ КОРОБКИ, А НЕ В ПИКСЕЛЯХ — тот же урок, что у кольца
     фокуса в окне: сто тридцать пикселей накрывают крест 40×40 целиком, а
     на карточке 570×330 рассыпаются на три тусклых пятна у самого курсора.
     В долях пятно всегда накрывает узел, какого бы он ни был размера.
     Цвета — чистые, из спектра сцены, без разбавления белым: скарлет,
     синий и маджента на полной непрозрачности в середине пятна. */
  background:
    radial-gradient(96% 220% at calc(var(--кx,50%) + 6%) calc(var(--кy,50%) + 14%),
      rgba(255,92,5,1) 0%, rgba(255,92,5,.72) 34%, rgba(255,92,5,0) 72%),
    radial-gradient(96% 220% at calc(var(--кx,50%) - 6%) calc(var(--кy,50%) - 14%),
      rgba(46,86,255,1) 0%, rgba(46,86,255,.72) 34%, rgba(46,86,255,0) 72%),
    radial-gradient(130% 260% at var(--кx,50%) var(--кy,50%),
      rgba(255,8,115,1) 0%, rgba(255,8,115,.62) 40%, rgba(255,8,115,0) 78%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity 420ms var(--мягко)}
html[data-тема="light"] :is(.стекло,.карточка).светится::after{opacity:1}
@supports not (mask-composite: exclude){
  /* Кольцо вырезать нечем — заливка легла бы на всю карточку. Тогда
     обводки просто нет: это честнее, чем цветное пятно поверх текста. */
  html[data-тема="light"] :is(.стекло,.карточка)::after{display:none}
}

/* ── КАДРЫ МЕНЯЮТСЯ ВМЕСТЕ С ТЕМОЙ ──────────────────────────────
   Оба — его правки 13.08.2026 и оба про то, что кадр обязан подходить фону:
   «в тёмной версии заменить моё фото в „Обо мне“ на чёрно-белое» и
   «заменить фото Феликса на фоне в светлой теме на подходящее фото
   Гордыни». Подменяет их `content`, как и знаки: разметка одна, файлов два.
   Ни один кадр не тонируется — оба сняты такими, какие есть (§18). */
.фото-вылет img{content:url(медиа/моё/портрет-чб.png)}
html[data-тема="light"] .фото-вылет img{content:url(медиа/моё/портрет.png)}
html[data-тема="light"] .кадр-полосы img{content:url(медиа/моё/гордыня.png)}

:root[data-тема="light"] .проект-кадр{
  box-shadow:0 6px 14px -8px rgba(0,0,0,.28),0 26px 50px -28px rgba(0,0,0,.34)}
:root[data-тема="light"] .окно{
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 50%,rgba(255,255,255,.58)),rgba(240,238,235,.72);
  box-shadow:
    inset 3px 4px 12px -7px rgba(255,255,255,.95),
    inset -3px -4px 12px -7px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 24px 60px -30px rgba(0,0,0,.55)}
:root[data-тема="light"] .окно::backdrop{background:rgba(240,238,235,.62)}
:root[data-тема="light"] .окно-шапка{background:rgba(240,238,235,.78);
  border-bottom:1px solid rgba(0,0,0,.10)}
:root[data-тема="light"] .лупа::backdrop{background:rgba(240,238,235,.94)}
:root[data-тема="light"] .лупа-крест{background:rgba(255,255,255,.6)}
:root[data-тема="light"] .таблетка{border-color:rgba(0,0,0,.16)}
:root[data-тема="light"] .форма-строкой input{border-color:rgba(0,0,0,.20)}
:root[data-тема="light"] .форма-строкой input:hover{border-color:rgba(0,0,0,.40)}
:root[data-тема="light"] .капсула nav a[aria-current]{
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 50%,rgba(255,255,255,.42)),rgba(255,255,255,.34);
  box-shadow:
    inset 3px 4px 10px -7px rgba(255,255,255,1),
    inset -3px -4px 10px -7px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(0,0,0,.10)}
:root[data-тема="light"] :is(.капсула nav a:hover,.капсула .упр:hover,.значок:hover){
  background:rgba(0,0,0,.06)}
:root[data-тема="light"] .черта{background:rgba(0,0,0,.16)}
/* ── В СВЕТЛОЙ ТЕМЕ СТЕКЛО РИСУЕТ CSS, А НЕ ХОЛСТ. ЭТО НЕ ЛЕНЬ, А АРИФМЕТИКА.
   Верхний холст `#стекло` несёт не стекло, а РАЗНИЦУ между стеклом и фоном
   и ложится сложением (`plus-lighter`). Сложение умеет только прибавлять
   свет. На чёрной странице этого достаточно: стекло там светлее фона. На
   листе всё наоборот — стекло его притемняет и преломляет, то есть разница
   отрицательна, а отрицательного слагаемого у сложения не бывает. Кнопка
   выходила плоской надписью без пилюли, что и видно на снимке.
   Поэтому в светлой теме холст разницы снимается вовсе, а пилюлю даёт то,
   что умеет темнить, — подложка и её `backdrop-filter`. Числа те же, что у
   запасного вида без видеочипа: одна идиома, а не вторая. */
/* ХОЛСТ РАЗНИЦЫ ОСТАЁТСЯ И В СВЕТЛОЙ ТЕМЕ. Сначала я его здесь погасил — и
   вместе с телом стекла выключил перелив по контуру, который владелец
   отдельно попросил вернуть. Тело действительно не рисуется: наружу уходит
   `max(col - scene, 0)`, а стекло лист ПРИТЕМНЯЕТ, и разница отрицательна.
   Но кромка, спектр и нить — слагаемые положительные, они проходят.
   Материал даёт CSS, оптику — холст. */
html[data-тема="light"] .стекло{
  background:linear-gradient(150deg,rgba(255,255,255,.46),rgba(255,255,255,.18) 50%,rgba(255,255,255,.40)),rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 6px 18px -12px rgba(0,0,0,.35)}
/* Материал под пилюлей в светлой теме не притемняет, а высветляет: то же
   свойство толстого стекла, только знак другой. */
:root[data-тема="light"] .стекло::before{
  backdrop-filter:blur(15px) saturate(150%) brightness(1.28);
  -webkit-backdrop-filter:blur(15px) saturate(150%) brightness(1.28)}
/* Рамка фокуса: белое кольцо на листе не видно, кольцо становится тушью. */
:root[data-тема="light"] :where(.блок,.подвал) :focus-visible{
  outline-color:var(--текст);box-shadow:0 0 0 3px #F0EEEB,0 0 0 5px #EC0704}
/* ЗНАКИ ПРИВЕДЕНЫ К БЕЛОМУ В САМИХ ФАЙЛАХ, и на листе белое пропадает.
   ВЫВОРОТА ЗДЕСЬ НЕТ И БЫТЬ НЕ МОЖЕТ — решение владельца записано в
   `Как_это_работает.md` дословно: «фотографии и логотипы не тонируются
   ничем: ни фильтром, ни наложением, ни инверсией». По той же причине
   знаки когда-то и красили в файлах, а не `filter`ом.
   Значит нужен ВТОРОЙ КОМПЛЕКТ ФАЙЛОВ, и он собирается сборкой
   (`перекрасить_в_тушь`). Подменяет их `content` — свойство меняет
   картинку у самого узла, разметку трогать не нужно.
   Корона для светлой темы уже есть готовая: `корона.png` — исходный чёрный
   файл, из которого делалась белая. МТС остаётся цветным на любом фоне. */
html[data-тема="light"] .капсула .знак img{content:url(медиа/знак/корона.png)}
html[data-тема="light"] .подвал-знак{content:url(медиа/знак/grayking-подвал.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="Forbes"]{content:url(медиа/лого/Forbes.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="Yandex"]{content:url(медиа/лого/Yandex.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="MTS"]{content:url(медиа/лого/MTS.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="Avito"]{content:url(медиа/лого/Avito.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="WISEADVICE"]{content:url(медиа/лого/WISEADVICE.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="BIONIKA"]{content:url(медиа/лого/BIONIKA.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="DION"]{content:url(медиа/лого/DION.тёмный.svg)}
html[data-тема="light"] .лента img[data-знак="Sincura"]{content:url(медиа/лого/Sincura.тёмный.svg)}