/* ORAQ — общий каркас сайта. Единственное место, где живут сброс, типографика,
   шапка и подвал. Подключается и главной (public/index.html), и всеми
   собранными разделами (/works/, /journal/, /404, /privacy).

   Заведено 22.09.2026 по требованию Айгуль «свести в один лист два источника».
   До этого одни и те же 27 правил стояли дважды: в инлайновом <style> главной
   и в content/oraq.css. Копии уже начали расходиться молча — у ссылки в общем
   листе не было `color: inherit`, и заголовки карточек на /works/, /journal/ и
   /404 рендерились дефолтным синим браузера, вторым акцентом при одном
   разрешённом. Правка теперь одна, а не две.

   Порядок подключения на любой странице:
     1. oraq-tokens.css — палитра и размеры,
     2. oraq-base.css   — этот файл,
     3. свой лист страницы (oraq.css для разделов, <style> для главной).
   Страница доопределяет своё поверх каркаса; переписывать каркас у себя нельзя
   — это и есть возврат к двум источникам.

   Цвет берётся только из токенов: ни одного #hex и ни одного rgba() числами,
   полупрозрачность через --*-rgb. */

/* ── СБРОС ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* Цвет ссылки наследуется от родителя. Без этого заголовок карточки
   <h3><a>…</a></h3> уходит в дефолтный синий браузера (#0000EE) — второй
   акцент, запрещённый BRAND-SYSTEM разделом 1. Ссылкам, которым нужен акцент,
   цвет задан классом (.card-more, .related a, .crumbs a). */
a { color: inherit; text-decoration: none; }

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

/* ── ТИПОГРАФИКА ── тип-шкала BRAND-SYSTEM 2.
   Здесь общая часть. Цвет заголовка и красную строку страница задаёт себе
   сама: на главной заголовки стоят и на тёмных секциях, в разделах — нет. */
h1, h2, h3 {
  font-family: "Jost", "Inter", -apple-system, sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; font-weight: 300; letter-spacing: 0; }
h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; font-weight: 400; }
h3 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.25; font-weight: 500; }

/* ── КОЛОНКА ── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* Надзаголовок секции. Отбивку снизу страница ставит свою: на главной она с
   лестницы вертикального ритма (--gap-md), в разделах — 24px. */
.eyebrow {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary-text);
}

/* ── ШАПКА ──
   Класс, а не голый тег nav: на странице раздела есть второй <nav> — хлебные
   крошки, и голый селектор прибивал их к верху экрана поверх шапки.
   --topbar-top: на главной шапку сдвигает вниз бегущая строка, в разделах
   строки нет и сдвиг равен нулю. */
.topbar {
  position: fixed; top: var(--topbar-top, 0); left: 0; right: 0; z-index: 500;
  background: rgba(var(--nav-rgb), 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hero-line);
}
.topbar .nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-logo {
  color: var(--hero-ink); line-height: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.nav-logo .wordmark { display: block; height: 15px; width: auto; }
.nav-logo sub {
  display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hero-muted); margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--hero-muted);
  transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--hero-ink); }
.nav-cta {
  font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 7px;
  background: var(--primary); color: var(--hero-ink); white-space: nowrap;
  transition: background 0.2s; touch-action: manipulation; cursor: pointer;
}
.nav-cta:hover { background: var(--primary-dark); }

/* ── ПОДВАЛ ── */
footer { background: var(--hero-bg); border-top: 1px solid var(--hero-line); padding: 40px 0; }
.foot-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.foot-logo { color: var(--hero-ink); }
.foot-logo .wordmark { display: block; height: 14px; width: auto; }
.foot-sign { font-size: 12px; color: var(--hero-muted); }
.foot-sign span { color: var(--silver); }
.foot-copy { font-size: 12px; color: var(--hero-muted); }
.foot-legal { font-size: 12px; color: var(--hero-muted); line-height: 1.7; text-align: right; }
.foot-legal a { color: var(--silver); transition: color 0.2s; }
.foot-legal a:hover { color: var(--hero-ink); }
@media (max-width: 640px) { .foot-legal { text-align: left; } }

/* Человек, которому движение мешает, выключает его в системе. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}