/* Общий стиль лонгридов. Подключается на каждой статье в /materials/
   перед её собственным <style>.

   Что сюда попадает: то, что у всех статей одинаково, — палитра, базовая
   типографика, верхняя панель с прогрессом, каркас полосы, разделы, врезки,
   списки, блок автора и подвал. Проверено дословным сравнением четырёх
   статей: в этот файл вынесено только то, что совпадало символ в символ.

   Что остаётся в статье: её собственные блоки и всё, в чём она отступает
   от общего. Собственный <style> идёт после этого файла, поэтому любое
   правило на странице перебивает здешнее — так статья и переопределяет.

   Правка здесь задевает все статьи сразу. Проверять надо на всех четырёх:
   самая непохожая — family-ops, она листается по страницам, а не прокруткой. */

/* ---------- палитра ---------- */

:root {
  --bg:         #F7F4EE;
  --surface:    #F7F4EE;
  --surface-2:  #EFEADE;
  --ink:        #191713;
  --ink-2:      #55504F;
  --ink-3:      #6B675E;
  --line:       #E2DCCE;
  --line-soft:  #EBE6DA;
  --code-bg:    #EFEADE;

  /* акцентные цвета из палитры сайта: статья расставляет их по разделам
     через data-hue, отсюда же берутся цвета полосок в обложке */
  --p1: #A0553F;
  --p2: #6E8461;
  --p3: #3B5B7A;
  --p4: #8A7BA8;

  --p1-soft: color-mix(in oklab, var(--p1) 11%, var(--bg));
  --p2-soft: color-mix(in oklab, var(--p2) 11%, var(--bg));
  --p3-soft: color-mix(in oklab, var(--p3) 11%, var(--bg));
  --p4-soft: color-mix(in oklab, var(--p4) 11%, var(--bg));

  /* текущий акцент: переключается на разделе атрибутом data-hue */
  --hue: var(--p2);
  --hue-soft: var(--p2-soft);

  /* мера строки: один правый край у всего текста в колонке.
     В пикселях намеренно. В ch не выходит: ch — это ширина нуля в текущем
     кегле, поэтому одна и та же запись даёт заголовку один край, лиду
     другой, абзацу третий. Ровно это здесь и было — пять краёв на экран.
     746px — ширина, по которой абзацы шли и раньше, так что текст
     не сузился, выровнялось остальное. */
  --measure: 746px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4,p,ul,ol,figure,pre { margin: 0; }
ul,ol { padding: 0; }
/* Мера — у того, что образует колонку статьи. Блоки (врезки, карточки,
   скриншоты, цитаты) держат свою ширину: у них max-width задан отдельно. */
h1, h2, p, li { max-width: var(--measure); }
a { color: var(--hue); text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: 500; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; }
[data-hue="1"] { --hue: var(--p1); --hue-soft: var(--p1-soft); }
[data-hue="2"] { --hue: var(--p2); --hue-soft: var(--p2-soft); }
[data-hue="3"] { --hue: var(--p3); --hue-soft: var(--p3-soft); }
[data-hue="4"] { --hue: var(--p4); --hue-soft: var(--p4-soft); }
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bar-in {
  max-width: 860px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 400;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.site-back:hover { color: var(--ink); }
.site-back span { display: none; }
@media (min-width: 620px) {
  .site-back span { display: inline; }
}
/* якорная навигация по разделам — только на широком экране */
.secnav { display: none; }
@media (min-width: 980px) {
  .secnav a:hover, .secnav a.on { color: var(--ink); }
  .secnav a.on { box-shadow: inset 0 -2px 0 var(--p2); }
}
.counter {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
/* тонкая полоса прогресса чтения */
.progress {
  height: 2px;
  background: var(--hue);
  width: 0;
  transition: width .12s linear;
}
/* ============ каркас ============ */
main { max-width: 860px; margin: 0 auto; padding: 0 20px 40px; }
.hero { padding-top: 42px; }
.hero-rule { display: flex; gap: 5px; margin: 26px 0 0; }
.hero-rule i:nth-child(1) { background: var(--p1); }
.hero-rule i:nth-child(2) { background: var(--p2); }
.hero-rule i:nth-child(3) { background: var(--p3); }
.hero-rule i:nth-child(4) { background: var(--p4); }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--hue-soft);
  color: var(--hue);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.kicker b { font-weight: 500; opacity: .6; }
.byline {
  margin: 18px 0 0;
  font-size: .93rem;
  color: var(--ink-2);
}
.byline a { color: var(--ink); text-decoration-color: var(--hue); text-decoration-thickness: 2px; }
.byline a:hover { color: var(--hue); }
/* ============ разделы ============ */
section { padding-top: 8px; scroll-margin-top: 70px; }
section + section,
.hero + section { margin-top: 54px; border-top: 1px solid var(--line); padding-top: 40px; }
.sub { margin: 14px 0 0; color: var(--ink-2); font-size: 1.03rem; }
.body { margin-top: 26px; }
ul.dash { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
ul.dash > li { padding-left: 22px; position: relative; }
/* ============ врезки ============ */
.note, .warnbox {
  margin: 24px 0;
  padding: 17px 19px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .98rem;
}
.note { border-left: 4px solid var(--hue); }
.warnbox { border: 1px solid transparent; border-left: 4px solid var(--p1); background: var(--p1-soft); }
.note p, .warnbox p { max-width: none; margin: 0; }
.tag {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--hue);
  font-weight: 500;
}
.warnbox .tag { color: var(--p1); }
figure.shot > a { display: block; }
figure.shot figcaption {
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  max-width: none;
}
.author p { max-width: none; font-size: .97rem; margin: 0; }
.author p + p { margin-top: 11px; }
.author .who { font-size: 1.02rem; }
.foot { color: var(--ink-3); font-size: .88rem; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.foot p { max-width: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* цифры в обложке — первое, что видно после лида: главный триггер к чтению */
.hero-stats { margin: 34px 0 0; }
.hero-stats .eyebrow { display: block; margin-bottom: 12px; }
.hero-stats .stats { margin: 0; }
ol.num { list-style: none; counter-reset: n; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
ol.num > li { counter-increment: n; padding-left: 38px; position: relative; }
/* ============ цифры ============ */
/* по две даже на узком экране: шесть карточек в столбик отодвигают начало истории */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 26px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat { background: var(--surface); padding: 18px 20px; }
.stat .v {
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat .k { font-size: .9rem; color: var(--ink-2); margin-top: 5px; max-width: none; }
.prompt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.prompt-head .label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
button.copy:hover { filter: brightness(1.12); }