/* maxstepanenko.com — «ПРОЯВКА»
   Компоненты. Сырых hex здесь нет: всё через токены из tokens.css.
   Один layout-примитив — пара происхождения 4/8. Один фирменный элемент — пластина.
   Одна теневая стратегия — теней нет. Один радиус — 0, кроме 2px у пластины. */

/* Негатив не переодевается вместе с комнатой: внутри пластины свет всегда свет.
   Единственное место в компонентах, где объявлены значения, — этот блок токенов. */
:root {
  --neg-svet:  #F3EDE3;
  --neg-dym:   #A79C8E;
  --neg-selen: #8592D2;
  --neg-selen-press: #A9B4E6;
}

/* ── светлая тема: тот же мир, но это уже отпечаток, вынесенный на свет ──
   Комната становится листом, пластины остаются тёмными негативами. */
@media (prefers-color-scheme: light) {
  :root {
    --komnata:     #F3EDE3;
    --svet:        #231E1A;
    --dymka:       #6B6055;
    --selen:       #4B56A6;
    --selen-press: #2F3A86;
    --kraya:       #D8CFC1;
    --god-vne:     color-mix(in srgb, #231E1A, transparent 48%); /* на бумаге цифра темнеет */
    --lampa:       color-mix(in srgb, #231E1A, transparent 95%); /* свет через отпечаток */
    --svet-88:     color-mix(in srgb, #231E1A, transparent 12%);
    color-scheme: light;
  }
  /* --plita не меняется: негатив есть негатив */
}

*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: var(--selen); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--selen-press); }
:focus-visible { outline: none; box-shadow: var(--fokus); }
::selection { background: var(--selen); color: var(--plita); }

/* ── каркас ───────────────────────────────────────────────────────────── */
.obolochka { width: 100%; max-width: var(--kolonka); margin: 0 auto; padding-inline: var(--pole); }
main { display: block; }
section { scroll-margin-top: var(--s-8); }

/* ── шапка ────────────────────────────────────────────────────────────── */
.shapka {
  border-bottom: var(--volos);
  position: sticky; top: 0; z-index: 40;
  background: var(--komnata);
}
.shapka__ryad {
  display: flex; align-items: baseline; gap: var(--s-5);
  padding-block: var(--s-4); flex-wrap: wrap;
}
.shapka__imya {
  font: var(--w-displey-plot) var(--t-lid)/1.1 var(--displey);
  letter-spacing: var(--ls-displey);
  color: var(--svet); text-decoration: none; margin-right: auto;
}
.shapka__imya:hover { color: var(--svet); }
.shapka__nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.shapka__nav a {
  font: var(--w-telo) var(--t-mono)/1 var(--fakt);
  letter-spacing: var(--ls-fakt); text-decoration: none; color: var(--dymka);
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
  transition: color var(--t-mikro) var(--e-mikro), border-color var(--t-mikro) var(--e-mikro);
}
.shapka__nav a:hover, .shapka__nav a[aria-current="page"] { color: var(--svet); border-bottom-color: var(--selen); }

/* ── типографика ──────────────────────────────────────────────────────── */
.h1 {
  font: var(--w-displey) var(--t-h1)/var(--lh-displey) var(--displey);
  letter-spacing: var(--ls-displey); margin: 0; color: var(--svet);
}
.h1--proekt { font-size: clamp(2.125rem, 4.6vw, 3.75rem); line-height: 1.02; }
.h2 {
  font: var(--w-displey-plot) var(--t-h2)/1.05 var(--displey);
  letter-spacing: var(--ls-displey); margin: 0; color: var(--svet);
}
.h3 {
  font: var(--w-displey-plot) var(--t-h3)/1.15 var(--displey);
  letter-spacing: var(--ls-displey); margin: 0; color: var(--svet);
}
.lid { font-size: var(--t-lid); line-height: 1.45; color: var(--svet-88); margin: 0; max-width: 34ch; }
/* у проекта заголовок ниже кеглем, поэтому лид держит более длинную строку */
.lid--proekt { max-width: 46ch; }
.telo { margin: 0; max-width: var(--mera); color: var(--svet-88); }
.telo + .telo { margin-top: var(--s-4); }
.dym { color: var(--dymka); }
.fakt {
  font: var(--w-telo) var(--t-mono)/1.5 var(--fakt);
  letter-spacing: var(--ls-fakt); font-variant-numeric: tabular-nums; margin: 0;
}

/* строка из-под маски: подъём на 18px, ни одного fade-up.
   Всё смещённое состояние живёт только под .js — без скриптов страница стоит готовой. */
.stroka { display: block; overflow: hidden; }
.stroka > span { display: block; }
.js .stroka > span {
  transform: translateY(var(--pod-maskoy));
  transition: transform var(--t-stroka) var(--e-maska);
  transition-delay: var(--zaderzhka, 0ms);
}
.js.gotovo .stroka > span, .js .stroka.vidno > span { transform: translateY(0); }

/* ── герой: свет увеличителя, единственный на сайте ───────────────────── */
/* низ героя без собственного отступа: дальше идёт --razdel первой секции,
   два отступа подряд давали пустой экран между именем и «Кто это» */
.geroy { position: relative; padding-block: clamp(var(--s-8), 10vw, var(--s-11)) 0; overflow: hidden; }
.geroy__lampa {
  position: absolute; inset: -30% -10% auto -20%; height: 120%;
  background: radial-gradient(52% 58% at 26% 34%, var(--lampa), transparent 72%);
  pointer-events: none; z-index: 0;
}
.geroy > .obolochka { position: relative; z-index: 1; }
.geroy__ssylki { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-6); }
.geroy__ssylki a { font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt); }

/* главная кнопка: заливка светом, радиус 0 */
.knopka {
  display: inline-block; padding: var(--s-3) var(--s-5);
  background: var(--svet); color: var(--komnata); text-decoration: none;
  font: var(--w-telo-zhirn) var(--t-mono)/1.3 var(--fakt); letter-spacing: var(--ls-fakt);
  border: 1px solid var(--svet); border-radius: var(--r-nol);
  transition: background var(--t-mikro) var(--e-mikro), color var(--t-mikro) var(--e-mikro);
}
.knopka:hover { background: transparent; color: var(--svet); }
.knopka--tihaya { background: transparent; color: var(--svet); border-color: var(--kraya); }
.knopka--tihaya:hover { background: var(--svet); color: var(--komnata); border-color: var(--svet); }

/* ── ПАРА ПРОИСХОЖДЕНИЯ 4/8 — единственный примитив страницы ──────────── */
.para {
  display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap);
  align-items: start; padding-block: var(--s-8);
  border-top: var(--volos);
}
.para:first-of-type { border-top: 0; }
.geroy .para { padding-top: 0; }
.para__plita { position: relative; padding-top: var(--s-7); }
.para__itog { min-width: 0; }
.para__sled { margin: var(--s-4) 0 0; }
.para__sled a { text-decoration: none; }
.para__itog > * + * { margin-top: var(--s-4); }
.para__zag { text-decoration: none; display: inline-block; }
.para__zag:hover .h3 { color: var(--selen); }
.para__zag .h3 { transition: color var(--t-mikro) var(--e-mikro); }

/* ── ПЛАСТИНА ПРОИСХОЖДЕНИЯ ───────────────────────────────────────────── */
.plita {
  position: relative; margin: 0; overflow: hidden;
  background: var(--plita); border: 1px solid var(--kraya);
  border-radius: var(--r-plita);
  padding: var(--s-6) var(--s-5) var(--s-5);
  min-height: 168px;
  filter: var(--proyav-do);
  transition: filter var(--t-proyav) var(--e-proyav);
  transition-delay: var(--zaderzhka, 0ms);
}
.js .plita[data-proyav="zhdet"] { filter: var(--proyav-ot); }
.js.bez-blura .plita[data-proyav="zhdet"] { filter: contrast(.35) brightness(1.3) saturate(.2); }
.plita__blik {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(38% 60% at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--neg-svet), transparent 88%), transparent 70%);
  transition: opacity var(--t-mikro) var(--e-mikro);
}
.plita:hover .plita__blik { opacity: 1; }
.plita__telo { position: relative; z-index: 2; }
.plita__metka {
  font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt);
  color: var(--neg-dym); margin: 0 0 var(--s-4);
}
.plita__data {
  font: var(--w-telo-zhirn) var(--t-mono)/1.4 var(--fakt); letter-spacing: var(--ls-fakt);
  font-variant-numeric: tabular-nums; color: var(--neg-selen); margin: 0 0 var(--s-2);
}
.plita__fakt {
  font: var(--w-telo) var(--t-mono)/1.55 var(--fakt); letter-spacing: var(--ls-fakt);
  color: var(--neg-svet); margin: 0; overflow-wrap: anywhere; max-width: 52ch;
}

/* цифра года, разрезанная краем пластины */
.god {
  position: absolute; left: -0.04em; top: calc(var(--s-7) - 0.52em);
  font: var(--w-displey) var(--t-god)/0.8 var(--displey);
  letter-spacing: -0.03em; font-variant-numeric: lining-nums;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.god--vne { z-index: 0; color: var(--god-vne); }
.god--vnutri { z-index: 1; color: var(--god-vnutri); top: -0.52em; }

/* ── хронология ───────────────────────────────────────────────────────── */
.god-polosa {
  border-top: 1px solid var(--selen); padding-top: var(--s-3); margin-top: var(--s-9);
  display: flex; align-items: baseline; gap: var(--s-5);
}
.god-polosa__cifra {
  font: var(--w-displey) clamp(2.5rem, 8vw, 5rem)/0.9 var(--displey);
  letter-spacing: -0.02em; color: var(--svet); margin: 0;
}
.god-polosa__skolko { font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt); color: var(--dymka); }
.sobytie {
  display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap);
  padding-block: var(--s-5); border-top: var(--volos); align-items: baseline;
}
.sobytie__data { font: var(--w-telo) var(--t-mono)/1.4 var(--fakt); letter-spacing: var(--ls-fakt); color: var(--dymka); font-variant-numeric: tabular-nums; margin: 0; }
.sobytie__telo > * + * { margin-top: var(--s-2); }
/* заголовок записи берёт дисплейную ступень: 21 против 17 в описании,
   иначе строки ленты различались только весом 600 против 400 */
.sobytie__zag {
  font: var(--w-displey-plot) var(--t-lid)/1.25 var(--displey);
  letter-spacing: var(--ls-displey); color: var(--svet); margin: 0;
}
.sobytie__chto { margin: 0; color: var(--dymka); max-width: var(--mera); }
.sobytie__k { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
/* ссылка-метка проекта в ленте: бюджет акцента на странице хронологии держит
   полоса года, поэтому метки идут дымкой и загораются селеном под курсором */
.sobytie__k a {
  font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt);
  color: var(--dymka); text-decoration-color: var(--kraya);
}
.sobytie__k a:hover { color: var(--selen); text-decoration-color: currentColor; }

/* ── опись цифр ───────────────────────────────────────────────────────── */
.opis { margin: 0; }
.opis__ryad {
  display: grid; grid-template-columns: 8fr 4fr; gap: var(--s-5);
  padding-block: var(--s-4); border-top: var(--volos); align-items: baseline;
}
.opis__chto { margin: 0; color: var(--svet); }
.opis__chto small { display: block; color: var(--dymka); font-size: var(--t-mono); line-height: 1.5; margin-top: var(--s-1); }
.opis__skolko {
  margin: 0; text-align: right;
  font: var(--w-displey-plot) var(--t-h3)/1 var(--displey);
  font-variant-numeric: tabular-nums; color: var(--svet); white-space: nowrap;
}

/* ── секции ───────────────────────────────────────────────────────────── */
.razdel { padding-block: var(--razdel) 0; }
.razdel__shapka { display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap); align-items: baseline; margin-bottom: var(--s-7); }
.razdel__nomer { font: var(--w-telo) var(--t-mono)/1.4 var(--fakt); letter-spacing: var(--ls-fakt); color: var(--dymka); margin: 0; }
.razdel__pod { color: var(--dymka); margin: var(--s-3) 0 0; max-width: var(--mera); }

/* ── мета-строки на странице проекта ──────────────────────────────────── */
.meta { margin: 0; display: grid; gap: 0; }
.meta__ryad { display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap); padding-block: var(--s-3); border-top: var(--volos); }
.meta__klyuch { font: var(--w-telo) var(--t-mono)/1.5 var(--fakt); letter-spacing: var(--ls-fakt); color: var(--dymka); margin: 0; }
.meta__znach { margin: 0; color: var(--svet); }
.stek { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.stek li {
  font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt);
  border: 1px solid var(--kraya); border-radius: var(--r-nol);
  padding: var(--s-2) var(--s-3); color: var(--svet-88);
}
.ssylki { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ssylki a { font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt); }

/* ── соседние проекты ─────────────────────────────────────────────────── */
.sosedi { display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap); border-top: var(--volos); margin-top: var(--razdel); padding-block: var(--s-7); }
.sosedi__ryad { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.sosedi a { font: var(--w-telo) var(--t-mono)/1.5 var(--fakt); letter-spacing: var(--ls-fakt); }

/* ── подвал ───────────────────────────────────────────────────────────── */
.podval { background: var(--plita); margin-top: var(--razdel); border-top: var(--volos); }
.podval__ryad { display: grid; grid-template-columns: 4fr 8fr; gap: var(--para-gap); padding-block: var(--s-8); }
.podval p, .podval li { color: var(--neg-dym); }
.podval .h3 { color: var(--neg-svet); }
.podval a { color: var(--neg-selen); }
.podval a:hover { color: var(--neg-selen-press); }
.podval__spisok { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.podval__spisok a { font: var(--w-telo) var(--t-mono)/1 var(--fakt); letter-spacing: var(--ls-fakt); }

/* ── вход блока по скроллу: только transform, никакого fade-up ─────────── */
.js [data-vhod="zhdet"] .stroka > span { transform: translateY(var(--pod-maskoy)); }
.js [data-vhod="vidno"] .stroka > span { transform: translateY(0); }

/* ── адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --razdel: clamp(64px, 10vw, 96px); --para-gap: var(--s-5); }
  .shapka { position: static; }
  .geroy { padding-block: var(--s-7) 0; }
  .para, .sobytie, .razdel__shapka, .meta__ryad, .sosedi, .podval__ryad, .opis__ryad {
    grid-template-columns: 1fr;
  }
  .para { gap: var(--s-5); }
  /* на телефоне первым идёт имя, пластина встаёт под ним: в прищуренном виде
     экран должен начинаться с человека, а не с чёрного прямоугольника */
  .geroy .para { display: flex; flex-direction: column; }
  .geroy .para__itog { order: 1; }
  .geroy .para__plita { order: 2; }
  .opis__skolko { text-align: left; }
  .sosedi { gap: var(--s-4); }
  .god { --t-god: clamp(3rem, 16vw, 4.5rem); }
  .plita { min-height: 0; }
}
@media (max-width: 400px) {
  .plita { padding: var(--s-5) var(--s-4) var(--s-4); min-height: 148px; }
  .shapka__ryad { gap: var(--s-3) var(--s-4); }
  .shapka__nav { gap: var(--s-4); }
}
@media print {
  .plita { filter: none; }
}