/* LUSTRA: правки шаблона studio-beauty. Утилиты Tailwind собраны в tailwind.css. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/prata-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/prata-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #20140f;
  --paper: #ecebe6;
  --sand: #e4dcd1;
  --taupe: #786155;
  --taupe-light: #b9a293;
}

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

body {
  font-family: inherit;
}

::selection {
  background: var(--taupe);
  color: var(--paper);
}

/* Заголовки. В шаблоне Bodoni Moda без кириллицы, трекинг до -0.075em и интерлиньяж 0.72
   подобраны под латиницу: в кириллице буквы слипались, строки наезжали на «й», «ё», «р», «у». */
.serif {
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.t-mega {
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 0.95;
}

.t-case {
  font-size: clamp(3rem, 7.4vw, 7.5rem);
  line-height: 0.98;
}

.t-xl {
  font-size: clamp(2.75rem, 6.2vw, 6.25rem);
  line-height: 1;
}

.t-lg {
  font-size: clamp(2.5rem, 4.8vw, 5rem);
  line-height: 1;
}

.t-md {
  font-size: clamp(2.125rem, 3.8vw, 3.75rem);
  line-height: 1.05;
}

.t-sm {
  font-size: clamp(1.875rem, 2.7vw, 2.625rem);
  line-height: 1.08;
}

.t-quote {
  font-size: clamp(1.875rem, 4.3vw, 4.25rem);
  line-height: 1.1;
}

.t-menu {
  font-size: clamp(2.5rem, 8.2vw, 7.5rem);
  line-height: 1;
}

/* В шаблоне абзацы 12px серым #777: мелко и на грани контраста */
.lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #6a5d55;
}

.lead-dark {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(236, 235, 230, 0.72);
}

.label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Стрелка: в веб-подмножествах шрифтов «↗» нет, рисуем маской */
.arr {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.5em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M3.5 2H10v6.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M3.5 2H10v6.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.arr-down {
  transform: rotate(135deg);
}

a:hover > .arr:not(.arr-down),
.group:hover .arr-card {
  transform: translate(0.2em, -0.2em);
}

/* Слово на первом экране. В шаблоне оно залито через background-image: url(*.mp4) —
   видео фоном работает только в Safari, в остальных браузерах слово прозрачное. */
.hero-word span {
  background-image: linear-gradient(100deg, #20140f 0%, #4a2a1c 34%, #786155 62%, #3a2016 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-grid {
  background-image: linear-gradient(rgba(32, 20, 15, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 20, 15, 0.18) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* Номера шагов на плашке первого экрана: в шаблоне 10px (утилита text-[0.625rem]) */
.step-no {
  font-size: 0.6875rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 0.95rem 1.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Клавиши в блоке заявки */
.key {
  position: absolute;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 3rem;
  box-shadow: 1rem 1rem 0 rgba(32, 20, 15, 0.12);
}

/* Шапка красится через mix-blend-difference: на цветной плашке открытого меню
   логотип и крестик становились голубыми */
.menu-open #siteHeader {
  mix-blend-mode: normal;
  color: var(--paper);
}

/* Шапка в шаблоне прозрачная и лежит поверх страницы: текст секций проезжал прямо под логотипом
   и кнопкой меню и смешивался с ними, а на фото средней яркости (серый, сиреневый, оранжевый,
   коричневый) difference давал серое по серому — шапка пропадала.
   Теперь в углах под шапкой фон размыт (#headerScrim), а логотип и кнопка получают от скрипта
   (main.js, «Тон шапки») тёмный или светлый цвет (data-tone) и вуаль в цвет того, что под ними
   (--veil, рисует ::before): на ровном фоне вуали не видно. Класс .toned на <html> появляется вместе с ними.
   Без скрипта остаются размытие и прежний difference. */
#headerScrim {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30; /* над страницей, под меню (z-40) и шапкой (z-50) */
  height: 0;
  pointer-events: none;
}

#headerScrim span {
  position: absolute;
  top: 0;
  height: 4.75rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

#headerScrim span:first-child {
  left: 0;
  width: 7.75rem;
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent), linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(to right, #000 72%, transparent), linear-gradient(#000 62%, transparent);
}

#headerScrim span:last-child {
  right: 0;
  width: 6.5rem;
  -webkit-mask-image: linear-gradient(to left, #000 72%, transparent), linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(to left, #000 72%, transparent), linear-gradient(#000 62%, transparent);
}

@media (min-width: 1024px) {
  #headerScrim span {
    height: 5rem;
  }

  #headerScrim span:first-child {
    width: calc(4vw + 6.25rem);
  }

  #headerScrim span:last-child {
    width: calc(4vw + 5rem);
  }
}

.toned #siteHeader {
  mix-blend-mode: normal;
}

#siteHeader > [data-tone] {
  position: relative;
  z-index: 0;
  transition: color 0.25s ease;
}

/* вуаль под пунктом: цвет и обрезку по краям блока под ней ставит скрипт */
#siteHeader > [data-tone]::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.75rem;
  z-index: -1;
  background-color: var(--veil, transparent);
  filter: blur(5px);
  clip-path: inset(var(--veil-clip, -1rem));
  pointer-events: none;
  transition: background-color 0.25s ease;
}

#siteHeader > [data-tone="light"] {
  color: var(--ink);
}

#siteHeader > [data-tone="dark"] {
  color: var(--paper);
}

.menu-open #siteHeader > [data-tone] {
  color: var(--paper);
}

.menu-open #siteHeader > [data-tone]::before {
  display: none;
}

/* кольцо фокуса было белым в расчёте на difference */
.toned #siteHeader > :focus-visible {
  --tw-ring-color: currentColor;
}

@media (max-width: 639px) {
  /* три клавиши по 8rem не помещались в экран телефона и налезали друг на друга */
  .key {
    width: 5.75rem;
    height: 5.75rem;
    font-size: 2.25rem;
    box-shadow: 0.6rem 0.6rem 0 rgba(32, 20, 15, 0.12);
  }
}

.faqAnswer p + p {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .arr,
  .btn,
  #siteHeader > [data-tone],
  #siteHeader > [data-tone]::before {
    transition: none;
  }
}