/* ПРОЕКТЫ: ОДИН ПРОЕКТ ВО ВЕСЬ ЭКРАН. Файл подключает только страница `/proekty/`.
   Раскладка утверждена Кириллом 12.08.2026 по макету `proekty-shov.jpg`. */

:root {
  --width-page: 100%;
}

.proekty-stranica {
  padding-inline: var(--pole-okna);
  max-width: none;
}

/* ── Крошки ─────────────────────────────────────────────────────────────── */
.proekty-kroshki {
  margin: 0 0 var(--o-4);
  font-size: var(--t-xs);
  color: var(--tekst-tihiy);
}

.proekty-kroshki .kroshki__shag + .kroshki__shag::before {
  content: " / ";
  color: var(--tekst-tihiy);
  opacity: .7;
}

.proekty-kroshki a {
  color: var(--tekst-tihiy);
  text-decoration: none;
}

.proekty-kroshki a:hover {
  color: var(--tekst-myagkiy);
}

/* ── Шапка: заголовок и вкладки на одной высоте ─────────────────────────── */
/* 🔴 ШАПКА СТРАНИЦЫ ЖИВЁТ ПО КРАЯМ КАРТОЧКИ, А НЕ ПО ПОЛЯМ СТРАНИЦЫ. Правка Кирилла
   12.08.2026 по снимку с двумя красными линиями: «правь, чтобы было выровнено одинаково».

   Что было: заголовок начинался от поля страницы (6 % ширины), а карточка — от своего края
   (12,5 %, потому что она 75 % и стоит по центру). Две вертикали на расстоянии 160 точек
   друг от друга — их и видно.

   Теперь шапка той же ширины, что карточка, и стоит по центру: левый край «Проектов»
   совпадает с левым краем карточки, правый край вкладок — с правым.

   ⚠️ `align-items: flex-end` — вкладки опускаются к низу шапки, вплотную над карточкой
   («ВНИЗ опусти до попапа, чтобы было над окном с примером проекта»). */
/* 🔴 КОЛОНКА ТЕКСТА В ШАПКЕ И В КАРТОЧКЕ. Классы стояли в разметке без единого правила —
   сторож рассинхрона оформления нашёл их при слиянии 12.08.2026. Без ограничения ширины
   заголовок и подводка растягиваются во всю карточку, и строка уезжает под вкладки. */
.proekty-shapka__tekst,
.proekty-detail__tekst {
  min-width: 0;
  max-width: 46ch;
}

.proekty-shapka {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--o-5);
  width: var(--shirina-karty-proekta);
  margin: 0 auto var(--o-4);
}

.proekty-zagolovok {
  margin: 0 0 var(--o-3);
  font-family: var(--shrift-antikva);
  font-size: var(--kegl-proekty-zagolovok);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--tekst);
}

.proekty-podvodka {
  margin: 0;
  max-width: 42ch;
  font-family: var(--shrift-teksta);
  font-size: var(--t-lid);
  line-height: 1.45;
  color: var(--tekst-myagkiy);
}

.proekty-vkladki {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--kromka);
  border-radius: var(--r-pill);
  /* Гуще прежнего стекла и с размытием: на светлом небе вкладки не читались вовсе —
     слово Кирилла «этот текст нечитаем». */
  background: var(--steklo-vkladok);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.proekty-vkladka {
  padding: var(--o-2) var(--o-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tekst-myagkiy);
  font-family: var(--shrift-teksta);
  font-size: var(--t-xs);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--hod), background var(--hod);
}

.proekty-vkladka.is-active {
  background: var(--zalivka-vkladki-vybrannoy);
  color: var(--tekst);
}

.proekty-vkladka.is-pusta,
.proekty-vkladka:disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

.proekty-vkladka:not(:disabled):not(.is-pusta):hover {
  color: var(--tekst);
}


/* 🔴 ПОДЛОЖКА ПОД ТЕКСТОМ — отдельным слоем `::before`, а не маской на самом элементе:
   маска на элементе съедает края букв, это уже ловили на главной 11.08.2026.
   Слово Кирилла 12.08.2026: «где затемнение+размытие на тексте? небольшое».

   Затухание — две маски по осям, перемноженные через `intersect`: радиальная гасит кольцом,
   и кольцо ложится поперёк фона видимой дугой. */
/* 🔴 СЛОЙ ОБНИМАЕТ БУКВЫ, А НЕ КОЛОНКУ. Первая редакция навесила его на блочные заголовок
   и абзац — те растянуты во всю ширину колонки, и подложка встала видимым прямоугольником
   до середины экрана. Уговор Кирилла: областей затемнения и швов глазами не видно.

   `fit-content` ужимает сам элемент по тексту; у выключенных по центру заголовков поля
   ставятся `auto`, иначе строка уедет влево. */
.pod-tekstom {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
}

.foto__zagolovok.pod-tekstom,
.foto__lid.pod-tekstom {
  margin-inline: auto;
}

.pod-tekstom::before {
  content: "";
  position: absolute;
  /* Поле шире самого текста: чем длиннее путь затухания, тем меньше шанс, что глаз
     поймает кромку. Растушёвка занимает треть слоя с каждой стороны. */
  inset: -.6em -1.1em;
  z-index: -1;
  border-radius: var(--skruglenie);
  backdrop-filter: blur(1.5px) brightness(.88);
  -webkit-backdrop-filter: blur(1.5px) brightness(.88);
  mask-image: var(--maska-podlozhki-vniz), var(--maska-podlozhki-vbok);
  mask-composite: intersect;
}

/* ── Карусель: карточка 88 % окна, стрелки по краям ─────────────────────── */
.proekty-karusel {
  position: relative;
  width: var(--shirina-karty-proekta);
  margin: 0 auto var(--o-5);
}

.proekty-karty {
  position: relative;
  min-height: 1px;
}

/* 🔴 ШИРИНА КАРТОЧКИ 75 %, А НЕ 88 %, И КАДР НЕ 1,85. Правка Кирилла 12.08.2026: «уменьшим
   примерно на 15 % по горизонтали и 5–7 % по вертикали, слишком здоровое окно».

   По горизонтали это прямо: 88 → 75 % ширины окна. По вертикали одной ширины мало —
   при неизменном отношении кадра высота падала бы на те же 15 %, а просили 6. Поэтому
   отношение кадра уменьшено с 1,85 до 1,67: кадр становится чуть выше своей новой ширины,
   и высота карточки падает ровно на 6 %.

   Замер на 2464: было 2168 × 760, стало 1848 × 715. */
.proekty-karta {
  display: grid;
  grid-template-columns: 62% 36%;
  gap: 2%;
  align-items: stretch;
  padding: var(--o-5);
  border: 1px solid var(--kromka);
  border-radius: var(--r-l);
  background: var(--fon-kartochki);
  box-shadow: var(--ten-3);
}

/* 🔴 КАДР ВЫТЯНУТЫЙ, А НЕ 4:3, И ЭТО ПРАВКА ПО ЗАМЕРУ МАКЕТА. В задании штаб написал 4:3
   по памяти — ошибка. Промер утверждённого макета `proekty-shov.jpg`: снимок 687 × 371
   точки, то есть отношение 1,85.

   Разница не косметическая. При 4:3 карточка на 2464 вырастает до 74 % высоты окна,
   счётчик уезжает за нижний край, и Кирилл увидел это первым: «окно слишком гигантское,
   у Наталии не так было, уменьши примерно на 30 %».

   При 1,85 карточка встаёт в 52–55 % высоты — доля Наталии (420 из 784).

   ⚠️ Снимкам это не вредит: они кадрируются `object-fit: cover`, а шов ходит по обеим
   половинам одинаково. */
/* 🔴 `width: 100%` СТОИТ РЯДОМ С `aspect-ratio` НАМЕРЕННО. Без него ширина снимка остаётся
   на усмотрение раскладки, и `aspect-ratio` считает её от ВЫСОТЫ: панель выросла на блок
   «что посадили», строка сетки стала выше, и снимок раздулся до 1137 точек при колонке
   в 864 — то есть наехал на панель на 245 точек и закрыл собой сводку. Замерено 12.08.2026.
   С явной шириной отношение сторон работает в одну сторону: считает высоту от ширины. */
.proekty-karta__snimok {
  position: relative;
  width: 100%;
  aspect-ratio: 1.67;
  min-width: 0;
  border-radius: var(--skruglenie);
  overflow: hidden;
}

.proekty-karta__snimok .compare {
  position: absolute;
  inset: 0;
  margin: 0;
  border-color: var(--akcent-detal);
  border-radius: inherit;
}

.proekty-karta__snimok .compare__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proekty-karta__snimok .compare__layer .compare__photo {
  width: var(--photo-width, 100%);
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* ── Панель проекта ─────────────────────────────────────────────────────── */
/* 🔴 ПАНЕЛЬ БЕЗ ВЕРТИКАЛЬНЫХ ПОЛЕЙ: её верх и низ обязаны совпасть с верхом и низом снимка.
   Поле в `--o-2` опускало надзаголовок на 7 точек ниже верхней кромки кадра и поднимало
   кнопку на 8 точек над нижней. Кирилл 12.08.2026 отметил это на снимке зелёной линией:
   «"подробнее" чуть вниз». Замер после правки: обе разницы по нулю. */
.proekty-karta__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.proekty-karta__tip {
  margin: 0 0 var(--o-3);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akcent-detal);
}

/* ⚠️ ВЫСОТУ КАРТОЧКИ ЗАДАЁТ ПАНЕЛЬ, А НЕ СНИМОК. После сужения карточки на 15 % название
   в узкой колонке стало переноситься на строку больше, и высота не убавилась вовсе — замер
   показал 59 % вместо ожидаемых 53. Поэтому вместе с шириной убавлены кегль названия
   и поля панели. */
/* ⚠️ ВЕС 600, А НЕ 500. Кирилл 12.08.2026, глядя на макет Наталии: «шрифты как будто не как
   у наталии сейчас». Сравнение двух заголовков в натуральную величину показало, в чём разница:
   у Cormorant очень высокий контраст штриха, и на весе 500 тонкие части почти пропадают,
   а у Наталии тонкое место сохраняет видимую толщину. Вес 600 это закрывает; 700 уже уводит
   в вывеску.

   🔴 ОСТАВШАЯСЯ РАЗНИЦА — В САМОЙ ГАРНИТУРЕ, И ВЕСОМ ОНА НЕ ЛЕЧИТСЯ: Cormorant шире
   и рисованнее, чем книжная антиква на макете. Смена заголовочной гарнитуры трогает весь
   сайт и решается с Кириллом, а не здесь. */
.proekty-karta__nazvanie {
  margin: 0 0 var(--o-4);
  font-family: var(--shrift-antikva);
  font-size: calc(var(--kegl-proekty-nazvanie) * .88);
  font-weight: 600;
  line-height: 1.08;
  color: var(--tekst);
}

.proekty-karta__fakty {
  list-style: none;
  margin: 0 0 var(--o-5);
  padding: 0;
}

.proekty-karta__fakty li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--o-3);
  align-items: center;
  padding: calc(var(--o-2) * .5) 0;
  font-size: var(--t-s);
}

/* 🔴 КРУЖОК НАРИСОВАН ВНУТРИ САМОГО ЗНАЧКА, А НЕ РАМКОЙ В СТИЛЯХ. Здесь стояли
   `border: 1px solid` и `border-radius: 50%` вокруг знака-буквы; значки от векторизатора
   несут своё кольцо, и рамка дала бы два круга один в другом. Цвет идёт через `color`,
   потому что внутри значка стоит `currentColor`. */
.proekty-karta__znak {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--akcent-detal);
}

/* Подпись сверху, значение под ней — раскладка с доски Наталии. Здесь стояло «подпись слева,
   значение прижато вправо», и на широкой панели между ними разъезжалось пустое поле
   в треть ширины: строка переставала читаться парой. */
.proekty-karta__fakt {
  display: flex;
  flex-direction: column;
  gap: .15em;
  min-width: 0;
}

.proekty-karta__fakt-podpis {
  color: var(--tekst-tihiy);
  font-size: var(--t-xs);
}

.proekty-karta__fakt-znachenie {
  font-weight: 600;
  color: var(--tekst);
}

/* ── Что посадили: перечень со ссылками в каталог ───────────────────────── */
.proekty-karta__sostav {
  margin: 0 0 var(--o-4);
  padding-top: var(--o-3);
  border-top: 1px solid var(--frame);
}

.proekty-karta__sostav-podpis {
  margin: 0 0 calc(var(--o-2) * .6);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-tihiy);
}

/* ⚠️ ДВЕ КОЛОНКИ, А НЕ СТОЛБИК. Четыре растения столбиком дают 186 точек высоты, карточка
   вырастает до 68 % высоты окна, и счётчик под ней уезжает за край. Кирилл это уже ловил
   на прежней раскладке: «окно слишком гигантское, у Наталии не так было». В две колонки
   тот же перечень занимает 90 точек, и карточка остаётся в своей доле 52–55 %. */
.proekty-karta__rasteniya {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ⚠️ Строка занимает всю ширину панели, а не облегает текст: строки разной длины, прижатые
   влево, читаются как обрывки, а не как перечень. Стрелка выезжает на наведении — она
   обещает переход, и обещать его на всех строках сразу значит не обещать ни на одной. */
/* 🔴 ЗНАЧОК СТРОКИ СТОИТ НА ЛЕВОЙ ЛИНИИ ПАНЕЛИ, А ПОДЛОЖКА НАВЕДЕНИЯ ВЫХОДИТ ЛЕВЕЕ ЕЁ.
   Поле строки отодвигало значок на 6 точек правее надзаголовка, заголовка и значка сводки —
   Кирилл 12.08.2026 отметил это зелёной чертой на снимке: «иконки влево». Отрицательное поле
   гасит отступ ровно на его величину: значок встаёт на линию, а скруглённая подложка
   по-прежнему обнимает строку, уходя в зазор между снимком и панелью. */
.proekty-rastenie {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(var(--o-2) * .8);
  align-items: center;
  margin-left: calc(var(--o-2) * -.8);
  padding: calc(var(--o-2) * .4) calc(var(--o-2) * .8);
  border-radius: var(--r-m);
  color: var(--tekst-myagkiy);
  font-size: var(--t-s);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.proekty-rastenie__znak {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--akcent-detal);
  opacity: .78;
  transition: opacity .18s ease;
}

/* Имя растения: своё правило нужно не ради красоты, а ради переноса — «Барбарис Тунберга»
   в колонке шириной 248 точек не помещается в строку и без этого вылезает за края. */
.proekty-rastenie__imya {
  min-width: 0;
  overflow-wrap: anywhere;
}

.proekty-rastenie__strelka {
  width: .95rem;
  height: .95rem;
  color: var(--akcent-detal);
  opacity: 0;
  transform: translateX(-.4rem);
  transition: opacity .18s ease, transform .18s ease;
}

/* ⚠️ ПОДЛОЖКА НАВЕДЕНИЯ — ПОДНЯТАЯ ПАНЕЛЬ, А НЕ ВЫБРАННАЯ СТРОКА. Пробовались обе:
   `--fon-metki` — тёмное стекло для белого текста поверх фотографии, на самой панели читается
   дыркой, а не откликом; `--fon-vybran` — краска выбранной строки размера, заметно зеленее панели,
   и строка загоралась зелёной пилюлей посреди песочно-тёмной панели. Поднятая панель даёт
   ровно то, что нужно: строка приподнимается на один шаг поверхности, и всё. */
.proekty-rastenie:hover,
.proekty-rastenie:focus-visible {
  background: var(--fon-polosy);
  color: var(--tekst);
}

.proekty-rastenie:hover .proekty-rastenie__znak,
.proekty-rastenie:focus-visible .proekty-rastenie__znak { opacity: 1; }

.proekty-rastenie:hover .proekty-rastenie__strelka,
.proekty-rastenie:focus-visible .proekty-rastenie__strelka {
  opacity: 1;
  transform: translateX(0);
}

.proekty-karta__tekst {
  margin: 0 0 var(--o-4);
  padding-top: var(--o-3);
  border-top: 1px solid var(--frame);
  overflow-wrap: anywhere;
  color: var(--tekst-myagkiy);
  font-size: var(--t-lid);
  line-height: 1.5;
}

/* 🔴 Песочная заливка — исключение, решение 0044. Только на этой странице. */
.proekty-karta__knopka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: var(--o-4) var(--o-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--akcent-detal);
  color: var(--tekst-na-peske);
  font-family: var(--shrift-teksta);
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: filter var(--hod), transform var(--hod);
}

.proekty-karta__knopka:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: var(--tekst-na-peske);
}

/* ── Стрелки: контур, не буквы ──────────────────────────────────────────── */
.proekty-strelka {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--diametr-strelki-proekty);
  height: var(--diametr-strelki-proekty);
  padding: 0;
  border: 1px solid var(--kromka-strelki-proekta);
  border-radius: 50%;
  background: var(--fon-metki);
  backdrop-filter: blur(8px);
  color: var(--tekst);
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color var(--hod), opacity var(--hod);
}

.proekty-strelka--nazad {
  left: calc(-1 * (var(--diametr-strelki-proekty) + var(--o-4)));
}

.proekty-strelka--vpered {
  right: calc(-1 * (var(--diametr-strelki-proekty) + var(--o-4)));
}

.proekty-strelka:hover {
  border-color: var(--kromka-silnaya);
}

.proekty-strelka__znak {
  width: 33%;
  height: 33%;
}

/* ── Счётчик: не переключатель ──────────────────────────────────────────── */
.proekty-schetchik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--o-3);
  margin: 0 0 var(--o-8);
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.proekty-schetchik__tekst {
  font-size: var(--t-s);
  letter-spacing: .12em;
  color: var(--tekst-tihiy);
}

.proekty-schetchik__poloski {
  display: flex;
  gap: var(--o-2);
}

.proekty-schetchik__poloska {
  width: 2.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--kromka);
}

.proekty-schetchik__poloska.is-active {
  background: var(--akcent-detal);
}

@media (max-width: 960px) {
  /* 🔴 КОЛОНКА ТЕКСТА В ШАПКЕ И В КАРТОЧКЕ. Классы стояли в разметке без единого правила —
   сторож рассинхрона оформления нашёл их при слиянии 12.08.2026. Без ограничения ширины
   заголовок и подводка растягиваются во всю карточку, и строка уезжает под вкладки. */
.proekty-shapka__tekst,
.proekty-detail__tekst {
  min-width: 0;
  max-width: 46ch;
}

.proekty-shapka {
    flex-direction: column;
    align-items: stretch;
  }

  .proekty-vkladki {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .proekty-vkladki::-webkit-scrollbar {
    display: none;
  }

  .proekty-karta {
    grid-template-columns: 1fr;
    gap: var(--o-5);
  }

  .proekty-strelka {
    top: 28%;
  }

  .proekty-strelka--nazad {
    left: var(--o-2);
  }

  .proekty-strelka--vpered {
    right: var(--o-2);
  }
}

/* ── Раздел «Наши фото» ─────────────────────────────────────────────────── */
/* 🔴 БЛОК ПОДНЯТ К ПЕРВОМУ ЭКРАНУ — слово Кирилла 12.08.2026: «подвинь чуть наверх, чтобы
   чётко было с первого экрана в самом низу, и хотелось пролистнуть туда». Заголовок должен
   выглядывать из-под края окна: это и есть приглашение прокрутить. */
.foto { margin: var(--o-6) 0 0; }
/* Заголовок набирается тем же шрифтом, что и марка в шапке, — слово Кирилла: «это заголовок,
   делай шрифтом таким же, как логотип наш». На сайте это `--shrift-zagolovka`, антиква
   Cormorant; у неё строчные ниже гротеска, поэтому кегль поднят. */
.foto__zagolovok {
  font-family: var(--shrift-antikva);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--o-3);
  text-align: center;
}
.foto__lid { color: var(--tekst-myagkiy); margin: 0 auto var(--o-6); text-align: center; max-width: 54ch; }
.foto__ryad { position: relative; }
.foto__lenta {
  display: flex;
  gap: var(--o-4);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y pinch-zoom;
}
.foto__lenta::-webkit-scrollbar { display: none; }
.foto__lenta:focus-visible { outline: 3px solid var(--akcent); outline-offset: 4px; }
.foto__karta { flex: 0 0 calc((100% - 2 * var(--o-4)) / 3); scroll-snap-align: center; }
.foto__knopka {
  display: block; width: 100%; padding: 0; border: 0; background: transparent;
  color: inherit; text-align: left; cursor: zoom-in;
}
.foto__snimok {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-m); border: 1px solid var(--akcent-detal); box-shadow: var(--ten-2);
}
.foto__knopka:hover .foto__snimok { border-color: var(--akcent-navedenie); }
.foto__knopka:focus-visible .foto__snimok { outline: 3px solid var(--akcent); outline-offset: 3px; }
.foto__podpis { display: block; margin-top: var(--o-3); font-size: var(--t-s); color: var(--tekst-tihiy); text-align: center; }
.foto__strelka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--kromka); background: var(--fon-metki); color: var(--tekst-tihiy);
  font-size: var(--t-l); line-height: 1; cursor: pointer;
  opacity: .35;
  transition: opacity .25s ease, color .25s ease, border-color .25s ease;
}
.foto__strelka[data-foto="nazad"] { left: calc(-1 * (44px + var(--o-4))); }
.foto__strelka[data-foto="vperyod"] { right: calc(-1 * (44px + var(--o-4))); }
.foto__strelka:hover { opacity: 1; color: var(--tekst); border-color: var(--kromka-silnaya); }
.foto__znak { display: block; margin: 0 auto; }
.foto__znak--nazad { transform: scaleX(-1); }
.foto__sloy {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--fon-glubokiy);
}
.foto__sloy[hidden] { display: none; }
.foto__sloy-kadr { max-width: 90vw; max-height: 86vh; border-radius: var(--r-m); border: 1px solid var(--akcent-detal); }
.foto__sloy-strelka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--kromka); background: var(--fon-metki); color: var(--tekst-tihiy);
  font-size: var(--t-xl); line-height: 1; cursor: pointer; opacity: .55;
  transition: opacity .25s ease, color .25s ease, border-color .25s ease;
}
.foto__sloy-strelka:hover { opacity: 1; color: var(--tekst); border-color: var(--kromka-silnaya); }
.foto__sloy-strelka--nazad { left: var(--o-5); }
.foto__sloy-strelka--vperyod { right: var(--o-5); }
.foto__sloy-zakryt {
  position: absolute; top: var(--o-5); right: var(--o-5);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--kromka); background: var(--fon-metki); color: var(--tekst-tihiy);
  font-size: var(--t-l); cursor: pointer; opacity: .55;
}
.foto__sloy-zakryt:hover { opacity: 1; color: var(--tekst); }

@media (max-width: 860px) {
  .foto__strelka { display: none; }
  .foto__karta { flex-basis: 74vw; }
  .foto__sloy-strelka { width: 44px; height: 44px; opacity: .7; }
  .foto__znak { width: 22px; height: 22px; }
  .foto__sloy-strelka--nazad { left: var(--o-3); }
  .foto__sloy-strelka--vperyod { right: var(--o-3); }
}

/* ── Страница одного проекта (журнальный разворот) ──────────────────────── */
.proekty-detail {
  max-width: var(--width-catalog);
  margin-inline: auto;
}

.proekty-detail__razvorot {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--o-7);
  align-items: center;
  margin: 0 0 var(--o-8);
}

.proekty-detail__kadr .compare {
  margin: 0;
  border: 1px solid var(--akcent-detal);
  box-shadow: var(--ten-3);
}

.proekty-detail__shapka {
  display: flex;
  align-items: baseline;
  gap: var(--o-4);
  margin: 0 0 var(--o-3);
}

.proekty-detail__nomer {
  font-size: clamp(40px, 5vw, 68px);
  line-height: .9;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--kromka-silnaya);
}

.proekty-detail__metka {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-tihiy);
}

.proekty-detail__nazvanie {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.15;
  margin: 0 0 var(--o-4);
}

.proekty-detail__opisanie {
  margin: 0 0 var(--o-5);
  overflow-wrap: anywhere;
  color: var(--tekst-myagkiy);
  font-size: var(--t-lid);
}

.proekty-detail__svodka {
  list-style: none;
  margin: 0 0 var(--o-5);
  padding: 0;
}

.proekty-detail__svodka li {
  display: flex;
  justify-content: space-between;
  gap: var(--o-4);
  padding: var(--o-2) 0;
  border-bottom: 1px solid var(--frame);
  font-size: var(--t-s);
}

.proekty-detail__svodka span { color: var(--tekst-tihiy); }
.proekty-detail__svodka b { font-weight: 600; }

.proekty-detail__ssylka {
  color: var(--akcent);
  font-size: var(--t-s);
  text-decoration: none;
  position: relative;
}

.proekty-detail__ssylka::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--akcent);
  transition: right .35s ease;
}

.proekty-detail__ssylka:hover::after { right: 0; }

.proekty-detail__foto {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
  border-radius: var(--skruglenie);
}

.reveal.is-armed { opacity: 0; transform: translateY(14px); }
.reveal { transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-armed { opacity: 1; transform: none; }
  .reveal { transition: none; }
}

@media (max-width: 860px) {
  .proekty-detail__razvorot { grid-template-columns: 1fr; gap: var(--o-5); }
}