/* База: reset, документ, сетка, шкала текста, состояния движения. Сырых значений здесь нет – только токены. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x: clip и у html: тогда в окно уходит значение html, а clip у body режет по-настоящему. Одного body мало –
   его overflow передаётся окну, а iOS Safari окну горизонтальный скролл не запрещает: наклейка до появления (scale 1.35) сдвигала страницу */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
  color: var(--color-fg);
  font-family: var(--font-text);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Сетка: контейнер с полями и 12 колонок. Ширина элементов – через grid-column, не через px */
.wrapper {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.section {
  padding-block: var(--space-section);
}
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-fg-on-dark);
}
.section--sheet {
  background: var(--color-bg-sheet);
}

/* Шкала текста. Размер текста в правилах секций не ставится – только эти классы */
.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.display-s  { font-family: var(--font-display); font-size: var(--fs-display-s);  line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  line-height: var(--lh-title);   letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.title-l    { font-family: var(--font-display); font-size: var(--fs-title-l);    line-height: var(--lh-title); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.title-m    { font-family: var(--font-text);    font-size: var(--fs-title-m);    line-height: var(--lh-title); font-weight: var(--fw-text); }
.title-xxs  { font-family: var(--font-text);    font-size: var(--fs-title-xxs);  line-height: var(--lh-title); font-weight: var(--fw-text); }
.body-l     { font-size: var(--fs-body-l); }
.body-m     { font-size: var(--fs-body-m); }
.body-s     { font-size: var(--fs-body-s); }
.body-xs    { font-size: var(--fs-body-xs); }
.muted      { color: var(--color-fg-muted); }
.section--dark .muted { color: var(--color-fg-muted-on-dark); }

/* Движение: пока JS не подготовил элемент, он скрыт – но только когда движение включено (html.has-motion).
   Без JS, в ?static и при prefers-reduced-motion класса нет, и всё видно сразу */
.has-motion [data-reveal]:not(.is-ready) { visibility: hidden; }

/* Приём written (docs/motion.md): слово проявляется маской слева направо, край мягкий – как чернила за пером.
   --ink и --ink-soft ставит motion.js в px. Запас --ink-bleed с отрицательным полем – чтобы маска не срезала выносные элементы
   при интерлиньяже 0.95, вёрстка при этом не меняется. После записи класс is-writing снимается вместе с масками */
.is-writing .word {
  display: inline-block;
  padding: var(--ink-bleed);
  margin: calc(var(--ink-bleed) * -1);
  -webkit-mask-image: linear-gradient(90deg, black var(--ink), transparent calc(var(--ink) + var(--ink-soft)));
  mask-image: linear-gradient(90deg, black var(--ink), transparent calc(var(--ink) + var(--ink-soft)));
}

/* Холст сцены: единственное абсолютное позиционирование по умолчанию (docs/scene.md) */
[data-scene] { position: relative; }
[data-scene] canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-scene); }
[data-scene] > :not(canvas) { position: relative; z-index: var(--z-content); }
[data-scene].is-live .scene__fallback { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 768px) {
  .wrapper { padding-inline: var(--page-margin-mobile); }
  .section { padding-block: var(--space-section-mobile); }
}