/* ─────────────────────────────────────────────────────────────
   Вариант 2 первого экрана: текст слева, вертикальный ролик справа.

   Зачем отдельный файл, а не правки в site.css: принятая страница
   не должна зависеть от эксперимента. Этот файл подключает только
   variant-2.html; удалить его — значит откатить вариант целиком.

   Ролик снят вертикально, 9:16, рамка держит другую пропорцию.
   Кадрирование делаем ffmpeg'ом заранее, а не рамкой (Р-100):
   отданные object-fit пиксели всё равно кодируются и качаются,
   просто их никто не видит. Меняете пропорцию рамки — пересобираете
   и файл, одной строки aspect-ratio уже недостаточно.
   ───────────────────────────────────────────────────────────── */

/* Пропорция кадра видео — одна на весь сайт (решение владельца
   от 28.08.2026: «все ролики делаем по 4/5, такой же стандарт,
   как и первый разворот»). Меняется здесь, в одном месте. */
:root{--frame:4/5}


/* Гасим наследство варианта 1: там первый экран — это flex-контейнер
   с плёнкой поверх кадра (.hero::after). Здесь кадр стоит отдельной
   колонкой, плёнка не нужна и только притушивала бы текст. */
.hero--split{display:block;position:relative;overflow:hidden;
  min-height:0;padding:clamp(28px,4vh,56px) 0 clamp(34px,5vh,64px)}
.hero--split::after{display:none}
.hero--split .crumbs ol{justify-content:flex-start;padding-left:0}
.hero--split .hero-split-grid{display:grid;gap:clamp(26px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}

/* Текстовая колонка выключена влево — в отличие от варианта 1,
   где всё стоит по центру поверх кадра. */
.hero--split .hero-copy{text-align:left}
.hero--split .hero-copy h1{max-width:none;margin-inline:0;
  font-size:clamp(36px,4.2vw,60px);line-height:1.04;margin-bottom:18px;
  /* Переносы в заголовке заданы вручную, тегами <br>. Раньше строку ломал
     max-width в ch, а ch зависит от гарнитуры: на маке выходило три строки,
     на машине без системного шрифта — четыре, и «выглядит» уезжало вниз.
     Ручной перенос держит рисунок заголовка одинаковым везде. */}
.hero--split .hero-copy .kicker{margin-bottom:14px}
.hero--split .hero-copy .proof-line{margin:0 0 20px;max-width:46ch;font-size:15.5px;color:#cbc2b8}
.hero--split .hero-copy .price-from{justify-content:flex-start;margin-bottom:18px}
.hero--split .hero-copy .cta{justify-content:flex-start}

/* Кадр. Пропорция 4:5 — «более квадратный», чем исходные 9:16:
   так ролик не спорит с текстом по высоте и не растягивает экран. */
.media-frame{position:relative;aspect-ratio:var(--frame);border-radius:18px;overflow:hidden;
  background:#151010;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover;display:block}
.media-frame video{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.media-frame video.is-ready{opacity:1}
/* Лёгкая виньетка снизу: кадр смыкается с тёмным фоном страницы
   и не выглядит наклейкой. */
.media-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,9,8,.42),rgba(12,9,8,0) 38%)}

/* Квадрат везде: и в широкой колонке первого экрана, и в узких
   колонках по странице. Разнобой пропорций читается как небрежность
   сильнее, чем «марка» узкого кадра, из-за которой сначала было 4:5. */
.split .media-frame{aspect-ratio:var(--frame)}
/* Скругление кадра: почему одного overflow:hidden не хватило.

   Видео — отдельный слой, который браузер рисует на видеокарте, и обрезка
   родителя ему не указ: углы у ролика оставались прямыми, хотя у рамки
   стоял border-radius. Постер при этом скруглялся, поэтому до запуска
   ролика всё выглядело правильно, а после — нет.

   Лечится тем, что радиус ставится самому видео, а не только рамке.
   Волосок по краю вынесен на ::after: inset-тень рамки закрашивалась
   тем же видео сверху. Первый экран не трогаем, он заморожен (Р-117). */
.media-frame img,.media-frame video{border-radius:inherit}
.media-frame::after{border-radius:inherit}
.split .media-frame::after{box-shadow:inset 0 0 0 1px rgba(246,239,230,.09)}

/* ─── Тест Р-101: кадр в треть ширины, пропорция 3:4 ─────────────
   Гипотеза владельца: узкий вытянутый кадр держит первый экран
   лучше квадрата в половину. Побочный выигрыш считается заранее:
   рамка 372 css-px — это 744 настоящих пикселя на Retina, а исходник
   даёт 720. Растяжения почти нет, тогда как в половину оно 1,55×.
   Живёт отдельным классом, чтобы снять вариант одной правкой. */
.hero--split.hero--third .hero-split-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.hero--third .media-frame{aspect-ratio:3/4}
/* Проба 28.08: кадр 4:5 в ту же половину ширины. Между квадратом
   и вертикалью: 558 × 698 css против 558 × 558. Исходник снят владельцем
   сразу в 4:5, кадрировать нечего. */
.hero--45 .media-frame{aspect-ratio:var(--frame)}

/* Кадр не занимает половину колонки целиком: он вписан в неё с полями
   (решение владельца от 28.08 — «уменьши сам прямоугольник видео»).
   Колонка остаётся половиной, меняется только размер кадра внутри неё,
   поэтому сетка и выравнивание по тегу не едут. */
.hero--split .hero-media-col{display:flex;justify-content:center}
.hero--split .hero-media-col .media-frame{width:85%}

/* Кнопки опущены ниже: между ценой и кнопками появился воздух,
   строка кнопок перестала липнуть к подписи про типоразмеры. */
.hero--split .hero-copy .cta{margin-top:clamp(20px,2.6vw,40px)}

/* Треть под кадр — значит две трети под текст. Заголовок в 15ch
   оставлял посреди экрана дыру: колонка широкая, а строка короткая. */
.hero--split.hero--third .hero-copy h1{max-width:19ch;font-size:clamp(36px,4.6vw,64px)}
.hero--split.hero--third .hero-copy .proof-line{max-width:58ch}

@media(max-width:900px){
  /* В варианте 1 крошки на телефоне лежат поверх кадра — там для них
     есть тёмная зона. Здесь кадр отдельный, крошки возвращаем в поток,
     иначе они наезжают на видео. */
  .hero--split .crumbs{position:static;margin-bottom:14px}
  .hero--split .crumbs ol{padding:0}
  .hero--split .hero-split-grid{grid-template-columns:1fr;gap:26px}
  /* Порядок на телефоне (правка 14.09). Раньше первым шёл кадр,
     и заголовок с ценой уезжали за нижний край первого экрана:
     человек видел видео и не видел, что ему продают и почём.
     Теперь колонка текста «растворяется» (display:contents),
     и её части раскладываются вперемешку с кадром:
     подводка и заголовок → кадр → цена → кнопки. */
  .hero--split .hero-copy{display:contents}
  .hero--split .hero-copy .kicker{order:1}
  .hero--split .hero-copy h1{order:2}
  .hero--split .hero-copy .proof-line{order:3}
  .hero--split .hero-media-col{order:4}
  .hero--split .hero-copy .price-from{order:5}
  .hero--split .hero-copy .hero-note{order:5}
  .hero--split .hero-copy .cta{order:6}
  .media-frame{aspect-ratio:var(--frame)}
  /* На телефоне треть превратилась бы в марку почтовую: одна колонка,
     и кадр возвращается к квадрату вместе со всеми. */
  .hero--split.hero--third .hero-split-grid{grid-template-columns:1fr}
  .hero--third .media-frame{aspect-ratio:var(--frame)}
  .hero--45 .media-frame{aspect-ratio:var(--frame)}
  .hero--split .hero-media-col .media-frame{width:100%}
}
@media(prefers-reduced-motion:reduce){.media-frame video{display:none}}

/* ─── Блок роликов по теме: крупный + два дополняющих ────────────
   Формат: под каждой темой один главный ролик и, где есть чем,
   два поменьше. Все оживают при наведении, по клику включается
   обычный плеер со звуком.

   Пропорция 1:1 у всех трёх — вертикальные ролики с телефона
   и горизонтальные с камеры встают в одну сетку и не ломают ритм.  */
.media-trio{display:grid;gap:14px}
.media-trio .trio-main{grid-column:1 / -1}
.media-trio .trio-rest{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.media-trio figcaption{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.4}

.ivp--tile .ivp-cover{border-radius:14px;overflow:hidden}
.ivp--tile .ivp-cover img{aspect-ratio:var(--frame);object-fit:cover;width:100%;display:block}
.ivp--tile .ivp-video{aspect-ratio:var(--frame);object-fit:cover;border-radius:14px}
/* Превью при наведении убрано (решение владельца 27.08): плитка обещала
   воспроизведение, а клик давал другое — со звуком и с начала. Осталась
   только лёгкая подсказка, что плитка кликабельна. */
.ivp--tile{transition:transform .35s ease}
.ivp--tile:hover{transform:translateY(-3px)}


@media(max-width:620px){
  .media-trio .trio-rest{grid-template-columns:1fr}
}

/* Зеркальный разворот: кадр слева, текст справа.
   Колонки чуть неравные — кадру дано меньше, чтобы текст
   не сжимался в узкий столбик. */
/* Ровно половина на половину и выравнивание по верху: кадр начинается
   на одной линии с тегом секции, а не проваливается к середине текста.
   Решение владельца от 27.08 — базовое для всех блоков с видео. */
.split.media-left{grid-template-columns:1fr 1fr;align-items:start}
.split.media-left .media-frame{aspect-ratio:var(--frame)}
@media(max-width:940px){
  .split.media-left{grid-template-columns:1fr}
  /* На телефоне колонка одна, но кадр остаётся квадратным (решение
     владельца от 28.08: квадрат для всех роликов). Прежние 16:9
     резали вертикальный исходник до трети кадра — от сцены оставалась
     полоса посередине. */
  .split.media-left .media-frame{aspect-ratio:var(--frame)}
}

/* ─── Два типа медиа в блоке ─────────────────────────────────────

   Тип 1 — короткая петля. До 11 секунд, без звука, запускается сама,
   управления нет. Это атмосфера: линия огня, вечер, семья у камина.
   Класс .media-frame. Расшифровка не нужна — говорить там нечему.

   Тип 2 — длинный ролик со звуком и субтитрами. Замер влажности,
   отзыв, обзор. Стоит постером, оживает при наведении, по клику
   идёт со звуком. Под ним обязательна расшифровка: ИИ-поисковики
   видео не смотрят, а текст читают.
   Класс .media-doc, внутри .ivp--tile и <details class="transcript">.
   ───────────────────────────────────────────────────────────────── */
.media-doc figcaption{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.4}
.media-doc .transcript{margin-top:10px}
.media-trio .transcript{margin-top:10px}
.media-trio .transcript summary{font-size:13px}

/* Зеркало media-left: текст слева, кадр справа — в обычной секции,
   а не только на первом экране. */
.split.media-right{grid-template-columns:1fr 1fr;align-items:start}
.split.media-right .media-frame{aspect-ratio:var(--frame)}
@media(max-width:940px){
  .split.media-right{grid-template-columns:1fr}
  /* На телефоне колонка одна, но кадр остаётся квадратным (решение
     владельца от 28.08: квадрат для всех роликов). Прежние 16:9
     резали вертикальный исходник до трети кадра — от сцены оставалась
     полоса посередине. */
  .split.media-right .media-frame{aspect-ratio:var(--frame)}
}

/* Четыре чувства в белой секции: огонь, звук, аромат, влага. */
.four-sense{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,38px)}
.four-sense h3{font-size:19px;margin:0 0 10px}
.four-sense p{margin:0 0 10px}
.four-sense .small{margin-bottom:0}
@media(max-width:940px){.four-sense{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.four-sense{grid-template-columns:1fr}}

/* Ритуал в белой секции: четыре строки без маркеров, каждая — отдельная мысль. */
.ritual{list-style:none;padding:0;margin:0 0 16px}
.ritual li{padding:7px 0 7px 16px;border-left:2px solid var(--amber);
  margin-bottom:6px;font-size:16.5px}
/* В узкой колонке цифры ставим друг под друга: базовый .three делит
   на три столбца, и в половине ширины они схлопываются в лапшу. */
.three.three--stack{grid-template-columns:1fr;gap:22px}

/* Текст в четырёх блоках мельче: колонка узкая, крупный кегль
   рвал строки на два-три слова и блок выглядел рыхлым. */
.four-sense p{font-size:15px;line-height:1.5}
.four-sense h3{font-size:17.5px;margin-bottom:8px}
.four-sense .warm{font-size:15.5px;margin-bottom:9px}
.four-sense .small{font-size:13px;line-height:1.45}

/* Финальная строка секции — как «Вечер начинается» на полосе видео:
   крупно, засечным курсивом, во всю ширину и по центру. */
.finale{font-size:clamp(25px,3.2vw,40px);line-height:1.24;
  max-width:24ch;margin:clamp(30px,4vw,54px) auto 0;text-align:center}


/* ─── Живая проба высоты пламени (Р-122) ─────────────────────────
   Единственное место на странице, где посетитель что-то делает
   руками. Кадр горизонтальный — исходники сняты 2688 × 1512,
   линия огня в них длинная, и в квадрат её загонять незачем. */
.flame-demo{margin-top:clamp(24px,3vw,40px)}
.flame-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#151010;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.flame-stage img,.flame-stage video{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit}
.flame-stage video{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.flame-stage video.is-ready{opacity:1}
.flame-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(246,239,230,.09)}

/* Переключатель. Раньше стоял под кадром и читался как подпись:
   серый текст под большой картинкой глаз пропускает. Теперь это
   элемент управления и лежит там, где управлению место, — на самом
   кадре, снизу по центру, на затемнённой подложке. Неактивные кнопки
   набраны цветом текста, а не приглушённым, у активной янтарный фон
   и мягкое свечение: видно, что здесь выбирают. */
/* Обойма стоит сверху, а не снизу: у роликов вшиты субтитры внизу кадра
   («минимальный режим горения», длина камина и линия огня) — снизу
   кнопки закрывали бы именно их. */
.flame-switch{position:absolute;left:50%;top:clamp(14px,2vw,26px);
  transform:translateX(-50%);z-index:2;
  display:inline-flex;gap:4px;padding:5px;
  border:1px solid rgba(246,239,230,.18);border-radius:100px;
  background:rgba(12,9,8,.72);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.flame-switch button{appearance:none;border:0;cursor:pointer;
  padding:12px 26px;border-radius:100px;background:transparent;color:var(--text);
  font:650 15.5px/1 inherit;font-family:inherit;letter-spacing:.01em;
  transition:background .2s,color .2s,box-shadow .2s}
.flame-switch button:hover{background:rgba(246,239,230,.1)}
.flame-switch button[aria-pressed="true"]{background:var(--amber);color:#170e05;
  box-shadow:0 6px 22px rgba(224,145,63,.45)}
.flame-switch button:focus-visible{outline:2px solid var(--amber-2);outline-offset:2px}
/* Лёгкое затемнение снизу кадра — чтобы обойма не спорила с картинкой. */
.flame-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;
  z-index:1;pointer-events:none;border-radius:18px 18px 0 0;
  background:linear-gradient(to bottom,rgba(10,7,6,.5),rgba(10,7,6,0))}
@media(max-width:640px){
  /* На узком экране обойма не влезает поверх кадра — возвращаем под него. */
  .flame-switch{position:static;transform:none;display:flex;width:100%;
    margin:14px 0 12px;backdrop-filter:none}
  .flame-switch button{flex:1;padding:12px 8px;font-size:14.5px}
  .flame-stage::before{display:none}
}


/* ─── Мозаика проектов и отзывов (Р-124) ─────────────────────────
   Решение владельца от 28.08: чередовать плитками — где-то ролик,
   где-то фотография. Материал разного роста: вертикальные ролики 4:5
   и горизонтальные снимки интерьеров. Поэтому не сетка, а колонки:
   карточки укладываются друг под друга без пустот, фотография
   сохраняет свой кадр, а ролик — свои 4:5. */
.mosaic{columns:3;column-gap:clamp(14px,1.6vw,22px)}
.mosaic > figure{break-inside:avoid;margin:0 0 clamp(16px,1.8vw,24px);
  -webkit-column-break-inside:avoid}
.mosaic figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.mosaic figcaption b{display:block;color:var(--text);font-weight:650;
  font-size:15.5px;margin-bottom:3px}
.mosaic .transcript{margin-top:8px}
.mosaic .transcript summary{font-size:13px;padding:6px 0}
/* Фотография: свой кадр, без обрезки под общий формат. */
.mosaic .m-photo img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 52px rgba(0,0,0,.35)}
.mosaic .m-photo{position:relative}
.mosaic .m-photo::after{content:"";position:absolute;inset:0;border-radius:18px;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(246,239,230,.09)}
.mosaic--tight{columns:2}
/* Одна карточка в сетке: не растягиваем её на всю ширину — кадр 4:5
   во всю колонку читается как ошибка вёрстки, а не как один отзыв. */
.mosaic--solo{columns:1;max-width:380px}
@media(max-width:940px){.mosaic{columns:2}}
@media(max-width:560px){.mosaic{columns:1}}

/* Карточка со скриншотом переписки: снимок показываем целиком,
   не кадрируя, — там текст. Под ним тот же текст словами: поиск
   и читалки картинку не читают, и без расшифровки отзыв
   для них не существует. */
.m-shot{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:18px;padding:14px}
.m-shot img{width:100%;height:auto;display:block;border-radius:10px}

/* Ссылка «смотреть все» под блоком: одна на весь блок, крупная. */
/* Текстовый отзыв в мозаике — карточка-цитата. Классы .quote--warm
   из блока про пламя тут не срабатывают: там они рассчитаны на
   blockquote внутри figure.quote, а здесь цитата сама себе карточка. */
.mosaic blockquote.quote{margin:0;padding:26px 24px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line-soft);
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;
  color:var(--amber-2)}
.mosaic blockquote.quote::before{content:"«"}
.mosaic blockquote.quote::after{content:"»"}

/* Карточка проекта: город и тип объекта строкой, название заголовком,
   одна-две строки сути. Заголовок настоящий, h3, а не жирная строка:
   так у секции появляется структура — и для поиска, и для скринридера. */
.mosaic .proj figcaption{margin-top:12px}
.proj-meta{margin:0 0 5px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-weight:700}
.mosaic .proj h3{margin:0 0 6px;font-size:18px;line-height:1.25;color:var(--text)}
.mosaic .proj h3 a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(246,192,122,.35)}
.mosaic .proj h3 a:hover{border-bottom-color:var(--amber-2)}
.mosaic .proj figcaption p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
a.m-photo{display:block}

.mosaic-more{margin-top:clamp(22px,2.6vw,34px);text-align:center}


/* ═════════ ПЛАШКА ПРОЕКТОВ ═════════
   Дизайн взят с версии ChatGPT (порт 3002) по решению владельца от 29.08:
   крупная сетка карточек, кадр на всю карточку, текст поверх градиента.
   Что при переносе исправлено против оригинала — см. Р-133 в журнале:
   там были подставлены чужие фотографии, размеры width/height не совпадали
   с файлами, alt были общими, картинки шли без AVIF и srcset.

   Карточка целиком — ссылка на страницу проекта. Кадр лежит под текстом
   через отрицательный z-index, поэтому карточке нужен свой контекст
   наложения (isolation), иначе изображение уедет под фон секции. */
.project-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;
  grid-auto-rows:250px;gap:clamp(10px,1.1vw,14px);margin-top:clamp(26px,3vw,40px)}
.project{position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);padding:clamp(18px,1.8vw,24px);
  display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  text-decoration:none;color:var(--text)}
.project:first-child{grid-row:span 2}
.project picture{display:contents}
.project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .55s ease}
/* Затемнение снизу вверх: текст читается на любом кадре, а верх карточки
   остаётся почти чистым — фотографию видно, а не только градиент. */
.project::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,7,6,.93) 0%,rgba(8,7,6,.72) 22%,
    rgba(8,7,6,.22) 52%,rgba(8,7,6,0) 76%)}
.project:hover img{transform:scale(1.045)}
.project:focus-visible{outline:2px solid var(--amber-2);outline-offset:3px}
.project .city{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-2);margin-bottom:7px}
/* Кадр под текстом бывает светлым — тень держит контраст без плотного затемнения. */
.project .city,.project h3,.project p{text-shadow:0 1px 14px rgba(8,7,6,.85)}
.project--all .city,.project--all h3,.project--all p{text-shadow:none}
.project h3{font-size:clamp(19px,1.8vw,23px);margin:0;letter-spacing:-.02em}
.project p{font-size:13.5px;line-height:1.5;color:#d3c9c0;margin:.45em 0 0;
  /* страховка от длинной подписи: карточка фиксированной высоты,
     и текст не должен выдавливать заголовок за её край */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project:first-child p{-webkit-line-clamp:3}
/* Карточка «все проекты» — без кадра, поэтому ей нужен свой фон и стрелка. */
.project--all{background:var(--surface-2);justify-content:center}
.project--all h3::after{content:" →";color:var(--amber-2)}
/* Три равные карточки — «похожие проекты» на странице проекта.
   Крупной первой карточки здесь не нужно: объекты равнозначны. */
.project-grid--3{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px}
.project-grid--3 .project:first-child{grid-row:auto}
@media(max-width:940px){.project-grid--3{grid-template-columns:1fr 1fr}
  .project-grid--3 .project:first-child{grid-column:auto}}
@media(max-width:560px){.project-grid--3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.project img{transition:none}
  .project:hover img{transform:none}}
@media(max-width:940px){.project-grid{grid-template-columns:1fr 1fr}
  .project:first-child{grid-row:auto;grid-column:span 2}}
@media(max-width:560px){.project-grid{grid-template-columns:1fr;grid-auto-rows:230px}
  .project:first-child{grid-column:auto}}


/* Фотография проекта. Первая версия сохраняла пропорцию снимка
   (object-fit:contain) — и на первом экране под горизонтальным кадром
   оставалась чёрная плашка в половину экрана: рамка держала 4:5,
   а снимок 4:3. Решение владельца от 10.09.2026: широкий кадр
   обрезаем в квадрат, полей быть не должно.
   Квадрат, а не 4:5 — чтобы от горизонтального снимка резать
   по ширине меньше. */
.media-frame--foto,
.hero--45 .media-frame--foto,
.hero--third .media-frame--foto,
.split .media-frame--foto,
.split.media-left .media-frame--foto,
.split.media-right .media-frame--foto{aspect-ratio:1/1}
.media-frame--foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:940px){
  .media-frame--foto,
  .hero--45 .media-frame--foto,
  .hero--third .media-frame--foto,
  .split.media-left .media-frame--foto,
  .split.media-right .media-frame--foto{aspect-ratio:1/1}
}

/* ─── Слайдер кадров проекта (Р-205) ─────────────────────────────
   Первый разворот страницы проекта: вместо одного кадра — все кадры
   объекта, которые листаются. Кадр 4:5, тот же, что у роликов
   и у фотографий, чтобы вертикальные и горизонтальные снимки стояли
   в одной сетке.

   Листание сделано прокруткой со snap, а не трансформами: палец
   на телефоне работает сам собой, без скриптов, и остаётся рабочим,
   даже если скрипт не загрузился. Стрелки и точки скрипт дорисовывает
   сверху — без него виден первый кадр и прокрутка. */
.slayd{position:relative}
.slayd-lenta{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.slayd-lenta::-webkit-scrollbar{display:none}
.slayd-lenta > *{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  width:100%;height:100%;margin:0}
.slayd-lenta img{width:100%;height:100%;object-fit:cover;display:block}
.slayd-lenta picture{display:block;width:100%;height:100%}

/* Стрелки. На узком экране их нет: там листают пальцем, а кнопки
   только закрывают кадр. */
.slayd-strelka{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(246,239,230,.28);background:rgba(12,9,8,.55);
  backdrop-filter:blur(6px);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.slayd-strelka:hover{background:rgba(12,9,8,.8);border-color:var(--text)}
.slayd-strelka:disabled{opacity:0;pointer-events:none}
.slayd-strelka--nazad{left:12px}
.slayd-strelka--vpered{right:12px}
.slayd-strelka svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

/* Точки. Лежат поверх нижней виньетки кадра. */
.slayd-tochki{position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;gap:7px;justify-content:center;align-items:center}
.slayd-tochka{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(246,239,230,.42);transition:background .2s ease,width .2s ease}
.slayd-tochka[aria-current="true"]{background:var(--amber-2);width:20px;border-radius:4px}

/* Счётчик кадров для тех, кто листает с клавиатуры или читает
   экранным диктором, — визуально скрыт. */
.slayd-schet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

@media(max-width:700px){
  .slayd-strelka{display:none}
}
@media(prefers-reduced-motion:reduce){
  .slayd-lenta{scroll-behavior:auto}
}