/* ═══════════════════════════════════════════════════════════
   БРОНЗАСВЕТ — тема магазина классики
   Слой поверх header.css: переопределяет токены, header.css не трогаем.
   Откат = снять одну строку <link> из шаблона.

   Палитра мастера (его же таблица, освободилась когда студия ушла в тауп):
     #F1EBDD  камень / штукатурка      — фон страницы
     #E5DDCC  светлый камень           — чередующиеся блоки, карточки
     #202A26  патинированная латунь    — шапка, подвал, тень
     #B58A3A  новая латунь             — декор: линии, рамки, волна
     #3A332A  тёмный текст
     #7B806E  редкий дополнительный    — очень дозированно

   Почему светлая: это каталог. Фотографии товара читаются на светлом,
   сайт ощущается магазином, а не галереей. И это максимально разводит
   два бренда — студия Brass Art тёмная и тихая, магазин светлый и плотный.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Латунь. Два тона: тёмный для текста (иначе не проходит AA на камне),
     светлый — только для линий, рамок и волны, где контраст не требуется. */
  /* #8A6626 давал 4.41 на камне — чуть ниже AA. Затемнено до 4.5+. */
  --gold:             #7F5C1E;   /* текст, ссылки, активные состояния */
  --gold-hover:       #664815;
  --gold-decor:       #B58A3A;   /* линии, рамки, волна */
  --gold-dim:         rgba(181, 138, 58, 0.30);
  --gold-faint:       rgba(181, 138, 58, 0.10);
  --divider:          rgba(181, 138, 58, 0.26);

  /* Патина — редкий дополнительный, не фон */
  --accent2:          #7B806E;
  --accent2-dim:      rgba(123, 128, 110, 0.20);

  --bg:               #F1EBDD;   /* камень — основной фон */
  --card:             #E5DDCC;   /* светлый камень — чередующийся блок */
  /* Шапка и подвал: тёплый тёмно-бронзовый, а не патина. Патина зелёная
     и на странице оказалась единственной холодной нотой — спорила с охристым
     героем. Тёплый тёмный связывает шапку с комнатой на фотографии. */
  --header-bg:        #2B241C;
  --header-bg-blur:   rgba(43, 36, 28, 0.93);

  --text:             #3A332A;
  --text-primary:     rgba(58, 51, 42, 0.96);
  --text-secondary:   rgba(58, 51, 42, 0.86);
  --text-muted:       rgba(58, 51, 42, 0.82);
  --text-faint:       rgba(58, 51, 42, 0.70);

  --border:           rgba(58, 51, 42, 0.18);

  /* Шрифтовая пара магазина. От студии досталась Playfair + Onest — она
     всеядная и сейчас стоит на каждом втором сайте.
     Prata — дидон: очень высокий контраст штриха, волосяные линии против
     жирных основных. Типографский эквивалент полированной латуни с резким
     бликом. Кириллица родная, начертание одно (400) — для коротких
     заголовков этого достаточно, а для длинных дидон и не годится.
     Golos Text — современный русский гротеск, рядом с дидоном звучит
     тихо и не спорит с ним. */
  --font-head:        'Prata', 'Playfair', Georgia, serif;
  --font-body:        'Golos Text', 'Onest', system-ui, sans-serif;

  /* Нижний ряд шапки выше студийного: там появились подписи под иконками,
     и волна стала глубже — иначе вырез срезал бы текст. */
  --header-bot-h:     96px;
}

body { background: var(--bg); color: var(--text); }

/* ── Шапка ──────────────────────────────────────────────────
   Поле Вороного снимается: оно про генеративную геометрию и
   остаётся за студией. Шапка — плотная патина, волновой клип
   и золотая кромка сохраняются (это личный почерк мастера,
   он идёт через все его сайты). */

.header::before {
  /* Шапка прозрачная: сквозь неё проступает комната, и шапка перестаёт
     быть отдельной плашкой поверх страницы. Размытие обязательно — без
     него сквозь шапку читаются детали кадра и текст меню наезжает на них.
     Плотность 0.72 — предел, ниже светлый потолок пробивает и меню
     теряет контраст (проверено измерением, не на глаз). */
  background: rgba(43, 36, 28, 0.72);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
}
/* При прокрутке шапка тоже остаётся прозрачной — по просьбе мастера.
   Чуть плотнее исходной: под ней проходят светлые блоки страницы, и на
   них меню иначе теряется. Размытие усилено по той же причине. */
.header--scrolled::before {
  background: rgba(43, 36, 28, 0.80);
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}

.header__edge-line { stroke: var(--gold-decor); opacity: 0.55; }
.wave-glow { stroke: #d9b978; }

/* Шапка тёмная, страница светлая — внутри шапки текст должен
   остаться светлым, иначе он уйдёт в патину. */
.header,
.header__panel {
  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.97);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.86);
  --text-faint:     rgba(242, 239, 234, 0.74);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --border:         rgba(242, 239, 234, 0.18);
  --card:           #3A3126;
  color: #F2EFEA;
}

.header__panel-inner { background: #2B241C; }

/* Плашка cookie стоит на патине (--header-bg), а страница светлая —
   ей нужен свой светлый текст, иначе она сливается. */
.cookie-banner {
  --text:           #F2EFEA;
  --text-secondary: rgba(242, 239, 234, 0.84);
  --gold:           #C9A961;
  --divider:        rgba(242, 239, 234, 0.14);
  color: #F2EFEA;
}
.cookie-banner__text,
.cookie-banner__text a { color: #F2EFEA; }

/* ── Герой ──────────────────────────────────────────────────
   Архитектурная сцена с шаром Вороного уехала на студию.
   Здесь — светлая комната с люстрой «Верона» из каталога,
   собранная композитом: фон сгенерирован, люстра настоящая.
   Свет в комнате идёт справа, левые две трети свободны под текст. */

.hero {
  /* Версия у самой картинки обязательна: имя файла не меняется, и без ?v
   браузер отдаёт старый кадр из кеша, сколько ни правь CSS. */
  --hero-bg-image: url("../images/bs-hero.webp?v=13");
  background: var(--bg);
  /* Кадр обрезан по низу и стал широким (≈2.28). Если оставить герою высоту
     во весь экран, background-size:cover растянет картинку по высоте и снова
     срежет потолок — то самое, из-за чего люстра висела в воздухе. Поэтому
     высота задаётся от ширины, по пропорции кадра. */
  min-height: 0;
  height: clamp(420px, 49vw, 980px);
  /* Шапка фиксированная, низ у неё срезан волной. Герой начинается ровно
     под шапкой, а в вырезе волны видна подложка героя. Чтобы там не было
     ни щели, ни полосы, подложка красится в тон потолка с фотографии
     (#A1876B — усреднённая верхняя кромка кадра). Тогда вырез волны
     неотличим от продолжения потолка, а кадр можно резать вплотную
     по люстре, без запаса сверху. */
  /* Фотография заезжает под шапку на глубину волны, и вырез режет прямо
     по ней. Раньше тут была полоса, закрашенная тоном потолка: она затыкала
     щель, но читалась лишним элементом — граница получалась не волной, а
     полосой с волной сверху. Теперь граница и есть волна.
     Компенсация: в кадр добавлен запас потолка ровно на ту глубину, что
     уходит под шапку, поэтому люстра не срезается. */
  /* Герой начинается от самого верха страницы, под шапкой: только так
     сквозь полупрозрачную шапку видна комната, а не фон страницы. */
  margin-top: 0;
}
/* Привязка к верхней кромке, а не к центру. Если кадр не помещается в
   высоту героя (широкий экран, упёрлись в максимум), обрезка уходит ВНИЗ,
   и верх люстры срезаться не может ни при каких размерах окна. */
.hero__bg { background-position: center top; }
.hero .hero-layout { min-height: 100%; padding-top: 0; padding-bottom: 0; }

/* Вуали с обеих сторон: слева плотная — под заголовком, справа легче —
   под выноской. Середина с люстрой остаётся чистой, вуали к ней сходят
   на нет. Правая заодно гасит окно, самое светлое место кадра, из-за
   которого текст выноски раньше спорил с фоном. */
.hero__bg::after {
  background:
    linear-gradient(
      260deg,
      rgba(241, 235, 221, 0.62) 0%,
      rgba(241, 235, 221, 0.44) 18%,
      rgba(241, 235, 221, 0.18) 34%,
      rgba(241, 235, 221, 0.00) 50%
    ),
    linear-gradient(
      100deg,
      rgba(241, 235, 221, 0.90) 0%,
      rgba(241, 235, 221, 0.76) 24%,
      rgba(241, 235, 221, 0.38) 40%,
      rgba(241, 235, 221, 0.06) 56%,
      rgba(241, 235, 221, 0.00) 100%
    );
}

/* Колонка узкая: люстра занимает середину кадра, налезать на неё нельзя. */
.hero-layout {
  grid-template-columns: minmax(0, 34%);
  justify-content: start;
  align-items: center;
  padding-left: clamp(2rem, 5vw, 5rem);
  padding-right: 0;
}
.hero-left { text-align: left; }

/* Заголовок магазина работает иначе, чем у студии: не ступенчатая
   надпись-картинка, а одна внятная строка, которую читают и по которой
   ищут. Поэтому размер умеренный, вес обычный, курсивных акцентов нет. */
.hero .hero-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.3vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #332C22;
  text-shadow: none;
  margin: 0 0 1.5rem;
}

.hero .hero-sub {
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(58, 51, 42, 0.84);
  margin: 0 0 2.4rem;
}

/* Ссылки на разделы из героя убраны совсем: ровно те же четыре категории
   стоят иконками с подписями в шапке, прямо над ними. Дублировать один и
   тот же выбор дважды на одном экране незачем — он только шумит. Разметка
   оставлена на случай, если понадобится вернуть. */
.hero-cats { display: none; }

.hero-cats-disabled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  max-width: 30ch;
}
.hero-cats a {
  position: relative;
  padding: 0.35rem 0 0.45rem;
  font-size: 1.06rem;
  color: #3A332A;
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 138, 58, 0.45);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-cats a:hover { color: #7F5C1E; border-color: #7F5C1E; }
.hero-cats a:focus-visible {
  outline: 2px solid #7F5C1E;
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 900px) {
  /* На телефоне колонка узкая, и текст поверх фотографии неизбежно ложится
     на саму люстру. Поэтому кадр берётся высоким и портретным: люстра
     занимает верх, а низ — пустая стена и пол, туда и уходит текст.
     Он остаётся на фотографии, но ни на что не налезает. */
  .hero {
    /* Свой кадр под узкий экран: вертикальный, люстра в верхних 45%,
       ниже свободная стена под текст. Общий широкий кадр здесь не годился —
       на телефоне он показывался по высоте целиком, люстра занимала две
       трети, и текст не помещался в остаток. */
    --hero-bg-image: url("../images/bs-hero-mobile.webp?v=8");
    height: auto;
    min-height: 100svh;
    /* То же, что на десктопе: фотография заезжает под шапку на глубину
       волны, и вырез режет по ней. Полосы-заплатки здесь больше нет —
       мобильный блок перебивал десктопное правило своими значениями. */
      /* На телефоне герой остаётся ПОД шапкой. Запаса потолка в мобильном
       кадре нет, и при выносе под шапку она срезает люстру целиком.
       Прозрачность шапки здесь работает по фону страницы — на узком
       экране этого достаточно. */
    margin-top: calc(var(--header-total-h) - 24px);
    padding-top: 0;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
  }
  /* Вуаль лёгкая: она должна лишь приглушить стену под текстом, но не
     стирать фотографию — иначе низ кадра превращается в пустой фон и
     текст выглядит вынесенным за картинку. */
  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(241, 235, 221, 0.00) 0%,
      rgba(241, 235, 221, 0.00) 42%,
      rgba(241, 235, 221, 0.42) 56%,
      rgba(241, 235, 221, 0.58) 74%,
      rgba(241, 235, 221, 0.62) 100%
    );
  }

  /* min-height:100% не даёт высоты, когда у родителя она auto — блок
     схлопывается по содержимому и прижимать его некуда. Поэтому текст
     позиционируется от низа кадра напрямую. */
  /* Текст начинается сразу под люстрой: её низ приходится примерно на
     58% высоты кадра. Не прижимаем к самому низу — там пол и мебель. */
  .hero-layout {
    position: absolute;
    left: 0; right: 0; top: 50%; bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-content: start;
    min-height: 0;
    padding: 0 var(--px) 1.1rem;
  }
  .hero .hero-title { font-size: clamp(1.75rem, 7.4vw, 2.4rem); margin-bottom: 0.9rem; }
  .hero .hero-sub   { max-width: none; font-size: 1rem; line-height: 1.65; margin-bottom: 0; }

  /* Волновая полоса под героем: на телефоне её высота считается от ширины
     кадра и выходит слишком толстой — кривая наезжает на последнюю строку
     ссылок. Высоту задаём явно, кривая просто становится положе. */
  .wave-fill--signature svg { height: 38px; }

  /* Шторка меню выезжает поверх страницы, но ряд иконок оставался видимым
     и налезал на её содержимое. Пока шторка открыта — ряд убираем. */
  .header__main-nav.is-open ~ .header__bottom,
  .header:has(.header__main-nav.is-open) .header__bottom { opacity: 0; pointer-events: none; }
  .header__bottom { transition: opacity 0.25s var(--ease); }
}

/* Декоративный подвес с точкой был нужен, когда люстры в кадре не было.
   Теперь она настоящая — бутафорию убираем. */
.hero::before, .hero::after { display: none; }

/* ── Основные блоки ─────────────────────────────────────────
   Чередование сохраняется, но обоими тонами камня, а не
   «светлый против тёмного». Разница мягче и для каталога это
   правильнее: фон не спорит с фотографиями товара. */

.cat-menu,
.about {
  background:
    radial-gradient(circle at 85% 20%, rgba(181, 138, 58, 0.07), transparent 42%),
    var(--bg);
}

.collections,
.directions,
.portfolio {
  background:
    radial-gradient(circle at top left, rgba(181, 138, 58, 0.07), transparent 42%),
    var(--card);
}

/* Блоки, переопределявшие токены под тёмный фон, теперь на светлом —
   их локальные значения приводим к теме, иначе останется старый тауп. */
.collections,
.directions,
.portfolio {
  --gold:           #8A6626;
  --gold-hover:     #6E4F1B;
  --divider:        rgba(181, 138, 58, 0.26);
  --accent2:        #7B806E;
  --card:           #DCD2BF;
  --text:           #3A332A;
  --text-primary:   rgba(58, 51, 42, 0.96);
  --text-secondary: rgba(58, 51, 42, 0.86);
  --text-muted:     rgba(58, 51, 42, 0.82);
  --text-faint:     rgba(58, 51, 42, 0.70);
  --border:         rgba(58, 51, 42, 0.18);
}

.request-form { background: var(--card); }

/* ── Подвал ─────────────────────────────────────────────────
   Единственный по-настоящему тёмный блок на странице: патина.
   Держит низ страницы и повторяет шапку. */

.footer {
  background: var(--header-bg);
  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.96);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.84);
  --text-faint:     rgba(242, 239, 234, 0.72);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --card:           #3A3126;
  --border:         rgba(242, 239, 234, 0.16);
  color: #F2EFEA;
}

/* `color` наследуется вычисленным значением и НЕ перерешает var(--text)
   у потомков — элементы без собственного color останутся тёмными на
   патине. Поэтому им цвет задаётся явно. Та же ловушка была на студии. */
.footer .section-title,
.footer h2, .footer h3, .footer h4,
.footer p, .footer a, .footer li, .footer span {
  color: inherit;
}
.footer a:hover { color: var(--gold-hover); }

/* ── Волна ──────────────────────────────────────────────────
   Заливки волн — DOM-соседи секций, а не потомки, поэтому
   секционные токены им не видны. Цвет задаётся корневым
   var(--bg) / var(--card) или литералом. */

.wave-fill__line { stroke: var(--gold-decor); opacity: 0.5; }


/* ── Меню категорий ─────────────────────────────────────────
   У студии иконки стояли без подписей: там их четыре штуки и
   значение понятно из контекста. В магазине это навигация по
   каталогу — покупатель должен читать «Бра», а не угадывать
   силуэт. Подпись возвращается под иконку. */

.product-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  /* Снизу больше, чем сверху: под подписями проходит волна, и без запаса
     иконки с текстом упираются в самый край шапки. */
  padding: 0.2rem 0.9rem 0.9rem;
}

.product-menu__label {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 0;
  overflow: visible;
  clip-path: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}
.product-menu__item:hover .product-menu__label { color: var(--gold-hover); }

@media (max-width: 1100px) {
  .product-menu__label { font-size: 0.72rem; }
  .product-menu__item  { padding-inline: 0.55rem; }
}
@media (max-width: 900px) {
  /* Ниже 900 подписи снова прячутся — в строку они уже не помещаются,
     а доступное имя ссылки остаётся в title. */
  .product-menu__label { display: none; }
}

/* Знак вращался при наведении — приём из студийной темы, для магазина
   классики он суетливый. Оставляем только мягкое свечение. */
.header__logo:hover .header__logo-icon { transform: none; }


/* ── Выпадающая панель ──────────────────────────────────────
   Три правки против наследия студийной темы. */

.header__panel {
  /* 1. Поле Вороного снимается: оно про генеративную геометрию, и в
        раскрытом меню магазина эти линии читались чужими. */
  background: var(--header-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* 2. Панель заезжает под шапку. Пока её верх стоял ровно по низу
        шапки, в вырезе волны оставалась светлая щель во всю ширину. */
  top: calc(var(--header-total-h) - 26px);
}

/* 3. Содержимому возвращается отступ, который съела подвижка вверх. */
.header__panel .header__panel-inner { padding-top: 26px; }

/* 4. Панель заехала под шапку и накрыла собой подписи иконок: она лежит
      внутри шапки и с z-index 190 всплывала над её нижним рядом. Опускаем
      панель под содержимое шапки, а рядам поднимаем слой. */
.header__panel { z-index: 1; }
.header__top,
.header__bottom { position: relative; z-index: 5; }


/* ── Карточки коллекций в раскрытом меню ────────────────────
   Плитка была 4:3, горизонтальная, а снимки вертикальные — люстру
   обрезало сверху и снизу, оставалась середина впритык. Плитка
   разворачивается вертикально под формат кадра: тогда вещь входит
   целиком и обрезка идёт только по бокам, где всё равно стена.

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

@media (min-width: 901px) {
.header__panel--tiles .header__panel-inner {
  grid-template-columns: repeat(4, minmax(0, 148px));
  justify-content: center;
  gap: 1.4rem;
  /* Снизу больше: под подписями проходит волновой срез панели, и без
     запаса текст упирался в него и почти не читался. */
  padding-block: 1.6rem 4.2rem;
}
.header__panel--tiles .hpanel__thumb {
  aspect-ratio: 3 / 4;
  background: #241E17;
}
.header__panel--tiles .hpanel__name {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.35;
}
}   /* /min-width: 901px — в мобильной шторке плитки раскладывает сама тема */


/* Prata существует только в одном начертании: где вёрстка просила 300 или
   500, браузер синтезировал бы псевдо-жирный и псевдо-светлый и портил
   рисунок. Поэтому вес фиксируем. Контраст у дидона высокий, поэтому
   межбуквенное чуть раскрываем — иначе на мелких кеглях слипается. */
.hero .hero-title,
.section-title,
.collection-name,
.hpanel__name,
.header__logo-text {
  font-weight: 400;
  letter-spacing: 0.005em;
}
.hero .hero-title { letter-spacing: -0.005em; line-height: 1.14; }


/* ── Выноска на люстру ──────────────────────────────────────
   Линия с полкой, как на чертеже: точка на предмете, наклонная,
   горизонтальная полка и подпись на ней. Уводит взгляд в пустую
   правую часть кадра, и пустота перестаёт быть пустотой. */

.hero-callout {
  position: absolute;
  z-index: 4;
  left: 61%;
  top: 46%;
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  color: #7F5C1E;
  pointer-events: none;   /* кликабельна только сама ссылка */
}
.hero-callout__leader {
  width: clamp(70px, 7vw, 120px);
  height: clamp(36px, 3.6vw, 60px);
  flex: none;
  overflow: visible;
}
.hero-callout__body {
  pointer-events: auto;
  margin-top: clamp(28px, 2.9vw, 50px);   /* садится на полку выноски */
  max-width: 23ch;
}
.hero-callout__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.25vw, 1.32rem);
  line-height: 1.25;
  color: #332C22;
}
.hero-callout__meta {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(58, 51, 42, 0.84);
}
.hero-callout__link {
  display: inline-block;
  font-size: 0.9rem;
  color: #7F5C1E;
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 138, 58, 0.5);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-callout__link:hover { color: #664815; border-color: #664815; }
.hero-callout__link:focus-visible { outline: 2px solid #7F5C1E; outline-offset: 4px; }

@media (max-width: 1200px) {
  .hero-callout { left: 57%; top: 50%; }
  .hero-callout__body { max-width: 20ch; }
}
@media (max-width: 900px) {
  /* На телефоне места под выноску нет: она перекрыла бы люстру. */
  .hero-callout { display: none; }
}


/* Золотые волосяные линии сняты со ВСЕХ волновых стыков, а не только у
   витрины. Задумывались как продолжение кромки под шапкой, но на границах
   блоков читаются не кромкой, а случайными полосами поперёк экрана —
   мастер насчитал их на одном экране две штуки и не понял, что это.
   На самой шапке кромка остаётся: там она часть рисунка, а не стык. */
.wave-fill .wave-fill__line,
.wave-fill .wave-glow { display: none; }

/* Нижняя граница витрины. Над её кривой ничего не нарисовано, поэтому
   просвечивал фон страницы — светлая полоса под тёмным блоком. Подложка
   в тон витрины закрывает этот просвет. */
.wave-fill--under { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat, #241E17; }
/* Под волной идёт блок «Как рождается люстра» на тоне --card, а заливка
   волны красилась в --bg — он светлее, и между волной и блоком вылезала
   светлая полоса. Переопределяем токен локально: заливка в SVG написана
   как fill="var(--bg)" и подхватит новое значение по наследованию. */
.wave-fill--under { --bg: #E5DDCC; }

/* ── Витрина товара ─────────────────────────────────────────
   Было: светлый фон, фотография во весь блок, SEO-заголовок в четыре
   строки поверх неё. Вещь растворялась, блоков не читалось.

   Пробовали арочную нишу — мастер отверг: «похоже на Санта-Барбару».
   Справедливо: арка с подсветкой тянет в девяностые, а товар и без того
   классический — рамка в том же духе даёт перебор и китч.

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

   Фотографии товара с прозрачностью, поэтому на тёмном бронза светится. */

.hero-slider {
  /* Тёплый тёмный, как и был. Волновые линии внутри оставлены — они
     легли хорошо: совсем слабые, это фактура, а не рисунок. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  height: auto;
  min-height: 0;
  /* 45 px от верха до изделия — подобрано мастером. */
  padding: 45px 0 clamp(1.4rem, 2.4vw, 2.2rem);

  /* Раскладка блока вынесена в переменные: по ним же считается, где
     начинается текстовая колонка, чтобы управление слайдером встало
     ровно под кнопкой, а не «примерно там». */
  --bs-gap:   clamp(1.5rem, 3vw, 3rem);
  --bs-inset: max(var(--px), calc((100% - 980px) / 2));
  --bs-col1:  calc((100% - 2 * var(--bs-inset) - var(--bs-gap)) * 1.3 / 2.3);
  --bs-text-x: calc(var(--bs-inset) + var(--bs-col1) + var(--bs-gap));

  /* Лента и управление — две строки сетки: управление само встаёт после
     слайда, без вычисления вертикали. Раньше оно висело абсолютом внизу
     справа и попадало на светлую ленту волны, где его не было видно. */
  display: grid;
  grid-template-rows: auto auto;
}
.hero-slider__track { grid-row: 1; }

.hslide {
  display: grid;
  /* Левая колонка шире правой: изделие — главное в блоке, текст подпись. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--bs-gap);
  height: auto;
  /* Ширину слайда трогать НЕЛЬЗЯ: он флекс-элемент ленты с basis 100%.
     Зажмёшь контейнером — лента поедет и справа полезет следующий слайд.
     Поэтому содержимое центрируется отступами, а сам слайд остаётся
     во всю ширину. Блок собран уже страницы: на всю ширину витрина
     разъезжалась и набирала пустоты. */
  padding-inline: var(--bs-inset);
}

/* Изделие без коробки: свет от него и есть его рамка. */
.hslide__media {
  position: relative;
  inset: auto;
  aspect-ratio: 1 / 1;
  background: radial-gradient(ellipse 60% 56% at 50% 48%,
              rgba(201, 169, 97, 0.15), transparent 70%);
}
.hslide__media img { padding: 0; }
.hslide__scrim { display: none; }

/* ── Текстовая колонка ── */
.hslide__content {
  position: relative;
  inset: auto;
  max-width: none;
  /* Колонка прижата к верху вместе с изделием, но опущена на строку —
     так подпись читается как подпись, а не спорит с вещью за первое место. */
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 0;
}

.hslide__eyebrow {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: rgba(242, 239, 234, 0.55);
}
.hslide__eyebrow::first-letter { text-transform: uppercase; }

.hslide__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.1vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: #F2EFEA;
  margin: 0 0 1.1rem;
}

/* Единственная линия в блоке: отделяет цену от имени. */
.hslide__price {
  display: block;
  margin: 0 0 1.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 169, 97, 0.28);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: #C9A961;
}

.hslide__cta.btn-main {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.5);
  color: #F2EFEA;
  border-radius: 0;
  padding: 0.95rem 2.1rem;
}
.hslide__cta.btn-main:hover {
  background: #C9A961;
  border-color: #C9A961;
  color: #241E17;
}

/* ── Управление ── */
.hslider__controls {
  position: static;
  grid-row: 2;
  justify-self: start;
  margin-left: var(--bs-text-x);
  /* Лента со слайдом намного выше текстовой колонки: поле под изделие
     квадратное, а подпись короткая. Управление, вставая после ленты,
     уезжало на светлую ленту волны.
     Подъём привязан к высоте поля (она равна его ширине — квадрат),
     а не задан числом: иначе на другой ширине экрана снова разъедется.
     300px — примерная высота текстовой колонки, на неё и равняемся. */
  margin-top: calc(300px - var(--bs-col1));
  padding: 0;
  right: auto; bottom: auto;
}
.hslider__arrow {
  border-color: rgba(201, 169, 97, 0.35);
  color: rgba(242, 239, 234, 0.75);
}
.hslider__arrow:hover { border-color: #C9A961; color: #C9A961; }
.hslider__dot { background: rgba(242, 239, 234, 0.25); }
.hslider__dot--active { background: #C9A961; }

@media (max-width: 900px) {
  .hslide {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    text-align: center;
  }
  /* В старой теме витрине задан отступ сверху 5rem — при светлом фоне он
     был незаметен, при тёмном стал светлой полосой между волной и блоком. */
  .hero-slider { margin-top: 0; height: auto; }
  /* Волновой блок схлопывался в ноль: у него line-height 0, а у svg была
     задана только высота. Возвращаем ему собственную высоту. */
  .wave-fill--signature { height: 38px; overflow: hidden; }
  /* Верхняя волна заезжает на фотографию: над её кривой ничего не
     нарисовано, и там просвечивал фон страницы светлой полосой.
     Теперь весь блок лежит поверх снимка, и полосе взяться неоткуда. */
  .wave-fill--signature:not(.wave-fill--under) {
    position: relative;
    z-index: 2;
    margin-top: -38px;
  }
  /* В старой теме у картинки на телефоне снизу отступ 28vh — он поднимал
     изделие в верх кадра, когда текст лежал поверх. Текст теперь под
     изделием, и отступ превращался в провал в пол-экрана. */
  .hslide__media { aspect-ratio: 1 / 1; }
  .hslide__media img { padding: 0; }
  .hslide__price { display: inline-block; padding-inline: 2rem; }
  /* На телефоне колонок нет — управление просто по центру. */
  /* На телефоне блок управления растягивался во всю ширину, и стрелки
     уезжали за края экрана. Ширина по содержимому. */
  .hslider__controls {
    justify-self: center;
    width: fit-content;
    max-width: calc(100vw - 2 * var(--px));
    margin-left: 0;
    margin-top: 1rem;
    gap: 0.7rem;
  }
  /* Стрелки мельче: в полный размер блок не помещался в ширину экрана
     и края уезжали за кадр. */
  .hslider__arrow { width: 38px; height: 38px; }
  .hslider__arrow svg { width: 15px; height: 15px; }
  .hslider__dots { gap: 0.4rem; }
  .hslider__dot { width: 18px; }
}


/* ── Логотип ────────────────────────────────────────────────
   Было: кольцо с расходящимися лучами плюс название вразрядку
   заглавными. Знак читался как солнышко — самый ходовой клипарт,
   про люстры не говорящий ничего. Разрядка в кириллице на мелком
   кегле даёт вид сельской вывески; ту же разрядку мы по той же
   причине убирали из подзаголовков.

   Стало: знак — подвеска (нить, колечко, гранёная капля), два штриха
   о том, что вещь висит и что она хрустальная. Название — строчными,
   крупнее, без разрядки: спокойный набор читается дороже кричащего. */

.header__logo-icon { width: 42px; height: 42px; filter: none; }
.header__logo:hover .header__logo-icon { filter: none; }

/* Название НЕ дидоном. Prata — шрифт с очень высоким контрастом штриха:
   в крупном заголовке это красиво, а в логотипе мелким кеглем волосяные
   места разваливаются и слово выглядит хлипко. Знаку имени нужен ровный
   штрих, поэтому берём гротеск — заодно логотип перестаёт повторять
   заголовки, а это и правильно: он должен звучать отдельно. */
.header__logo-text {
  font-family: var(--font-body);
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F2EFEA;
  line-height: 1;
}
.header__logo { gap: 0.6rem; align-items: center; }
.header__logo:hover .header__logo-text { color: var(--gold-hover); }

@media (max-width: 900px) {
  .header__logo-text { font-size: 1.14rem; }
  .header__logo-icon { width: 34px; height: 34px; }
}


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

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

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

.header__nav-link,
.product-menu__label,
.hpanel__row-title,
.section-desc,
.hslide__eyebrow,
.cat-row__title,
.collection-tagline,
.stat-label,
.footer-nav a,
.footer-col__title {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Размер подрастает: заглавные визуально крупнее строчных при том же
   кегле, и после перевода в строчные надписи «сдуваются». */
.header__nav-link { font-size: 0.97rem; }
.hpanel__row-title { font-size: 1rem; }
.section-desc { font-size: 1.02rem; line-height: 1.7; }




/* ── Как рождается люстра ───────────────────────────────────
   Было три колонки в ряд — читалось таблицей, снимки мелкие, и
   главное терялось: первая и третья фотографии это ОДНА И ТА ЖЕ
   вещь, сначала моделью, потом на потолке.

   Стало: одна большая сцена, на которой вещь превращается, и три
   шага сбоку. Превращение видно, и блок работает как рассказ.
   Прокрутку не перехватываем — это раздражает и ломает поведение
   страницы; сцена крутится сама, пока видна, и слушается кликов. */

.forge {
  /* Тёплый светлый камень. Графит пробовали и отвергли: холодный блок
     посреди тёплой страницы выбивался, а вместе с ним пришлось бы
     держать холодным и паспарту. Тон — токен --card, тот же, которым
     на странице чередуются блоки: нового цвета не заводим. */
  background: var(--card);
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 8rem);
  color: #3A332A;
  position: relative;
  overflow: hidden;
}
.forge .section-branches { opacity: 0.3; filter: grayscale(0.85) contrast(0.85); }
.forge .container { position: relative; z-index: 1; max-width: 1120px; }

.forge__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.forge .section-title { color: #332C22; margin: 0; }
.forge__lead { margin: 0; font-size: 1.04rem; line-height: 1.75; color: rgba(58, 51, 42, 0.82); }

/* ── Сцена ── */
.forge__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.forge__screen { position: relative; }
.forge__shot {
  position: absolute; inset: 0;
  /* Рамки нет совсем: форму держит сама фотография. Паспарту пробовали
     и бумажным, и графитовым, и коричневым — оправа каждый раз
     перетягивала внимание на себя, а изделие тут главное. */
  padding: 0;
  background: none;
  /* Форма прежняя — живой край со скруглёнными углами. Кромка узкая:
     поля 4 px вместо 22, это уже кант, а не паспарту.
     Обрезка по форме съедает обычную тень, поэтому тень даётся
     фильтром — он повторяет вырез, а не коробку. */
  clip-path: url(#forge-wave);
  /* Появление «из пустоты»: уходит не только снимок, но и сама оправа.
     Сначала растворяется всё до конца, поле остаётся пустым, и лишь
     потом оттуда проступает следующий кадр — отсюда задержка у
     входящего. Размытие снимается вместе с проявлением, предмет будто
     наводится на резкость. */
  opacity: 0;
  transform: scale(0.965);
  filter: blur(9px) drop-shadow(0 14px 28px rgba(58, 51, 42, 0.22));
  transition:
    opacity 0.6s var(--ease),
    transform 1.1s var(--ease),
    filter 0.9s var(--ease);
  pointer-events: none;
}
/* Первый кадр держит высоту сцены: остальные лежат поверх абсолютом. */
.forge__shot:first-child { position: relative; }
.forge__shot--on {
  z-index: 2;
  opacity: 1;
  transform: none;
  filter: blur(0) drop-shadow(0 14px 28px rgba(58, 51, 42, 0.22));
  /* Задержка — это пауза на пустом поле. Меньше 0.4 с она перестаёт
     читаться как пустота и превращается в обычный наплыв. */
  transition-delay: 0.42s;
  transition-duration: 1.25s;
}

/* Фотография внутри остаётся ровным прямоугольником — так и выглядит
   снимок, наклеенный на паспарту: рваный край у листа, не у отпечатка. */


.forge__frame { display: block; overflow: hidden; }
.forge__frame img {
  width: 100%;
  /* 2:3 под сами снимки (0.71, 0.80, 0.65): все вписываются по высоте
     целиком, подрезаются только поля по бокам. При 4:3 изделия резало
     сверху и снизу — они вертикальные. */
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* В model.png первые три строки пикселей почти чёрные — край исходника.
   Файл мастера не трогаем, срезаем на показе. */
.forge__shot:first-child .forge__frame img { clip-path: inset(0.32% 0 0 0); }

/* ── Шаги ── */
.forge__steps { list-style: none; margin: 0; padding: 0; }
.forge__step {
  border-top: 1px solid rgba(58, 51, 42, 0.16);
  padding: 1.15rem 0 1.05rem;
}
.forge__step:last-child { border-bottom: 1px solid rgba(58, 51, 42, 0.16); }

.forge__btn {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.forge__btn:focus-visible { outline: 2px solid #7F5C1E; outline-offset: 4px; }

.forge__num {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(127, 92, 30, 0.75);
  transition: color 0.3s var(--ease);
}
.forge__name {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  color: rgba(58, 51, 42, 0.55);
  transition: color 0.3s var(--ease);
}
.forge__step--on .forge__name { color: #332C22; }
.forge__step--on .forge__num { color: #7F5C1E; }

/* Текст раскрывается только у активного шага: 0fr -> 1fr, без
   заданной руками высоты — она у всех разная. */
.forge__text {
  margin: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  font-size: 0.99rem;
  line-height: 1.72;
  color: rgba(58, 51, 42, 0.8);
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease), margin 0.45s var(--ease);
  overflow: hidden;
}
/* Текст обёрнут в span: у grid схлопывается элемент, а голый текстовый
   узел становится анонимным элементом и высоту держит. */
.forge__text > span { min-height: 0; }
.forge__step--on .forge__text {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.7rem;
}

/* Индикатор — волна, а не прямая полоса: та же кривая, что идёт через
   всю страницу, только маленькая. Линия прочерчивается змейкой, пока
   идёт шаг.

   Длина пути нормализована через pathLength="1", поэтому штрих и сдвиг
   задаются единицей и не зависят от реальной длины кривой — иначе её
   пришлось бы вычислять скриптом при каждом изменении ширины. */
.forge__bar {
  display: block;
  margin-top: 0.9rem;
  line-height: 0;
}
.forge__bar svg {
  width: 100%;
  height: 14px;
  display: block;
  overflow: visible;
}
.forge__bar-track,
.forge__bar-run {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Бледная волна во всю ширину убрана: по ней линия всё равно не идёт,
   каждый шаг ведёт только свою треть. Остаются три отрезка, и вниз по
   колонке они складываются в лесенку — видно, где ты находишься. */
.forge__bar-track { display: none; }
.forge__bar-run { stroke: #7F5C1E; }

/* Волна одна на три шага: первый прочерчивает левую треть, второй
   среднюю, третий правую. Пройденные трети остаются.

   Режем ОКНОМ ПО ШИРИНЕ, а не отсчётом по длине кривой. Длина кривой
   тут обманчива: система координат растягивается по горизонтали
   неравномерно (высота у полоски постоянная, ширина тянется по
   колонке), браузер считает длину уже после растяжения, и треть пути
   перестаёт совпадать с третью ширины — причём по-разному на разных
   экранах. Проценты ширины от этого не зависят вовсе. */
.forge__bar-run { clip-path: inset(0 100% 0 0); }

.forge__steps > :nth-child(1).forge__step--on .forge__bar-run { animation: forgeSeg1 5.8s linear forwards; }
.forge__steps > :nth-child(2).forge__step--on .forge__bar-run { animation: forgeSeg2 5.8s linear forwards; }
.forge__steps > :nth-child(3).forge__step--on .forge__bar-run { animation: forgeSeg3 5.8s linear forwards; }

.forge__steps > :nth-child(1).forge__step--done .forge__bar-run { clip-path: inset(0 66.667% 0 0);       animation: none; }
.forge__steps > :nth-child(2).forge__step--done .forge__bar-run { clip-path: inset(0 33.333% 0 33.333%); animation: none; }
.forge__steps > :nth-child(3).forge__step--done .forge__bar-run { clip-path: inset(0 0 0 66.667%);       animation: none; }

@keyframes forgeSeg1 {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 66.667% 0 0); }
}
@keyframes forgeSeg2 {
  from { clip-path: inset(0 66.667% 0 33.333%); }
  to   { clip-path: inset(0 33.333% 0 33.333%); }
}
@keyframes forgeSeg3 {
  from { clip-path: inset(0 33.333% 0 66.667%); }
  to   { clip-path: inset(0 0 0 66.667%); }
}

/* Номер и название пройденного шага не гаснут полностью: путь пройден,
   а не забыт. */
.forge__step--done .forge__name { color: rgba(58, 51, 42, 0.74); }
.forge__step--done .forge__num  { color: rgba(127, 92, 30, 0.85); }

/* ── Ссылка ─────────────────────────────────────────────────
   Прямоугольная кнопка в этом блоке была чужеродной: вокруг всё
   построено на линиях и волне, а посреди стояла коробка.
   Коробку убрали; подчёркивание — та же волна, что служит шкалой
   шагов, и она прочерчивается при наведении. */
.forge__linkwrap { display: flex; justify-content: center; margin-top: clamp(2.4rem, 4.5vw, 3.8rem); }
.forge__link {
  display: inline-block;
  padding: 0.2rem 0 0;
  text-decoration: none;
  color: #3A332A;
}
.forge__link-text {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.forge__link-wave { display: block; line-height: 0; margin-top: 0.45rem; }
.forge__link-wave svg { width: 100%; height: 12px; display: block; overflow: visible; }
.forge__link-track,
.forge__link-run {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.forge__link-track { stroke: rgba(58, 51, 42, 0.16); }
.forge__link-run {
  stroke: #7F5C1E;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.65s var(--ease);
}
.forge__link:hover .forge__link-run,
.forge__link:focus-visible .forge__link-run { stroke-dashoffset: 0; }
.forge__link:hover .forge__link-text { color: #7F5C1E; }
.forge__link:focus-visible { outline: 2px solid #7F5C1E; outline-offset: 6px; }

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

@media (max-width: 900px) {
  .forge__head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .forge__stage { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  /* На телефоне шаги идут перед кадром. На широком экране они
     стоят рядом и читаются вместе с картинкой; в одну колонку порядок
     становится смысловым: сначала что за шаг, потом как он выглядит. */
  .forge__steps  { order: 1; }
  .forge__screen { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .forge__shot { transition: none; filter: none; transform: none; }
  .forge__shot--on { transition: none; }
  .forge__text { transition: none; }
  .forge__step--on .forge__bar-run,
  .forge__step--done .forge__bar-run { animation: none; }
  .forge__steps > :nth-child(1) .forge__bar-run { clip-path: inset(0 66.667% 0 0); }
  .forge__steps > :nth-child(2) .forge__bar-run { clip-path: inset(0 33.333% 0 33.333%); }
  .forge__steps > :nth-child(3) .forge__bar-run { clip-path: inset(0 0 0 66.667%); }
}


/* ── Художественное литьё ───────────────────────────────────
   Третий ритм подряд, и нарочно не похожий на соседей: витрина —
   одна вещь крупно, блок выше — последовательность на сцене, здесь —
   несколько кадров рядом, как разложенные на верстаке.

   Движения здесь нет. Блок стоит между двумя движущимися, и третий
   подряд утомляет: глазу нужно место, где ничего не происходит. */

.cast {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  color: #F2EFEA;
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 8rem);
  position: relative;
}
.cast .container { max-width: 1120px; }

.cast__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cast .section-title { color: #F2EFEA; margin: 0; }
.cast__lead {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.75;
  color: rgba(242, 239, 234, 0.78);
}

/* ── Сцена: земля стирается, под ней металл ──
   Маска — круг с мягким краем, его центр идёт за указателем. Картинки
   нарочно НЕ совмещены по кадру: это не сравнение одного ракурса, а
   превращение, и стирание маской именно его и передаёт.
   Радиус ведём переменной, а не пересчитываем маску целиком: так
   браузер анимирует её дёшево и не дёргается. */

.cast__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: url(#forge-wave);
  --mx: 50%;
  --my: 50%;
  --mr: 0%;
  cursor: crosshair;
}
.cast__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cast__earth {
  /* Дыра в маске = стёртая земля. Мягкий край, чтобы граница не резала. */
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent var(--mr), #000 calc(var(--mr) + 9%));
  mask-image: radial-gradient(circle at var(--mx) var(--my),
    transparent 0, transparent var(--mr), #000 calc(var(--mr) + 9%));
}

.cast__hint {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  color: rgba(242, 239, 234, 0.92);
  background: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ── Ссылка: как в блоке выше ── */
.cast__linkwrap { display: flex; justify-content: center; margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.cast__link { display: inline-block; padding: 0.2rem 0 0; text-decoration: none; color: #F2EFEA; }
.cast__link-text {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.cast__link-wave { display: block; line-height: 0; margin-top: 0.45rem; }
.cast__link-wave svg { width: 100%; height: 12px; display: block; overflow: visible; }
.cast__link-track,
.cast__link-run {
  fill: none; stroke-width: 1.3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.cast__link-track { stroke: rgba(242, 239, 234, 0.22); }
.cast__link-run {
  stroke: #C9A961;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.65s var(--ease);
}
.cast__link:hover .cast__link-run,
.cast__link:focus-visible .cast__link-run { stroke-dashoffset: 0; }
.cast__link:hover .cast__link-text { color: #C9A961; }
.cast__link:focus-visible { outline: 2px solid #C9A961; outline-offset: 6px; }

@media (max-width: 900px) {
  .cast__head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cast__stage { aspect-ratio: 4 / 3; cursor: default; }

}

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


/* ── Стыки вокруг блока литья ───────────────────────────────
   Над кривой ничего не нарисовано, поэтому подложка стыка должна быть
   в тон блока СВЕРХУ, иначе там просвечивает фон страницы полосой.
   Сами кривые и золотая кромка — как у остальных стыков. */
.wave-fill--to-cast   { background: var(--card); }
/* Раньше под этим стыком шёл блок «Тишина» на тоне --card, и заливка
   волны притворялась под него. Теперь ниже стоит «Реставрация» на --bg,
   и тот старый переопределённый токен давал полосу чужого тона между
   золотой кривой и блоком — её мастер и отметил. Переопределение снято:
   заливка снова равна --bg и входит в блок без шва. */
.wave-fill--from-cast { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat, #241E17; }


@media (max-width: 900px) {
  /* Высота волнового стыка считается от ширины кадра, и на узком экране
     кривая выходит непропорционально крупной: она поднималась прямо к
     ссылке блока сверху. Задаём высоту явно — кривая просто становится
     положе. */
  /* Высоту надо задавать и самому блоку: у .wave-fill межстрочный
     интервал ноль, и от одной высоты svg блок схлопывается в ноль.
     На эти грабли я наступаю второй раз. */
  .wave-fill--to-cast,
  .wave-fill--from-cast { height: 34px; overflow: hidden; }
  .wave-fill--to-cast svg,
  .wave-fill--from-cast svg { height: 34px; }

  /* И воздух под содержимым блоков, чтобы текст не упирался в стык. */
  .forge { padding-bottom: clamp(3rem, 9vw, 4.5rem); }
  .cast  { padding-bottom: clamp(3rem, 9vw, 4.5rem); }
}


/* ── Заголовки блоков в две колонки ─────────────────────────
   «Художественное» — длинное неразрывное слово, оно переполняло свою
   колонку и наезжало на текст справа. Колонку расширяем, кегль немного
   убавляем и разрешаем перенос по слогам: без него браузеру нечего
   делать с таким словом, кроме как вылезти за край. */
.forge__head,
.cast__head {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.forge .section-title,
.cast .section-title {
  font-size: clamp(1.8rem, 3.1vw, 2.9rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 900px) {
  .forge__head,
  .cast__head { grid-template-columns: minmax(0, 1fr); }
}


/* ── Выделение текста ───────────────────────────────────────
   Было: полупрозрачное золото, а цвет букв брался из --text. В тёмных
   блоках этот токен не переопределён и остаётся тёмным с общей
   страницы — выделенный текст становился тёмным на тёмном.
   Та же ловушка, что была с заголовками: цвет наследуется вычисленным
   значением и не перерешается по месту.

   Теперь выделение самодостаточно: плотная латунь и тёмные буквы.
   Латунь достаточно светлая, чтобы тёмный текст читался, а сама она
   перекрывает любой фон — и светлый, и тёмный. */
::selection {
  background: #C9A961;
  color: #241E17;
  text-shadow: none;
}
::-moz-selection {
  background: #C9A961;
  color: #241E17;
  text-shadow: none;
}


/* ── Реставрация: блок ведёт текст ──────────────────────────
   После трёх блоков, где главной была картинка, этот держится на
   словах. Фотография верстака уходит в фон и работает фактурой:
   она подтверждает, что работа настоящая, но не отвлекает от чтения.

   Содержание — отказы, а не обещания. Поэтому и вёрстка спокойная:
   список без иконок и рамок, одна колонка, крупный кегль. Любое
   украшение тут работало бы против смысла. */

.rest {
  position: relative;
  background: var(--bg);
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(6rem, 11vw, 11rem);
  overflow: hidden;
}
.rest__bg {
  position: absolute; inset: 0;
  background: url("../images/gallery-restoration-1.jpg") center / cover no-repeat;
  /* Сильно приглушена: снимок нужен как фактура, а не как иллюстрация.
     Поверх — растяжка в тон блока, иначе текст читался бы по пятнам. */
  opacity: 0.16;
  filter: grayscale(0.55) contrast(0.9);
  /* Фактура лежит только внутри блока, а волновые стыки — снаружи
     него. Без растушёвки снимок начинался и обрывался ровной чертой
     вдоль края секции — ровно та линия, от которой уходим. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 190px, #000 calc(100% - 340px), transparent calc(100% - 150px));
  mask-image: linear-gradient(180deg,
    transparent 0, #000 190px, #000 calc(100% - 340px), transparent calc(100% - 150px));
}
.rest::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--bg) 0%, rgba(241, 235, 221, 0.92) 42%, rgba(241, 235, 221, 0.62) 100%);
}
.rest__inner { position: relative; z-index: 1; max-width: 1120px; }

.rest__title { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }

/* Главная мысль блока — набирается как заявление, а не как подзаголовок. */
.rest__claim {
  margin: 0 0 clamp(2.4rem, 4.5vw, 3.6rem);
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  line-height: 1.32;
  color: #332C22;
  max-width: 24ch;
}

.rest__list {
  list-style: none;
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2.1rem);
}
.rest__list li {
  display: grid;
  gap: 0.45rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(58, 51, 42, 0.18);
}
.rest__no {
  font-family: var(--font-head);
  font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  line-height: 1.3;
  color: #332C22;
}
.rest__why {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(58, 51, 42, 0.8);
  max-width: 58ch;
}

/* Перелом: единственное, что в старой люстре должно стать новым.
   Отбит латунной чертой слева — это не пункт списка, а поворот. */
.rest__turn {
  margin: 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid rgba(127, 92, 30, 0.55);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.7;
  color: #3A332A;
  max-width: 54ch;
}

/* ── Ссылка: как в соседних блоках ── */
.rest__linkwrap { display: flex; margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.rest__link { display: inline-block; padding: 0.2rem 0 0; text-decoration: none; color: #3A332A; }
.rest__link-text {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.rest__link-wave { display: block; line-height: 0; margin-top: 0.45rem; }
.rest__link-wave svg { width: 100%; height: 12px; display: block; overflow: visible; }
.rest__link-track,
.rest__link-run {
  fill: none; stroke-width: 1.3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.rest__link-track { stroke: rgba(58, 51, 42, 0.16); }
.rest__link-run {
  stroke: #7F5C1E;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.65s var(--ease);
}
.rest__link:hover .rest__link-run,
.rest__link:focus-visible .rest__link-run { stroke-dashoffset: 0; }
.rest__link:hover .rest__link-text { color: #7F5C1E; }
.rest__link:focus-visible { outline: 2px solid #7F5C1E; outline-offset: 6px; }

@media (max-width: 900px) {
  .rest__claim { max-width: none; }
  .rest::after {
    background: linear-gradient(180deg,
      var(--bg) 0%, rgba(241, 235, 221, 0.9) 40%, rgba(241, 235, 221, 0.86) 100%);
  }
}

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


/* ── Реставрация: сравнение до/после ────────────────────────
   Пара настоящая — одна и та же люстра. Кадры сняты по-разному, поэтому
   приведены к одному квадрату отдельными файлами rest-before/rest-after;
   оригиналы мастера не тронуты.

   Ручка — обычный ползунок-поле ввода, только прозрачный. Так сравнение
   работает с клавиатуры и читается вслух, а перетаскивание достаётся
   бесплатно. Самодельная ручка на событиях мыши всего этого лишила бы. */

.rest__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
/* Сравнение держится в поле зрения, пока читаются отказы: текст длиннее
   картинки, и без этого она уезжала вверх, оставляя под собой пустоту. */
.ba { position: sticky; top: calc(var(--header-total-h) + 1.4rem); }

.ba {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  clip-path: url(#forge-wave);
  --pos: 52%;
  user-select: none;
}
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
/* Правая картинка обрезается по положению шторки. */
.ba__after { clip-path: inset(0 0 0 var(--pos)); }

.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #C99E4C;
  pointer-events: none;
}
.ba__divider::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid #C99E4C;
  border-radius: 50%;
  background: rgba(36, 30, 23, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ba__tag {
  position: absolute;
  bottom: 0.9rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #F2EFEA;
  background: rgba(20, 16, 12, 0.6);
  pointer-events: none;
}
.ba__tag--before { left: 0.9rem; }
.ba__tag--after  { right: 0.9rem; }

/* Само поле ввода невидимо и растянуто на всю картинку: тянуть можно
   в любом её месте, а не только за черту. */
.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; }
.ba__range:focus-visible ~ .ba__divider { box-shadow: 0 0 0 3px rgba(201, 158, 76, 0.45); }

.rest__text { display: grid; }
.rest__text .rest__claim { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* Второй разворот — зеркальный: текст слева, сравнение справа.
   В разметке картинка идёт первой, чтобы на телефоне оба разворота
   читались одинаково; местами меняются только на широком экране. */
.rest__cols--flip { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 901px) {
  .rest__cols--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .rest__cols--flip .ba { order: 2; }
  .rest__cols--flip .rest__note { order: 1; }
}

.rest__note { display: grid; gap: 1.05rem; }
.rest__sub {
  margin: 0 0 0.3rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  line-height: 1.28;
  color: #332C22;
  max-width: 22ch;
}
.rest__note p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(58, 51, 42, 0.82);
  max-width: 56ch;
}
.rest__cap {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: rgba(58, 51, 42, 0.55) !important;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(58, 51, 42, 0.16);
}

@media (max-width: 900px) {
  .rest__cols { grid-template-columns: minmax(0, 1fr); }
  /* Все четыре кадра приведены к квадрату 900×900. Стояло 4:3 — обрезало
     верх и низ, и люстра целиком уходила за край. На телефоне
     ширины хватает, чтобы показать снимок как есть. */
  .rest__sub { max-width: none; }
  /* В одну колонку липкость теряет смысл — картинка и так стоит над
     текстом. А вот вреда от неё было много: строка сетки оставалась на
     месте, а сама картинка съезжала вниз на высоту шапки — под заголовком
     зияла пустота, а снизу картинка налезала на текст. */
  /* ИМЕННО relative, не static: картинки внутри лежат на inset:0 и
     считают координаты от ближайшего позиционированного предка. Со статикой
     им достаётся вся секция (375×2514), object-fit раздувает квадрат
     900×900 до неузнаваемости. */
  .ba { position: relative; top: auto; }
}


/* Нижний стык «Реставрации»: раньше блок кончался прямой линией
   в «Тишину». Теперь волна с двух сторон, кривая — зеркальная верхней,
   чтобы блок читался как линза, а не как два одинаковых гребня. */
/* Фона у самого стыка быть не должно. Он здесь был с тех пор, когда кривая
   заливалась снизу; сейчас верх кривой закрывает сама фигура, а низ должен
   оставаться прозрачным — там просвечивает фотография полосы.
   На десктопе беды не было видно: там у блока нулевая высота и красить
   было нечего. На телефоне ему заданы 34 px — и заливка легла полосой
   поверх снимка, под самой золотой кромкой. */
.wave-fill--rest-bottom { background: none; }

@media (max-width: 900px) {
  .wave-fill--rest-bottom { height: 34px; overflow: hidden; }
  .wave-fill--rest-bottom svg { height: 34px; }
  .rest { padding-bottom: clamp(2.5rem, 7vw, 4rem); }
}


/* ── «Тишина» ─────────────────────────────────────
   Слово задумано водяным знаком — это верно. Но цифры достались
   от тёмной темы: латунь в 10% на чёрном светится, а на камне
   #E5DDCC разница с фоном почти нулевая. Плюс дыхание опускало
   прозрачность ещё вдвое — итоговые 5%.

   Берём не светлую латунь, а тёмную бронзу: на светлом фоне
   читается то, что темнее фона, а не то, что светлее. И дыхание
   сужаем: в самой тихой точке слово всё равно читается. */
.luxury-band-headline {
  color: rgba(122, 92, 44, 0.46);
  animation-name: bsBreathe;
}
.luxury-band:hover .luxury-band-headline {
  color: rgba(122, 92, 44, 0.62);
  text-shadow: none;
}
@keyframes bsBreathe {
  from { opacity: 0.78; }
  to   { opacity: 1; }
}


/* ── Старые волновые стыки низа страницы ─────────────────
   Пять стыков ниже «Тишины» достались от студийной тёмной темы.
   Две беды:

   1. Заливка под кривой задана жёстким цветом в разметке чанков и
      в трёх случаях не совпадает с блоком, который идёт ниже, — между
      волной и блоком остаётся светлая полоса ничьего тона. Хуже
      всего перед подвалом: там светлая заливка стояла над тёмным
      подвалом. Цвет в разметке — презентационный атрибут, CSS его
      перебивает — правим тут, чанки не трогаем: они общие с
      остальными одиннадцатью шаблонами, которые ещё на тёмной теме.

   2. Золотая кромка была скрыта целиком, и волна читалась как
      случайный перепад тона, а не как линия. Возвращаем её ровно такой
      же, как на стыках верхних блоков. Свечение (.wave-glow) остаётся
      выключенным — оно для тёмного фона.

   :not([class*="--"]) отбирает только старые стыки без модификатора:
   пересобранные верхние рисуют кромку своим вторым путём. */
.wave-fill:not([class*="--"]) .wave-fill__line {
  display: block;
  stroke: #C99E4C;
  stroke-width: 5;
  opacity: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.wave-fill:has(+ .request-form) path[fill] { fill: #D8D2CA; }
.wave-fill:has(+ .footer)       path[fill] { fill: #2B241C; }

/* У «Направлений» в фоне лежала латунная растяжка из левого верхнего
   угла. Она начинается ровно по краю секции, а волновой стык лежит
   выше — поэтому под золотой кривой проступала вторая, прямая черта.
   Семь процентов тёплого в углу не стоят лишней линии на стыке. */
.about      { background: var(--bg); }

/* Декоративные ветви лежат внутри секций и начинаются ровно по их
   верхней кромке, а волновой стык проходит выше. Получалась вторая,
   прямая граница под золотой кривой. Растушёвываем верх. */
.section-branches {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px);
  mask-image: linear-gradient(180deg, transparent 0, #000 220px);
}

/* Фон «Тишины» ──────────────────────────────────────
   Снимок мастера IMG_8260 — панорамный крупный план рожков с
   ониксом, 4752×1552. Полоса на широком экране почти такой же
   пропорции, поэтому кадр входит почти целиком. Для сайта уменьшен
   до 2000 px (band-onyx.jpg) — оригинал на месте, не тронут.

   Вуаль светлая, но не чисто белая: белым полоса выбивалась бы из
   тёплой страницы. Справа она плотнее — там лежит цитата, и ей
   нужен спокойный фон; слева прозрачнее, там только водяной знак. */
.luxury-band {
  background:
    linear-gradient(95deg,
      rgba(238, 232, 219, 0.66) 0%,
      rgba(238, 232, 219, 0.74) 46%,
      rgba(238, 232, 219, 0.86) 100%),
    url("../images/band-onyx.jpg?v=1") center / cover no-repeat,
    var(--card);
}

@media (max-width: 900px) {
  /* На узком экране cover режет панораму до случайного фрагмента
     и сильно его увеличивает. Вуаль плотнее: весь текст блока там
     лежит по центру, поверх самой гущи кадра. */
  .luxury-band {
    background:
      linear-gradient(rgba(238, 232, 219, 0.82), rgba(238, 232, 219, 0.82)),
      url("../images/band-onyx.jpg?v=1") center / cover no-repeat,
      var(--card);
  }
}

/* Фото должно уходить ПОД волну, а не начинаться после неё.
   Стык рисуется svg высотой 110 px, подвешенным над нулевой строкой
   блока, то есть поверх низа «Реставрации». Раньше низ кривой
   заливался плоским тоном — именно эта полоса шла между золотой
   кромкой и началом снимка. Теперь заливка ушла наверх кривой, а
   полоса подтянута на ту же высоту вверх: фото заходит под волну,
   и вырез открывает его, а не подложку. Отступ сверху компенсирует
   подъём, иначе содержимое полосы уехало бы под кривую. */
/* Снизу столько же: цитата опустилась, когда мы развели её со словом,
   и последнюю строку срезала нижняя волна. */
.luxury-band { margin-top: -110px; padding-top: calc(6rem + 110px); padding-bottom: calc(6rem + 110px); }

@media (max-width: 900px) {
  /* На узком экране стык урезан до 34 px — подъём тот же. */
  .luxury-band { margin-top: -34px; padding-top: calc(6rem + 34px); padding-bottom: calc(6rem + 34px); }
}

/* Линия в полосе стояла по центру блока (top: 50%) и проходила ровно
   по слову «Тишина», перечёркивая его. Место ей — в зазоре между
   словом и цитатой. Зазора не было вовсе (низ слова 325, верх
   цитаты 326) — сначала разводим их.

   Высота слова не прибита гвоздями: кегль у него clamp от ширины
   экрана. Поэтому всё считается от той же формулы, а не от числа в
   пикселях: иначе на промежуточных ширинах линия снова наедет на
   буквы. Множитель 1.35 — измеренная высота строки Праты. 32px —
   смещение самой кривой внутри своего svg (y=32 из 60). */
.luxury-band {
  --ql-head-h: calc(clamp(3rem, 8vw, 5.5rem) * 1.35);
  --ql-pad-top: calc(6rem + 110px);
}
.luxury-band-quote {
  top: calc(var(--ql-head-h) + 2.8rem);
}
.luxury-band-line {
  top: calc(var(--ql-pad-top) + var(--ql-head-h) + 1.4rem - 32px);
  transform: none;
}

@media (max-width: 900px) {
  /* Здесь слово и цитата стоят в потоке с отступом 1.25rem —
     линию кладём в середину этого отступа. */
  .luxury-band { --ql-pad-top: calc(6rem + 34px); }
  .luxury-band-line {
    top: calc(var(--ql-pad-top) + var(--ql-head-h) + 0.625rem - 32px);
  }
}

/* Слово уходит левее, цитата поднимается — просьба мастера.
   Линию двигаем вместе с ними: она всегда ровно посередине зазора. */
@media (min-width: 901px) {
  .luxury-band-parallax { transform: translateX(calc(-50% - 13rem - 35px)); }
}
.luxury-band-quote { top: calc(var(--ql-head-h) + 2rem); }
.luxury-band-line  { top: calc(var(--ql-pad-top) + var(--ql-head-h) + 1rem - 32px); }

/* ── Логотип ─────────────────────────────────────────
   Готовый знак мастера (logo_BS.png) вместо сборки «капля + набранное
   слово». Надпись в оригинале тёмно-коричневая, а шапка тёмная — на ней
   она не читалась бы. Поэтому рядом лежит logo_BS-light.png: буквы
   перекрашены в молочный, пламя сохранило свою латунную растяжку.
   Разделял по геометрии (слово до x=567, знак после 580), а не по цвету:
   самые тёмные места пламени по тону совпадают с буквами. И обрезал
   по заметной непрозрачности, а не по alpha > 0: по краям файла висели
   пиксели с alpha 1–4, и обычный трим оставлял 32 px пустоты слева. */
/* Правила знака переехали в theme-bronzasvet-base.css — они нужны всем страницам. *//* Тот же знак в подвале вместо набранного слова. */
/* колонка выровнена по правому краю, а картинка — блок: text-align её не двигает */
.footer-logo-img { display: block; height: 46px; width: auto; margin-left: auto; }
/* на телефоне колонка слева — знак встаёт по той же кромке, что и подпись */
@media (max-width: 900px) { .footer-logo-img { height: 36px; margin-left: 0; } }

/* Водяной знак в блоке заявки был набран как BRASS — пять латинских
   букв. «Бронзасвет» вдвое длиннее, и прежний кегль выводил слово
   за края экрана. Убавляем и страхуемся от горизонтальной прокрутки. */
.cta-bg-text {
  font-size: clamp(3.5rem, 11vw, 11rem);
  white-space: nowrap;
  max-width: 100%;
}

/* Подпись под знаком в подвале.
   Было: вплотную к логотипу (зазор ноль), тем же молочным в полную силу
   и с разрядкой — две надписи одной громкости друг на друге, и непонятно,
   что главное. Стало: воздух под знаком, тише по тону, и правый край
   подписи совпадает с правым краем логотипа и всей колонки.

   Отрицательный правый отступ размером в разрядку — обязательный: браузер
   ставит разрядку и после последней буквы, и без компенсации строка
   недотягивает до края на эти три пикселя — ровно то, что глаз ловит. */
.footer-tagline {
  margin-top: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: rgba(242, 239, 234, 0.52);
  text-align: right;
  margin-right: -0.3em;
}

@media (max-width: 900px) {
  .footer-tagline { text-align: left; margin-right: 0; }
}

/* ── Низ страницы на телефоне ───────────────────────────
   Отступы у этих секций одинаковы для любого экрана: 128 px сверху.
   На широком это воздух, на экране 667 px — пятая часть высоты пустоты
   между волной и заголовком.

   Вместе с ними укорачиваю и сами стыки. Старые волны висят на 110 px
   ВВЕРХ, то есть съедают низ предыдущего блока. Если убавить только
   отступы, кривая наедет на текст сверху — на эти грабли уже наступали
   с блоком литья. Поэтому и то, и другое сразу. */
@media (max-width: 900px) {
  .wave-fill:not([class*="--"]) svg { height: 46px; }

  .about        { padding-top: 3.5rem;  padding-bottom: 4rem; }
  .cta          { padding-top: 3.5rem;  padding-bottom: 4rem; }
  .request-form { padding-top: 3rem;    padding-bottom: 3.5rem; }
}