/* ═══ БАЗА ═════════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--bordeaux);
  font: 400 var(--fs-body)/1.62 var(--text);
  font-feature-settings: 'tnum' 0;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* фокус виден всегда и не зависит от темы секции */
/* Кольцо фокуса. На светлом — бордо (13.2:1), на тёмных полосах — золото
   (6.2:1 на бордо, 8.0:1 на черносливе). Одним золотом обойтись нельзя:
   на слоновой кости оно даёт 2.13:1 и не берёт даже порог 3:1. */
:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.menu :focus-visible,
.fears :focus-visible,
.footer :focus-visible,
.topbar:has(~ .hero) :focus-visible { outline-color: var(--gold); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* ссылка «к содержанию» прячется, но по табу становится обычной кнопкой */
a.visually-hidden:focus-visible {
  position: fixed; z-index: 90; top: 12px; left: 12px;
  width: auto; height: auto; min-height: 44px;
  margin: 0; padding: 0 18px; overflow: visible;
  clip-path: none;
  display: inline-flex; align-items: center;
  background: var(--bordeaux); color: var(--ivory);
  text-decoration: none; border-radius: 2px;
}

/* ─── типографика ─────────────────────────────────────────────────────────
   Alumni Sans — только крупные русские заголовки. Казахских букв
   ә ғ қ ң ө ұ ү һ в нём нет, поэтому [lang="kk"] заголовки уходят в Golos. */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
/* Казахская версия. В Alumni Sans нет ә ғ қ ң ө ұ ү һ — если оставить его
   на заголовках, каждая строка станет смесью двух гарнитур прямо на кегле
   60–90px. Поэтому ВЕСЬ дисплейный слой на kk переключается на Golos.
   Список должен оставаться полным: любая новая крупная надпись на Alumni
   добавляется сюда же. Проверочный кадр — shots/v2/fonts-kz.png.
   Знак в шапке — исключение: «РЕСУРС ЛОМБАРД» имя собственное, казахских
   букв в нём нет. */
[lang="kk"] .display,
[lang="kk"] .menu__item,
[lang="kk"] .metal__name,
[lang="kk"] .person__name,
[lang="kk"] .place__line,
[lang="kk"] .fear__q,
[lang="kk"] .currency__title,
[lang="kk"] .section__title,
[lang="kk"] .hero__title {
  font-family: var(--text);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* Кегль здесь НЕ трогаем. Golos шире Alumni, и заголовки на казахском
   действительно должны быть мельче — но делает это --display-scale
   в tokens.css, разом для всех дисплейных величин. Локальный
   «font-size: 0.72em» тут был ошибкой: em считается от родителя,
   и заголовок первого экрана выходил в 11 пикселей. */

.lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 44ch; }

/* ─── кнопки ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font: 500 var(--fs-body)/1 var(--text);
  text-decoration: none;
  border: 1px solid transparent; border-radius: 2px;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn--solid { background: var(--bordeaux); color: var(--ivory); }
.btn--solid:hover { background: var(--prune); }
.btn--ghost { border-color: var(--bordeaux-16); color: var(--bordeaux); }
.btn--ghost:hover { border-color: var(--bordeaux); background: var(--bordeaux-8); }

.btn__mark { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ─── логотип ─────────────────────────────────────────────────────────── */

.logo { display: block; width: clamp(132px, 9vw, 152px); height: auto; text-decoration: none; }
/* цвет золота в знаке приходит из токена; значение в самом svg — запасное,
   на случай если файл откроют отдельно от страницы */
.logo [data-gold] { fill: var(--gold); }
/* запасной знак: виден, пока svg не подставлен, и остаётся навсегда,
   если javascript выключен */
.logo__fallback {
  display: block;
  font: 700 clamp(20px, 1.7vw, 26px)/0.9 var(--display);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.logo__fallback i {
  display: block; margin-top: 4px;
  font: 600 10px/1 var(--text); font-style: normal;
  letter-spacing: 0.3em;
}
.logo svg { display: block; width: 100%; height: auto; }