/* ============================================================
   Artgallery by Valery — дизайн-система прототипа
   Палитра, типографика, фактуры, золотые линии, сетки
   ============================================================ */

/* Kalissa лежит файлом в проекте: в Google Fonts её нет.
   Формат OTF, а не woff2 — конвертировать нечем. Файл тяжёлый, 808 КБ,
   поэтому swap обязателен: надписи рисуются запасным шрифтом и
   заменяются, когда файл дойдёт, а не пропадают на это время */
@font-face {
  font-family: "Kalissa";
  src: url("../fonts/Kalissa.otf") format("opentype");
  font-display: swap;
}

/* Nicoletta Script SHA — рукописный шрифт русской версии. Взят потому,
   что в него добавлена кириллица: у большинства каллиграфических
   шрифтов её нет. Лежит файлом в проекте, весит 64 КБ */
@font-face {
  font-family: "Nicoletta Script";
  src: url("../fonts/NicolettaScriptSHA.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Тёмные тона — первый экран и блок процесса */
  --ink:        #241f1a;
  --dark:       #322c25;
  --dark-2:     #3d372d;
  /* Тон снят с оливкового листа в блоке «обо мне»: он идёт вплотную
     к блоку «почему выбирают», и разные оливы давали ступеньку.
     В это же значение растворяется низ полосы с рваной кромкой */
  --olive:      #5c564a;
  --olive-deep: #423f31;

  /* Светлые тона — бумага, холст, галерея */
  --milk:       #faf7f1;
  /* Тон бумаги снят пипеткой с нижней кромки кадра первого экрана (#d9d0c8).
     Благодаря этому второй блок продолжает первый без видимого стыка */
  --paper:      #d9d0c8;
  --paper-2:    #d3c8bb;
  --sand:       #e2d8c7;
  --taupe:      #8d8274;
  --taupe-soft: #a89d8d;

  /* Золото */
  --gold:       #b08d4b;
  --gold-warm:  #c9a969;
  --gold-pale:  #e3cfa4;

  --text-dark:  #2b251f;
  --text-mid:   #5f574c;
  --text-light: #f0eade;
  --text-dim:   #cec4b4;

  /* Сайт только на латинице (английский и испанский), поэтому шрифты
     подобраны под макет без оглядки на кириллицу */
  --serif:  "Cormorant Garamond", Georgia, serif;
  --script: "Kalissa", "Style Script", cursive;
  --sans:   "Jost", -apple-system, "Segoe UI", sans-serif;

  /* Шрифт прописных надписей — единственное место, где он задаётся.
     --caps-display — крупные заголовки, --caps — мелкие надписи интерфейса.
     Смена шрифта капса делается здесь, а не по всему файлу. */
  --caps-display: var(--serif);
  --caps:         var(--sans);

  /* Общий множитель кегля рукописных строк. Разные каллиграфические шрифты
     рисуют буквы очень по-разному — этой ручкой они подгоняются разом.
     Замер: строчная «o» при кегле 100px у Kalissa 43px, у обычной антиквы
     40px, у прежней Brittany Signature было 26px. Поэтому множитель
     опущен с 1,45 до 0,88: иначе прописные строки выросли бы вдвое
     против остальной вёрстки, которая под тот размер и настроена */
  --script-scale: .88;

  /* Сила бумажной фактуры. Снимок приведён к нейтральному серому и наложен
     режимом soft-light, поэтому он добавляет рельеф, но не сдвигает тон:
     цвет фона остаётся ровно таким, как задан в --paper */
  --tex-strength: .7;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1440px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Кириллицы в Kalissa нет: русские рукописные строки ею просто не
   наберутся. Для русского берём Nicoletta Script SHA — её выбрала Лера.

   Множитель кегля свой и заметно выше английского. Замер при кегле 100:
   строчная «о» у Kalissa 46 точек, у Nicoletta Script 23 — ровно вдвое
   ниже, у неё крупные выносные и мелкое туловище. Множитель 1,5 сводит
   рост строчных к одному с английским: 22 x 0,88 x 0,46 = 8 точек
   против 22 x 1,5 x 0,23 = 8 точек. Сверено и на глаз рядом с Kalissa.
   Блок стоит после :root и меняет только эти две переменные, всё
   остальное наследуется */
html[lang="ru"] {
  --script: "Nicoletta Script", cursive;
  --script-scale: 1.5;
}

/* ---------- база ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- типографика ---------- */
/* Глубокое золото, а не --gold: на бумаге светлое давало контраст 2,0
   при норме 4,5. Тёмные блоки берут своё бледное золото ниже */
.script {
  font-family: var(--script);
  font-size: calc(clamp(21px, 2.3vw, 32px) * var(--script-scale));
  font-weight: 400;
  color: #8f7136;
  line-height: 1.2;
}

.h1 {
  font-family: var(--caps-display);
  font-weight: 400;
  font-size: clamp(37px, 5.7vw, 83px);
  line-height: 1.06;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}

.h2 {
  font-family: var(--caps-display);
  font-weight: 400;
  font-size: clamp(29px, 3.7vw, 55px);
  line-height: 1.14;
  letter-spacing: .055em;
  text-transform: uppercase;
  margin: 0 0 .4em;
}

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.85vw, 26px);
  line-height: 1.25;
  letter-spacing: .03em;
  margin: 0 0 .5em;
}

.lead {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--text-mid);
}

.eyebrow {
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ---------- кнопки ----------
   Никаких плашек: подпись капсом, тонкая золотая черта под ней и точка сбоку */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 2px 10px;
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dark);
  border-bottom: 1px solid rgba(176, 141, 75, .5);
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover { color: var(--gold); border-color: var(--gold); }

/* точка — вместо стрелки; разметку не трогаем, переопределяем сам элемент */
.btn .arrow {
  flex: 0 0 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: none;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.btn .arrow::before, .btn .arrow::after { content: none; }
.btn:hover .arrow { transform: translateX(5px) scale(1.5); }

/* главный призыв: черта плотнее, точка крупнее */
.btn--solid { color: var(--text-dark); border-bottom-width: 1.5px; border-color: var(--gold); }
.btn--solid .arrow { width: 7px; height: 7px; flex-basis: 7px; }

/* ---------- золотой овал ----------
   Один вид на весь сайт: заказ на первом экране, покупка и отправка
   заявки в окне работы, заказ в окне с ценами и в блоке индивидуального
   заказа. Раньше эти четыре кнопки были прямоугольниками с рамкой
   и полупрозрачной заливкой, Лера попросила овалы, 28 августа 2026.

   Заливку несёт span, а не сама кнопка. Так золотая точка остаётся
   снаружи овала и видна: внутри золотого овала золотая точка пропала бы,
   а перекрашивать её пришлось бы отдельным правилом в каждом месте */
.btn--pill,
.lb__actions .btn--solid,
.commission__cta .btn--solid,
.pm__actions .btn--solid {
  padding: 0;
  gap: 12px;
  border-bottom: 0;
}
.btn--pill > span,
.lb__actions .btn--solid > span,
.commission__cta .btn--solid > span,
.pm__actions .btn--solid > span {
  padding: 13px 26px;
  border-radius: 99px;
  background: var(--gold-warm);
  color: var(--milk);
  transition: background .45s var(--ease);
}
.btn--pill:hover > span,
.lb__actions .btn--solid:hover > span,
.commission__cta .btn--solid:hover > span,
.pm__actions .btn--solid:hover > span { background: var(--gold); }

.btn--ghost { color: var(--text-mid); }

.btn--onDark { color: var(--text-light); border-color: rgba(227, 207, 164, .5); }
.btn--onDark:hover { color: var(--gold-pale); border-color: var(--gold-pale); }
.btn--onDark .arrow { background: var(--gold-warm); }

.hero__btns .btn, .outro__btns .btn { color: var(--milk); border-color: rgba(227, 207, 164, .55); }
.hero__btns .btn:hover, .outro__btns .btn:hover { color: var(--gold-pale); border-color: var(--gold-pale); }
.hero__btns .btn .arrow, .outro__btns .btn .arrow { background: var(--gold-warm); }

/* Стрелка рисованная, та же кривая, что указывает на снимки в блоке
   «как рождается картина». Зеркалить её не надо: наконечник у неё и так
   внизу слева, то есть смотрит на кнопку, стоящую левее. Зеркальная
   копия разворачивала остриё в пустоту справа.

   Наконечник лежит у нижнего края рисунка, поэтому вся стрелка поднята:
   иначе остриё приходится ниже овала, а не в его середину */
.hero__btns .btn--pill .btn__draw {
  flex: 0 0 clamp(56px, 5.4vw, 80px);
  width: clamp(56px, 5.4vw, 80px);
  transform: rotate(-6deg) translateY(-28%);
  transition: transform .5s var(--ease);
}
.hero__btns .btn--pill .btn__draw path { stroke: var(--gold-warm); stroke-width: 2.4; }
.hero__btns .btn--pill:hover .btn__draw { transform: rotate(-6deg) translateY(-28%) translateX(-4px); }

/* На узком экране стрелка съедает ширину, а строка «заказать свою картину»
   и так длинная: овал остаётся, стрелка уходит */
@media (max-width: 620px) {
  .hero__btns .btn--pill .btn__draw { display: none; }
  .hero__btns .btn--pill span { padding: 12px 22px; }
}

/* ---------- фактура бумаги и холста ----------
   Основа — снятая фактура бумаги assets/img/tex/paper.jpg. Она собрана
   в зеркальную плитку 1448×1086, поэтому повторяется без видимых стыков.
   Поверх неё остаётся мелкое зерно из SVG-шума: фотография даёт крупные
   пятна и волокно, шум — тонкую крупу; вместе читается как настоящий лист.
   Силу фактуры на всём сайте задаёт --tex-strength в :root */
.tex { position: relative; overflow: hidden; --par: 0px; }
.tex::before {
  content: "";
  position: absolute; inset: -14% 0;     /* запас, чтобы параллакс не обнажал края */
  pointer-events: none;
  background-image: url("../img/tex/paper.jpg");
  background-size: 1440px auto;
  background-repeat: repeat;
  opacity: var(--tex-strength);
  mix-blend-mode: soft-light;
  transform: translate3d(0, var(--par), 0);
  will-change: transform;
  z-index: 0;
}
/* второй слой — длинные волокна бумаги поверх зерна */
.tex::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--fibre);
  opacity: .3;
  mix-blend-mode: multiply;
  z-index: 0;
}
.tex > * { position: relative; z-index: 1; }

/* Холст — своя фактура, без бумажного снимка. Размер плитки возвращаем
   к шумовому, иначе он унаследует 1448px от правила выше */
.tex--canvas::before {
  background-image: var(--canvas);
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .5;
}
.tex--canvas::after { opacity: .16; }
.tex--soft::before { opacity: var(--tex-strength); }
/* Слой волокон выключен на бумажных блоках: это шум с частотой 0.005 по X
   и 0.26 по Y, то есть намеренно растянутый по горизонтали. Под плотной
   фактурой он читался полосами поперёк экрана. Рельеф теперь даёт снимок */
.tex--soft::after { content: none; }

/* Бумажный разрыв между галереей и блоком «обо мне». В саму картинку
   впечатаны оба фона: выше полосы белый, ниже тёмный. Смена цвета
   приходится на 52% высоты — там полоса кроет ширину целиком (замер:
   сплошные строки 500..512 исходника), поэтому стык не виден. Тем же
   переходом залиты поля по бокам на широких экранах.
   Высота считается от ширины: пропорция полосы 11,39% */
.paperrip {
  position: relative;   /* нужен золотым нитям, которые идут сквозь полосу */
  /* Тот же расчёт от собственной ширины, что и у полосы с каллиграфией:
     от 100vw высота выходила на пару точек больше картинки, и снизу
     показывалась полоска градиента. Выше 1536 картинка не растёт,
     поэтому высота упирается в max-height */
  aspect-ratio: 1536 / 175;
  max-height: 175px;
  background:
    url("../img/tex/paper-rip.jpg") center center / min(100%, 1536px) 100% no-repeat,
    linear-gradient(#fff 0 52%, #544a40 52% 100%);
}

/* Золотая линия как граница между блоками с разными фонами.
   К краям экрана тает, в середине ярче — чтобы читалась как росчерк,
   а не как чертёжная линейка */
.goldrule {
  height: 2px;
  background: linear-gradient(90deg,
    rgba(176, 141, 75, 0) 0%,
    var(--gold) 16%,
    var(--gold-pale) 50%,
    var(--gold) 84%,
    rgba(176, 141, 75, 0) 100%);
}

/* ---------- золотые линии ---------- */
/* Жилы всегда под содержимым: z-index 0 против 1 у текста. Иначе линия
   проходила поверх абзацев и перечёркивала их */
.goldline {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
/* Нить, идущая ПОВЕРХ содержимого. Ставится только там, где под ней
   нет текста — например над лентой снимков клиентов: мазок по фотографиям
   читается как движение кисти. Текст такие нити не пересекают */
.goldline--over { z-index: 4; }

/* Содержимое любой секции — над жилами. Раньше это стояло лишь у трёх
   блоков; с широкой волной линия пошла бы поверх текста остальных */
section > .wrap { position: relative; z-index: 1; }

/* Проявляются при входе блока в кадр — прозрачностью, а не прорисовкой:
   штриховка занята под переменную толщину */
.ink-line { opacity: 0; transition: opacity 1.8s var(--ease); }
.ink-line.is-in { opacity: 1; }

/* Движение кисти: утолщение медленно едет вдоль нити. Границы хода
   задаёт скрипт в переменных --от и --до, они свои у каждой нити,
   потому что зависят от её длины */
@keyframes goldflow {
  from { stroke-dashoffset: var(--от); }
  to   { stroke-dashoffset: var(--до); }
}
/* Движение только у видимых нитей: класс is-live ставит наблюдатель
   в скрипте. Иначе сорок линий перерисовываются каждый кадр по всей
   странице, даже за экраном */
.goldline__flow { animation: goldflow 30s linear infinite; animation-play-state: paused; }
.goldline.is-live .goldline__flow { animation-play-state: running; }
/* Золотые жилы: на макете это заметные линии, а не еле видимые волоски */
/* Базовый слой — самый тонкий, он идёт по всей длине и на концах жила
   состоит только из него. Утолщения накладывает скрипт */
.goldline path {
  fill: none;
  stroke: var(--gold);
  stroke-width: .75;
  opacity: .62;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* толщина не зависит от растяжения svg */
  /* мягкий ореол вокруг линии — след кисти, а не векторный контур */
  filter: drop-shadow(0 0 3px rgba(176, 141, 75, .34));
}
.goldline--pale path { stroke: var(--gold-warm); opacity: .5; }
.goldline path.thin { opacity: .42; }

.rule {
  width: 64px; height: 1px;
  background: var(--gold);
  opacity: .6;
  margin: 22px 0;
}

/* ---------- рукописная подпись со стрелкой ---------- */
.pointer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: clamp(16px, 2.4vw, 38px);
  padding-right: clamp(0px, 4vw, 60px);
}
.pointer--right { align-self: flex-end; margin-left: auto; }
/* Пометки есть не на всех языках. Своё правило нужно потому,
   что у .pointer задан display и он перебивает атрибут hidden */
.pointer[hidden] { display: none; }
.pointer--left {
  align-items: flex-start;
  margin: clamp(6px, 1.2vw, 16px) 0 clamp(-34px, -2.4vw, -12px) clamp(0px, 6vw, 90px);
  padding-right: 0;
}
.pointer--left .handnote { text-align: left; transform: rotate(3deg); }
.pointer__arrow--flip { transform: rotate(-6deg); }
.pointer .handnote {
  transform: rotate(-4.5deg);
  text-align: right;
  line-height: 1.15;
}
.pointer__arrow {
  width: clamp(76px, 8vw, 132px);
  height: auto;
  transform: rotate(4deg);
}
.pointer__arrow path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   1. Шапка
   ============================================================ */
.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  transition: background .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.head--stuck {
  background: rgba(217, 208, 200, .93);   /* тот же тон, что --paper */
  backdrop-filter: blur(14px);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 1px 0 rgba(43, 37, 31, .08);
}

.head__logo { display: flex; align-items: center; gap: 12px; }
.head__logo img { width: 30px; height: auto; transition: filter .6s var(--ease); }
/* Словесная часть логотипа набирается живым текстом, а не берётся
   картинкой: в исходном файле логотип всего 190 точек шириной, при
   выводе в шапке он бы мылил. Начертание подогнано под файл Леры:
   плотный гротеск, разрядка почти нулевая, три строки с воздухом */
.head__logo span {
  font-family: var(--caps);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.5; color: var(--text-light);
}
.head--stuck .head__logo img { filter: none; }
.head--stuck .head__logo span { color: var(--text-dark); }

/* Меню по центру шапки, как на макете: логотип слева, ссылки посередине,
   рукописная строка и языки справа */
.head__nav {
  display: flex; gap: clamp(18px, 2.2vw, 40px);
  position: absolute; left: 50%; transform: translateX(-50%);
}
/* Раскрытое меню на телефоне. Классом, а не стилями из скрипта: у самой
   .head__nav стоит transform: translateX(-50%) для центровки на большом
   экране, и он сдвигал раскрытую панель на пол-экрана влево. Виден был
   только её правый край — пустой бежевый прямоугольник */
.head__nav.head__nav--open {
  display: flex;
  position: fixed;
  inset: 68px 0 auto 0;
  transform: none;
  flex-direction: column;
  gap: 14px;
  padding: 26px var(--gutter) 32px;
  background: var(--paper);
  box-shadow: 0 20px 40px rgba(43, 37, 31, .14);
}
.head__nav.head__nav--open a { color: var(--text-mid); }

/* Значки соцсетей в меню. Видны только в раскрытом меню на телефоне:
   в шапке на большом экране меню идёт одной строкой, и там они лишние,
   те же ссылки есть в блоке обо мне и в подвале */
/* Двумя классами намеренно: правило .iconrow с display:flex стоит ниже
   по файлу, и одиночный класс оно перебивало, значки торчали в шапке
   на большом экране */
.head__nav .head__social { display: none; }
.head__nav.head__nav--open .head__social {
  display: flex;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid rgba(141, 130, 116, .22);
}
/* В меню знаки залиты золотом, а сам знак белый: меню лежит на бумаге,
   и обведённый золотой кружок по бумаге читался слабо. На тёмных блоках
   (обо мне, финал) значки остаются обведёнными, там фон делает контраст
   сам */
.head__nav.head__nav--open .head__social .iconrow__link {
  width: 42px; height: 42px;
  background: var(--gold-warm);
  border-color: var(--gold-warm);
  color: var(--milk);
}
.head__nav.head__nav--open .head__social .iconrow__link:hover {
  background: var(--gold); border-color: var(--gold); color: var(--milk);
}
.head__nav a {
  font-family: var(--caps);
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-light);
  position: relative; padding-bottom: 4px;
  white-space: nowrap;
  transition: color .5s var(--ease);
}
.head--stuck .head__nav a { color: var(--text-mid); }
.head__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.head__nav a:hover::after { transform: scaleX(1); }
.head__nav a:hover { color: var(--gold); }

.head__cta { display: flex; align-items: center; gap: 18px; }
.head__script { font-family: var(--script); font-size: calc(22px * var(--script-scale)); color: var(--gold-warm); }
.head--stuck .head__script { color: var(--gold); }

.langs { display: flex; gap: 2px; align-items: center; }
/* touch-action: manipulation убирает ожидание двойного касания.
   Без него браузер держит нажатие до трети секунды, проверяя, не будет
   ли второго тапа для зума, и если палец за это время чуть сдвинулся
   при прокрутке, нажатие отменяется. Отсюда «иногда не срабатывает» */
.langs button {
  touch-action: manipulation;
  padding: 12px 13px;   /* палец: 44 на 43 */
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  color: var(--text-dim);
  border-radius: 2px;
  transition: color .4s var(--ease), background .4s var(--ease);
}
.langs button:hover { color: var(--gold-warm); }
.langs button.is-on { color: var(--ink); background: var(--gold-pale); }
.head--stuck .langs button { color: var(--taupe); }
.head--stuck .langs button:hover { color: var(--gold); }
.head--stuck .langs button.is-on { color: var(--milk); background: var(--gold); }

/* Кнопка меню 44 на 44: полоски рисуются внутри, но нажимать можно
   по всей площади — прежние 26 на 14 в палец не попадали */
.burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; touch-action: manipulation; }
.burger span {
  position: absolute; left: 9px; width: 26px; height: 1px;
  background: var(--text-light); transition: all .4s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.head--stuck .burger span { background: var(--text-dark); }

/* ============================================================
   2. Первый экран
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--dark);
  color: var(--text-light);
  overflow: hidden;
}
/* Первый экран целиком закрыт готовым кадром: в него уже вписаны золотая
   жила слева, каменный скол справа и рваная кромка снизу. Код-версии этих
   элементов на первом экране выключены ниже, чтобы не удваивались */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Кадр показывается как есть, без тонировки. Затемнение здесь было ошибкой:
   нижняя полоса попадала под градиент слева и снизу одновременно и темнела
   почти вдвое, хотя в исходнике бумага там светлая (#d9cfc7). Контраст
   текста и так в норме — стена под ним #6e6155, молочные буквы дают ~5,5:1 */
.hero__photo::after { content: none; }

/* Рваная кромка снизу уже нарисована в кадре — код-версию под первым
   экраном гасим, иначе получится две кромки подряд */

.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 var(--gutter);
}
.hero__col { max-width: 680px; padding-top: 60px; }
.hero__title { color: var(--milk); }
/* «ДЛЯ ИНТЕРЬЕРА» на четыре точки шире английской «YOUR INTERIOR»
   и переносилось четвёртой строкой. Заголовок первого экрана
   на русском уменьшен на четыре процента: этого хватает, а разница
   в размере на глаз не читается */
html[lang="ru"] .hero__title { font-size: calc(clamp(37px, 5.7vw, 83px) * .96); }
/* «Contemporary» прописью над заголовком: золотом, своей строкой.
   text-transform снимается — .h1 переводит всё в капс, а рукописное
   слово должно остаться как написано */
.hero__title em {
  display: block;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: calc(.72em * var(--script-scale));
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-warm);
  margin-bottom: .06em;
}
/* Подпись под заголовком — мелкий капс в разрядку, минималистично */
.hero__sub {
  margin: 30px 0 46px;
  font-family: var(--caps);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--milk);
}
/* Призывы разведены: рядом они сливались в одну строку и читались
   как единый блок, а не как два разных действия */
.hero__btns { display: flex; flex-wrap: wrap; column-gap: clamp(26px, 5vw, 76px); row-gap: 20px; }

/* На макете «SCROLL» стоит столбиком: подпись, кружок, уходящая вниз нить */
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 42px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  font-family: var(--caps);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-dim);
}
.hero__scroll i {
  position: relative;
  display: block; width: 1px; height: 56px;
  background: linear-gradient(var(--gold-warm), transparent);
}
.hero__scroll i::before {
  content: "";
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--gold-warm);
}

/* ============================================================
   3. Избранное — коллаж
   ============================================================ */
/* Ровный бежевый фон с общей бумажной фактурой. Каллиграфия вынесена
   в отдельный блок ниже, поэтому подгонять высоту под картинку не нужно */
.collage {
  position: relative;
  background: var(--paper);
  /* Снизу почти без отступа: под блоком сразу идёт бумажная полоса
     с каллиграфией, пустое поле между ними было лишним */
  padding: clamp(40px, 4.4vw, 66px) 0 clamp(20px, 2.2vw, 32px);
}
/* Жилы уводим за текст: они декоративные и не должны спорить с надписями */
.collage .goldline { z-index: 0; }

/* ПК: слева текст, справа снимки. Выравнивание по центру по вертикали —
   так колонки уравновешивают друг друга, а не висят на верхнем крае */
/* Выравнивание по верху, а не по центру: колонка снимков выше текстовой,
   и при центрировании над текстом висела пустота в две сотни пикселей */
.collage__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(330px, 1.08fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: start;
}
.collage__text .h2 { font-size: clamp(28px, 3.1vw, 46px); }
.collage__text .lead {
  max-width: 440px;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
}
.collage__text .rule { margin-top: clamp(18px, 2.2vw, 30px); }

/* Три снимка веером: у каждого свой наклон и своя высота, соседние
   слегка заходят друг на друга — как разложенные на столе карточки */
.collage__media { display: flex; flex-direction: column; }
.collage__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.collage__photos > .polaroid:nth-child(1) {
  transform: rotate(-3.6deg);
  margin: 12px 0 0;
  z-index: 3;
}
.collage__photos > .polaroid:nth-child(2) {
  transform: rotate(2.8deg) translateY(30px);
  margin-left: clamp(-38px, -2.8vw, -14px);
  z-index: 2;
}
.collage__photos > .polaroid:nth-child(3) {
  transform: rotate(-1.4deg);
  margin-left: clamp(-32px, -2.4vw, -12px);
  z-index: 1;
}
/* Каждый кадр сохраняет свою пропорцию: квадратный остаётся квадратным.
   Общее правило .polaroid img режет всё под 4:5 — здесь оно снято */
.collage__photos .polaroid img { aspect-ratio: auto; }
.collage__photos .polaroid { padding: clamp(8px, .85vw, 13px); padding-bottom: clamp(32px, 3vw, 48px); }
/* Названия работ печатным шрифтом, а не прописью: это подпись-этикетка,
   рукописное начертание здесь спорило с самой пометкой от руки */
.collage__photos .polaroid figcaption {
  bottom: clamp(9px, 1vw, 15px);
  font-family: var(--caps);
  font-size: clamp(10px, .82vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.collage__photos .polaroid::before {
  top: clamp(-16px, -1.1vw, -10px);
  width: clamp(56px, 5.2vw, 88px);
  height: clamp(18px, 1.8vw, 28px);
}
/* Раскладка сетки: текст слева сверху, снимки справа на всю высоту,
   пометка слева под текстом */
.collage__text  { grid-column: 1; grid-row: 1; }
.collage__media { grid-column: 2; grid-row: 1 / span 2; }
/* Пометка стоит в зазоре между текстом и снимками, у нижнего края снимков.
   Стрелка выше надписи: в разметке она идёт последней, поэтому колонка
   развёрнута column-reverse. Разворот на 180° направляет её вправо-вверх,
   на снимки. Отсчёт от сетки: у неё нет анимации, положение стабильно */
/* Пометка встаёт в пустую ячейку справа от третьего снимка — на то
   место, где раньше стояла четвёртая карточка */
.collage__grid > .pointer {
  position: absolute;
  left: auto;
  right: 0;
  bottom: clamp(10px, 3vw, 28px);
  width: 46%;
  margin: 0;
  padding: 0;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.collage__grid > .pointer .pointer__arrow { transform: rotate(184deg); }

/* фотография как из альбома: белая рамка, лёгкий поворот, скотч.

   Тени под карточками нет намеренно. Она была, но на ровной бумаге
   повёрнутая карточка отбрасывала её косой полосой, и полоса читалась
   отдельной линией на фоне, а не тенью: сама тень мягкая и широкая,
   а её верхняя кромка вдоль наклонённого края выходила резкой.
   Карточка и без тени отделяется от фона: молочная бумага на бежевой.
   Возвращать тень не надо, Лера сняла её 28 августа 2026 */
.polaroid {
  position: relative;
  margin: 0;                 /* у figure свой отступ по умолчанию — он съедал ширину колонки */
  background: #fdfbf7;
  padding: clamp(10px, 1.1vw, 17px);
  padding-bottom: clamp(46px, 4.4vw, 74px);
  transition: transform .8s var(--ease);
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.3vw, 22px);
  text-align: center;
  font-family: var(--script);
  font-size: calc(clamp(17px, 1.7vw, 26px) * var(--script-scale));
  color: var(--taupe);
}
.polaroid::before {  /* полоска скотча */
  content: "";
  position: absolute; top: clamp(-22px, -1.6vw, -14px); left: 50%;
  width: clamp(88px, 9vw, 140px);
  height: clamp(28px, 2.6vw, 42px);
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(105deg, rgba(226,216,199,.75), rgba(240,233,220,.55));
  border-left: 1px solid rgba(255,255,255,.5);
  /* Ни тени, ни тёмной кромки. Скотч тут почти одного тона с бумагой фона,
     поэтому от него оставалась видна только тень, и над каждым снимком
     висела косая линия без предмета, который её отбрасывает */
}
/* карточки заходят друг на друга — как разложенные на столе снимки */
.polaroid:nth-child(1) { transform: rotate(-2.6deg); z-index: 3; }
.polaroid:nth-child(2) {
  transform: rotate(1.8deg) translateY(clamp(26px, 4vw, 58px));
  margin-left: clamp(-46px, -3.4vw, -18px);
  z-index: 2;
}
.polaroid:nth-child(3) {
  transform: rotate(-1.2deg) translateY(clamp(8px, 1.4vw, 20px));
  margin-left: clamp(-38px, -2.8vw, -14px);
  z-index: 1;
}
/* На наведении карточка распрямляется и чуть приподнимается. Тени здесь
   тоже нет: она вернула бы ту же косую полосу, только сильнее */
.polaroid:hover { transform: rotate(0) translateY(-8px); z-index: 5; }

.handnote {
  white-space: pre-line;   /* перенос задаётся в текстах, а не тегом в разметке */
  font-family: var(--script);
  font-size: calc(clamp(19px, 1.7vw, 26px) * var(--script-scale));
  color: var(--taupe);
  line-height: 1.45;   /* росчерки каллиграфии высокие: при 1.25 строки наезжали */
}

/* ============================================================
   4. Брендовая полоса
   ============================================================ */
/* Брендовая полоса — снимок оторванного листа с каллиграфией.
   Бежевая подложка впечатана в саму картинку тем же тоном, что --paper,
   поэтому её края растворяются в фоне блока и рамки не видно.
   Высота считается от ширины: пропорция снимка 26,3%. Шире 1536px
   картинка не растягивается, поля добираются цветом */
/* В самой полосе теперь впечатан переход: выше неё бежевый, как у блока
   с кадрами, ниже белый, как у галереи. Смена цвета спрятана под сплошной
   частью полосы. Тем же градиентом залиты поля по бокам на широких экранах */
/* Полоса лежит на ровной бумаге того же тона, что блок выше. Переход
   к белой галерее делает рваная кромка под блоком, а не впечатанный
   в картинку цвет — иначе на широком экране, где полоса не достаёт до
   краёв, граница цветов вылезала бы сбоку от неё */
.bandline {
  position: relative;
  /* Один и тот же кадр на всех экранах: в него впечатаны оба соседних
     фона — бежевый блока выше сверху и белый галереи снизу. Отдельной
     подложки под полосой нет намеренно: раньше здесь стоял свой бежевый
     #eee5da, и полоса читалась третьим цветом между двумя другими.
     Высота от собственной ширины: в 100vw входит полоса прокрутки */
  aspect-ratio: 2172 / 500;
  background: url("../img/tex/band-rip.jpg") center center / 100% 100% no-repeat;
  padding: 0;
  overflow: hidden;
}
/* На широком экране полоса читается тоньше: к бокам картинки дорисована
   только бежевая подложка, сама полоса и надпись не тронуты — те же
   пиксели, тот же масштаб, по центру. За счёт более широкой картинки
   пропорция стала 15,21% вместо 26,3% */
/* Горизонтальный экран: полоса во всю ширину, оба соседних фона впечатаны
   в саму картинку — бежевый блока выше сверху, белый галереи снизу.
   Смена цвета спрятана под сплошной частью полосы (строки 248..515
   исходника), поэтому границы не видно. Кромки кодом здесь не нужны */
/* Надпись теперь нарисована в картинке. Текст оставлен для читалок
   с экрана и поиска, но убран с глаз */
.bandline__text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   5. Обо мне
   ============================================================ */
/* Тёмно-оливковый лист вместо молочного фона. Блок стоит между светлой
   галереей и оливковым «почему выбирают» и связывает их по тону.
   Подложка того же цвета, что лист: его рваные кромки ложатся на неё
   незаметно, когда кадр обрезается под высоту блока */
/* Фон собран градиентом в тонах стены с первого экрана: там она тёмная
   по краям (#5c5146) и светлеет к центру (#87796c). Светлое пятно уведено
   влево, под фотографию: текст в этом блоке стоит справа, и на светлом
   он потерял бы контраст.
   Верхние 96px выровнены в ровный #544a40 — этим же цветом закрашена
   бумажная кромка сверху, иначе она не сошлась бы с фоном по ширине */
.about {
  position: relative;
  background:
    linear-gradient(#544a40 0, rgba(84, 74, 64, 0) 96px),
    linear-gradient(to top, #524940 0, rgba(82, 73, 64, 0) 96px),
    radial-gradient(118% 104% at 24% 46%, #7b6e61 0%, #63574c 48%, #524940 100%);
  color: var(--text-light);
  padding: clamp(74px, 10vw, 150px) 0 clamp(64px, 7vw, 104px);
}
/* Мелкое зерно поверх градиента: режим overlay, а не multiply — он почти
   не смещает тон, поэтому контраст текста остаётся расчётным */
.about::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .2;
  mix-blend-mode: overlay;
  z-index: 0;
}
.about .wrap { position: relative; z-index: 1; }
/* Текст на тёмном: светлые заголовки, приглушённые абзацы, золото в акцентах */
.about .script { color: var(--gold-pale); }
.about__sub { color: var(--milk); }
/* Светлее, чем --text-dim: на оливе тот давал контраст 3,9:1 при норме 4,5 */
.about .lead { color: #e4ded1; }
/* Через .about, иначе базовое правило .about__toggle идёт ниже в файле
   и перебивает: там золото для светлого фона, на оливе оно даёт 2,2:1 */
/* Золото светлее обычного: --gold-pale на оливе даёт 4,4:1, --gold-warm
   вовсе 2,2:1. Это осветлённый оттенок того же золота, ~4,6:1 */
.about .about__toggle { color: #e9d7b2; }
/* Через .about: базовое правило .about__sign стоит ниже в файле и иначе
   перебивает своим золотом, рассчитанным на светлый фон */
.about .about__sign { color: #e9d7b2; }
.about .social > a { color: #e4ded1; }   /* 11px в разрядку — нужен полный контраст */
.about .social > a:hover { color: var(--gold-pale); border-color: var(--gold-pale); }
.about__figure .handnote { background: none; padding: 0; color: var(--gold-pale); }
.about__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(34px, 5vw, 86px);
  align-items: start;
}
.about__figure { position: relative; }
.about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__figure .handnote {
  position: absolute; right: -14px; bottom: 26px;
  transform: rotate(-6deg);
  background: var(--milk); padding: 6px 12px;
}
.about__more { display: none; }
.about__more.is-open { display: block; }
.about__toggle {
  display: inline-block;
  position: relative;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-family: var(--caps);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
/* Невидимая площадка под палец, как у ссылок на соцсети */
.about__toggle::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
/* Главный посыл блока: крупно, с золотой подсветкой, которая тает вправо.
   Перенос строки задан в тексте, поэтому нужен pre-line */
/* Главный посыл блока. Первая строка антиквой, вторая прописью золотом —
   тот же приём, что в заголовке первого экрана. Сверху крупная золотая
   кавычка: она декоративная, поэтому нарисована псевдоэлементом и от
   выделения текста не мешает */
.about__quote {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--milk);
  margin: clamp(30px, 3.4vw, 48px) 0 clamp(26px, 3vw, 40px);
  padding: clamp(16px, 2vw, 26px) 0 clamp(16px, 2vw, 26px) clamp(30px, 3.6vw, 56px);
  border-left: 2px solid var(--gold-warm);
}
.about__quote::before {
  content: "\201C";
  position: absolute;
  left: clamp(6px, .9vw, 14px);
  top: clamp(-14px, -1.4vw, -6px);
  font-family: var(--serif);
  font-size: clamp(64px, 7vw, 108px);
  line-height: 1;
  color: var(--gold-warm);
  opacity: .34;
  pointer-events: none;
}
.about__quote em {
  display: block;
  margin-top: .12em;
  font-family: var(--script);
  font-style: normal;
  font-size: calc(1.32em * var(--script-scale));
  line-height: 1.05;
  color: var(--gold-warm);
}
.about__sign { font-family: var(--script); font-size: calc(32px * var(--script-scale)); color: var(--gold); margin-top: 26px; }

.social { display: flex; gap: 22px; align-items: center; margin-top: 26px; }
.social > a {
  position: relative;
  font-family: var(--caps);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mid); border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
/* Невидимая площадка под палец: строка каплом высотой 24 точки, а
   нажимать нужно по 46. Подчёркивание при этом остаётся у самого текста */
.social > a::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
.social > a:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   6. Галерея
   ============================================================ */
/* Чистый белый фон без фактуры и рваных кромок. Он продолжает белую
   нижнюю половину бумажной полосы выше и как будто выходит из-под неё */
.gallery {
  position: relative;
  overflow: hidden;              /* золотые жилы выходят за край секции, но не за экран */
  background: #fff;
  padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px);
}
.gallery .wrap { position: relative; z-index: 1; }
.gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 42px;
}

/* Названия коллекций — строка вкладок антиквой, а не плашки: это разделы
   каталога, а не фильтр по наличию. Плашками остались только «в наличии»
   и «продано», они переехали в .chips рядом с сортировкой */
.filters {
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 44px);
  margin: clamp(24px, 3vw, 40px) 0 clamp(22px, 2.6vw, 36px);
  border-bottom: 1px solid rgba(141, 130, 116, .22);
}
/* Названия коллекций — главный выбор в разделе, поэтому они крупнее
   и темнее служебных плашек: человек должен щёлкать по ним, а не по
   «available» и «sort» */
.filters button {
  padding: 0 0 14px;
  margin-bottom: -1px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 27px);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--text-dark);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.filters button:hover { color: #8f7136; border-bottom-color: rgba(176, 141, 75, .45); }
.filters button.is-on { color: var(--text-dark); border-bottom-color: var(--gold); border-bottom-width: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button {
  font-family: var(--caps);
  padding: 7px 13px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid rgba(141, 130, 116, .3);
  border-radius: 99px;
  transition: all .45s var(--ease);
}
.chips button:hover { border-color: var(--gold); color: var(--gold); }
.chips button.is-on { background: var(--text-dark); border-color: var(--text-dark); color: var(--milk); }

.sort { position: relative; }
/* Сортировка намеренно без рамки, в отличие от «в наличии» и «продано».
   Те две кнопки меняют состав галереи и стоят в одном ряду как выбор,
   а сортировка только переставляет уже отобранное. В такой же таблетке
   она читалась третьим фильтром и тянула на себя внимание, хотя нужна
   заметно реже. Осталась подпись со стрелкой, приглушённая по цвету */
.sort__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 2px;
  font-family: var(--caps);
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--taupe);
  border: 0; border-radius: 0; background: none;
  transition: color .35s var(--ease);
}
.sort__btn:hover,
.sort.is-open .sort__btn { color: var(--text-dark); }
.sort__btn i {
  width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.sort__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 210px; padding: 8px;
  background: var(--milk);
  border: 1px solid rgba(141, 130, 116, .22);
  box-shadow: 0 18px 40px rgba(43, 37, 31, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .35s var(--ease);
  z-index: 20;
}
.sort.is-open .sort__menu { opacity: 1; visibility: visible; transform: none; }
.sort__menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; font-size: 13px; color: var(--text-mid);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.sort__menu button:hover { background: var(--paper); color: var(--gold); }
.sort__menu button.is-on { color: var(--gold); }

/* сетка: три в ряд, воздуха заметно больше, чем на макете */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4.2vw, 74px) clamp(26px, 3.6vw, 60px);
}

.card { position: relative; cursor: pointer; }

/* ---------- подробная карточка работы ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(10px, 2.6vw, 40px);
}
.lb[hidden] { display: none; }
.lb__back { position: absolute; inset: 0; background: rgba(28, 24, 20, .74); }
.lb__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  /* Строка ограничена высотой панели. Без minmax(0,1fr) строка тянется
     по содержимому колонки, она вылезает за панель, и низ карточки
     просто обрезается: прокрутить до него нельзя */
  grid-template-rows: minmax(0, 1fr);
  width: min(1080px, 100%);
  max-height: min(880px, 92vh);
  background: var(--milk);
  box-shadow: 0 30px 80px rgba(20, 16, 12, .45);
  overflow: hidden;
}
/* Рамка кадра постоянная, а снимок вписывается в неё целиком и своей
   пропорцией: квадратный остаётся квадратным, вытянутый — вытянутым,
   ничего не обрезается. Постоянная рамка нужна ради стрелок: они
   висят по её центру и не прыгают от кадра к кадру */
.lb__media {
  position: relative;
  align-self: start;
  aspect-ratio: 1 / 1;
  background: var(--milk);   /* один тон с панелью: тёмная рамка вокруг снимка мешала */
  overflow: hidden;
}
.lb__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb__x, .lb__nav {
  position: absolute; z-index: 3;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(250, 247, 241, .92);
  box-shadow: 0 2px 10px rgba(43, 37, 31, .18);
  color: var(--text-dark);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.lb__x:hover, .lb__nav:hover { background: var(--gold); color: var(--milk); }
.lb__x { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 22px; line-height: 1; }
.lb__x::before { content: "\00D7"; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 42px; height: 42px; }
.lb__nav::before {
  content: ""; width: 9px; height: 9px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}
.lb__nav--prev { left: 12px; }
.lb__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.lb__nav--next { right: 12px; }
.lb__nav--next::before { transform: rotate(45deg); margin-right: 3px; }

/* Правая колонка прокручивается сама: форма заказа длиннее окна.
   Полоску делаем видимой, иначе непонятно, что там есть продолжение */
.lb__info {
  padding: clamp(20px, 2.6vw, 40px);
  min-height: 0;   /* иначе элемент сетки не сжимается ниже содержимого */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 141, 75, .6) rgba(141, 130, 116, .12);
}
.lb__info::-webkit-scrollbar { width: 7px; }
.lb__info::-webkit-scrollbar-track { background: rgba(141, 130, 116, .12); }
.lb__info::-webkit-scrollbar-thumb { background: rgba(176, 141, 75, .6); }
.lb__info::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Пока человек заполняет данные, описание и мелкие кадры не нужны:
   он уже выбрал работу, а колонка от них становится длиннее экрана */
.lb__panel.is-ordering .lb__thumbs,
.lb__panel.is-ordering .lb__info .lead { display: none; }
.lb__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: .03em; text-transform: uppercase;
  margin: 6px 0 14px;
}
.lb__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  font-family: var(--caps); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mid);
  padding-bottom: 16px; border-bottom: 1px solid rgba(141, 130, 116, .22);
}
.lb__price { color: var(--text-dark); }
.lb__state { color: var(--gold); }
.lb__info .lead { margin: 16px 0 0; font-size: 15px; }

/* Лестница размеров. Два столбца: восемь строк в один столбец растягивают
   окно так, что кнопка покупки уходит за нижний край экрана */
.lb__sizes { margin: 18px 0 0; }
.lb__sizes-cap {
  font-family: var(--caps);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 8px;
}
/* Столбцы, а не сетка. Сетка раскладывает строки слева направо, и ряд
   размеров читался змейкой: 30 слева, 40 справа, 50 снова слева.
   column-count заполняет сверху вниз, поэтому левый столбец идёт
   по порядку, а правый его продолжает */
.lb__sizes ul {
  list-style: none; margin: 0; padding: 0;
  column-count: 2; column-gap: 20px;
  font-size: 14px;
}
.lb__sizes li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid rgba(141, 130, 116, .16);
  color: var(--text-mid);
}
.lb__sizes li span:last-child { color: var(--text-dark); white-space: nowrap; }
.lb__sizes li.is-here span:first-child { font-weight: 500; color: var(--text-dark); }
.lb__sizes li.is-here em {
  font-family: var(--caps);
  font-style: normal; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  margin-left: 6px; white-space: nowrap;
}
/* Рама отдельной строкой под лестницей: цена у неё считается под размер,
   в таблице с точными суммами ей места нет */
.lb__frame { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--taupe); }

/* Про доставку говорим прямо в форме, рядом с адресом. Строка золотая
   слева, чтобы её не пролистали: счёт со стоимостью доставки не должен
   оказаться неожиданностью после отправки заявки */
.lb__shipnote {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid rgba(176, 141, 75, .55);
  font-size: 13px; line-height: 1.6; color: var(--text-mid);
}
.lb__shipnote:empty { display: none; }

@media (max-width: 620px) {
  .lb__sizes ul { column-count: 1; }
}

.lb__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }
.lb__thumbs button {
  width: 62px; height: 62px; padding: 0;
  border: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.lb__thumbs button.is-on { border-color: var(--gold); }
.lb__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.lb__actions[hidden] { display: none; }


/* Форма заказа внутри окна работы */
.lb__order[hidden] { display: none; }
.lb__order-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 20px; letter-spacing: .03em;
  margin: 4px 0 6px;
}
.lb__order-intro { font-size: 14px; line-height: 1.6; color: var(--text-mid); margin: 0 0 18px; }
.lb__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 16px; }
.lb__field { display: flex; flex-direction: column; gap: 5px; }
.lb__field--wide { grid-column: 1 / -1; }
.lb__field span {
  font-family: var(--caps); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe);
}
.lb__field input {
  font: inherit; font-size: 15px;
  padding: 9px 2px;
  background: none; border: 0;
  border-bottom: 1px solid rgba(141, 130, 116, .35);
  color: var(--text-dark);
  transition: border-color .35s var(--ease);
}
.lb__field input:focus { outline: none; border-color: var(--gold); }
.lb__field input.is-bad { border-color: #b4553f; }

/* Выбор размера. Оформлен как остальные поля, но стрелку рисуем сами:
   родная стрелка браузера тут серо-синяя и выбивается из палитры */
#lbSizePick { margin-bottom: 16px; }
#lbSizePick[hidden] { display: none; }
#lbSizePick select {
  font: inherit; font-size: 15px;
  padding: 9px 22px 9px 2px;
  background: none; border: 0;
  border-bottom: 1px solid rgba(141, 130, 116, .35);
  color: var(--text-dark);
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .35s var(--ease);
}
#lbSizePick select:focus { outline: none; border-color: var(--gold); }
.lb__err {
  margin: 0 0 14px;
  font-size: 13px; color: #b4553f;
}
.lb__err[hidden] { display: none; }
.lb__sent {
  margin: 4px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  font-size: 14px; line-height: 1.6;
  color: var(--text-dark);
}
.lb__sent[hidden], .lb__fields[hidden], .lb__actions[hidden] { display: none; }
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
.card__media img.is-on { opacity: 1; }
.card:hover .card__media img { transform: scale(1.03); }

.card__badge {
  position: absolute; z-index: 2; left: 14px; top: 14px;
  padding: 5px 12px;
  font-family: var(--caps);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(250, 247, 241, .93); color: var(--text-mid);
}

.card__dots {
  position: absolute; z-index: 2; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.card:hover .card__dots { opacity: 1; }
.card__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(250, 247, 241, .5);
  transition: background .4s var(--ease);
}
.card__dots i.is-on { background: var(--gold-pale); }

.card__body { padding-top: 16px; }
.card__title {
  font-family: var(--caps-display); font-size: 20px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px;
}
.card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 14px; color: var(--text-mid);
}
.card__price { color: var(--text-dark); white-space: nowrap; }
.card__price s { color: var(--taupe-soft); }

.gallery__foot { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.gallery__empty { text-align: center; color: var(--taupe); padding: 60px 0; display: none; }

/* Описание коллекции между рядами. Разворот как в альбоме: короткая
   мысль крупно, под ней текст в две колонки во всю ширину. Раньше
   слева стояло название коллекции, но оно уже написано в строке
   фильтров над описанием и читалось как сбой вёрстки */
.collnote {
  grid-column: 1 / -1;
  padding: clamp(20px, 2.6vw, 38px) 0 clamp(10px, 1.4vw, 22px);
  border-top: 1px solid rgba(141, 130, 116, .18);
}
.collnote__lead {
  margin: 0 0 clamp(16px, 2vw, 28px);
  max-width: min(100%, 52ch);
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.38;
  color: var(--text-dark);
}
.collnote__lead { margin-bottom: clamp(14px, 1.6vw, 20px); }

/* Колонки текста, а не сетки: браузер сам делит абзацы поровну,
   и описание из одного абзаца тоже ляжет в две колонки.

   Свёрнуто по умолчанию: до первой картины оставалось несколько экранов
   текста, а человек пришёл смотреть работы. Прячем через grid-строку
   в ноль, а не display:none: так раскрытие идёт плавно, а высота
   считается браузером, и её не надо знать заранее */
.collnote__text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.collnote__text > * { min-height: 0; }
.collnote.is-open .collnote__text { grid-template-rows: 1fr; opacity: 1; }
.collnote__inner { columns: 2; column-gap: clamp(30px, 4vw, 76px); overflow: hidden; }
.collnote__text p {
  margin: 0 0 .9em;
  font-size: 16px; line-height: 1.75; color: var(--text-mid);
  break-inside: avoid;
}
.collnote.is-open .collnote__inner { padding-bottom: clamp(10px, 1.2vw, 16px); }

/* Кнопка раскрытия. Оформлена как остальные ссылки сайта: подпись,
   черта под ней и золотая точка. Точка поворачивается, когда открыто */
.collnote__toggle {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 2px 8px;
  font-family: var(--caps);
  font-size: 11px; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mid);
  border-bottom: 1px solid rgba(176, 141, 75, .5);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.collnote__toggle:hover { color: var(--gold); border-color: var(--gold); }
.collnote__toggle .arrow {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  transition: transform .4s var(--ease);
}
.collnote.is-open .collnote__toggle .arrow { transform: scale(1.6); }
.collnote__text p:last-child { margin-bottom: 0; }

/* ============================================================
   7. Почему выбирают
   ============================================================ */
/* Блок начинается бумажной полосой: сверху в неё впечатан тон, которым
   заканчивается блок «обо мне», ниже рваная кромка и сама бумага, которая
   растворяется в ровный #f0e7de — им же залит блок дальше вниз.
   Заголовок ложится прямо на полосу, поэтому верхний отступ подобран так,
   чтобы он попадал на бумагу, а не на кромку */
.why {
  position: relative;
  background: #f0e7de url("../img/tex/why-top.jpg") top center / 100% auto no-repeat;
  color: var(--text-dark);
  padding: clamp(78px, 11vw, 168px) 0 clamp(70px, 9vw, 128px);
}
.why::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .18;
  mix-blend-mode: overlay;   /* тон не смещает — стык с полосой остаётся ровным */
  z-index: 0;
}
.why .wrap { position: relative; z-index: 1; }
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: 52px;
}
/* Золото глубже обычного: --gold на светлой бумаге даёт лишь 2,5:1 */
.why .script { color: #8f7136; }

/* ---------- карточки-перевёртыши ----------
   Шесть абзацев подряд читались как стена текста. Теперь спереди
   только номер и заголовок, описание на обороте: страница стала
   тише, а сам блок живым. Текст оборота остаётся в разметке,
   поэтому его видят и поиск, и программы чтения с экрана */
/* Высота не задана числом: обе стороны лежат в одной ячейке сетки,
   поэтому карточка сама вырастает под самый длинный текст оборота.
   С фиксированной высотой испанский, который длиннее английского,
   рано или поздно вылез бы за край */
.whyc {
  position: relative;
  display: flex;
  perspective: 1400px;
  cursor: pointer;
}
.whyc:nth-child(6n + 1) { transform: rotate(-.6deg); }
.whyc:nth-child(6n + 2) { transform: rotate(.45deg); }
.whyc:nth-child(6n + 3) { transform: rotate(-.35deg); }
.whyc:nth-child(6n + 4) { transform: rotate(.55deg); }
.whyc:nth-child(6n + 5) { transform: rotate(-.5deg); }
.whyc:nth-child(6n + 6) { transform: rotate(.3deg); }

.whyc__inner {
  flex: 1;
  display: grid;
  min-height: clamp(226px, 16vw, 252px);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .72, .2, 1);
}
.whyc.is-on .whyc__inner { transform: rotateY(180deg); }

/* Показываем только ту сторону, что смотрит на зрителя. Одного
   backface-visibility мало: у содержимого карточки свой z-index, из-за
   него строки поднимаются в отдельный слой и правило родителя на них
   не действует — сквозь оборот зеркально просвечивал текст лица.
   Видимость переключается в тот миг, когда карточка встаёт ребром.
   Это не половина времени: у поворота резкое начало (cubic-bezier
   .2 .72 .2 1), и 90 градусов он проходит на 0,11с из 0,8с. При
   прежних 0,4с четверть секунды была видна лицевая сторона с изнанки,
   то есть зеркально, и только потом появлялся текст оборота */
.whyc__face { transition: visibility 0s linear .11s; }
.whyc__face--back { visibility: hidden; }
.whyc.is-on .whyc__face--front { visibility: hidden; }
.whyc.is-on .whyc__face--back { visibility: visible; }

/* Наведение переворачивает только там, где мышь есть на самом деле:
   на телефоне hover залипает и карточка остаётся перевёрнутой */
@media (hover: hover) {
  .whyc:hover .whyc__inner { transform: rotateY(180deg); }
  .whyc:hover .whyc__face--front { visibility: hidden; }
  .whyc:hover .whyc__face--back { visibility: visible; }
}
.whyc:focus-visible { outline: none; }
.whyc:focus-visible .whyc__inner { transform: rotateY(180deg); }
.whyc:focus-visible .whyc__face--front { visibility: hidden; }
.whyc:focus-visible .whyc__face--back { visibility: visible; }
/* Обводка фокуса тоже повторяет рваный край, а не прямоугольник */
.whyc:focus-visible .whyc__face::before {
  filter: drop-shadow(0 0 2px var(--gold)) drop-shadow(0 0 2px var(--gold)) drop-shadow(0 10px 20px rgba(60, 48, 32, .16));
}

.whyc__face {
  grid-area: 1 / 1;          /* обе стороны в одной ячейке, друг над другом */
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(30px, 3vw, 44px) clamp(32px, 3.2vw, 46px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Лист рисуется, а не берётся снимком. Снимки трёх листов давали
   пиксели на кромке при увеличении, весили 70 КБ и на обороте
   просвечивали. Здесь силуэт задан clip-path: он векторный, чёткий
   на любом размере, и ничего не грузится.

   Три стороны ровные, нижняя рваная — так лист выглядит оторванным
   от большего листа, а не вырезанным ножницами со всех сторон.
   Фактура — та же бесшовная плитка paper.jpg мягким светом, поэтому
   тон задаётся цветом и не уезжает */
.whyc__face::before {
  content: "";
  position: absolute; inset: 0;
  background-color: #f3ede1;
  background-image: url("../img/tex/paper.jpg");
  background-size: 1440px auto;
  background-blend-mode: soft-light;
  clip-path: polygon(
    0 0, 100% 0,
    100% 97.4%, 96% 98.8%, 92% 96.4%, 88% 98.2%, 84% 96.9%, 80% 99.1%,
    76% 97.5%, 72% 96.2%, 68% 98.6%, 64% 97.1%, 60% 99.3%, 56% 97.8%,
    52% 96.5%, 48% 98.9%, 44% 97.3%, 40% 99%, 36% 97.6%, 32% 96.3%,
    28% 98.5%, 24% 97%, 20% 99.2%, 16% 97.7%, 12% 96.6%, 8% 98.4%,
    4% 97.2%, 0 98.7%
  );
}
/* Чётные карточки берут ту же кромку зеркально: одинаковых краёв
   рядом не оказывается, а рисунок остаётся один */
.whyc:nth-child(even) .whyc__face::before { transform: scaleX(-1); }

/* Тени под карточками нет намеренно: размытие шести слоёв на каждый
   кадр заметно тормозило перелистывание, а лист и без неё читается
   как лист, лежащий на бумаге */
.whyc__inner { position: relative; z-index: 1; }
/* Содержимое поверх подложки: позиционированный псевдоэлемент иначе
   перекрыл бы обычный поток с номером и заголовком */
.whyc__face > * { position: relative; z-index: 1; }

/* Номер и заголовок собраны в середину. Прижатые к противоположным
   краям, они оставляли посреди карточки дыру */
.whyc__face--front { justify-content: center; gap: 18px; }
/* Оборот — тот же лист, только притемнённый. Полей меньше, чем у лица:
   там номер и короткий заголовок, здесь абзац текста */
.whyc__face--back {
  transform: rotateY(180deg);
  justify-content: center;
  padding: clamp(24px, 2.5vw, 34px) clamp(26px, 2.7vw, 38px) clamp(30px, 3vw, 42px);
}
.whyc__face--back::before { background-color: #6b6459; }

.whyc__num {
  font-family: var(--serif); font-size: clamp(38px, 3.8vw, 50px); line-height: 1;
  color: #8f7136;
}
.whyc__face--front h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 2.1vw, 29px); line-height: 1.24;
  letter-spacing: .02em;
  margin: 0; color: var(--text-dark);
}
/* короткая золотая черта над заголовком: она была в прежней вёрстке
   и держит низ карточки, иначе номер и заголовок висят в пустоте */
.whyc__face--front h3::before {
  content: "";
  display: block; width: 56px; height: 1px;
  margin-bottom: 16px;
  background: rgba(176, 141, 75, .6);
  /* Растягиваем черту через transform, а не по width: ширина пересчитывает
     раскладку карточки на каждом кадре, transform — нет */
  transform: scaleX(.607);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
.whyc:hover .whyc__face--front h3::before { transform: scaleX(1); }
/* Текст оборота может состоять из нескольких абзацев: в тексте
   разделены пустой строкой, здесь разделяются отбивкой */
.whyc__face--back p {
  margin: 0; font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.68;
  color: var(--milk);
}
.whyc__face--back p + p { margin-top: .8em; }
/* Загнутый уголок вместо подписи «нажмите»: понятен без слов
   и не требует перевода на два языка */
/* Значка-подсказки на карточке нет: и загнутый уголок, и кружок со
   стрелкой спорили со стилем рваного листа. Что карточка живая, видно
   по золотой черте: при наведении она удлиняется */

@media (prefers-reduced-motion: reduce) {
  .whyc__inner { transition: none; }
}

/* ============================================================
   8. Индивидуальный заказ
   ============================================================ */
.commission { background: var(--paper); padding: clamp(70px, 9vw, 130px) 0; position: relative; }
/* Заголовок и кнопка в одном ряду: кнопка встаёт во вторую колонку
   на строку заголовка, текст остаётся в первой. Так до заказа не надо
   пролистывать снимок сравнения */
.commission__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 4vw, 64px);
}
.commission__head > .script { grid-column: 1; grid-row: 1; }
.commission__head > .h2     { grid-column: 1; grid-row: 2; }
.commission__head > .lead   { grid-column: 1; grid-row: 3; max-width: 720px; }
.commission__head > .commission__cta { grid-column: 2; grid-row: 2; align-self: center; }

/* ---------- одна стена до и после ----------
   Шторку двигает прозрачный ползунок во всю площадь снимка. Так мышь,
   палец и стрелки на клавиатуре работают средствами браузера, без
   самописного перетаскивания, и снимок остаётся доступным незрячим */
/* Ширина ограничена: во весь разворот снимок давил на весь раздел
   и читался как баннер, а не как пример */
.compare {
  max-width: 840px;
  margin: clamp(38px, 4.5vw, 62px) auto clamp(26px, 3vw, 40px);
}
.compare__box {
  position: relative;
  --pos: 52%;
  --k: .52;          /* то же число долей: см. «двигать» в app.js */
  aspect-ratio: 1500 / 937;
  overflow: hidden;
  border: 1px solid rgba(141, 130, 116, .3);
  box-shadow: 0 24px 58px rgba(43, 37, 31, .16);
  background: var(--milk);
}
.compare__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Пустая стена лежит сверху и обрезается по шторке: так под ней
   всегда остаётся кадр с картиной, без второго слоя разметки */
.compare__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare__tag {
  position: absolute; bottom: 16px; z-index: 2;
  padding: 7px 14px;
  font-family: var(--caps); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(31, 27, 22, .62);
  color: var(--milk);
  backdrop-filter: blur(2px);
  transition: opacity .4s var(--ease);
}
.compare__tag--l { left: 16px; opacity: calc(var(--k) * 4 - .2); }
.compare__tag--r { right: 16px; opacity: calc((1 - var(--k)) * 4 - .2); }

.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; margin-left: -1px;
  background: rgba(250, 247, 241, .9);
  box-shadow: 0 0 14px rgba(31, 27, 22, .45);
  pointer-events: none;
}
.compare__handle i {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 1px solid rgba(250, 247, 241, .9);
  border-radius: 50%;
  background: rgba(31, 27, 22, .38);
  backdrop-filter: blur(2px);
}
/* стрелки внутри кружка — две шевронные чёрточки */
.compare__handle i::before, .compare__handle i::after {
  content: "";
  position: absolute; top: 50%; width: 7px; height: 7px;
  margin-top: -4px;
  border-top: 1px solid var(--milk); border-right: 1px solid var(--milk);
}
.compare__handle i::before { left: 12px; transform: rotate(-135deg); }
.compare__handle i::after  { right: 12px; transform: rotate(45deg); }

.compare__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: none;
}
.compare__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 58px; height: 100vh; cursor: ew-resize;
}
.compare__range::-moz-range-thumb { width: 58px; height: 100vh; border: 0; cursor: ew-resize; }
.compare__box:has(.compare__range:focus-visible) .compare__handle i {
  border-color: var(--gold); border-width: 2px;
}

.compare__hint {
  margin: 14px 0 0;
  font-family: var(--caps); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--taupe);
  text-align: center;
}

/* Единственный призыв в разделе, поэтому кнопка в рамке, как покупка
   в окне работы. Это то же исключение из правила «никаких плашек» */
.commission__cta { display: flex; }

/* Три довода в ряд под снимком: каждый снимает своё опасение перед
   заказом, поэтому стоят вместе и читаются одним взглядом */
.commission__points {
  list-style: none; margin: clamp(30px, 4vw, 50px) auto 0; padding: 0;
  max-width: 840px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
}
.commission__points li { padding-top: 18px; border-top: 1px solid rgba(176, 141, 75, .4); }
.commission__points h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-dark); margin: 0 0 6px;
}
.commission__points p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-mid); }

.commission__price { display: flex; justify-content: center; margin-top: clamp(26px, 3.2vw, 40px); }

/* форма */
/* Форма-конверт. Клапан нарисован SVG прямо в фоне: так у него получается
   и заливка, и тонкая золотая линия по сгибу. Печать — псевдоэлемент
   на кончике клапана. Форма уже колонки текста и стоит по центру:
   так она читается письмом, а не анкетой во всю ширину */
/* Лист с полями, а не конверт. Клапан и сургучная печать делали форму
   похожей на поздравительную открытку и выбивались из остальных окон:
   у цен и у карточки работы — обычный лист с золотой чертой */
.form {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--milk);
  padding: clamp(32px, 4vw, 54px) clamp(22px, 3.2vw, 48px) clamp(26px, 3vw, 42px);
  border: 1px solid rgba(141, 130, 116, .26);
  box-shadow: 0 22px 54px rgba(43, 37, 31, .12), 0 2px 6px rgba(43, 37, 31, .06);
}
.form::before, .form::after { content: none; }
/* Заголовок с золотой чертой под ним — тот же приём, что на карточках */
.form .h3 { text-align: center; margin-bottom: 0; }
.form .h3::after {
  content: "";
  display: block; width: 46px; height: 1px;
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  background: var(--gold);
}
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.field input, .field textarea {
  font: inherit; font-size: 15px;
  padding: 11px 2px;
  background: none; border: 0; border-bottom: 1px solid rgba(141, 130, 116, .35);
  color: var(--text-dark);
  transition: border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
/* Та же подсветка незаполненного, что и в форме покупки: обе формы
   должны отвечать на пустое поле одинаково */
.field input.is-bad, .field textarea.is-bad { border-color: #b4553f; }
.field textarea { resize: vertical; min-height: 54px; }

/* Просьба прислать фото стены. Прикрепления файлов нет: сервис доставки
   писем вложения не пересылает, кнопка «выбрать файл» обманывала бы */
.form__note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 11px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(226, 216, 199, .3);
  font-size: 14px; line-height: 1.6; color: var(--text-mid);
}

.form__foot { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin-top: 22px; align-items: center; justify-content: center; }
.form__done {
  display: none; margin-top: 22px; padding: 18px 22px;
  background: rgba(201, 169, 105, .14); border-left: 2px solid var(--gold);
  font-size: 15px; color: var(--text-mid);
}
.form__done.is-on { display: block; }
.form__intro {
  max-width: 46ch; margin: clamp(16px, 2vw, 24px) auto clamp(24px, 3vw, 34px);
  text-align: center; font-size: 15px; line-height: 1.65; color: var(--text-mid);
}

/* Окно с конвертом. Прокручивается всё окно целиком, а не одна панель:
   иначе колесо работает только под курсором, а конверт на невысоком
   экране длиннее видимой части. margin:auto вместо выравнивания по
   центру — при выравнивании верх содержимого срезается, когда оно
   не помещается */
.fm {
  position: fixed; inset: 0; z-index: 90;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 141, 75, .6) transparent;
}
.fm[hidden] { display: none; }
.fm::-webkit-scrollbar { width: 7px; }
.fm::-webkit-scrollbar-thumb { background: rgba(176, 141, 75, .6); }
.fm__back { position: fixed; inset: 0; background: rgba(24, 20, 16, .72); }
.fm__panel {
  position: relative; z-index: 1;
  margin: auto;
  width: min(820px, 100%);
  padding: clamp(20px, 4vw, 48px) clamp(14px, 3vw, 34px);
}
/* Крестик привязан к окну, а не к панели. Липкий внутри плавающего
   блока на части телефонных браузеров уезжает вместе с прокруткой,
   и окно нечем было закрыть */
.fm__x {
  position: fixed; z-index: 3;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250, 247, 241, .92);
  border: 1px solid rgba(141, 130, 116, .3);
  transition: background .35s var(--ease);
}
.fm__x:hover { background: var(--milk); }
.fm__x::before, .fm__x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1px; margin: -1px 0 0 -7px;
  background: var(--text-dark);
}
.fm__x::before { transform: rotate(45deg); }
.fm__x::after  { transform: rotate(-45deg); }

/* ============================================================
   9. Картины у клиентов
   ============================================================ */
/* position нужен нитям: их svg позиционируется от секции. Раньше это
   давал класс sheet с рваными кромками, но кромки убрали */
.bandline, .paperrip { position: relative; margin-top: -1px; }

/* Фактура блока с кадрами гаснет к низу. Слой зерна наложен режимом
   multiply и слегка притемняет весь блок, а полоса с каллиграфией под ним
   идёт как есть. На стыке двух ровных плоскостей эта разница читалась
   тенью во всю ширину. Плавное затухание на последней сотне точек убирает
   границу, при этом фактура блока остаётся на месте */
.collage::before, .collage::after {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%);
}

.clients { position: relative; background: var(--milk); padding: clamp(66px, 8vw, 118px) 0; }
/* Лента снимков. Отступ между карточками задан margin-right, а не gap:
   при gap дорожка шире суммы карточек на один зазор, и сдвиг на половину
   ширины даёт полузазорный скачок на стыке. С margin половины совпадают
   точно. Края растворяются маской, чтобы лента не обрывалась резко */
/* Ленту можно листать пальцем и мышью: она прокручивается по-настоящему,
   а не едет трансформацией. Автоход двигает scrollLeft из скрипта и
   уступает человеку, как только тот берётся за ленту */
.clients__marquee {
  margin-top: clamp(28px, 3.4vw, 44px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.clients__marquee::-webkit-scrollbar { display: none; }
.clients__marquee.is-grab { cursor: grabbing; }
.clients__track {
  display: flex;
  width: max-content;
  padding: 14px 0 20px;          /* место под тень и наклон карточек */
}

/* снимки лежат как настоящие отпечатки: рамка, поворот, мягкая тень */
.clients__track figure {
  flex: 0 0 auto;
  margin: 0 clamp(12px, 1.6vw, 22px) 0 0;
  padding: 8px 8px 10px;
  background: #fdfbf7;
  box-shadow: 0 10px 26px rgba(43, 37, 31, .11), 0 1px 3px rgba(43, 37, 31, .07);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.clients__track img {
  display: block;
  width: auto;
  height: clamp(148px, 16vw, 226px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.clients__track figure:nth-child(3n+1) { transform: rotate(-1.4deg); }
.clients__track figure:nth-child(3n+2) { transform: rotate(.9deg) translateY(8px); }
.clients__track figure:nth-child(3n)   { transform: rotate(-.5deg) translateY(-5px); }
/* На телефоне hover залипает: коснулся снимка при пролистывании — и он
   так и остался приподнятым и без наклона */
@media (hover: hover) {
  .clients__track figure:hover {
    transform: rotate(0) translateY(-5px);
    box-shadow: 0 20px 42px rgba(43, 37, 31, .17);
  }
}
/* ============================================================
   10. Таблицы цен — живут только в окне #pmModal
   ============================================================ */

.prices__tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px); }
.ptable h3 {
  font-family: var(--serif); font-weight: 400; font-size: 20px;
  color: var(--milk); margin: 0 0 4px;
}
.ptable .eyebrow { color: var(--taupe-soft); display: block; margin-bottom: 16px; }
.ptable dl { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; margin: 0; font-size: 15px; }
.ptable dt, .ptable dd {
  margin: 0; padding: 9px 0;
  border-bottom: 1px solid rgba(227, 207, 164, .16);
  color: var(--text-dim);
}
.ptable dd { text-align: right; color: var(--gold-pale); }
/* Окно с ценами. Каркас берётся у окна заявки (класс fm), здесь только
   сам лист и перекраска таблиц: они рисовались под тёмный раздел */
.pm__sheet {
  background: var(--milk);
  padding: clamp(28px, 3.6vw, 54px) clamp(22px, 3.2vw, 48px);
  border: 1px solid rgba(141, 130, 116, .26);
  box-shadow: 0 22px 54px rgba(43, 37, 31, .2);
}
.pm .script { color: #8f7136; }
.pm .h3 { color: var(--text-dark); margin: 2px 0 0; }
.pm__intro {
  max-width: 58ch; margin: 10px 0 clamp(24px, 3vw, 34px);
  font-size: 15px; line-height: 1.65; color: var(--text-mid);
}
.pm .ptable h3 { color: var(--text-dark); }
.pm .ptable .eyebrow { color: var(--taupe); }
.pm .ptable dt, .pm .ptable dd {
  color: var(--text-mid);
  border-bottom-color: rgba(141, 130, 116, .24);
}
.pm .ptable dd { color: #7d6230; }
.pm__note {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding-left: 16px; border-left: 2px solid var(--gold);
  font-size: 14px; line-height: 1.6; color: var(--text-mid);
}
.pm__actions { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }

/* ============================================================
   11. FAQ
   ============================================================ */
.faq { background: var(--paper); padding: clamp(70px, 9vw, 128px) 0; }
.faq__head { max-width: 640px; margin-bottom: clamp(34px, 4vw, 54px); }
/* Вопросы в две колонки. Черта у каждого своя, а не общая сверху:
   иначе вторая колонка осталась бы без неё */
.faq__list {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.qa { border-top: 1px solid rgba(141, 130, 116, .22); }
.qa__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  width: 100%; text-align: left;
  padding: 20px 0;
  font-size: 16px; color: var(--text-dark);
  transition: color .4s var(--ease);
}
.qa__q:hover { color: var(--gold); }
.qa__sign { position: relative; flex: 0 0 12px; height: 12px; margin-top: 7px; }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 12px; height: 1px; background: var(--gold);
  transition: transform .45s var(--ease);
}
.qa__sign::after { transform: rotate(90deg); }
.qa.is-open .qa__sign::after { transform: rotate(0); }
/* раскрытие через grid-template-rows: высота считается браузером,
   не ломается при смене ширины окна и не требует max-height из JS */
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { margin: 0 0 22px; font-size: 15px; color: var(--text-mid); max-width: 640px; }

.faq__last {
  margin-top: 34px; padding: clamp(24px, 3vw, 38px);
  background: var(--milk); border: 1px solid rgba(176, 141, 75, .3);
}
.faq__last h3 { margin-bottom: 8px; }

/* ============================================================
   12. Финал и подвал
   ============================================================ */
.outro {
  position: relative; background: var(--dark); color: var(--text-light);
  padding: clamp(80px, 10vw, 150px) 0; text-align: center; overflow: hidden;
}
.outro .h2 { color: var(--milk); }
.outro p { max-width: 560px; margin: 0 auto 34px; color: var(--text-dim); }
/* Кнопка сверху, значки соцсетей под ней: в строку они вставали
   вровень с кнопкой и читались как её продолжение */
.outro__btns {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 2.6vw, 32px);
}
/* Имя своё, не .social: тот класс занят строчными ссылками в блоке
   обо мне, и его правила гасили цвет значков и обнуляли низ рамки —
   круг выходил разомкнутым снизу */
.iconrow { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.iconrow__link {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(227, 207, 164, .55);
  border-radius: 50%;
  color: var(--gold-pale);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.iconrow__link svg { width: 22px; height: 22px; display: block; }
.iconrow__link:hover, .iconrow__link:focus-visible {
  color: var(--ink); background: var(--gold-pale); border-color: var(--gold-pale);
}


.foot { background: var(--ink); color: var(--text-dim); padding: clamp(46px, 6vw, 78px) 0 30px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(26px, 4vw, 64px); }
.foot__logo img { width: 44px; margin-bottom: 16px; }
.foot__tag { font-family: var(--script); font-size: calc(23px * var(--script-scale)); color: var(--gold-warm); white-space: pre-line; line-height: 1.5; }
.foot h4 { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe-soft); margin: 0 0 16px; font-weight: 500; }
/* gap уменьшен, а ссылкам добавлены поля сверху и снизу: на глаз
   расстояние прежнее, но палец попадает по строке высотой 36, а не 22 */
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 15px; }
.foot ul a, .foot ul span { display: inline-block; padding: 7px 0; }
.foot a:hover { color: var(--gold-warm); }
.foot__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(36px, 5vw, 60px); padding-top: 22px;
  border-top: 1px solid rgba(184, 173, 156, .14);
  font-size: 13px; color: rgba(184, 173, 156, .6);
}

/* ============================================================
   Курсор
   ============================================================ */
/* Кисточка. Позицию задаёт .cursor без перехода — иначе она «плывёт» за мышью.
   Всё остальное анимируется только через transform и opacity. */
/* Кнопка WhatsApp в правом нижнем углу. z-index 80: выше содержимого,
   но ниже окон (90) и курсора (999) */
.wafab {
  position: fixed;
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  z-index: 80;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold); color: var(--milk);
  box-shadow: 0 10px 26px rgba(43, 37, 31, .3);
  opacity: 0; transform: translateY(14px) scale(.88);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s var(--ease);
}
.wafab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wafab svg { width: 28px; height: 28px; display: block; }
.wafab:hover, .wafab:focus-visible { background: var(--gold-warm); }
/* Пока открыто окно, кнопка уходит: иначе она висит поверх формы */
body:has(.lb:not([hidden])) .wafab,
body:has(.fm:not([hidden])) .wafab { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wafab { transition: opacity .2s linear; transform: none; }
}

.cursor, .trail {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
/* системный указатель прячем только когда кисть действительно включилась */
html.has-brush, html.has-brush * { cursor: none; }
.cursor svg {
  display: block;
  overflow: visible;
  transform-origin: 2px 24px;          /* остриё ворса — оно и есть точка курсора */
  transition: transform .45s var(--ease);
  filter: drop-shadow(0 1px 3px rgba(36, 31, 26, .35));
}
.cur-handle {
  fill: none; stroke: var(--gold); stroke-width: 2.1; stroke-linecap: round;
}
.cur-ferrule {
  fill: none; stroke: var(--gold-pale); stroke-width: 3.4; stroke-linecap: round;
}
.cur-tip { fill: var(--gold-warm); }

/* при наведении на кликабельное кисть чуть приподнимается и увеличивается */
.cursor.is-big svg { transform: scale(1.22) rotate(-6deg); }

/* золотой мазок — цепочка затухающих точек за остриём */
.trail {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-warm);
  box-shadow: 0 0 8px 1px rgba(201, 169, 105, .4);
}

/* ============================================================
   Появление при скролле
   ============================================================ */
.rise { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

/* рукописные строки проявляются позже основного текста и слегка «ложатся» на место */
.ink {
  opacity: 0;
  transform: translateY(9px) rotate(-1.4deg);
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.ink.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .ink { opacity: 1; transform: none; transition: none; }
  .tex::before { transform: none; }
  .clients__track { animation: none; }   /* лента замирает */
  .goldline__flow { animation: none; }   /* мазок замирает */
  html { scroll-behavior: auto; }
}

/* ============================================================
   Адаптив
   ============================================================ */
/* рукописная строка в шапке уходит первой — она украшение, а не навигация */
@media (max-width: 1380px) {
  .head__script { display: none; }
}

@media (max-width: 1080px) {
  .head__nav { display: none; }
  .burger { display: block; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; }
  .faq__list { grid-template-columns: 1fr; }
  /* На узком экране кадр сильно режется по ширине: смещаем его вправо,
     чтобы портрет не ушёл за край. Здесь текст ложится поверх фигуры,
     поэтому лёгкая тонировка нужна — но только слева и не доходя до низа,
     чтобы не затемнять бумажную кромку */
  .hero__photo img { object-position: 68% 50%; }
  .hero__photo::after {
    content: ""; position: absolute; inset: 0 0 22% 0;
    background: linear-gradient(90deg, rgba(36,31,26,.38) 0%, rgba(36,31,26,.14) 60%, rgba(36,31,26,0) 100%);
  }
}

@media (max-width: 820px) {
  /* Бледная правая нить на узком экране вырождается в прямую вертикаль
     во всю высоту сайта: viewBox сжимается по горизонтали, и изгиб
     в 104 единицы из 1000 превращается в четыре десятка точек */
  .goldline--pale { display: none; }
  /* Кадр горизонтальный (1672×941), а экран телефона вертикальный.
     При заливке во весь экран cover показывал только правую треть снимка —
     ровно ту, где лицо, — и заголовок ложился прямо на него.
     Теперь кадр занимает верх экрана своим блоком. Заголовок лежит поверх
     снимка в его нижней части: там плечи, рука и стена, а лицо остаётся
     выше и открытым. Кнопки в потоке и уходят под снимок на бумагу */
  .hero {
    min-height: 0;
    display: block;
    position: relative;
    background: var(--paper);
    color: var(--text-dark);
    padding-bottom: clamp(34px, 8vw, 54px);
  }
  .hero__photo { position: relative; inset: auto; aspect-ratio: 3 / 4; }
  .hero__photo img { object-position: 67% 50%; }
  .hero__photo::after { content: none; }
  /* Обёртка повторяет пропорцию снимка, поэтому ложится ровно на него.
     Отступ снизу 21% ширины — это высота рваной кромки в кадре: текст
     до неё не доходит */
  .hero__over {
    position: absolute; left: 0; right: 0; top: 0;
    aspect-ratio: 3 / 4;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--gutter) 21%;
    z-index: 3;
  }
  /* static, иначе обёртка заголовка считает координаты от него, а не
     от блока, и уезжает под снимок */
  .hero__inner { position: static; padding-top: clamp(22px, 5vw, 32px); }
  .hero__col { padding-top: 0; max-width: none; }
  .hero__title { color: var(--milk); text-shadow: 0 2px 18px rgba(24, 20, 16, .45); }
  .hero__title em { color: var(--gold-warm); }
  .hero__sub { color: var(--text-light); margin: 14px 0 0; text-shadow: 0 2px 14px rgba(24, 20, 16, .5); }
  .hero__btns .btn { color: var(--text-dark); border-color: rgba(176, 141, 75, .6); }
  .hero__btns .btn:hover { color: #8f7136; border-color: var(--gold); }
  .hero__btns .btn .arrow { background: var(--gold); }
  /* Первая кнопка — главная: её точка светится, вторая остаётся обычной */
  .hero__btns .btn:first-child .arrow {
    box-shadow: 0 0 0 5px rgba(201, 169, 105, .22), 0 0 16px 4px rgba(201, 169, 105, .6);
  }
  .hero__scroll { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  /* Колонки теперь на внутренней обёртке: сам .collnote__text стал
     раскрывающимся гридом, и columns на нём больше ни на что не влияют */
  .collnote__inner { columns: 1; }
  .collnote__lead { font-size: clamp(19px, 4.4vw, 24px); }

  /* Телефон: колонки складываются в одну, снимки идут лесенкой.
     Два сверху, третий крупнее и по центру под ними — так каждая рамка
     остаётся читаемой, а коллаж не превращается в ленту марок */
  .collage__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .collage__text .lead { max-width: none; }
  .collage__photos { grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 3.5vw, 26px); }
  .collage__photos > .polaroid:nth-child(1) { transform: rotate(-3deg);  margin: 0; }
  .collage__photos > .polaroid:nth-child(2) { transform: rotate(2.4deg) translateY(16px); margin: 0; }
  /* Третий снимок — обычная ячейка слева во втором ряду, справа от него
     в пустой ячейке встаёт пометка от руки */
  /* Третий снимок мельче соседних и сдвинут к середине: во всю ширину
     колонки он растягивал блок вниз, а слева у него оставалось поле */
  .collage__photos > .polaroid:nth-child(3) {
    margin: clamp(16px, 3.4vw, 26px) 0 0;
    width: 78%;
    justify-self: center;
    transform: rotate(-1.8deg);
  }
  /* Колонки складываются в одну, пометка встаёт сбоку от третьего снимка.
     Отсчёт от самого блока: он не анимируется, поэтому положение стабильно.
     Стрелка в исходном виде смотрит влево-вниз, то есть ровно на снимок */
  .collage__text, .collage__media, .collage__grid > .pointer {
    grid-column: 1; grid-row: auto;
  }
  .collage__grid > .pointer {
    position: absolute;
    left: auto;
    top: auto;
    right: var(--gutter);
    /* выше прежнего: стрелка должна показывать на снимок,
       а не висеть у его нижнего угла */
    bottom: clamp(74px, 19vw, 130px);
    /* шире прежнего: «у каждой работы» на русском ломалось на три строки */
    width: clamp(150px, 42%, 220px);
    max-width: none;
    margin: 0;
    padding: 0;
    /* стрелка выше надписи: она последняя в разметке, поэтому колонка
       разворачивается — и стрелка уходит наверх, к снимку слева */
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  .collage__grid > .pointer .pointer__arrow { transform: rotate(4deg); }

  .polaroid { padding: 6px; padding-bottom: 30px; }
  .polaroid figcaption { font-size: 14px; bottom: 8px; }
  .polaroid::before { width: 56px; height: 20px; top: -10px; }
  .cursor, .cursor-trail { display: none; }
}

@media (max-width: 820px) {
  /* Одна колонка: кнопка уходит под текст, но остаётся выше снимка */
  .commission__head { grid-template-columns: 1fr; }
  .commission__points { grid-template-columns: 1fr; gap: 0; }
  .commission__points li { padding: 16px 0; border-bottom: 0; }
  .commission__points li + li { border-top: 1px solid rgba(176, 141, 75, .3); }
  .commission__head > .commission__cta {
    grid-column: 1; grid-row: auto;
    margin-top: clamp(22px, 3vw, 30px);
  }

  /* Подробная карточка складывается в одну колонку: снимок сверху,
     описание под ним */
  .lb__panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: 94vh; }
  .lb__thumbs button { width: 54px; height: 54px; }
  .lb__fields { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Каталог на телефоне — в две колонки, а не в одну: так за экран видно
     четыре работы вместо одной, и листать вчетверо меньше */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .why__grid, .form__grid, .prices__tables { grid-template-columns: 1fr; }
  /* На телефоне подписи «до» и «после» сходились вплотную */
  .compare__tag {
    bottom: 10px; padding: 5px 9px;
    font-size: 10px; letter-spacing: .1em;
  }
  .compare__tag--l { left: 10px; }
  .compare__tag--r { right: 10px; }
  .compare__handle i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  /* В одну колонку карточка становится широкой, текст оборота занимает
     меньше строк — и высоту можно убрать, иначе спереди зияет пустота */
  .whyc__inner { min-height: 204px; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .btn { padding: 13px 22px; font-size: 12px; }
}


/* ---------- окна на телефоне ----------
   Крестик прилипал к самому верху экрана, а там на телефоне лежит
   плавающая строка адреса браузера: нажать было нечем. Отодвигаем его
   вниз с учётом выреза экрана. Второй кнопки закрытия внизу нет
   намеренно: Лера убрала её как лишнюю, крестика достаточно */
@media (max-width: 820px) {
  .fm__x { top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .lb__x {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 14px;
    width: 44px; height: 44px;
    background: rgba(250, 247, 241, .94);
  }
  .fm__panel { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
  .pm__sheet { padding: clamp(22px, 5vw, 34px) clamp(16px, 4vw, 26px); }
  .form__foot { flex-direction: column; gap: 16px; }
  .form__foot .btn, .pm__actions .btn { width: 100%; justify-content: center; }
  .pm__actions { flex-direction: column; gap: 14px; }
}

/* ---------- подсказка адреса в форме заказа ----------
   Список висит под полем и не раздвигает форму: поле уже стоит в сетке,
   а сдвиг соседей при каждом наборе букв читался бы как дрожание */
.field--ac { position: relative; }
.ac {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 5;
  margin: 4px 0 0; padding: 6px 0;
  list-style: none;
  max-height: 232px; overflow-y: auto;
  background: var(--milk);
  border: 1px solid rgba(141, 130, 116, .28);
  box-shadow: 0 18px 38px rgba(43, 37, 31, .16);
}
.ac[hidden] { display: none; }
.ac li {
  padding: 9px 14px;
  font-size: 14px; line-height: 1.45; color: var(--text-mid);
  cursor: pointer;
}
.ac li:hover, .ac li.is-on { background: rgba(201, 169, 105, .16); color: var(--text-dark); }
.ac .ac__none { cursor: default; color: var(--taupe); font-style: italic; }
.ac .ac__none:hover { background: none; color: var(--taupe); }

/* ---------- похожие работы в окне ---------- */
.lbmore { margin: clamp(26px, 3vw, 38px) 0 clamp(22px, 2.6vw, 30px); }
.lbmore__title {
  margin: 0 0 14px;
  font-family: var(--caps); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--taupe); font-weight: 500;
}
.lbmore__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lbmore__card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 0; text-align: left; background: none; border: 0;
  cursor: pointer;
}
.lbmore__pic {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper);
}
.lbmore__pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.lbmore__card:hover .lbmore__pic img { transform: scale(1.05); }
.lbmore__name {
  font-family: var(--serif); font-size: 14px; line-height: 1.25;
  color: var(--text-dark);
}
.lbmore__price {
  font-family: var(--caps); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--taupe);
}

/* Карточки сверх первых шести есть в разметке всегда: без этого
   поисковик видел только шесть работ из двадцати трёх. Прячем стилем */
.card.is-off { display: none; }