/* IANIS CHAMALIDY: правки шаблона riska-fashion (перенесены из izeta). Утилиты Tailwind собраны в tailwind.css. */

html {
  font-family: "Manrope", Arial, sans-serif;
}

body {
  font-family: inherit;
}

.font-display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  /* у Playfair цифры по умолчанию минускульные: «273 000» читалось как «273 ooo» */
  font-variant-numeric: lining-nums;
}

/* Название дома: у него логотип — широкий гротеск вразрядку, поэтому не антиква */
.wordmark {
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

/* 15 знаков с разрядкой занимают около 10 кеглей: кегль считаем от ширины окна */
.footer-mark {
  font-size: 9vw;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
}

/* Элементы поверх контента: цвет ставит скрипт по data-tone секции под ними */
.tone {
  color: #fff;
  transition: color 0.35s ease;
}

.tone[data-on="light"] {
  color: #0c0c0c;
}

/* Подложка шапки: скрипт раскладывает в ней прямоугольники в цвет секций под шапкой */
#headerScrim {
  position: fixed;
  inset: 0 0 auto;
  z-index: 95;
  height: 6.75rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent);
  mask-image: linear-gradient(to bottom, #000 48%, transparent);
}

#headerScrim span {
  position: absolute;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* на телефоне подложка не выходит за шапку: под ней сразу начинаются фото вещей */
  #headerScrim {
    height: 4rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent);
    mask-image: linear-gradient(to bottom, #000 64%, transparent);
  }
}

/* Пока под шапкой только чёрно-белые заливки, её красит difference: тёмная колонка
   и светлая стоят рядом, и название или пункт меню попадает на их стык. */
#siteHeader.is-blend {
  mix-blend-mode: difference;
}

#siteHeader.is-blend .tone {
  color: #fff;
  transition: none;
}

#siteHeader nav {
  transition: opacity 0.3s ease, visibility 0.3s;
}

/* Лента вещей: над ней пункты навигации скрыты, остаются название, «Стилист» и «Меню».
   Фото вещи начинается под шапкой (правило .product-visual ниже), так что шапка лежит
   на ровном фоне слайда, а не на лицах моделей. */
#siteHeader.is-lenta nav {
  opacity: 0;
  visibility: hidden;
}

/* шаблон: на десктопе фото вещи шло от самого верха экрана, без подложки — название,
   «Стилист» и «Меню» проезжали по лицам моделей серым по коже. Сверху у колонки фото
   прозрачная кайма в высоту шапки: в ней виден фон слайда, фото начинается под ней.
   На телефоне то же делает отступ max-md:mt-16 в разметке. */
@media (min-width: 768px) {
  .product-visual {
    border-top: 5rem solid transparent;
    background-clip: padding-box;
  }

  /* колонка стала ниже на шапку: кадр привязан к её верху и растёт от верха, иначе
     запас под параллакс (−8 % сверху) и наезд срезали бы макушки */
  .product-image {
    top: 0;
    height: 108%;
    transform-origin: 50% 0;
  }

  /* у пальто шляпа, у пиджака шапка стоят у самого верха кадра — показываем кадр от верха */
  #productTrack .product-slide:nth-child(1) .product-image {
    object-position: 50% 0;
  }

  #productTrack .product-slide:nth-child(3) .product-image {
    object-position: 30% 8%;
  }
}

/* шаблон: номер «01» — белая рамка и белые цифры на светлой стене кадра, не читался.
   Тёмный, как «03», и на светлой плашке: стена в резких чёрно-белых штрихах,
   с mix-blend-difference (как у «03») цифры на ней рябят. */
.panel-num-dark {
  border-color: #0c0c0c;
  background-color: rgba(245, 245, 245, 0.62);
  color: #0c0c0c;
}

/* шаблон: «Смотреть» в круглой кнопке на телефоне было 10 px. Разрядка чуть уже,
   чтобы слово не упиралось в край круга 80 px */
@media (max-width: 767px) {
  .product-action .magnetic {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}

/* Кегли заголовков. В шаблоне трекинг и интерлиньяж подобраны под латиницу DM Serif
   Display: в кириллице буквы слипались, выносные «р», «у», «ё» резались масками слов. */
.t-hero,
.t-story,
.t-panel,
.t-fur,
.t-coll,
.t-prod,
.t-cta,
.t-menu {
  letter-spacing: -0.02em;
  line-height: 0.9;
}

/* «Священный» — девять широких букв: на телефоне слово должно влезать в 90vw */
.t-hero {
  font-size: clamp(2.6rem, 14vw, 6.5rem);
}

.t-story {
  font-size: clamp(2.5rem, 11.4vw, 5rem);
  line-height: 0.96;
}

.t-panel {
  font-size: clamp(2.7rem, 12.5vw, 4.6rem);
}

.t-fur {
  font-size: clamp(3.3rem, 17vw, 6.5rem);
}

.t-coll {
  font-size: clamp(3rem, 15.5vw, 6.5rem);
}

.t-prod {
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 0.96;
}

.t-cta {
  font-size: clamp(3.2rem, 15vw, 6rem);
}

.t-menu {
  font-size: clamp(2.4rem, min(11vw, 9.5vh), 4rem);
  line-height: 1;
}

@media (min-width: 768px) {
  .t-hero {
    font-size: clamp(5rem, min(11.2vw, 22vh), 12.5rem);
  }

  .t-story {
    font-size: clamp(3.6rem, 8vw, 9rem);
  }

  /* «много форм.» и «один город.» должны влезать в колонку 31vw одной строкой */
  .t-panel {
    font-size: clamp(2.2rem, min(5vw, 12vh), 6.4rem);
  }

  .t-fur {
    font-size: clamp(5rem, min(11vw, 22vh), 12rem);
  }

  .t-coll {
    font-size: clamp(4.5rem, 9.4vw, 10rem);
  }

  .t-prod {
    font-size: clamp(2.5rem, min(4.5vw, 9.5vh), 5.2rem);
  }

  .t-cta {
    font-size: clamp(4.6rem, min(9.4vw, 19vh), 10rem);
  }

  .t-menu {
    font-size: clamp(3rem, min(7.4vw, 11.5vh), 8rem);
  }
}

/* Подчёркивание ссылок шапки и контактов */
.nav-link::after,
.contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-link {
  position: relative;
  display: inline-block;
}

.contact-link::after {
  transform: scaleX(1);
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

.contact-link:hover::after,
.contact-link:focus-visible::after {
  opacity: 1;
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

#stylistForm input:focus-visible {
  outline: none;
}

#stylistForm .relative:focus-within {
  border-color: #fff;
  box-shadow: 0 1px 0 0 #fff;
}

/* Телефон: шторка поверх фото отнимает и без того небольшой кадр */
@media (max-width: 767px) {
  .image-curtain {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-word:not(:first-child) {
    display: none;
  }

  /* без скролл-анимации красная шторка стояла бы поверх кадра */
  .hero-wipe {
    display: none;
  }

  .image-curtain {
    display: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}