@import url('catalog.css');

.site-header { display: flex; align-items: center; gap: 32px;
  padding: 18px 24px; border-bottom: 1px solid var(--line); }
.site-logo { color: var(--ink); display: block; width: 190px;
  transition: opacity var(--dur) var(--ease); }
.site-logo:hover { opacity: .7; }
.site-logo svg { width: 100%; height: auto; display: block; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
/* Подчёркивание вырастает из левого края, а не появляется целиком: линия
   в 1px под капителью — самый тихий способ показать наведение, какой тут
   возможен. position/relative и абсолютный ::after не меняют высоту строки,
   поэтому шапка остаётся той же высоты, что и была. */
.site-nav__link { color: var(--ink); text-decoration: none; position: relative;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: color var(--dur) var(--ease); }
.site-nav__link::after { content: ''; position: absolute; left: 0; right: 0;
  bottom: -5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease); }
.site-nav__link:hover { color: var(--accent); }
.site-nav__link:hover::after { transform: scaleX(1); }
/* Кегль, трекинг и регистр — те же, что у пунктов меню: переключатель стоит
   с ними в одной строке, и любое расхождение читается как небрежность, а не
   как иерархия. Отличает его только приглушённый цвет — это служебная
   ссылка, а не раздел сайта. Вертикальные паддинги добавлены ради пальца:
   сама строка текста 16px высотой, нажать в неё на телефоне трудно. Высоту
   шапки они не меняют — её задаёт логотип (37px), который выше. */
.site-lang { color: var(--muted); text-decoration: none;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 10px 0; transition: color var(--dur) var(--ease); }
.site-lang:hover { color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); padding: 32px 24px 48px;
  color: var(--muted); font-size: 12px; }
.site-footer__row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.site-footer__rights { margin: 0; }
.site-footer__credit { margin: 8px 0 0; }
/* Площадка 40×40 при знаке 18×18: сам знак должен быть тихим, а промахнуться
   по нему пальцем — нельзя. Отрицательный отступ справа возвращает последнюю
   иконку на край подвала, иначе её поле висит в воздухе. */
.site-social { display: flex; gap: 2px; list-style: none; margin: 0 -10px 0 0; padding: 0; }
.site-social a { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--muted);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.site-social a:hover { transform: translateY(-2px); }
.site-social a:hover { color: var(--accent); }
.site-social svg { width: 18px; height: 18px; display: block; }

@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
  .site-logo { width: 150px; }
  /* Перенос, а не горизонтальная прокрутка: на 375px из шести пунктов
     помещались четыре, и уезжали именно «Contact» и «Întrebări» — то есть
     ровно те, ради которых невеста и заходит. */
  .site-nav { width: 100%; order: 3; margin-left: 0; flex-wrap: wrap;
    gap: 10px 16px; }
  .site-nav__link { font-size: 10px; letter-spacing: .12em; }
  /* Меню ушло на вторую строку, и без этого отступа переключатель языка
     прилипает к логотипу — читается как часть названия салона. Правый край
     первой строки всё равно пустует, там ему и место: на широком экране он
     стоит ровно так же, только за меню. */
  .site-lang { margin-left: auto; }
}

/* Счётчик моделей, отрисованный на сборке — нужен в тексте страницы для
   краулера. В браузере число рисует mountCatalog в своём месте, так что
   здесь дубликат прячется визуально, но остаётся читаемым для скринридера. */

/* --- Страницы: общая типографика ------------------------------------- */
/* Ширина колонки текста ограничена: строка во весь экран не читается. */

main { padding: 0 var(--page-pad) 64px; }
.page { max-width: 1120px; margin: 0 auto; }
/* Каталог ограничен той же колонкой, что и остальные страницы: иначе на
   широком мониторе сетка растягивается, а всё вокруг — нет. */
.catalog { max-width: 1120px; margin: 0 auto; }
.page__head { max-width: 560px; margin: 48px 0 36px; }
.page__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; }
.page__eyebrow a { color: inherit; }
.page__title { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 44px; line-height: 1.1; margin: 0 0 14px; }
.page__count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px; }
/* Своя мера, а не унаследованная от .page__head: заголовку 560px в самый
   раз, а абзацу на той же ширине выходит 78 знаков в строке — многовато. */
.page__intro { font-family: 'Cormorant Garamond', serif; font-size: 19px;
  line-height: 1.6; margin: 0; max-width: 520px; }
.page__link { margin: 18px 0 0; font-size: 13px; }

a { color: var(--accent); }
main a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Правило гарнитур на весь сайт, чтобы не решать заново у каждого блока:
   ТЕКСТ, который читают ради смысла (вводные абзацы, «о салоне», ответы FAQ,
   тексты коллекций и производителей, шаги примерки), набран Cormorant
   Garamond — тем же, что заголовки. ИНТЕРФЕЙС (меню, фильтры, кнопки,
   счётчики, подписи характеристик, значения контактов) остаётся на Jost:
   мелкий капительный текст засечками читается хуже, а не дороже.
   Кегль у засечек выше на 3–4px не ради крупноты: у Cormorant маленькая
   строчная, и 19px занимают столько же места, сколько 15px у Jost.
   Колонки текста при этом сужены: измеренная мера строки была 87–90 знаков
   (и до смены гарнитуры — 82), а на такой длине глаз теряет начало
   следующей строки. Ширины подобраны под 65–75 знаков. */

.btn { display: inline-block; border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; padding: 13px 30px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; border-radius: var(--radius-btn);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.btn:hover { background: var(--accent); color: var(--cream); }
/* Главное действие сайта — запись. Сплошная кнопка ровно одна на странице:
   две одинаково громкие не оставляют выбора, они его отнимают. */
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }

/* --- Главная ---------------------------------------------------------- */

/* Первый экран: текст слева, кадр справа во всю высоту блока и до правого
   края окна. Кадр выходит за боковое поле страницы отрицательным отступом —
   ради этого поле и вынесено в переменную.
   Положение обоих блоков задаётся явными grid-row/grid-column, поэтому в
   разметке они идут в порядке чтения — заголовок и кнопки раньше кадра, —
   а на телефоне сетка всё равно ставит фотографию первой. Кадр стал ссылкой
   на платье, и без этого клавиатурный фокус попадал бы на него до кнопок. */
/* Колонка кадра уже текстовой, а высота без потолка — обе вещи ради
   пропорции рамки. Кадры производителей портретные (2:3), и чем шире рамка,
   тем больше срезается по высоте: при прежних 1 : 1.04 и потолке 740px
   рамка выходила 1.1–1.3 и платье обрезалось по талию. Сейчас она держится
   около 0.93–1.03 на любом мониторе, и видна почти вся фигура. */
.hero { max-width: none; margin: 0 calc(var(--page-pad) * -1) 56px;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch; min-height: 78vh; }
/* Кадр вынут из потока: с обычным img высоту ряда задавала бы его
   собственная пропорция, и на мониторе 1600 первый экран вырастал до 1223px —
   то есть заголовок уезжал за нижнюю кромку. Абсолютный кадр высоты не даёт
   вовсе, и ряд считается по тексту и min-height. */
.hero__media { grid-column: 2; grid-row: 1; position: relative; display: block;
  background: var(--surface-muted); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
  transition: opacity var(--dur) var(--ease); }
.hero__media:hover .hero__img { opacity: .9; }

/* Подпись на кадре, и весь кадр — ссылка на это платье. Своё, а не из
   образца: на первом экране невеста видит конкретное платье и до сих пор не
   могла его найти — имени не было, а искать по фотографии в каталоге из 147
   карточек нечем. Теперь имя написано, и нажатие ведёт прямо на него.
   Подложка-градиент, а не сплошная плашка: подпись должна читаться на любом
   снимке, не закрывая его. */
.hero__tag { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 56px 28px 22px; color: #fff;
  background: linear-gradient(to top, rgba(28, 25, 22, .55), rgba(28, 25, 22, 0)); }
.hero__tag-collection { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  opacity: .85; }
.hero__tag-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1; }
/* Левое поле подтягивается к колонке страницы: на широком мониторе текст
   первого экрана встаёт по той же вертикали, что и всё под ним. */
.hero__text { grid-column: 1; grid-row: 1; align-self: center;
  padding: 64px clamp(28px, 5vw, 64px) 64px
    max(var(--page-pad), calc((100vw - 1120px) / 2 + var(--page-pad))); }
.hero__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px; }
.hero__title { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; margin: 0 0 16px; }
/* Слоган салона стоит под заголовком и набран её же голосом: это знак
   бренда, а не перевод, поэтому в обоих языках он одинаков. lang="ro"
   помечен и на английской странице — иначе скринридер прочитает румынскую
   половину по английским правилам. */
.hero__slogan { font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-style: italic; color: var(--ink); margin: 0 0 20px; }

/* Первый экран набран той же гарнитурой, что заголовок, а не служебным Jost:
   геометрический гротеск читается как интерфейс, а на первом экране салона
   должен звучать голос салона. Кегль выше прежнего не ради крупноты —
   у Cormorant маленькая строчная, и 19px здесь занимают столько же, сколько
   15px у Jost. Jost остаётся там, где он и уместен: меню, фильтры, кнопки. */
.hero__lead { max-width: 460px; margin: 0 0 30px;
  font-family: 'Cormorant Garamond', serif; font-size: 19px;
  line-height: 1.6; color: var(--muted); }
.hero__lead p { margin: 0; }
.hero__lead p + p { margin-top: .7em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Адрес и часы прямо на первом экране: невеста приходит по записи, и первый
   её вопрос — где и когда. Строки набраны служебным Jost, а не засечками:
   это данные, а не текст. */
.hero__where { margin: 30px 0 0; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px; }

/* Обещание про отбор перенесено из первого экрана сюда: оно про то, из чего
   собрана витрина, и стоять ему логичнее прямо над ней. Абзац лежит рядом с
   .tiles, а не внутри: .tiles — флекс-ряд, и абзац внутри него становился
   его же элементом, вставал в одну строку с плиткой и тянулся на её высоту. */
.showcase__lead { max-width: 545px; margin: 0 auto 26px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 21px; line-height: 1.55; }

/* flex, а не grid: коллекций семь, и в трёх колонках последняя плитка
   оставалась в ряду одна у левого края. justify-content центрирует остаток
   последнего ряда, и это читается как замысел, а не как обрыв. */
.tiles { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 18px; justify-content: center; }
/* Карточка коллекции — кадр со скруглёнными углами, название и призыв
   поверх него, внизу на подложке. Подпись внутри карточки даёт то, чего не
   было, пока она стояла под кадром: обрезку по скруглению. Поэтому на
   наведении кадр можно приблизить — раньше увеличенное изображение вылезло
   бы на подпись, теперь его обрезает сама карточка. */
.tile { text-decoration: none; color: inherit; display: block; position: relative;
  flex: 0 1 calc((100% - 36px) / 3);
  border-radius: var(--radius-card); overflow: hidden;
  /* Без этого Safari на время transform рисует углы прямыми. */
  isolation: isolate; }
/* Кадрирование от верхней кромки, а не от центра. Кадры производителей
   разной пропорции: из 400 базовых 277 — 2:3, 65 — 3:4, остальные вразнобой.
   Рамка 3:4 шире кадра 2:3, значит cover совпадает по ширине, а по высоте
   срезает 11% — при кадрировании от центра это 5.5% сверху. Голова в таких
   съёмках начинается на 3% от верха, то есть центр срезал ровно макушку.
   Снизу терять нечего: подол в исходных кадрах и так обрезан. */
.tile__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block;
  background: var(--surface-muted); transition: transform var(--dur-slow) var(--ease); }
/* Подложка плотная по всей высоте текста и растворяется только в верхнем
   отступе (--fade), где текста нет. Первая версия шла от .66 внизу к .32
   на середине — и замер по пикселям показал провал: на The One и
   Luminous Veil, где внизу кадра белое платье, контраст названия падал до
   2.7 при норме 4.5. Посчитано: чтобы белый текст читался поверх белого,
   затемнение под ним должно быть не меньше .55 — здесь .6 у верхней
   кромки текста и плотнее к низу. */
.tile__body, .collection-card__body { --fade: 72px;
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: var(--fade) 22px 22px; color: #fff;
  background: linear-gradient(to top, rgba(22, 19, 17, .82) 0%,
    rgba(22, 19, 17, .6) calc(100% - var(--fade)), rgba(22, 19, 17, 0) 100%); }
/* Мягкая тень — страховка для одиночных бликов на кадре, а не замена
   подложке: контраст обеспечивает подложка, тень только сглаживает край. */
.tile__name, .collection-card__name, .tile__cta, .collection-card__count {
  text-shadow: 0 1px 10px rgba(22, 19, 17, .35); }
.tile__name { font-family: 'Cormorant Garamond', serif; font-size: 27px; line-height: 1.08; }
/* Призыв с короткой линией под ним; на наведении линия дотягивается до
   конца слов — то же движение, что у подчёркивания в меню. Цвет линии —
   светлый тон акцента: тёмный акцент на тёмной подложке пропадал бы. */
.tile__cta, .collection-card__count { position: relative; padding-bottom: 8px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.tile__cta::after, .collection-card__count::after { content: ''; position: absolute;
  left: 0; bottom: 0; height: 1px; width: 34px; background: #cfbc9f;
  transition: width var(--dur) var(--ease); }
.tile:hover .tile__img, .collection-card:hover img { transform: scale(1.04); }
.tile:hover .tile__cta::after,
.collection-card:hover .collection-card__count::after { width: 100%; }

.about { max-width: 540px; margin: 72px auto 0; }
.about h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 30px; margin: 0 0 16px; }
.about p { font-family: 'Cormorant Garamond', serif; font-size: 19px;
  line-height: 1.65; margin: 0 0 14px; }

/* --- Страница платья -------------------------------------------------- */

.dress { max-width: 1120px; margin: 40px auto 0; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.gallery__main { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block;
  border-radius: var(--radius-card);
  background: var(--surface-muted); }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 8px; }
.gallery__thumb { border: 0; padding: 0; background: none; cursor: pointer;
  width: 76px; opacity: .55; transition: opacity var(--dur) var(--ease); }
.gallery__thumb.is-current, .gallery__thumb:hover { opacity: 1; }
.gallery__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block;
  border-radius: 8px; }

.dress__name { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 40px; margin: 0 0 14px; }
.dress__origin { font-size: 12px; letter-spacing: .1em; color: var(--muted);
  margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.dress__specs { margin: 0 0 30px; border-top: 1px solid var(--line); }
/* Сетка с общей колонкой подписей, а не флекс с space-between. Раньше
   значение прижималось к правому краю, и его левая кромка зависела от
   длины собственного пояснения: у «Sleeves» пояснение короче — и значение
   начиналось на 70px правее соседних. Колонка 7.5rem — с запасом над самой
   длинной подписью в обоих языках («Silhouette», 72px). */
.spec { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 20px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec__label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0; }
.spec__value { margin: 0; font-size: 14px; }

/* --- Коллекции, производители, контакты, FAQ -------------------------- */

.collection-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.collection-card { text-decoration: none; color: inherit; display: block; position: relative;
  border-radius: var(--radius-card); overflow: hidden; isolation: isolate; }
.collection-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
  display: block; background: var(--surface-muted);
  transition: transform var(--dur-slow) var(--ease); }
.collection-card__name { font-family: 'Cormorant Garamond', serif; font-size: 27px; line-height: 1.08; }

/* Единственный канал записи стоит выше таблицы контактов и оформлен кнопками:
   невеста должна дойти до WhatsApp, не читая таблицу. */
.booking { max-width: 560px; margin: 0 0 34px; }
.booking__title { font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 22px; margin: 0 0 14px; }
.booking__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Цифры с трекингом .18em, как у прочих кнопок, читаются как набор знаков, а
   номер надо прочесть с первого раза — отсюда свой кегль и свой трекинг. */
.btn--wa { display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: .04em; text-transform: none; padding: 11px 18px; }
.btn--wa svg { width: 17px; height: 17px; flex: none; }
.booking__note { margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 520px; }

.contact { max-width: 560px; margin: 0; border-top: 1px solid var(--line); }
.contact__row { display: flex; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact__label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0; }
.contact__value { margin: 0; font-size: 14px; text-align: right; }
.contact__pending { color: var(--muted); font-style: italic; }

.faq { max-width: 720px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { font-family: 'Cormorant Garamond', serif; font-size: 20px;
  padding: 16px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  transition: color var(--dur) var(--ease); }
.faq__q::-webkit-details-marker { display: none; }
/* flex, а не float: у вопроса в две строки плюс съезжал вниз. */
/* Плюс поворачивается в крестик, а не подменяется на минус: подмена
   content не анимируется, поворот — анимируется. Это единственное движение
   на странице вопросов, и оно показывает, что блок отвечает на нажатие. */
.faq__q::after { content: '+'; color: var(--muted); flex: none;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  transform-origin: center; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--accent); }
.faq__q:hover::after { color: var(--accent); }
.faq__a { font-family: 'Cormorant Garamond', serif; font-size: 18px;
  line-height: 1.6; padding: 0 0 18px; max-width: 520px; }

/* Сетка платьев вне каталога: на странице коллекции нет .catalog__body,
   из-под которого catalog.css задаёт колонки. */
.page .catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; align-content: start; }

@media (max-width: 860px) {
  :root { --page-pad: 16px; }
  main { padding: 0 var(--page-pad) 48px; }
  .page__title { font-size: 32px; }
  .page__head { margin: 28px 0 24px; }
  /* Телефон: кадр на весь первый экран, и на нём — надзаголовок, заголовок,
     слоган и кнопки. Лид, адрес и часы идут сразу под кадром, на кремовом
     фоне: три абзаца поверх фотографии закрыли бы её целиком, а на кадре
     должно остаться главное — кто мы и что нажать.

     Раскладка без второй разметки: .hero__text на телефоне становится
     display: contents, и его дети сами встают в сетку .hero. Кадр занимает
     строки 1–5, первая из них резиновая и выталкивает текст к нижней кромке,
     строки 2–5 — поверх кадра, 6–7 — под ним. На обычном div без роли
     display: contents ничего не ломает для скринридера, а порядок чтения и
     фокуса остаётся порядком разметки. */
  .hero { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) repeat(6, auto);
    min-height: 0; margin-bottom: 34px; }
  .hero__text { display: contents; }

  /* 82svh, а не vh: на телефоне vh считается по экрану без панели адреса, и
     при прокрутке кадр прыгал бы на её высоту. vh — запас для браузеров,
     которые svh не знают. */
  .hero__media { grid-column: 1; grid-row: 1 / 6; z-index: 0;
    min-height: 82vh; min-height: 82svh; }

  /* Подложка снизу вверх, темнее всего под кнопками. Белый текст стоит на
     белом платье, и без неё он бы не читался вовсе: контраст проверен
     замером, а не на глаз. */
  .hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(22, 19, 17, .86) 0%, rgba(22, 19, 17, .72) 34%,
      rgba(22, 19, 17, .28) 58%, rgba(22, 19, 17, 0) 74%); }

  .hero__eyebrow, .hero__title, .hero__slogan, .hero__actions {
    grid-column: 1; z-index: 1; padding-inline: var(--page-pad); }
  /* .92, а не приглушённее: надзаголовок мелкий (11px), ему нужен контраст
     4.5:1, а на экране 375×667 под ним самое светлое место подложки — замер
     давал 5.6 против чистого белого, то есть около 4.8 при .82. Запас важнее
     полутона. */
  .hero__eyebrow { grid-row: 2; color: rgba(255, 255, 255, .92); margin-bottom: 12px; }
  .hero__title { grid-row: 3; color: #fff; font-size: 38px; margin-bottom: 10px; }
  .hero__slogan { grid-row: 4; color: rgba(255, 255, 255, .9); font-size: 18px;
    margin-bottom: 22px; }
  /* Две капсулы в ряд на 375px не помещаются («Rezervați proba» с полями —
     около 194px при 165px на кнопку), и при переносе они вставали друг под
     другом разной ширины. Обе во всю ширину — ровная колонка, и попасть
     пальцем проще. */
  .hero__actions { grid-row: 5; padding-bottom: 28px; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }

  /* Кнопки на тёмном — наоборот: сплошная светлая и светлая рамка. Тёмная
     сплошная кнопка на тёмной подложке сливалась бы с ней. */
  .hero .btn--solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
  .hero .btn--solid:hover { background: #fff; border-color: #fff; }
  .hero .btn:not(.btn--solid) { border-color: rgba(255, 255, 255, .8); color: #fff; }
  .hero .btn:not(.btn--solid):hover { background: #fff; color: var(--ink); }

  .hero__lead { grid-column: 1; grid-row: 6; font-size: 18px;
    margin: 26px 0 0; padding-inline: var(--page-pad); }
  .hero__where { grid-column: 1; grid-row: 7; margin-top: 22px;
    padding-inline: var(--page-pad); }

  /* Подпись с именем платья уходит наверх: внизу кадра теперь заголовок и
     кнопки. Своя подложка, потому что общий градиент туда не достаёт. */
  .hero__tag { top: 14px; right: 14px; bottom: auto; left: auto;
    padding: 7px 12px; flex-direction: row; align-items: baseline; gap: 8px;
    background: rgba(22, 19, 17, .42); border-radius: 99px; }
  .hero__tag-collection { font-size: 9px; }
  .hero__tag-name { font-size: 15px; }
  .showcase__lead { font-size: 19px; }
  /* Радиус меньше: 18px на карточке шириной 165px съедают заметную долю
     угла кадра. Подпись поверх — компактнее, иначе название в две строки и
     призыв закрывали бы половину снимка. */
  :root { --radius-card: 14px; }
  .tile__body, .collection-card__body { --fade: 44px; padding: var(--fade) 12px 12px; gap: 8px; }
  .tile__name, .collection-card__name { font-size: 19px; }
  .tile__cta, .collection-card__count { font-size: 9px; letter-spacing: .14em;
    padding-bottom: 6px; }
  .tile__cta::after, .collection-card__count::after { width: 22px; }
  .tiles { gap: 12px; }
  .tile { flex-basis: calc((100% - 12px) / 2); }
  .about { margin-top: 48px; }
  .dress { grid-template-columns: 1fr; gap: 24px; margin-top: 20px; }
  .dress__name { font-size: 30px; }
  .collection-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page .catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .contact__row { flex-direction: column; gap: 4px; }
  .contact__value { text-align: left; }
}

/* Заголовок каталога и счётчик из сборки: нужны в тексте страницы для
   поиска и скринридера, но на экране их место занимают панель и счётчик,
   которые рисует mountCatalog. */
.visually-hidden, .catalog__ssr-count { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Пояснения к характеристикам и блок похожих ----------------------- */

.spec__hint { display: block; font-size: 12px; line-height: 1.55;
  color: var(--muted); margin-top: 4px; }

.similar { max-width: 1120px; margin: 64px auto 0; }
.similar__title { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 30px; margin: 0 0 8px; }
.similar__note { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
.similar .catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; align-content: start; }

@media (max-width: 860px) {
  .similar { margin-top: 40px; }
  .similar .catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Абзацы под вводным текстом на страницах коллекции и производителя. */
.page__body { font-family: 'Cormorant Garamond', serif; font-size: 19px;
  line-height: 1.65; margin: 14px 0 0; max-width: 540px; }

/* --- Выбор по силуэту на главной -------------------------------------- */

.silhouettes { max-width: 1120px; margin: 72px auto 0; }
.silhouettes__title { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 30px; margin: 0 0 8px; text-align: center; }
.silhouettes__lead { max-width: 470px; margin: 0 auto 28px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.6;
  color: var(--muted); }
.silhouettes__hint { max-width: 470px; margin: 20px auto 0; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-size: 17px; color: var(--muted); }
.silhouettes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.silhouette { text-decoration: none; color: inherit; display: block;
  transition: transform var(--dur) var(--ease); }
.silhouette__img { transition: opacity var(--dur) var(--ease); }
.silhouette__name { transition: color var(--dur) var(--ease); }
.silhouette:hover { transform: translateY(-4px); }
.silhouette:hover .silhouette__img { opacity: .86; }
.silhouette:hover .silhouette__name { color: var(--accent); }
.silhouette__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block;
  border-radius: var(--radius-card);
  background: var(--surface-muted); }
.silhouette__name { display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 19px; margin-top: 10px; }
.silhouette__tagline { display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-style: italic; color: var(--accent); margin-top: 2px; }
.silhouette__hint { display: block; font-size: 12px; line-height: 1.55;
  color: var(--muted); margin-top: 4px; }
.silhouette__count { display: block; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-top: 6px; }

@media (max-width: 860px) {
  .silhouettes { margin-top: 48px; }
  .silhouettes__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* --- Как проходит примерка -------------------------------------------- */

.steps { max-width: 1120px; margin: 72px auto 0; }
.steps__title { font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 30px; margin: 0 0 28px; text-align: center; }
.steps__list { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step { border-top: 1px solid var(--line); padding-top: 16px; }
.step__n { display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--accent); }
.step__title { font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 19px; margin: 6px 0 8px; }
.step__text { font-family: 'Cormorant Garamond', serif; font-size: 17px;
  line-height: 1.6; color: var(--muted); margin: 0; }

@media (max-width: 860px) {
  .steps { margin-top: 48px; }
  .steps__list { grid-template-columns: 1fr; gap: 22px; }
  .steps__title { margin-bottom: 20px; }
}

/* --- Движение ---------------------------------------------------------- */
/* Три вещи и ни одной больше: выход первого экрана, появление блоков при
   прокрутке и ободок фокуса. Ховеры живут рядом со своими элементами выше —
   переход в одну строку понятнее, чем список исключений в конце файла. */

/* Клавиатурный фокус: до сих пор его рисовал браузер по умолчанию, а на
   тёмном тексте по кремовому фону он почти не виден. :focus-visible, а не
   :focus — мышью нажатая ссылка ободок не получает. */
/* border-radius здесь не задаётся: раньше стоял 1px, и скруглённая карточка
   в фокусе становилась прямоугольной. Обводка сама повторяет радиус
   элемента. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* Первый экран выходит сам, без джаваскрипта: ключевые кадры применяются
   при разборе документа, поэтому текст не мигает и не зависит от загрузки
   скрипта. Если стили не загрузятся вовсе, не применится и анимация —
   содержимое останется видимым. Порядок задержек повторяет порядок чтения. */
/* Ключевые кадры объявлены на верхнем уровне, а не внутри media-запроса:
   внутри они существовали бы только пока запрос совпадает, и у посетителя с
   отключённым движением имя анимации не разрешилось бы — блок остался бы с
   opacity: 0. Само применение ниже по-прежнему под запросом. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow { animation: rise var(--dur-slow) var(--ease) .04s both; }
  .hero__title { animation: rise var(--dur-slow) var(--ease) .12s both; }
  .hero__slogan { animation: rise var(--dur-slow) var(--ease) .22s both; }
  .hero__lead { animation: rise var(--dur-slow) var(--ease) .3s both; }
  .hero__actions { animation: rise var(--dur-slow) var(--ease) .38s both; }
  .hero__where { animation: rise var(--dur-slow) var(--ease) .46s both; }
}

/* Появление при прокрутке. Скрывает содержимое только класс js-reveal,
   который ставит сам скрипт (src/js/reveal.js) — без джаваскрипта и у
   поискового робота всё видно с первого кадра. Задержку внутри группы
   ставит тот же скрипт инлайном.

   Именно анимация, а не переход: правило перехода здесь специфичнее, чем
   `.tile` или `.dress-card`, и подменяло бы собой их собственный transition —
   карточка после появления ездила бы на ховере 0.7s вместо 0.32s. Анимация
   с transition не конфликтует. Атрибут data-reveal скрипт снимает по
   animationend, и тогда элемент возвращается к своим обычным стилям: иначе
   `transform: none` из последнего кадра держался бы поверх `:hover` и сдвиг
   карточки перестал бы работать вовсе. */
.js-reveal [data-reveal] { opacity: 0; }
.js-reveal [data-reveal].is-revealed { animation: rise var(--dur-slow) var(--ease) both; }

/* Стоп-кран. Стоит последним правилом последнего листа стилей и снимает
   движение целиком: и переходы, и ключевые кадры, и сдвиги на ховере.
   `!important` здесь по делу — иначе каждое правило выше пришлось бы
   перечислять в этом блоке заново. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
    transition-delay: 0s !important;
  }
  .silhouette:hover, .dress-card:hover, .site-social a:hover,
  .tile:hover .tile__img, .collection-card:hover img { transform: none !important; }
  .site-nav__link:hover::after { transform: scaleX(1) !important; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important;
    animation: none !important; }
}