/* База: 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-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);
}
/* Якоря без Lenis (?static, prefers-reduced-motion): секция не прячется под sticky-шапкой */
section[id] { scroll-margin-top: var(--header-h); }
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-fg-on-dark);
}
.section--sheet {
  background: var(--color-bg-sheet);
}

/* Шкала текста. Размер текста в правилах секций не ставится – только эти классы */
.display-mega { font-family: var(--font-display); font-size: var(--fs-display-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
.display-page { font-family: var(--font-display); font-size: var(--fs-display-page); line-height: var(--lh-mega); letter-spacing: var(--ls-display-tight); font-weight: var(--fw-display); }
.display-xxl { font-family: var(--font-display); font-size: var(--fs-display-xxl); line-height: var(--lh-display-tight); letter-spacing: var(--ls-display-tight); font-weight: var(--fw-display); }
.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); }
.title-m    { font-family: var(--font-display); font-size: var(--fs-title-m);    line-height: var(--lh-title); font-weight: var(--fw-title); }
.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 { 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; }

/* Холст сцены: единственное абсолютное позиционирование по умолчанию (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; }

/* Карта (Leaflet) наследует гарнитуру сайта, а не свою */
.leaflet-container { font-family: var(--font-text); }
.leaflet-container .leaflet-control-attribution { font-size: var(--fs-map-credit); }

.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); }
  section[id] { scroll-margin-top: var(--header-h-mobile); }
}