/* База: reset, документ, сетка, шкала текста, логотип, состояния движения. Сырых значений здесь нет – только токены.
   font-family и font-size живут только здесь (классы шкалы); в components.css и sections.css – только классы. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--color-bg-page); }
body {
  min-height: 100dvh;
  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, dl, dd { list-style: none; padding: 0; margin: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; font-weight: inherit; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
figure { margin: 0; }
::selection { background: var(--color-red); color: var(--color-bg-sheet); }
:focus-visible { outline: var(--space-2) solid var(--color-red); outline-offset: var(--space-4); }

/* Сетка: контейнер с полями и 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--sheet { background: var(--color-bg-sheet); }
.section--dark { background: var(--color-bg-dark); color: var(--color-fg-on-dark); }

/* Шкала текста. Размер текста в правилах секций не ставится – только эти классы */
.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-light); }
.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-light); }
.display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  line-height: 1.05; letter-spacing: var(--ls-statement); font-weight: var(--fw-regular); }
.statement  { font-family: var(--font-display); font-size: var(--fs-statement); line-height: var(--lh-statement); letter-spacing: var(--ls-statement); font-weight: var(--fw-regular); }
.title-m    { font-family: var(--font-display); font-size: var(--fs-title-m);    line-height: var(--lh-title); font-weight: var(--fw-medium); }
.title-xxs  { font-family: var(--font-text);    font-size: var(--fs-title-xxs);  line-height: var(--lh-title); font-weight: var(--fw-medium); }
.body-l     { font-size: var(--fs-body-l); line-height: 1.45; }
.body-m     { font-size: var(--fs-body-m); }
.body-s     { font-size: var(--fs-body-s); }
.soft       { color: var(--color-fg-soft); }
.section--dark .soft { color: var(--color-fg-soft-on-dark); }
.tnum       { font-variant-numeric: tabular-nums; }

/* Логотип: как на pda.archi – Poppins 900, «pda.» и «archi» меньшим кеглем на одной базовой линии */
.logo { font-family: var(--font-logo); font-weight: var(--fw-logo); font-size: var(--fs-logo); line-height: 1; letter-spacing: var(--ls-logo); display: inline-flex; align-items: baseline; white-space: nowrap; }
.logo__tail { font-size: var(--fs-logo-tail); }
.logo--giant { font-size: var(--fs-logo-giant); line-height: var(--lh-logo); }

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

/* Холст сцены: единственное абсолютное позиционирование по умолчанию (docs/scene.md) */
[data-scene] { position: relative; }
[data-scene] canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
[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) {
  .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}