/* SPARRWAY — база
   Минимальный сброс и базовые элементы документа. Ничего блочного здесь нет:
   всё, что относится к раскладке, живёт в layout.css, компоненты — в components.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Пользователь мог отключить анимацию на уровне системы: тогда и плавную
   прокрутку к якорям тоже выключаем, иначе она игнорирует настройку. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* Фон страницы — песочный плюс сквозная точечная сетка. Замерено по макету:
   шаг 48 в обе стороны, диаметр точки 3.2, цвет primary/700 при непрозрачности
   0.5 внутри группы с непрозрачностью 0.16, то есть 0.08 итогом.
   По горизонтали сетка симметрична вьюпорту: центр первого ряда отстоит от
   края на половину свободного остатка. Это и есть 50 % плюс половина шага —
   на 375, 768 и 1440 отступ выходит 19.5, 24 и 24, ровно как в макете.
   Сдвиг по вертикали ставит центр первого ряда на 1.6 от верха документа. */
body {
  margin: 0;
  background-color: var(--bg-page);
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(41, 69, 108, 0.08) 1.6px,
    transparent 1.6px
  );
  background-size: 48px 48px;
  background-position: calc(50% + 24px) -22.4px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

/* Строки заголовка выравниваются по длине: без одинокого слова на последней
   строке. Браузер без поддержки переносит как обычно. */
h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  text-wrap: balance;
}

p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover { color: var(--text-link-hover); }
a:active { color: var(--text-link-active); }

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

/* Атрибут hidden должен побеждать display выше: спрайт иконок прячется им. */
[hidden] { display: none; }

img { height: auto; }

svg { fill: currentColor; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

textarea { resize: vertical; }

address { font-style: normal; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  width: 100%;
  height: var(--border-hairline);
  margin: 0;
  border: 0;
  background: var(--border-default);
}

/* Единая рамка фокуса на весь проект. Мышью её не показываем, с клавиатуры —
   всегда, иначе интерфейс невозможно пройти табом. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Скрыто визуально, но доступно скринридеру и остаётся в потоке фокуса. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}