/* ============================================================
   shotbyany.com — единый CSS. Mobile-first, брейкпоинт 900px.
   Токены зеркалят переменные Figma один в один по имени.
   Нормализация имён (Figma → CSS):
     «x0,5» (запятая)      → --x05
     «Margin-H (x10)»      → --margin-h
   Остальные — один в один, нижний регистр, пробелы → дефисы.
   ============================================================ */

/* ---------- Шрифты: локальные woff2 (латиница + кириллица) ---------- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora — вариативный файл, покрывает оба веса 500 и 700 */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../assets/fonts/lora-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/caveat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/caveat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвета */
  --text---dark-terraco: #4a4638;
  --branding---clay: #c0b393;
  --accent----crayola-matte: #a26662; /* рукописные цены, комментарии, маркеры */
  --bg---white: #ffffff;
  --fade: rgba(0, 0, 0, 0.5);        /* затемнение поверх hero-фото */

  /* Радиус: единый --un-unit, применяется только там, где указан в макете */
  --un-unit: 8px;

  /* Шаг отступов */
  --x05: 10px;
  --x1: 20px;
  --x2: 40px;
  --x3: 60px;
  --x4: 80px;
  --x5: 100px;

  /* Поля секций: мобайл 20px, десктоп 200px (см. медиа-запрос ниже) */
  --margin-h: 20px;

  /* Семейства шрифтов */
  --font-mono: "IBM Plex Mono", monospace;      /* Hero, H3 — жирный, капс */
  --font-serif: "Lora", serif;                   /* body, H2, Quote */
  --font-hand: "Caveat", cursive;                /* Accent — рукописные заметки */

  /* Текстовые стили Figma — через шорткат font (вес размер/межстрочник семейство) */
  --font-hero: 700 96px/0.9 var(--font-mono);           /* Hero */
  --font-hero-comment: 500 32px/1.2 var(--font-serif);  /* Hero-comment */
  --font-h2: 700 36px/1 var(--font-serif);              /* H2 */
  --font-h3: 700 24px/1.26 var(--font-mono);            /* H3 */
  --font-quote: 700 32px/1 var(--font-serif);           /* Quote */
  --font-body: 500 20px/1.3 var(--font-serif);          /* body */
  --font-m-comment: 500 16px/1.3 var(--font-serif);     /* m-comment — мобильный мелкий текст (согласованное дополнение) */
  --font-accent: 700 36px/0.93 var(--font-hand);        /* Accent — рукописный */
  --font-m-accent: 700 24px/0.93 var(--font-hand);      /* m-Accent — рукописный, мобайл */
}

/* ---------- Базовый сброс ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* сбрасывается в auto при prefers-reduced-motion */
}

body {
  margin: 0;
  font: var(--font-body);
  color: var(--text---dark-terraco);
  background: var(--bg---white);
}

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

a {
  color: inherit;
}

/* Парные классы скрытия версий: см. медиа-запрос */
.desktop-only {
  display: none;
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  color: var(--bg---white);
}

/* Фоновое фото + затемнение --fade поверх */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--fade);
}

/* Шапка: на мобайле — плашка clay с логотипом и бургером.
   z-index выше оверлея меню, чтобы логотип и кнопка-крестик остались видны */
.hero__header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--branding---clay);
  padding-right: 40px;
}

.hero__logo {
  width: 260px;
  height: 100px;
}

.hero__menu {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text---dark-terraco);
}

.hero__menu-icon--close {
  display: none;
}

.menu-open .hero__menu-icon--burger {
  display: none;
}

.menu-open .hero__menu-icon--close {
  display: block;
}

/* ---------- Полноэкранное мобильное меню ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--x2);
  /* верхний паддинг = строка лого/крестика: блок «язык + пункты»
     центрируется в свободном пространстве под ней */
  padding: 100px var(--x1) 0;
  background: var(--branding---clay);
}

.menu[hidden] {
  display: none;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x1);
}

.menu__link {
  font: var(--font-quote);
  color: var(--bg---white);
  text-decoration: none;
  transition: color 0.2s;
}

.menu__link:hover,
.menu__link:focus-visible,
.menu__link:active {
  color: var(--text---dark-terraco);
}

/* Переключатель языка — верх единого блока «язык + пункты» */
.menu__lang {
  display: flex;
  align-items: center;
  gap: var(--x05);
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--bg---white);
}

/* Блокировка прокрутки под открытым меню */
body.menu-open {
  overflow: hidden;
}

.hero__lang {
  align-items: center;
  gap: var(--x05);
  padding-inline: var(--x4);
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--bg---white);
}

.hero__lang-item {
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.hero__lang-item--current {
  font-weight: 700;
  line-height: 1;
}

a.hero__lang-item:hover {
  text-decoration: underline;
}

/* Ключевой блок: мобайл — прижат к низу */
.hero__key {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x2);
  margin-top: auto;
  padding: 0 var(--x1) 64px;
}

.hero__moto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}

.hero__title {
  margin: 0;
  font: 700 64px/0.9 var(--font-mono);
  text-transform: uppercase;
  width: 100%;
}

.hero__comment {
  margin: 0;
  font: 500 20px/1.2 var(--font-serif);
  width: 100%;
}

/* В мобильном макете сноска начинается с «· » */
.hero__comment::before {
  content: "· ";
}

.hero__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x05);
}

/* Кнопка btn_main-tg-wh: State=active — фон --fade */
.btn-tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 310px;
  height: 50px;
  padding: var(--x05) var(--x1);
  background: var(--bg---white);
  border-radius: var(--un-unit);
  font: var(--font-h3);
  text-transform: uppercase;
  color: var(--text---dark-terraco);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.btn-tg:hover,
.btn-tg:focus-visible {
  background: var(--fade);
}

/* Модификатор btn_main-tg (в меню): фон accent, текст белый, active — фон --fade */
.btn-tg--accent {
  background: var(--accent----crayola-matte);
  color: var(--bg---white);
}

/* Ссылка btn_main-whatsapp: State=active — текст dark-terraco */
.btn-wa {
  font: var(--font-m-comment); /* мобайл: m-comment, десктоп: body */
  color: var(--bg---white);
  text-decoration: none;
  transition: color 0.2s;
}

.btn-wa__word {
  text-decoration: underline;
  text-underline-position: from-font;
}

.btn-wa:hover,
.btn-wa:focus-visible {
  color: var(--text---dark-terraco);
}

/* ---------- 2. Portfolio ---------- */

.portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x4);
  padding: 64px 0 var(--x4);
}

.portfolio__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x2);
  padding-inline: var(--x1);
  text-align: center;
}

.portfolio__title {
  margin: 0;
  font: var(--font-h2);
  text-transform: uppercase;
}

.portfolio__desc {
  opacity: 0.8;
}

.portfolio__desc p {
  margin: 0 0 var(--x05);
}

.portfolio__desc p:last-child {
  margin-bottom: 0;
}

/* --- Селектор кейсов: общее состояние на data-active-shoot --- */

.shoots {
  position: relative; /* якорь для абсолютных рукописных заметок */
  display: flex;
  flex-direction: column;
  gap: var(--x4);
  width: 100%;
}

.shoots__menu-wrap {
  position: relative;
}

/* Мобайл: сетка 2×2 */
.shoots__menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--x05);
  padding-inline: var(--x1);
}

.photocard {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: clip;
  border-radius: var(--un-unit);
  text-align: center;
  font: inherit;
  color: var(--text---dark-terraco);
}

.photocard__frame {
  display: block;
  position: relative;
  flex: 1 0 0;
  min-height: 110px;
  width: 100%;
  background: var(--accent----crayola-matte);
  overflow: clip;
}

.photocard__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photocard__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 65px;
  width: 100%;
  padding: var(--x05);
  background: var(--branding---clay);
  box-sizing: border-box;
}

.photocard__name {
  font: var(--font-m-accent);
  white-space: nowrap; /* подпись карточки всегда в одну строку */
}

.photocard__place {
  font: var(--font-m-comment);
  white-space: nowrap;
}

/* Активная карточка: рамка clay поверх фото + индивидуальный поворот.
   Источник состояния один — атрибут родителя, никаких .is-active */
[data-active-shoot="1"] .photocard[data-shoot="1"],
[data-active-shoot="2"] .photocard[data-shoot="2"],
[data-active-shoot="3"] .photocard[data-shoot="3"],
[data-active-shoot="4"] .photocard[data-shoot="4"] {
  pointer-events: none; /* активная не кликается повторно */
}

[data-active-shoot="1"] .photocard[data-shoot="1"] .photocard__frame,
[data-active-shoot="2"] .photocard[data-shoot="2"] .photocard__frame,
[data-active-shoot="3"] .photocard[data-shoot="3"] .photocard__frame,
[data-active-shoot="4"] .photocard[data-shoot="4"] .photocard__frame {
  border: var(--un-unit) solid var(--branding---clay);
  border-bottom: none;
}

/* Мобайл: индивидуальный поворот активной карточки (из m-menu) */
[data-active-shoot="1"] .photocard[data-shoot="1"] {
  transform: rotate(-3deg);
}

[data-active-shoot="2"] .photocard[data-shoot="2"] {
  transform: rotate(3deg);
}

[data-active-shoot="3"] .photocard[data-shoot="3"] {
  transform: rotate(-3deg);
}

[data-active-shoot="4"] .photocard[data-shoot="4"] {
  transform: rotate(3deg);
}

/* Рукописная подсказка «нажми!» */
.shoots__hint {
  position: absolute;
  top: -40px;
  left: 48.7%;
  color: var(--accent----crayola-matte);
}

.shoots__hint-text {
  display: inline-block;
  font: var(--font-m-accent);
  transform: rotate(-5.71deg);
}

.shoots__hint-arrow {
  display: block;
  margin-left: 2px;
  transform: rotate(5.31deg);
}

/* --- Маскировка загрузки картинок галереи ---
   alt-текст не мелькает (прозрачный цвет), кадр проявляется по факту загрузки */
.shoots img {
  color: transparent;
}

[data-host] img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

[data-host] img.is-loaded {
  opacity: 1;
}

/* Переключение кейса: галерея мягко гаснет, потом проявляется новая */
.gallery-d,
.gallery-m {
  transition: opacity 0.2s ease;
}

.shoots.is-fading .gallery-d,
.shoots.is-fading .gallery-m {
  opacity: 0;
}

/* --- Лента деталей (общие правила): gap не меньше --x05 --- */

.gallery-d__details,
.gallery-m__details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(var(--x05), 10px);
  width: 100%;
  /* по горизонтали лента обрезается по краям экрана,
     по вертикали — нет: повёрнутые рукописные заметки выходят за строку */
  overflow-x: clip;
  overflow-y: visible;
}

.dcell {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}

.dcell img,
.gcell__img img,
.mslide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Мобильная галерея --- */

.gallery-m__details {
  margin-bottom: -20px; /* перекрытие из макета */
}

.gallery-m__details .dcell {
  flex: 1 0 0;
  height: auto; /* аспект кадра — inline в шаблоне кейса */
}

.gallery-m__carousel {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 390 / 396;
}

/* Трек — абсолютом, чтобы высота карусели держалась аспектом контейнера */
.gallery-m__track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--x05);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-m__track::-webkit-scrollbar {
  display: none;
}

/* Слайд занимает ровно ширину карусели — виден только активный кадр.
   width:100% обязателен: иначе inline aspect-ratio слайда раздувает его
   от высоты и ломает равномерность снап-точек.
   Аспект кадра (inline) наследует внутренний контейнер картинки */
.mslide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* свайп не пролетает больше одного кадра */
}

.mslide picture {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: inherit;
  max-width: 100%;
}

/* Горизонтальный кадр: по ширине зоны, по центру высоты */
.mslide--wide picture {
  height: auto;
  width: 79%;
}

.gallery-m__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: var(--x05);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--accent----crayola-matte);
}

.gallery-m__arrow--prev {
  left: 0;
}

.gallery-m__arrow--next {
  right: 0;
}

.gallery-m__arrow--next svg {
  transform: scaleX(-1);
}

/* Стрелки на 13% меньше макетных, толщина линии сохранена
   (stroke компенсирован в тех же пропорциях) */
.gallery-m__arrow svg {
  width: 20px;
  height: 36px;
}

.gallery-m__arrow svg path {
  stroke-width: 4.6;
}

/* Рукописные заметки мобильной галереи.
   В макете они были короткими плейсхолдерами в жёстких коробках;
   реальные тексты длиннее — поэтому заметка в потоке, переносится
   по словам и занимает не больше 78% ширины. Наклон — свой на кейс */
.gallery-m__comment-host {
  display: contents;
}

.mcomment {
  align-self: center;
  max-width: 78%;
  margin: var(--x1) var(--x1) 0;
  font: var(--font-m-accent);
  color: var(--accent----crayola-matte);
  text-align: center;
  transform: rotate(var(--angle, -3deg));
}

.gallery-m {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Ячейки деталей: заливка доли (кейс 2) и композит с заметкой (кейс 4) */
.dcell--fill {
  flex: 1 0 0;
  height: auto;
  align-self: stretch;
}

.dcell--stretch {
  flex: 1 0 0;
  height: auto;
  align-self: stretch;
}

.dcell--stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: min(52px, 3.2vw);
}

.dcell--stack .dcell__imgbox {
  position: relative;
  flex: 1 0 0;
}

.dcell--stack .gcell__comment {
  margin: 0;
}

/* ---------- 3. About ---------- */

.about {
  padding: var(--x4) var(--x1);
}

.about__line {
  display: flex;
  flex-direction: column;
  gap: var(--x2);
}

/* Полароид: мобайл — горизонтальный, фото 235 + подпись 65 */
.about__polaroid {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300px;
  border-radius: var(--un-unit);
  overflow: clip;
}

.about__imgbox {
  position: relative;
  display: block;
  flex: 1 0 0;
  background: var(--accent----crayola-matte);
}

.about__imgbox img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: var(--x05);
}

.about__title {
  margin: 0;
  width: 100%;
  font: var(--font-h3);
  text-transform: uppercase;
  text-align: center;
}

.about__desc {
  opacity: 0.8;
}

.about__desc p {
  margin: 0 0 var(--x05);
}

.about__desc p:last-child {
  margin-bottom: 0;
}

/* Живая ссылка в тексте: подчёркнута, при наведении — accent */
.about__desc-link {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s;
}

.about__desc-link:hover,
.about__desc-link:focus-visible {
  color: var(--accent----crayola-matte);
}

.about__sign {
  margin: 0;
  width: 100%;
  font: var(--font-accent);
  color: var(--accent----crayola-matte);
  text-align: right;
}

/* --- CTA-стек секции --- */

.portfolio__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x05);
}

/* WhatsApp-строка на белом фоне: тёмный текст */
.btn-wa--dark {
  color: var(--text---dark-terraco);
}

.btn-wa--dark:hover,
.btn-wa--dark:focus-visible {
  color: var(--accent----crayola-matte);
}

/* ---------- 4. Prices ---------- */

.prices {
  position: relative;
  background: var(--branding---clay);
  color: var(--bg---white);
}

/* Фото-полоса блошиного рынка */
.prices__photo {
  position: relative;
  height: 240px;
}

.prices__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 88%; /* кроп из макета */
}

/* Рукописная подпись к фото (мобайл), над полосой */
.prices__photo-note {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-62%);
  margin: 0;
  color: var(--accent----crayola-matte);
  text-align: right;
}

.prices__photo-note-text {
  display: inline-block;
  font: var(--font-m-accent);
  transform: rotate(3.99deg);
}

.prices__photo-note-arrow {
  display: block;
  margin: 2px 0 0 auto;
  transform: rotate(174.69deg) scaleY(-1);
}

.prices__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x2);
  padding: var(--x2) var(--x1);
}

.prices__title {
  margin: 0;
  font: 700 48px/1 var(--font-mono);
  text-transform: uppercase;
  text-align: center;
  color: var(--bg---white);
}

.prices__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x2);
  width: 100%;
}

.prices__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Карточка тарифа (textcard из kit) */
.textcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--x1);
  min-height: 480px;
  padding: var(--x2);
  background: var(--bg---white);
  border-radius: var(--un-unit);
  text-align: center;
  color: var(--text---dark-terraco);
}

.textcard__title {
  margin: 0;
  font: 700 36px/1 var(--font-serif);
  text-transform: uppercase;
}

.textcard__desc {
  opacity: 0.8;
}

.textcard__desc p {
  margin: 0 0 var(--x05);
}

.textcard__desc p:last-child {
  margin-bottom: 0;
}

.textcard__meta {
  margin: 0;
  opacity: 0.5;
}

/* Третья карточка: мета однострочная — поднимаем её,
   чтобы рукописное «Поболтаем?» легло в свободный зазор */
.textcard:last-child .textcard__meta {
  margin-bottom: 44px;
}

/* Третья карточка: «Поболтаем?» шире — сидит над «от $250» */
.textcard:last-child .textcard__new {
  left: calc(50% - 110px);
  bottom: 84px;
}

.textcard__price {
  margin: 0;
  font: 500 32px/1.2 var(--font-serif);
}

.textcard__price s {
  text-decoration: line-through;
}

/* Рукописная новая цена: левее центра и выше зачёркнутой, без наложения.
   Мобайл — m-accent (24), десктоп — accent (36) */
.textcard__new {
  position: absolute;
  left: calc(50% - 122px);
  bottom: 44px; /* рядом с зачёркнутой ценой, слева */
  margin: 0;
  font: var(--font-accent);
  color: var(--accent----crayola-matte);
  transform: rotate(-3deg);
  white-space: nowrap;
}

/* Маркер «берут чаще» над второй карточкой */
.prices__marker {
  position: absolute;
  top: -18px;
  left: calc(50% + 25px);
  color: var(--accent----crayola-matte);
}

.prices__marker-text {
  display: inline-block;
  font: var(--font-m-accent);
  transform: rotate(-5.71deg);
  white-space: nowrap;
}

.prices__marker-arrow {
  display: block;
  width: 26px;
  margin: 3px 0 0 -8px; /* от левого нижнего края подписи */
  transform: rotate(5.31deg);
}

.prices__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x05);
}

.prices__note {
  max-width: 672px;
  font: var(--font-m-comment); /* мобайл: m-comment, десктоп: body */
  text-align: center;
}

.prices__note p {
  margin: 0 0 var(--x05);
}

.prices__note p:last-child {
  margin-bottom: 0;
}

/* Отзывы внутри prices (мобайл): зацикленная карусель */
.prices__reviews {
  position: relative;
  width: 100%;
  margin-bottom: var(--x2);
}

.prices__reviews-track {
  display: flex;
  gap: var(--x05);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.prices__reviews-track::-webkit-scrollbar {
  display: none;
}

.prices__reviews-track .reviewcard {
  flex: 0 0 100%;
  /* поля шире стрелок прокрутки — текст под них не заезжает */
  padding-inline: 48px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Карточка отзыва (reviewcard из kit): белая с фото-текстурой 15% */
.reviewcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--x1);
  min-height: 535px;
  padding: var(--x2) 30px;
  background: var(--bg---white);
  border-radius: var(--un-unit);
  overflow: clip;
  text-align: center;
  color: var(--text---dark-terraco);
}

.reviewcard__bg {
  position: absolute;
  inset: 0;
}

.reviewcard__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.reviewcard__title,
.reviewcard__text,
.reviewcard__author {
  position: relative; /* поверх фоновой текстуры */
}

.reviewcard__title {
  margin: 0;
  font: var(--font-quote);
}

.reviewcard__text p {
  margin: 0 0 var(--x05);
}

.reviewcard__text p:last-child {
  margin-bottom: 0;
}

.reviewcard__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x05);
}

.reviewcard__avatar {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: var(--text---dark-terraco);
  overflow: clip;
}

.reviewcard__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviewcard__name {
  font: var(--font-accent);
  color: var(--text---dark-terraco);
}

/* ---------- 6. Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px var(--x1);
  background: var(--text---dark-terraco);
  color: var(--bg---white);
  text-align: center;
}

.footer__more {
  font: var(--font-h3);
  text-transform: uppercase;
  color: var(--bg---white);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__more-u {
  text-decoration: underline;
  text-underline-position: from-font;
}

.footer__more:hover,
.footer__more:focus-visible {
  color: var(--branding---clay);
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--x05);
  font: 700 16px/1.2 var(--font-mono);
  text-transform: uppercase;
  color: var(--branding---clay);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--bg---white);
}

/* стрелка ↗ у соцссылок (обе версии) */
.footer__link svg {
  display: block;
  width: 10px;
  height: 10px;
}

.footer__copy {
  margin: 0;
  font: var(--font-body);
}

/* ---------- Страница 404 ---------- */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--x1);
  min-height: 100svh;
  padding: var(--x2) var(--x1);
  background: var(--branding---clay);
  text-align: center;
}

.notfound__logo {
  width: 260px;
  height: 100px;
  margin-bottom: var(--x1);
}

.notfound__title {
  margin: 0;
  font: var(--font-h2);
  text-transform: uppercase;
  color: var(--text---dark-terraco);
}

.notfound__text {
  margin: 0;
  max-width: 420px;
  color: var(--text---dark-terraco);
}

.notfound__lang {
  margin: 0;
  font: var(--font-m-comment);
}

.notfound__lang a {
  color: var(--text---dark-terraco);
}

/* ---------- Уважение к reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Десктоп (≥900px) ---------- */

@media (min-width: 900px) {
  :root {
    --margin-h: 200px;
  }

  .desktop-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  /* Меню — только мобильное */
  .menu {
    display: none;
  }

  /* --- Hero: шапка прозрачная поверх фото, key-блок по центру --- */

  .hero {
    justify-content: center;
  }

  .hero__bg img {
    object-position: 50% 38%; /* кроп из макета: смещение вверх от центра */
  }

  .hero__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: none;
    padding-right: 0;
  }

  .hero__lang {
    display: flex;
  }

  .hero__key {
    height: 300px;
    justify-content: flex-end;
    margin-top: 0;
    /* поля сжимаются пропорционально ниже 1621px (200/1621 ≈ 12.3vw) */
    padding: 0 min(var(--margin-h), 12.3vw);
  }

  .hero__moto {
    gap: var(--x05);
  }

  .hero__title {
    font: var(--font-hero);
    /* 96px на макетной ширине 1621px, ниже — плавное сжатие (96/1621 ≈ 5.9vw) */
    font-size: min(96px, 5.9vw);
    white-space: nowrap;
  }

  .hero__comment {
    font: var(--font-hero-comment);
    font-size: min(32px, 3.2vw);
  }

  .hero__comment::before {
    content: none; /* на десктопе сноска без ведущей точки */
  }

  /* --- Portfolio: десктоп --- */

  .portfolio {
    padding: var(--x5) 0 var(--x4);
  }

  .portfolio__title {
    max-width: 600px;
  }

  .portfolio__desc {
    max-width: 670px;
  }

  /* Первый экран секции: текст + меню занимают 100svh —
     свободное место уходит в отступ вокруг текста
     (вычитаются: паддинг секции x5, gap x4 и карточка меню) */
  .portfolio__text {
    min-height: calc(100svh - var(--x5) - var(--x4) - min(260px, 19vw));
    justify-content: center;
  }

  /* Меню кейсов: ряд 4×260; при сжатии карточки в приоритете —
     поля и зазоры ужимаются сильнее, чтобы фото и подписи читались */
  .shoots__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(var(--x2), 2.5vw);
    padding-inline: min(var(--margin-h), 5vw);
  }

  .shoots__menu .photocard {
    width: min(260px, 19vw);
    height: min(260px, 19vw);
    flex: none;
    transition: transform 0.2s;
  }

  .photocard__name {
    font: var(--font-accent);
    white-space: nowrap;
  }

  /* сжатие подписи — только в карточках меню, полароид about не трогаем */
  .shoots__menu .photocard__name {
    font-size: min(36px, 2.6vw);
  }

  .photocard__place {
    font: var(--font-body);
    white-space: nowrap;
  }

  .btn-wa {
    font: var(--font-body);
  }

  /* Рукописная цена на десктопе — в зазоре над зачёркнутой */
  .textcard__new {
    left: calc(50% - 110px);
    bottom: 80px;
  }

  .prices__note {
    font: var(--font-body);
  }

  /* --- Reviews: три карточки с editorial-разбросом --- */

  .reviews {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 50svh;
    /* снизу запас больше: сдвинутая вторая карточка не касается футера */
    padding: var(--x2) min(var(--margin-h), 12.3vw) var(--x4);
    background: var(--branding---clay);
  }

  .reviews .reviewcard {
    flex: 0 0 min(380px, 27vw);
    /* карточки лежат внахлёст — мягкая тень отделяет их друг от друга */
    box-shadow: 0 10px 28px rgba(74, 70, 56, 0.22);
  }

  .reviews .reviewcard--r2 {
    z-index: 1; /* слегка накрывает первую, как в макете */
    margin-left: -36px;
    transform: translateY(16px) rotate(-5deg); /* сдвиг как в макете (~18px) */
  }

  .reviews .reviewcard--r3 {
    transform: translateY(-12px) rotate(4deg);
  }

  /* --- Footer: десктоп --- */

  .footer {
    gap: var(--x1);
    padding: var(--x2) min(var(--margin-h), 12.3vw);
  }

  .footer__links {
    gap: var(--x2);
  }

  .footer__link {
    font: var(--font-h3);
  }

  .footer__copy-br {
    display: none; /* на десктопе копирайт одной строкой */
  }

  /* Активная: приподнятость pb x4 моделируем сдвигом вверх,
     угол индивидуальный на кейс (восстановлен из bbox вариантов kit) */
  [data-active-shoot="1"] .photocard[data-shoot="1"] {
    transform: translateY(calc(var(--x4) / -2)) rotate(-5deg);
  }

  [data-active-shoot="2"] .photocard[data-shoot="2"] {
    transform: translateY(calc(var(--x4) / -2)) rotate(3deg);
  }

  [data-active-shoot="3"] .photocard[data-shoot="3"] {
    transform: translateY(calc(var(--x4) / -2)) rotate(5deg);
  }

  [data-active-shoot="4"] .photocard[data-shoot="4"] {
    transform: translateY(calc(var(--x4) / -2)) rotate(9deg);
  }

  /* Галерея: details full-bleed + editorial-строки.
     Перекрытие с деталями создают только «торчащие» кадры (.gcell--tall),
     как в макете; сама строка на детали не наезжает */
  .gallery-d {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: min(85px, 5.2vw);
    min-height: 90svh;
  }

  .gallery-d__details {
    height: min(465px, 28.7vw);
  }

  .gallery-d__details .dcell {
    height: 100%;
  }

  .gallery-d__main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--x1);
    align-items: center;
    padding-inline: min(var(--margin-h), 12.3vw);
  }

  .gallery-d__line {
    display: flex;
    justify-content: center;
    gap: var(--x1);
    width: 100%;
  }

  .gallery-d__line--first {
    align-items: flex-end;
  }

  .gallery-d__line--second {
    align-items: flex-start;
  }

  .gcell {
    flex-shrink: 0;
  }

  .gcell__img {
    position: relative;
    width: 100%;
    overflow: clip;
  }

  .gcell__comment {
    max-width: 100%; /* реальные тексты длиннее макетных плейсхолдеров — переносим внутри ячейки */
    margin: min(51px, 3vw) 0 0;
    font: var(--font-accent);
    color: var(--accent----crayola-matte);
    text-align: right;
    transform: rotate(var(--angle, -7deg));
  }

  /* Кейс 3: заметка над картинкой (зазор пропорционален макетным 93px) */
  .gcell--stack {
    display: flex;
    flex-direction: column;
    gap: min(93px, 5.7vw);
  }

  .gcell--stack .gcell__comment {
    margin: 0;
  }

  /* Кейс 4: две картинки одна под другой */
  .gcell--twin {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--x1);
  }

  /* Кейс 2: заметка слева от картинки во второй строке */
  .gcell--c24 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--x05);
  }

  /* Кейс 2: заметка узкой колонкой слева от кадра, как в макете (~190px) */
  .gcell--c24 .gcell__comment {
    flex: none;
    max-width: min(192px, 16vw);
    margin: 0 0 min(40px, 3vw);
    text-align: center;
  }

  /* Кейс 1, ячейка с заметкой: фото прижато к верху строки, заметка к низу */
  .gcell--commented {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* «Торчащие» кадры: полный кадр выступает вверх за строку (кейсы 2, 3) */
  .gcell--tall {
    position: relative;
    align-self: stretch;
  }

  .gcell--tall .gcell__img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  /* Кадр, выступающий вниз за строку (кейс 1, Вика) */
  .gcell--deep {
    position: relative;
    align-self: stretch;
  }

  .gcell--deep .gcell__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* --- About: текст слева, вертикальный полароид справа --- */

  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50svh;
    padding: var(--x5) min(var(--margin-h), 12.3vw);
  }

  .about__line {
    flex-direction: row;
    align-items: center;
    gap: min(var(--x4), 5vw);
  }

  .about__polaroid {
    order: 2;
    flex: none;
    width: min(330px, 25vw);
    height: auto;
    aspect-ratio: 330 / 500;
  }

  .about__text {
    flex: 0 1 670px;
    gap: var(--x1);
    padding-inline: 0;
  }

  .about__title {
    font: var(--font-h2);
    text-transform: uppercase;
    text-align: left;
  }

  .about__sign {
    opacity: 0.8;
  }

  /* --- Prices: полоса выше, заголовок Hero, карточки в ряд --- */

  .prices__photo {
    height: min(575px, 35.5vw);
  }

  .prices__content {
    gap: var(--x4);
    padding: var(--x5) min(var(--margin-h), 12.3vw);
  }

  .prices__title {
    font: var(--font-hero);
    font-size: min(96px, 5.9vw);
    white-space: nowrap;
  }

  .prices__title-br {
    display: none; /* на десктопе заголовок одной строкой */
  }

  .prices__cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--x1);
  }

  .textcard {
    flex: 1 0 0;
    min-width: 0;
  }

  /* Маркер над второй карточкой: крупнее и выше */
  .prices__marker {
    top: -52px;
    left: 52%;
  }

  .prices__marker-text {
    font: var(--font-accent);
  }

  .prices__marker-arrow {
    width: 44px;
  }
}