/* ============================================================
   main.css — база: типографика, сетка, секции, утилиты
   Сайт тёмный по умолчанию. Светлые секции — острова
   на «премиальной бумаге», они помечены классом section--paper
   и переопределяют цвета текста и линий локально.
   ============================================================ */

/* ---------- 1. Документ ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-stuck) + var(--s-3));
  background: var(--ink);
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* ---------- 2. Типографика ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--ls-h3);
}

p { text-wrap: pretty; }

.tabular,
.fact__value,
.compare td,
.compare th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lede {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- 3. Ссылки и фокус ---------- */
a { color: var(--gold); }
a:hover { color: var(--gold-soft); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  z-index: calc(var(--z-menu) + 1);
  padding: 12px 20px;
  background: var(--panel-2);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: var(--r-s);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 4. Контейнер и сетка ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ---------- 5. Секции ----------
   Три поверхности: база (--ink), панель (--panel) и светлый
   остров (--paper). Чередуются, чтобы страница не слипалась
   в одно тёмное полотно. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--s-8); }

.section--soft { background: var(--panel); }

/* Светлый остров: локально переворачиваем цветовую схему */
.section--paper {
  background: var(--paper);
  color: var(--ink);
}

.section--paper .lede,
.section--paper .picker__desc,
.section--paper .footer__tagline { color: var(--muted-dark); }

.section--paper h1,
.section--paper h2,
.section--paper h3,
.section--paper h4 { color: var(--ink); }

.section--paper a { color: var(--gold-text); }

.section--paper :focus-visible { outline-color: var(--ink); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}

.section-head > div { max-width: 62ch; }
.section-head .lede { margin-top: var(--s-2); }

/* Тонкая золотая надсечка над заголовком секции */
.section-head h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: var(--s-3);
  background: var(--gold);
}

/* ---------- 6. Утилиты ---------- */
.stack > * + * { margin-top: var(--s-2); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.no-scroll-x { overflow-x: clip; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
}

.noscript {
  padding: var(--s-4);
  margin-block: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--panel);
}

.noscript h2 { font-size: var(--fs-h3); }

.noscript ul {
  margin-top: var(--s-2);
  padding-left: 20px;
}