/* IZETA: правки шаблона riska-fashion. Утилиты 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;
}

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

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

/* Подложка шапки: скрипт раскладывает в ней прямоугольники в цвет секций под шапкой.
   шаблон: шапка прозрачная, текст секций проезжал прямо под названием и кнопкой меню */
#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) {
  /* на телефоне подложка не выходит за шапку: под ней сразу начинаются фото вещей.
     Название здесь крупное (низ на 40 px из 64): подложка плотная до 52 px, иначе
     заголовок секции проявлялся вплотную под названием и читался с ним одной надписью */
  #headerScrim {
    height: 4rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, 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;
}

/* над кадром вечерней коллекции (лицо, пайетки) пункты навигации не читались */
#siteHeader.is-navless nav {
  opacity: 0;
  visibility: hidden;
}

/* Шторка первого экрана. шаблон: у неё был резкий край (clip-path), который шёл по белой
   рубашке полосой; теперь край размыт маской, а сама шторка въезжает справа (main.js). */
.hero-wipe {
  -webkit-mask-image: linear-gradient(100deg, transparent 50%, #000 68%);
  mask-image: linear-gradient(100deg, transparent 50%, #000 68%);
}

/* Лента вещей. шаблон: картинка на 8 % выше своего окна ради параллакса, а у трёх кадров
   голова модели у самого верха исходника — её срезало по глазам. У них картинка начинается
   от верха окна и увеличивается от верхнего края. */
.product-image.head-top {
  top: 0;
  transform-origin: 50% 0;
}

/* Кегли заголовков. В шаблоне трекинг и интерлиньяж подобраны под латиницу 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;
}

.t-hero {
  font-size: clamp(3.3rem, 17.5vw, 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(3.4rem, 17vw, 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);
  }

  .t-panel {
    font-size: clamp(3rem, min(5.6vw, 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);
  }
}

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

/* Подчёркивание ссылок шапки и контактов */
.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;
}

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

#atelierForm .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;
  }
}