/* База: reset, документ, сетка, шкала текста, состояния движения. Сырых значений здесь нет – только токены. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--color-bg-page);
  color: var(--color-fg);
  font-family: var(--font-text);
  font-stretch: var(--font-stretch);
  font-weight: var(--fw-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, button, input, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: var(--space-4); }
.section--dark :focus-visible, .section--accent :focus-visible, .drawer :focus-visible, .header.is-dark :focus-visible { outline-color: var(--color-accent-on-dark); }
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);
}
.section--accent {
  background: var(--color-bg-accent);
  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-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-title); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.display-giant { font-family: var(--font-display); font-size: var(--fs-giant); line-height: var(--lh-giant); letter-spacing: var(--ls-giant); font-weight: var(--fw-display); }
/* Логотип – знак со старого сайта: Poppins Bold, «archi» в 0.7 от «pda.», общая базовая линия */
.logo       { font-family: var(--font-logo); font-weight: var(--fw-logo); font-stretch: normal; font-size: var(--fs-logo); line-height: 1; letter-spacing: var(--ls-logo); white-space: nowrap; }
.logo__sub  { font-size: var(--fs-logo-sub); }
.number     { font-family: var(--font-display); font-size: var(--fs-number); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); font-variant-numeric: tabular-nums; }
.title-m    { font-family: var(--font-display); 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-strong); }
.body-l     { font-size: var(--fs-body-l); }
.body-m     { font-size: var(--fs-body-m); }
.body-s     { font-size: var(--fs-body-s); }
.muted      { color: var(--color-fg-muted); }
.section--dark .muted, .section--accent .muted { color: var(--color-fg-muted-on-dark); }
/* Акцентное слово в заголовке: Fraunces italic, цвет акцента (на тёмном – светлый тон акцента) */
/* Кегль ×1.2: у Fraunces italic x-height на 17 % ниже, чем у Archivo (43.9 против 52.6 на 100 px) – так строчные выравниваются. opsz 144 – контраст штриха для крупных размеров */
.em { font-family: var(--font-italic); font-style: italic; font-stretch: normal; font-size: var(--em-scale); font-variation-settings: "opsz" var(--em-opsz); line-height: var(--lh-em); letter-spacing: var(--ls-italic); color: var(--color-accent); }
.section--dark .em, .section--accent .em { color: var(--color-accent-on-dark); }

/* Движение: пока JS не подготовил элемент, он скрыт – но только когда движение включено (html.has-motion).
   Без JS, в ?static и при prefers-reduced-motion класса нет, и всё видно сразу */
.has-motion [data-reveal]:not(.is-ready) { visibility: hidden; }
/* Маска SplitText (lines, chars): запас под выносные элементы – через clip-path в motion.js, без отступов.
   Отступы с отрицательными полями давали рывок: поля соседних строк схлопываются, двухстрочный заголовок в конце прыгал на 24 px */

/* Холст сцены: единственное абсолютное позиционирование по умолчанию (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); }
  .grid-12 { column-gap: var(--gutter-mobile); }
  .section { padding-block: var(--space-section-mobile); }
}