@charset "UTF-8";
/* =========================================================================
   Retrieva — база

   Сброс, шрифты, типографика, доступность. Всё, что действует на голые
   теги; именованные компоненты — в components.css.
   ========================================================================= */

/* --------------------------- БАЗОВЫЕ СТИЛИ ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* 62.5% вместо 10px: при стандартных настройках браузера это те же 10px,
   но если посетитель увеличил размер шрифта — вся страница масштабируется
   вместе с ним. Жёсткие пиксели такую настройку игнорируют. */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 1200px) {
  html { font-size: clamp(0.625em, calc(0.625em + (100vw - 1200px) / 400), 0.71875em); }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* акты «разнос» и «пролёт» выезжают за край намеренно */
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, fieldset, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; }
table { border-collapse: collapse; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* ---------------------------- ТИПОГРАФИКА ------------------------------- */
.h1, .h2 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--paper);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.045em; }
.h2 { font-size: var(--fs-h2);      line-height: 1.06; letter-spacing: -.035em; }
.h3 {
  font: 700 var(--fs-h3)/1.3 var(--f-display);
  letter-spacing: -.015em; color: var(--paper);
}

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--body); max-width: 46ch; }

/* Надзаголовок секции. Моноширинный и разряженный — он работает как
   приборная подпись к слою, а не как второй заголовок. */
.kicker {
  display: block;
  font: 500 var(--fs-mono)/1 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 2.4rem;
}

.note   { font-size: var(--fs-small); line-height: 1.7; color: var(--mute); max-width: 60ch; }
.mono   { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
code    { font-family: var(--f-mono); font-size: .9em; color: var(--slate); }

.source { font-size: var(--fs-small); line-height: 1.6; color: var(--mute); margin-top: 4rem; max-width: 78ch; }
.source a, .note a, .lead a, p a {
  color: var(--slate);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.source a:hover, .note a:hover, .lead a:hover, p a:hover {
  color: var(--paper); border-bottom-color: var(--sage);
}

/* --------------------------- ДОСТУПНОСТЬ -------------------------------- */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -6rem; z-index: 100;
  background: var(--sage); color: var(--ink);
  font: 500 var(--fs-small)/1 var(--f-mono);
  padding: 1.2rem 1.8rem;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Якоря учитывают липкую шапку, иначе заголовок уезжает под неё. */
[id] { scroll-margin-top: 10rem; }

/* Пока идёт подмена языка, страницу не показываем: иначе казахоязычный
   посетитель увидит русский текст и то, как он переписывается на месте.
   Метку ставит инлайновый скрипт в head и снимает js/i18n.js; там же
   страховка по таймеру, так что без скрипта страница не останется пустой. */
html[data-lang-pending] body { visibility: hidden; }