/* ============================================================
   Чебатуркин — сайт-визитка
   Фирменный код: Unbounded / Inter / Golos Text
   #F2F0E9 · #0D0D0D · #2E3A4D · #C4C1B4
   ============================================================ */

:root {
  --bone: #F2F0E9;
  --ink: #0D0D0D;
  --steel: #2E3A4D;
  --taupe: #C4C1B4;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Golos Text', monospace;
  --font-hand: 'Caveat', cursive;
  --font-hand-caps: 'Neucha', cursive;

  --header-h: 72px;
  --pad-x: clamp(20px, 4vw, 64px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection {
  background: var(--steel);
  color: var(--bone);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ============ Прелоадер ============ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bone);
}

.preloader__line {
  position: absolute;
  right: var(--pad-x);
  bottom: 12vh;
  width: 2px;
  height: 40vh;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
}

.preloader__count {
  position: absolute;
  right: calc(var(--pad-x) + 16px);
  bottom: 12vh;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

/* ============ Шапка ============ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled {
  background: rgba(242, 240, 233, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--steel);
  color: var(--bone);
  padding: 10px 16px;
  border-radius: 6px;
}

.site-nav {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 16px;
  display: inline-block;
  background: var(--steel);
  color: var(--bone);
  border-radius: 6px;
  transition: background-color .35s ease, color .35s ease;
}

.site-nav a:hover {
  background: var(--taupe);
  color: var(--ink);
}

/* Бутерброд — только мобильная версия (≤768px) */
.nav-toggle {
  display: none;
}

/* Блокировка скролла страницы под открытым мобильным меню */
body.nav-open {
  overflow: hidden;
}

/* ============ Hero ============ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

/* «Сцена» композиции: на сверхшироких экранах ограничена аспектом макета,
   чтобы подписи не разъезжались от портрета */
.hero__stage {
  position: absolute;
  inset: 0;
  width: min(100%, 179vh);
  margin: 0 auto;
}

.hero__datetime {
  position: absolute;
  top: calc(var(--header-h) + 20px);
  left: var(--pad-x);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
}

.hero__portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(88vw, 90vh, 1100px);
  aspect-ratio: 1301 / 1211;
  z-index: 1;
  will-change: transform;
}

.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.04) blur(10px);
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity .45s ease,
    transform .6s cubic-bezier(.16, 1, .3, 1),
    filter .5s ease;
  will-change: opacity, transform, filter;
}

/* Активный слой стека: дефолтный либо тематический (по ховеру на роль).
   Проявляется из блюра и микро-зума — «focus pull» */
.hero__portrait img.is-active {
  opacity: 1;
  transform: scale(1);
  filter: grayscale(100%) contrast(1.04) blur(0);
}

/* «Предприниматель» — единственный цветной кадр серии, grayscale ему не нужен */
.hero__portrait img[data-portrait="entrepreneur"] {
  filter: contrast(1.04) blur(10px);
}

.hero__portrait img[data-portrait="entrepreneur"].is-active {
  filter: contrast(1.04) blur(0);
}

.hero__hi {
  position: absolute;
  left: 3%;
  top: 77%;
  z-index: 3;
  font-family: var(--font-hand-caps);
  font-weight: 700;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.02;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__living {
  position: absolute;
  right: 1.5%;
  top: 73%;
  z-index: 3;
  font-family: var(--font-hand-caps);
  font-weight: 700;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.02;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}

.hero__living-line--offset {
  align-self: flex-end;
  margin-right: 8%;
}

.hero__roles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.role {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(14px, 1.35vw, 21px);
  letter-spacing: 0.02em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  translate: -50% 0;
  pointer-events: auto;
}

/* Роль — якорная ссылка на главу; contents сохраняет flex-раскладку .role */
.role__link {
  display: contents;
}

.role__label {
  display: inline-block;
  background-image: linear-gradient(to right, var(--steel) 50%, var(--ink) 50%);
  background-size: 200% 100%;
  background-position: 100% 0; /* видна правая половина градиента = ink */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .45s ease, rotate .45s ease;
}

.role:hover .role__label,
.role__link:focus-visible .role__label,
.role.is-active .role__label {
  background-position: 0 0; /* заливка steel слева направо */
  rotate: -2deg;
}

.role__star {
  font-size: 0.85em;
  display: inline-block;
  transition: scale .3s ease, color .3s ease;
}

/* Фирменный знак — размер и цвет наследуются от контекста */
.brand-mark {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.1em;
}

/* scale — отдельным свойством, чтобы не конфликтовать с инлайн-transform от GSAP */
.role:hover .role__star,
.role__link:focus-visible .role__star,
.role.is-active .role__star {
  scale: 1.5;
  color: var(--steel);
}

/* Расстановка ролей — в % от бокса портрета (десктоп ≥1200px) */
.role--entrepreneur { left: 58%;  top: -2%; }
.role--creator      { left: -10%; top: 16%; }
.role--architect    { left: -11%; top: 38%; }
.role--strategist   { left: 96%;  top: 14%; }
.role--designer     { left: 104%; top: 40%; }

/* Гнутая стрелка от логотипа к портрету (только широкий десктоп,
   геометрию пути считает JS) */
.hero__arrow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.hero__arrow-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2px;
  stroke-linecap: round;
}

/* ============ Секции ============ */

.section {
  padding: clamp(90px, 12vw, 170px) var(--pad-x);
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 10px);
}

.section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 20px;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.section__index {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--steel);
  letter-spacing: 0.1em;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 6.5vw, 92px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Рукописная пометка в шапке секции — «заметка на полях» */
.section__note {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1;
  color: var(--steel);
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* Вектор. Секция целиком помещается в один экран 16:9 (десктоп) */
.goal {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) var(--pad-x) 48px;
}

.goal .section__head {
  margin-bottom: clamp(20px, 4vh, 44px);
}

.goal .section__title {
  font-size: clamp(34px, 5vw, 72px);
}

/* Текст слева, вырезанный портрет справа — сетка по образцу глав.
   Текст цели центрируется по вертикали относительно портрета */
.goal__body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  column-gap: clamp(36px, 6vw, 100px);
  align-items: center;
  position: relative;
}

.goal__text {
  grid-column: 1;
}

.goal__media {
  grid-column: 2;
  align-self: center;
}

.goal__line {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.1vw, 47px);
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.goal__line + .goal__line {
  margin-top: 8px;
}

/* Вводная строка — мелкая подводка моно-шрифтом */
.goal__line--lead {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 18px);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--steel);
}

/* Средняя строка — тише ключевой */
.goal__line--mid {
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 28px);
}

.goal__line--accent {
  font-size: clamp(20px, 2.3vw, 36px);
  color: var(--steel);
}

.goal__note {
  display: inline-block;
  margin: 14px 0 0 10px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1;
  color: var(--steel);
  transform: rotate(-3deg);
}

/* Кадр вырезан (PNG с альфой) — ложится прямо на «бумагу» без рамки.
   max-height держит портрет внутри экрана 16:9, object-fit спасает от искажения */
.goal__media img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.04);
  user-select: none;
  -webkit-user-drag: none;
}

/* Главы-роли */

.chapter__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 100px);
  align-items: center;
}

/* Чётные главы — зеркальная раскладка: портрет справа, текст слева */
.chapter--flip .chapter__media {
  order: 2;
}

.chapter--flip .chapter__body {
  order: 1;
}

.chapter__media {
  overflow: hidden;
}

/* Портреты на белом фоне: multiply уводит белый в «бумагу» фона */
.chapter__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 72% 50%;
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.04);
  user-select: none;
  -webkit-user-drag: none;
}

/* «Предприниматель» — цветной, как и в hero */
.chapter__media[data-color] img {
  filter: contrast(1.04);
}

/* Зеркальные главы (02/04/06): портрет слева, взгляд — к тексту;
   object-position ниже базового — кадр смещён, лицо по центру бокса */
.chapter__media--mirror img {
  transform: scaleX(-1);
  object-position: 30% 50%;
}

.chapter__lead {
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 34px;
  max-width: 520px;
}

.chapter__facts {
  border-top: 1px solid var(--taupe);
  max-width: 520px;
}

.chapter__facts li {
  padding: 13px 2px;
  border-bottom: 1px solid var(--taupe);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--steel);
}

/* Факт раскрываемый: виден заголовок до двоеточия,
   полный текст — по hover (десктоп) и по тапу (.is-open) */
.chapter__facts li.fact {
  cursor: pointer;
}

.fact__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.fact__label {
  transition: color .3s ease;
}

/* Плавное раскрытие высоты: grid-rows 0fr → 1fr */
.fact__more {
  display: grid;
  grid-template-rows: 0fr;
  /* 12px звёздочка + 14px gap — текст ровно под заголовком */
  margin-left: 26px;
  transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1);
}

.fact__clip {
  display: block;
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.fact__text {
  display: block;
  padding-top: 8px;
}

.fact.is-open .fact__more {
  grid-template-rows: 1fr;
}

.fact.is-open .fact__clip {
  opacity: 1;
  transform: none;
}

.fact.is-open .fact__label {
  color: var(--ink);
}

.fact.is-open .fact__head .brand-mark {
  color: var(--steel);
}

@media (hover: hover) and (pointer: fine) {
  .fact:hover .fact__more {
    grid-template-rows: 1fr;
  }

  .fact:hover .fact__clip {
    opacity: 1;
    transform: none;
  }

  .fact:hover .fact__label {
    color: var(--ink);
  }

  .fact:hover .fact__head .brand-mark {
    color: var(--steel);
  }
}

.chapter__facts .brand-mark {
  color: var(--taupe);
  font-size: 12px;
  flex: none;
}

/* Связка ролей: вставка-вывод между главами и проектами.
   Центрированная «пауза»: звёздочка, афоризм дисплейным, пояснение тише */
.synthesis {
  padding: 0 var(--pad-x);
}

.synthesis__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) 0;
  border-top: 1px solid var(--taupe);
  border-bottom: 1px solid var(--taupe);
  text-align: center;
}

.synthesis__star {
  color: var(--taupe);
  font-size: 22px;
}

.synthesis__statement {
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 32px);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Акцентная фраза в тезисе-связке */
.synthesis__statement em {
  font-style: normal;
  color: var(--steel);
}

.synthesis__support {
  margin: 26px auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--steel);
}

/* Проекты */

.projects__list {
  border-top: 1px solid var(--taupe);
}

.projects__list li {
  border-bottom: 1px solid var(--taupe);
}

.project {
  display: grid;
  grid-template-columns: 60px 1fr 1.2fr 60px;
  align-items: center;
  gap: 24px;
  padding: 34px 18px;
  border-radius: 6px;
  transition: background-color .35s ease, color .35s ease;
}

.project:hover {
  background: var(--steel);
  color: var(--bone);
}

.project__num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--steel);
  transition: color .35s ease;
}

.project:hover .project__num {
  color: var(--taupe);
}

.project__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0;
}

.project__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
  transition: color .35s ease;
}

.project:hover .project__desc {
  color: var(--taupe);
}

/* Теги ролей: проект привязан к главам */
.project__tags {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
}

.project__arrow {
  width: 26px;
  height: 26px;
  justify-self: end;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.project:hover .project__arrow {
  transform: translate(6px, -6px);
}

/* Статус проекта: моно-строка под тегами («сайт в разработке», «в процессе») */
.project__status {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Флагман: студия залита steel по умолчанию, hover углубляет до ink */
.project--studio {
  background: var(--steel);
  color: var(--bone);
}

.project--studio .project__num,
.project--studio .project__desc {
  color: var(--taupe);
}

.project--studio .project__status {
  color: var(--taupe);
}

.project--studio:hover {
  background: var(--ink);
}

/* Личное медиа: шапка повторяет сетку .project, но не ссылка и без hover-заливки */
.media__head {
  display: grid;
  grid-template-columns: 60px 1fr 1.2fr 60px;
  align-items: center;
  gap: 24px;
  padding: 34px 18px;
}

.media__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0;
}

.media__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
}

/* Вилка на каналы: вертикальный ствол из шапки + горизонтальные отводы к строкам */
.media__channels {
  border-top: 1px solid var(--taupe);
}

.media__channels li {
  position: relative;
}

.media__channels li + li {
  border-top: 1px solid var(--taupe);
}

.media__channels li::before {
  content: '';
  position: absolute;
  left: 47px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--taupe);
}

.media__channels li:last-child::before {
  bottom: 50%;
}

.media__channels li::after {
  content: '';
  position: absolute;
  left: 47px;
  top: 50%;
  width: 44px;
  border-top: 1px solid var(--taupe);
}

.media__channel {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 24px 18px 24px 108px;
  border-radius: 6px;
  transition: background-color .35s ease, color .35s ease;
}

.media__channel:hover {
  background: var(--steel);
  color: var(--bone);
}

.media__channel-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  text-transform: uppercase;
  letter-spacing: 0;
}

.media__channel-note {
  font-size: 14px;
  color: var(--steel);
  transition: color .35s ease;
}

.media__channel:hover .media__channel-note {
  color: var(--taupe);
}

.media__channel .project__arrow {
  margin-left: auto;
}

.media__channel:hover .project__arrow {
  transform: translate(6px, -6px);
}

/* Путь: линия времени. Рельса taupe — весь путь, ink-прогресс — пройденная часть.
   Раскладка: таймлайн слева (до 860px), справа sticky-счётчик года */

.path__layout {
  display: grid;
  grid-template-columns: minmax(0, 860px) 1fr;
  column-gap: clamp(48px, 7vw, 140px);
}

.path__body {
  position: relative;
  padding-left: 56px;
}

.path__rail,
.path__progress {
  position: absolute;
  left: 12px;
  top: 10px;
  bottom: 10px;
  width: 2px;
}

.path__rail {
  background: var(--taupe);
}

/* Без JS прогресс полный (статичный фолбэк); GSAP ведёт scaleY 0→1 по скроллу */
.path__progress {
  background: var(--ink);
  transform-origin: top;
}

.path__entry {
  position: relative;
  padding: 30px 0 36px;
}

.path__node {
  position: absolute;
  left: -52px;
  top: 47px;
  width: 18px;
  height: 18px;
  background: var(--bone); /* перекрывает рельсу под узлом */
  color: var(--taupe);
  transition: color .45s ease, rotate .45s ease, scale .5s cubic-bezier(.2, 1.6, .4, 1);
}

.path__node .brand-mark {
  width: 100%;
  height: 100%;
  display: block;
}

/* is-active проставлен в разметке как фолбэк; JS переключает по кончику линии */
.path__entry.is-active .path__node {
  color: var(--steel);
  rotate: 90deg;
  scale: 1.35;
}

.path__year {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--steel);
}

.path__entry--current .path__year {
  color: var(--ink);
}

/* Год-диапазон длиннее — кегль меньше, чтобы держать строку */
.path__year--range {
  font-size: clamp(24px, 2.7vw, 40px);
}

.path__badge {
  display: inline-block;
  margin-left: 16px;
  vertical-align: 0.55em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--steel);
  padding: 5px 9px;
  border-radius: 4px;
}

.path__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.25;
  text-transform: uppercase;
}

.path__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 560px;
}

.path__tags {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--taupe);
}

/* Сайдбар: сцена с большой рисующейся иконкой + ряд пройденных (десктоп, ведёт JS) */
.path__side {
  position: relative;
  --stage-size: clamp(170px, 15vw, 240px);
}

/* Липнем к линии 50vh и поднимаемся на половину сцены —
   центр большой иконки оказывается точно по центру экрана.
   По горизонтали всё центрируется в свободной колонке справа от текста */
.path__side-inner {
  position: sticky;
  top: 50vh;
  transform: translateY(calc(var(--stage-size) / -2));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.path__side-stage {
  position: relative;
  width: var(--stage-size);
  aspect-ratio: 1;
}

/* Иконки сцены лежат друг на друге; видна одна — текущая рисующаяся (JS).
   По умолчанию скрыты: без JS сцена пуста, виден ряд пройденных */
.path__side-icon--stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--taupe);
  visibility: hidden;
  transform-origin: center;
  transition: color .45s ease;
}

.path__side-icon--stage.is-active {
  color: var(--steel);
}

/* Фигуры рисуются штрихом скрабом от кончика линии */
.path__side-icon--stage [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.path__side-trail {
  display: flex;
  gap: 14px;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.path__side-thumb {
  width: clamp(42px, 3.8vw, 56px);
  color: var(--steel);
  opacity: 0;
  scale: .6;
  transition: opacity .45s ease, scale .45s cubic-bezier(.2, 1.6, .4, 1);
}

/* is-active проставлен в разметке как фолбэк без JS; JS переключает по скроллу */
.path__side-thumb.is-active {
  opacity: 1;
  scale: 1;
}

.path__side-thumb svg {
  display: block;
  width: 100%;
  height: auto;
}

.path__side-progress {
  margin-top: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Подводка под «Путём» — мост к главам-ролям */
.path__foot {
  margin: clamp(48px, 8vh, 96px) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: var(--steel);
}

/* Невысокие экраны: сцена компактнее, чтобы колонка помещалась в sticky */
@media (min-width: 1200px) and (max-height: 800px) {
  .path__side {
    --stage-size: 150px;
  }

  .path__side-thumb {
    width: 40px;
  }

  .path__side-progress {
    margin-top: 18px;
  }
}

/* Сейчас */

.now__status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 40px;
  font-family: var(--font-mono);
}

.now__clock {
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.now__city {
  font-size: 14px;
  color: var(--steel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.now__list {
  border-top: 1px solid var(--taupe);
  max-width: 760px;
}

.now__list li {
  display: flex;
  gap: 32px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--taupe);
}

.now__key {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
  width: 110px;
  flex: none;
  padding-top: 3px;
}

.now__val {
  font-size: 17px;
  line-height: 1.6;
}

/* Контакты */

.socials__list {
  border-top: 1px solid var(--taupe);
}

.socials__list li {
  border-bottom: 1px solid var(--taupe);
}

.social {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 26px 18px;
  border-radius: 6px;
  transition: background-color .35s ease, color .35s ease, padding-left .35s ease;
}

.social:hover {
  background: var(--ink);
  color: var(--bone);
  padding-left: 34px;
}

.social__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 48px);
  text-transform: uppercase;
}

.social__handle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--steel);
  transition: color .35s ease;
}

.social:hover .social__handle {
  color: var(--taupe);
}

.social__arrow {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: none;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.social:hover .social__arrow {
  transform: translate(6px, -6px);
}

/* Строка-заглушка: мессенджер MAX ещё не запущен */

.social--soon {
  cursor: default;
}

.social--soon:hover {
  background: transparent;
  color: inherit;
  padding-left: 18px;
}

.social--soon .social__name {
  color: var(--steel);
}

.social__soon {
  margin-left: auto;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  color: var(--steel);
  transform: rotate(-4deg);
  transition: transform .3s ease;
}

.social--soon:hover .social__soon {
  transform: rotate(3deg);
}

/* Основной способ связи — Telegram */

.social--main {
  background: var(--steel);
  color: var(--bone);
}

.social--main .social__handle {
  color: var(--taupe);
}

.social--main:hover {
  background: var(--ink);
  color: var(--bone);
}

.social__tag {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1;
  color: var(--taupe);
  transform: rotate(-3deg);
}

/* ============ Футер ============
   Три зоны: моно-колонки по бокам, рукописный центр строго посередине.
   Сетка 1fr auto 1fr держит центр по середине независимо от ширины боковых. */

.site-footer {
  border-top: 1px solid var(--taupe);
  padding: 26px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col--left {
  align-items: flex-start;
}

.site-footer__col--center {
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}

/* Правая колонка — «паспорт сборки»: отметка обновления + тикающий счётчик (ведёт JS) */
.site-footer__col--right {
  align-items: flex-end;
  color: var(--steel);
  font-size: 11px;
}

.site-footer__col--right[hidden] {
  display: none;
}

/* Кнопка «наверх»: рукописная, со стрелкой-наброском; якорь к началу, плавный скролл даёт html { scroll-behavior } */
.site-footer__top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1;
  color: var(--steel);
  white-space: nowrap;
  transform: rotate(2deg);
  transition: color .3s ease;
}

.site-footer__top-arrow {
  width: 20px;
  height: 26px;
  transition: transform .3s ease;
}

.site-footer__top:hover {
  color: var(--ink);
}

.site-footer__top:hover .site-footer__top-arrow {
  transform: translateY(-3px);
}

/* Рукописная пометка — рифма с «заметками на полях» у заголовков секций */
.site-footer__hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1;
  color: var(--steel);
  white-space: nowrap;
  transform: rotate(-3deg);
}

.site-footer__build {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Версия сайта — ссылка-пасхалка на секретный changelog */
.site-footer__version {
  font-size: 11px;
  font-weight: 600;
  color: var(--steel);
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

.site-footer__version[hidden] {
  display: none;
}

.site-footer__version:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.site-footer__pulse {
  width: 7px;
  height: 7px;
  background: var(--steel);
  animation: footer-pulse 2.4s ease-in-out infinite;
}

@keyframes footer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ============ Секретная страница: changelog ============
   Открывается только по клику на версию в футере главной.
   Та же палитра и шрифты, компоновка проще: одна колонка. */

.page-changelog {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Шапка повторяет главную: логотип-чип (.logo общий с главной) и кнопка-чип в стиле навигации */
.cl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
}

/* Копия чипа .site-nav a с главной (сам класс не переиспользуем: на мобильном он превращается в меню-оверлей) */
.cl-head__back {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: var(--steel);
  color: var(--bone);
  border-radius: 6px;
  white-space: nowrap;
  flex: none;
  transition: background-color .35s ease, color .35s ease;
}

.cl-head__back:hover {
  background: var(--taupe);
  color: var(--ink);
}

.cl {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) var(--pad-x) clamp(64px, 10vh, 112px);
}

.cl__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.cl__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1.05;
  text-transform: uppercase;
}

.cl__hand {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1;
  color: var(--steel);
  transform: rotate(-3deg);
}

.cl__block {
  margin-top: clamp(44px, 7vh, 72px);
}

.cl__block-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--taupe);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cl__block-title .brand-mark {
  color: var(--steel);
  font-size: 11px;
}

/* Перечень страниц сайта */

.cl-pages__item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--taupe);
}

.cl-pages__url {
  flex: none;
  min-width: 140px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--steel);
}

a.cl-pages__url {
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

a.cl-pages__url:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.cl-pages__desc {
  font-size: 15px;
  line-height: 1.5;
}

/* История версий */

.cl-entry {
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--taupe);
}

.cl-entry__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.cl-entry__ver {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}

.cl-entry__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}

.cl-entry__changes {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cl-entry__changes li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
}

.cl-entry__changes li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--steel);
  transform: rotate(45deg) translateY(-1px);
}

@media (max-width: 640px) {
  .cl-pages__item {
    flex-direction: column;
    gap: 4px;
  }

  .cl-pages__url {
    min-width: 0;
  }
}

/* ============ Анимационные заготовки ============ */

[data-reveal] {
  will-change: transform, opacity;
}

/* ============ Композиция hero для узких экранов (<1200px) ============ */

@media (max-width: 1199px) {
  .hero {
    min-height: 100svh;
  }

  .hero__datetime {
    left: 50%;
    translate: -50% 0;
    top: calc(var(--header-h) + 14px);
    text-align: center;
    font-size: 14px;
    width: max-content;
  }

  .hero__hi {
    left: 50%;
    top: 23%;
    translate: -50% 0;
    font-size: clamp(24px, 7vw, 34px);
  }

  .hero__portrait {
    top: 47%;
    bottom: auto;
    translate: -50% -50%;
    width: min(94vw, 47svh);
  }

  .hero__living {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 1%;
    translate: -50% 0;
    font-size: clamp(24px, 7vw, 34px);
    text-align: center;
    align-items: center;
  }

  .hero__living-line {
    white-space: nowrap;
  }

  .hero__living-line--offset {
    align-self: center;
    margin-right: 0;
    margin-left: 22%;
  }

  .role {
    font-size: 13px;
  }

  /* Роли — в % от бокса портрета (узкие экраны) */
  .role--entrepreneur { left: 82%; top: -6%; }
  .role--creator      { left: 5%;  top: 18%; }
  .role--architect    { left: 9%;  top: 42%; }
  .role--strategist   { left: 92%; top: 16%; }
  .role--designer     { left: 92.5%; top: 44%; }

  /* Путь: без сайдбара — таймлайн на всю ширину */
  .path__layout {
    grid-template-columns: 1fr;
  }

  .path__side {
    display: none;
  }
}

/* Ландшафт мобильных: компактная композиция на один экран */
@media (max-width: 1199px) and (orientation: landscape) {
  .hero {
    height: 100svh;
    min-height: 100svh;
  }

  /* в ландшафте высоты нет — стрелке некуда */
  .hero__arrow {
    display: none;
  }

  .hero__datetime {
    display: none;
  }

  .hero__hi {
    top: 17%;
    font-size: clamp(20px, 5svh, 28px);
  }

  .hero__portrait {
    width: min(40vw, 56svh);
    top: 58%;
  }

  .hero__living {
    bottom: 2%;
    font-size: clamp(20px, 5svh, 28px);
  }

  .role {
    font-size: 12px;
  }
}

/* Самые узкие экраны: подписи чуть мельче, чтобы не вылезать */
@media (max-width: 400px) {
  .role {
    font-size: 11.5px;
  }
}

/* ============ Мобильная версия (mobile.jpeg) ============ */

@media (max-width: 768px) {
  :root {
    --header-h: 60px; /* один ряд: логотип + бутерброд */
  }

  .logo {
    font-size: 12px;
    padding: 9px 13px;
    white-space: nowrap;
  }

  /* Кнопка «на сайт» в журнале — в высоту логотипа */
  .cl-head__back {
    font-size: 12px;
    padding: 9px 13px;
    line-height: 1;
  }

  /* На телефоне дата и время лишние */
  .hero__datetime {
    display: none;
  }

  /* Кнопка-бутерброд: стальной чип с двумя полосами, в высоту логотипа */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 30px; /* как чип .logo: 12px текста + 2×9px паддинга */
    flex: none;
    padding: 0;
    background: var(--steel);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--bone);
    transition: transform .3s ease;
  }

  /* Открытое меню: полосы складываются в × */
  .site-header.is-nav-open .nav-toggle span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .site-header.is-nav-open .nav-toggle span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* Полноэкранное меню со всеми разделами (под шапкой: z-index 99 < 100) */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0 var(--pad-x);
    background: var(--bone);
    counter-reset: nav;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s .35s;
  }

  .site-header.is-nav-open {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Логотип и крестик — поверх оверлея меню (z-index меню 99) */
  .site-header.is-nav-open .logo,
  .site-header.is-nav-open .nav-toggle {
    position: relative;
    z-index: 100;
  }

  .site-header.is-nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
  }

  .site-nav a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 2px;
    border-bottom: 1px solid var(--taupe);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 900;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease, background-color .35s ease, color .35s ease;
  }

  /* Моно-индексы 01–06 перед названиями разделов */
  .site-nav a::before {
    counter-increment: nav;
    content: counter(nav, decimal-leading-zero);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--steel);
  }

  .site-header.is-nav-open .site-nav a {
    opacity: 1;
    transform: translateY(0);
  }

  /* Каскад появления пунктов (задержка действует только на открытие) */
  .site-header.is-nav-open .site-nav a:nth-child(1) { transition-delay: .06s; }
  .site-header.is-nav-open .site-nav a:nth-child(2) { transition-delay: .11s; }
  .site-header.is-nav-open .site-nav a:nth-child(3) { transition-delay: .16s; }
  .site-header.is-nav-open .site-nav a:nth-child(4) { transition-delay: .21s; }
  .site-header.is-nav-open .site-nav a:nth-child(5) { transition-delay: .26s; }
  .site-header.is-nav-open .site-nav a:nth-child(6) { transition-delay: .31s; }

  .section__note {
    font-size: 17px;
  }

  /* Длинные названия глав (напр. «Предприниматель») влезают в узкий экран:
     Unbounded 900 ≈ 0.93em на заглавную кириллическую букву */
  .section__title {
    font-size: clamp(20px, 6.2vw, 92px);
  }

  /* Главы в одну колонку, портрет всегда сверху */
  .chapter__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .chapter--flip .chapter__media {
    order: 0;
  }

  .chapter--flip .chapter__body {
    order: 1;
  }

  .chapter__lead {
    margin-bottom: 24px;
  }

  /* Вектор в одну колонку: текст, портрет, био; без подгонки под высоту экрана */
  .goal {
    min-height: 0;
  }

  .goal__body {
    grid-template-columns: 1fr;
  }

  .goal__media img {
    max-height: none;
  }

  .goal__media {
    grid-column: 1;
    grid-row: auto;
    margin-top: 40px;
  }

  .now__list li {
    flex-direction: column;
    gap: 6px;
  }

  .now__key {
    width: auto;
    padding-top: 0;
  }

  /* Путь: рельса ближе к краю */
  .path__body {
    padding-left: 40px;
  }

  .path__rail,
  .path__progress {
    left: 9px;
  }

  .path__entry {
    padding: 24px 0 30px;
  }

  .path__node {
    left: -38px;
    top: 30px;
    width: 16px;
    height: 16px;
  }

  .path__badge {
    margin-left: 10px;
  }

  .project {
    grid-template-columns: 40px 1fr 40px;
    grid-template-rows: auto auto;
    padding: 26px 12px;
  }

  .project__num {
    grid-column: 1;
    grid-row: 1;
  }

  .project__name {
    grid-column: 2;
    grid-row: 1;
  }

  .project__desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
  }

  .project__arrow {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }

  .media__head {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    padding: 26px 12px;
  }

  .media__head .project__num {
    grid-column: 1;
    grid-row: 1;
  }

  .media__name {
    grid-column: 2;
    grid-row: 1;
  }

  .media__desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
  }

  .media__channels li::before {
    left: 31px;
  }

  .media__channels li::after {
    left: 31px;
    width: 20px;
  }

  .media__channel {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 18px 12px 18px 64px;
  }

  .media__channel-note {
    flex-basis: 100%;
    order: 3;
  }

  .media__channel .project__arrow {
    width: 22px;
    height: 22px;
  }

  .social {
    gap: 14px;
    padding: 20px 12px;
  }

  .social__name {
    font-size: clamp(19px, 5.6vw, 48px);
  }

  .social__handle {
    font-size: 12px;
  }

  .social__arrow {
    width: 22px;
    height: 22px;
  }

  .social--soon:hover {
    padding-left: 12px;
  }

  .social__soon {
    font-size: 24px;
  }

  /* Строки с пометкой («основной», «запасной») переносят её на вторую линию */
  .social {
    flex-wrap: wrap;
  }

  .social__tag {
    order: 5;
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 18px;
  }

  /* Футер: одна колонка, все три зоны по центру */
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__col {
    align-items: center;
  }
}

/* ============ Мобильный hero: колонка, надпись внизу ============
   Часы на телефоне скрыты. Два auto-margin (у «привета» и у надписи)
   делят свободное место поровну: группа «привет → портрет» опущена,
   «Создаю системы из хаоса» стоит у нижнего края.
   Только портретная ориентация телефона — ландшафтные правила выше
   работают как раньше. */

@media (max-width: 768px) and (orientation: portrait) {
  .hero__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 8svh;
  }

  .hero__hi,
  .hero__living {
    position: static;
    translate: none;
  }

  .hero__hi {
    margin-top: auto;
    margin-bottom: 6svh;
  }

  /* relative: портрет остаётся контекстом позиционирования для ролей */
  .hero__portrait {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    translate: none;
    flex: none;
    width: min(96vw, 50svh);
    margin-bottom: 5svh;
  }

  .hero__living {
    margin-top: auto;
  }
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* статичные наклоны надписей (в обычном режиме ими владеет GSAP) */
  .hero__hi {
    transform: rotate(-2deg);
  }

  .hero__living {
    transform: rotate(2deg);
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}