/* ============================================================
   base.css — reset, холст 390px, типографика, доступность.
   Холст: фиксированный 390px. Ниже 390 масштабируется transform:scale
   (чтобы не было горизонтальной прокрутки и элементов за краем — прод-канон
   и check_layout), выше 390 центрируется в колонке 390px (ТЗ-09 §0).
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: var(--scroll-behavior, smooth);
  overflow-x: clip;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-ivory);
  overflow-x: clip;
  /* холст центрируется по горизонтали; ниже 390 масштаб делает своё */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overscroll-behavior-y: contain;
}

/* Холст 390px. При ширине ≥390 — без трансформации (важно: при рендере на 390
   попиксельная сверка идёт без transform, иначе IntersectionObserver ломает
   ленивую загрузку картинок). Ниже 390 — пропорционально уменьшаем, чтобы не
   было горизонтальной прокрутки и элементов за краем (прод-канон, check_layout). */
#page {
  width: 390px;
  flex: 0 0 390px;
  transform-origin: top center;
  position: relative;
}
@media (max-width: 389.9px) {
  #page { transform: scale(calc(100vw / 390px)); }
}

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

button { background: none; border: 0; cursor: pointer; text-align: inherit; color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

a, button, summary, label, [role="button"] { touch-action: manipulation; }

/* ---------- ТИПОГРАФИКА ---------- */
h1, h2, h3 { font-family: var(--ff-head); font-weight: 800; line-height: var(--lh-head); }

/* Кегли — только из шкалы токенов (tokens.css §1). Пол чекера check_layout — 12px,
   минимальный токен --fs-eyebrow = 0.75rem = 12px. */

/* ---------- ХОЛСТ-СЕКЦИИ (ТЗ-10 §1.2) ----------
   Высота по содержимому: секции — обычный поток, фиксированных высот нет,
   контент не обрезается. Боковые поля и вертикальные отступы задаёт сама секция. */
.sec { width: 390px; position: relative; }

/* Якоря секций под несколько px, чтобы smooth-scroll не прятал заголовок */
[id] { scroll-margin-top: 8px; }

/* ---------- КНОПКА CTA ---------- */
.cta {
  display: flex; align-items: center; justify-content: center;
  width: var(--content); min-height: 52px; margin-inline: auto;
  padding: 14px 20px;
  font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-btn);
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; text-align: center;
  color: var(--c-cta-ink); background: var(--c-cta);
  border-radius: var(--r-cta); box-shadow: var(--sh-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
@media (hover: hover) { .cta:hover { transform: translateY(-2px); } }
.cta:active { transform: translateY(0); filter: brightness(.96); }

/* ---------- ФОКУС ---------- */
:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 3px; border-radius: 6px; }

/* ---------- БЛОКИРОВКА СКРОЛЛА (бургер) ---------- */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001ms; --scroll-behavior: auto; }
}

/* ==== ТЗ 14.09, заход 3: ниже 390 px — zoom вместо transform на всех страницах ====
   transform: scale() выше уменьшает страницу на экране, но не её высоту в раскладке: после прокрутки до конца
   под подвалом оставалась пустая полоса (главная на 360 — 639 px). zoom с тем же масштабом уменьшает и раскладку.
   Браузер, который не умеет zoom с таким calc(), пропускает блок целиком — остаётся transform выше.
   thanks и документы получили то же правило в заходе 2 (footer.css). */
@media (max-width: 389.9px) {
  @supports (zoom: calc(100vw / 390px)) {
    #page { transform: none; zoom: calc(100vw / 390px); }
  }
}