/* НефтеХимСырье — база: сброс, типографика, раскладка, общие примитивы. Владелец: ведущий.
   Правила отступов, радиусов и состояний — site/SPACING.md; только токены из tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--bg); }
/* фокус: обводка повторяет радиус элемента, border-radius здесь не задаём (SPACING.md §8) */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }

/* типографика — SPACING.md §13. Кегли, межстрочные, трекинг и меры только из токенов (tokens.css), ступени на 640 и 1024.
   Отступы между .t-* здесь не задаём: у владельцев зазоры через gap, margin сложился бы с ним (§13.7) — берите --gap-* */
:where(h1, h2, h3, h4, h5, h6) { font-weight: var(--fw-medium); text-wrap: balance; hyphens: manual; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
em, i { font-style: normal; }   /* курсива на сайте нет (§13.1); выделение в display — цветом */

.t-display, .t-h1, .t-h2, .t-h3, .t-h4 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; hyphens: manual; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-regular); letter-spacing: var(--track-display); max-inline-size: var(--measure-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-regular); letter-spacing: var(--track-h1); max-inline-size: var(--measure-h1); }
.t-h1--long { font-size: var(--fs-h2); line-height: var(--lh-h2); }   /* H1, который не встаёт в строку на 390 (§13.2 п. 2): ступень H2, начертание 400 */
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); letter-spacing: var(--track-h2); max-inline-size: var(--measure-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); letter-spacing: var(--track-h3); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
.t-display em { color: var(--ink-2); }
:is(.t-h1, .t-h2, .t-h3, .t-h4) em { color: inherit; }
/* оптический край H1/H2 от 640 — одно правило на сайт (аудит 09.10, SPACING §6.2): у Plex боковое поле прямых букв
   ~3 px на 1440 → ~1, круглые («З», «С») за край не выходят. Специфичность выше локальных margin: 0 у заголовков;
   text-indent: 0 — старые локальные правки (text-indent) не складываются с этой. Центрированные заголовки — без сдвига */
@media (min-width: 640px) {
  :is(.t-h1, .t-h2):not(.ftr__title, .e404__title) { margin-left: -0.03em; /* optical */ text-indent: 0; }
}

.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-inline-size: var(--measure-lead); text-wrap: pretty; }
.t-body { color: var(--ink-2); max-inline-size: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.t-label {
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-caption); font-weight: var(--fw-regular);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted);   /* ≤ 40 знаков в одну строку — правило текста (§13.5), nowrap не ставим: длинные метки владельцы ещё переводят */
}
.t-label--amber { color: var(--amber); }
/* цифры: у Plex Sans и Plex Mono они табличные по умолчанию (fonts/README.md); tabular-nums — явная отметка «данные» */
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-num { font-variant-numeric: tabular-nums; }   /* цифры-данные в Plex Sans: метрики, счётчики, количества */
.nowrap { white-space: nowrap; }
.t-formula sub { font-size: .72em; vertical-align: -.25em; line-height: 0; }

/* раскладка: --gutter и --section ступенчатые (tokens.css) */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--band { background: var(--bg-2); }
.stack > * + * { margin-top: var(--stack, var(--s-5)); }

/* .grid-bg: сетка-фон «чертёж» убрана (DESIGN.md «Убрать квадратное»). Класс оставлен для позиционирования */
.grid-bg { position: relative; isolation: isolate; }

/* угловые скобки «чертежа» убраны (SPACING.md §7). Разметку .corner владельцы удаляют из шаблонов; до тех пор скрыта */
.corners { position: relative; }
.corner { display: none !important; }

/* волосяная линия */
.rule { height: 1px; background: var(--line); border: 0; }

/* чип данных: пилюля 32, 0 12, gap 8 (SPACING.md §4) */
.chip {
  display: inline-flex; align-items: center; gap: var(--gap-icon);
  min-height: var(--h-xs); padding: 0 var(--px-xs);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2);
}

/* бейдж-пилюля: 32 = метка 24 + 2 × 4 («пилюля в пилюле», отступ метки слева = сверху = 4) */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--h-xs); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(21, 25, 30, .6); backdrop-filter: blur(8px);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2);
}
.badge__tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--amber); color: var(--bg);
  font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption);
}

/* видимо только для скринридеров */
.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; }

/* появление (класс ставит ui/reveal.js; без JS всё видно): один раз, сдвиг ≤ 16 px, 400 мс */
.js [data-reveal] { opacity: 0; transform: translateY(var(--s-4)); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}