/* База: сброс, типографика, контейнер, фокус, reduced-motion */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(72 * var(--s));
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* свечения и крупные заголовки не создают горизонтальный скролл */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

/* Display-заголовки: Bebas Neue, капс, плотный интерлиньяж */
.display {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls, var(--ls-display));
}

/* Контейнер: макетные поля 40px, ширина резиновая, потолок --page-max */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Фокус виден всегда на клавиатуре */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark { color: var(--c-on-dark); }
.on-dark :focus-visible { outline-color: var(--c-white); }

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--c-white); color: var(--c-ink);
  padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* Появление при скролле: сначала скрыто только если JS жив (класс .js ставит main.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(calc(24 * var(--s)));
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Заголовки появляются построчно из-под маски */
.js .lines > .line {
  display: block;
  overflow: hidden;
  /* запас сверху, чтобы не срезалась краткая над «Й» при line-height .8 (надстрочник выше капители примерно на .2em) */
  padding-top: .3em; margin-top: -.3em;
}
.js .lines > .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .09s);
}
.js .lines.is-in > .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js .lines > .line > span { opacity: 1; transform: none; }
}
/* Ловушка для ботов в формах: человек поле не видит и не заполняет */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }