/* ── основа ─────────────────────────────────────────────────── */

:root {
  --bg:      #000;
  --fg:      #f5f5f7;
  --fg-80:   rgba(245,245,247,.8);
  --fg-60:   rgba(245,245,247,.6);
  --dim:     #86868b;
  --line:    rgba(255,255,255,.14);
  --amber:   #ffb340;

  --measure: 40rem;                          /* ширина текстовой колонки */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);    /* поля страницы */

  /* геометрия дорожки — одна точка правды для CSS и JS */
  --yr-col:  10rem;                          /* колонка возраста на десктопе */
  --yr-size: clamp(2.4rem, 4vw, 3.5rem);     /* кегль возраста; «15–16» должно влезать в строку */
  --rail-x:  calc(var(--gutter) + var(--yr-col) + 2rem);
  --focus:   40vh;                           /* «линия фокуса»: тут кончик заливки и залипший год */
  --branch-gap: 2rem;                        /* от дорожки до текста: длина «ветки» */
  --ch-pad:  clamp(6rem, 14vh, 11rem);       /* вертикальный отступ главы */
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Заголовки: крупно, плотно, отрицательный трекинг. Всё остальное тихое. */
h1, h2, h3, .yr b, .facts b {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.eyebrow {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.eyebrow a { border-bottom: 1px solid var(--line); }
.eyebrow a:hover { color: var(--fg); }

/* ── nav ─────────────────────────────────────────────────────── */

#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); height: 48px;
  font-size: 12px; letter-spacing: .01em;
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s;
}
#nav.lifted { border-bottom-color: var(--line); }
#nav .mark    { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
#nav .logo    { width: 28px; height: 18px; flex: none; }
#nav .readout { white-space: nowrap; }
#nav .readout { color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#nav .readout.live { color: var(--fg); }

/* ── VSL: первый экран ───────────────────────────────────────── */

.vsl {
  position: relative;
  height: 100svh; min-height: 34rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(3.5rem, 10vh, 7rem);
  overflow: hidden;
  background: #000;
}

.vsl-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 30%;
  filter: brightness(.55) saturate(.85);
  transform: scale(1.04);
  transition: opacity .6s;
}
/* нижняя треть гарантированно тёмная — белый текст читается на любом кадре */
.vsl-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.35) 100%);
  transition: opacity .6s;
}

.vsl-copy { position: relative; z-index: 2; transition: opacity .5s, transform .5s; }
.vsl h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  max-width: 18ch;
}
/* имя — в h1 (поисковику), вторая строка приглушена: первый экран остаётся заголовком, не визиткой */
.h1-tag { color: rgba(245,245,247,.55); font-size: .72em; }
.lede {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.4;
  color: var(--fg-80);
}
.vsl-empty { margin-top: 1.5rem; }
.vsl[data-empty="false"] .vsl-empty { display: none; }

/* кнопка play: одна, крупная, по центру кадра */
.vsl-play {
  position: absolute; z-index: 3;
  left: 50%; top: 38%;
  width: clamp(4.5rem, 9vw, 6rem); height: clamp(4.5rem, 9vw, 6rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(245,245,247,.92);
  color: #000;
  display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(245,245,247,.18), 0 20px 60px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s;
}
.vsl-play svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }
.vsl-play:hover,
.vsl-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
  box-shadow: 0 0 0 14px rgba(245,245,247,.12), 0 24px 70px rgba(0,0,0,.5);
  outline: none;
}

/* плеер разворачивается на месте постера */
.vsl-player { position: absolute; inset: 0; z-index: 4; background: #000; }
.vsl-player video,
.vsl-player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: #000;
}
.vsl-close {
  position: absolute; z-index: 5; right: var(--gutter); top: 64px;
  padding: .45rem .9rem; border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg); background: rgba(0,0,0,.5); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.vsl.playing .vsl-copy   { opacity: 0; transform: translateY(12px); pointer-events: none; }
.vsl.playing .vsl-play,
.vsl.playing .scroll-hint,
.vsl.playing .vsl-wash   { opacity: 0; pointer-events: none; }

.scroll-hint {
  position: absolute; z-index: 2;
  bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,245,247,.45);
  animation: drift 2.6s ease-in-out infinite;
}
@keyframes drift {
  0%,100% { transform: translate(-50%, 0);   opacity: .45; }
  50%     { transform: translate(-50%, 6px); opacity: .85; }
}

/* ── интро ───────────────────────────────────────────────────── */

.intro {
  padding: clamp(5rem, 14vh, 10rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}
.intro-line {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.15;
  max-width: 24ch;
}
.intro-note { margin-top: 1.5rem; color: var(--dim); font-size: 15px; max-width: 34rem; }

/* ── дорожка ─────────────────────────────────────────────────── */

.timeline { position: relative; }

.rail {
  position: absolute; z-index: 5;
  top: 0; bottom: 0; left: var(--rail-x);
  width: 2px; margin-left: -1px;
  pointer-events: none;
}
.rail-track { position: absolute; inset: 0; background: rgba(255,255,255,.12); }
.rail-fill {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(245,245,247,.55), #f5f5f7);
  transform-origin: top; transform: scaleY(0);
  will-change: transform;
}
/* светящийся кончик заливки; JS двигает translateY */
.rail-head {
  position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 18px 4px rgba(255,255,255,.45);
  opacity: 0; transition: opacity .3s;
  will-change: transform;
}
.rail-head.on { opacity: 1; }

/* ── глава ───────────────────────────────────────────────────── */

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: var(--yr-col) minmax(0, 1fr);
  column-gap: 4rem;
  padding: var(--ch-pad) var(--gutter);
}
.chapter + .chapter { border-top: 0; }

/* возраст — главная единица: крупно число, над ним «age», под ним год/период */
.yr::before {
  content: "age"; display: block;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .4rem; opacity: .75;
}
.finale .yr::before { content: none; }

/* год: залипает на линии фокуса, пока листаешь его главу */
.yr {
  position: sticky;
  top: calc(var(--focus) - 16.5px - .4rem - var(--yr-size) * .5);
  align-self: start;
  text-align: right;
  padding-right: 0;
  color: var(--dim);
  transition: color .4s;
}
.yr b {
  display: block;
  font-size: var(--yr-size);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.yr span {
  display: block; margin-top: .6rem;
  font-size: 12px; letter-spacing: .04em; line-height: 1.35;
}
.chapter.current .yr { color: var(--fg); }

/* узел на дорожке — у начала главы, на высоте цифр года */
.node {
  position: absolute; z-index: 6;
  left: var(--rail-x);
  top: calc(var(--ch-pad) + 16.5px + .4rem + var(--yr-size) * .5);
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #000;
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: background .35s, border-color .35s, box-shadow .45s, transform .35s;
}
.chapter.past .node {
  background: #f5f5f7; border-color: #f5f5f7;
}
.chapter.current .node {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 0 6px rgba(255,255,255,.14), 0 0 24px 4px rgba(255,255,255,.35);
}
/* вторая сквозная линия (тело): узел — кольцо, а не точка, чтобы нить читалась на дорожке */
.body-line .node { border-color: rgba(255,255,255,.55); }
.body-line.past .node { background: #000; border-width: 2px; border-color: #f5f5f7; }
.body-line .story .eyebrow { color: rgba(245,245,247,.7); }


/* ── три части главы: различаются типографикой, не рамками ──── */

.body { min-width: 0; }

/* 1. что делал — повествование крупным кеглем */
.story h2 {
  font-size: clamp(2.1rem, 4.6vw, 4.25rem);
  margin-top: 1.1rem;
  max-width: 18ch;
}
.story p:not(.eyebrow) {
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.45;
  color: var(--fg-80);
}
.story h2 + p { margin-top: 2.25rem; }

/* 2. что получилось — цифры, затем одна мысль плотнее и ярче */
.outcome {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}
.facts {
  display: flex; flex-wrap: wrap;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
}
.facts b {
  display: block;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.facts span {
  display: block; margin-top: .4rem;
  font-size: 13px; line-height: 1.35; color: var(--dim);
  max-width: 16ch;
}
.takeaway {
  margin-top: 2.25rem;
  max-width: 34ch;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.3;
  color: var(--fg);
  text-wrap: pretty;
}
.facts + .takeaway { margin-top: 2.5rem; }
.footnote { margin-top: 1.25rem; font-size: 12px; color: var(--dim); }

/* 3. пруфы — полоса медиа, прижатая к правому краю экрана */
.proof {
  margin-top: clamp(2.75rem, 6vh, 4.25rem);
}
.strip {
  display: flex; gap: .75rem;
  margin-top: 1rem;
  margin-right: calc(-1 * var(--gutter));   /* до самого края */
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }

.tile {
  position: relative; flex: 0 0 auto;
  width: clamp(15rem, 26vw, 24rem);
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #0b0b0d;
  border: 1px solid rgba(255,255,255,.08);
}
.tile.photo img { width: 100%; height: 100%; object-fit: cover; }
.tile.photo figcaption {
  position: absolute; left: 1rem; bottom: .9rem;
  font-size: 12px; color: rgba(245,245,247,.85);
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.tile.link {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(160deg, #141416, #08080a);
  transition: background .3s, border-color .3s;
}
.tile.link:hover { border-color: rgba(255,255,255,.22); background: linear-gradient(160deg, #1b1b1e, #0b0b0d); }
.tile-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.tile-title  { font-size: 15px; font-weight: 500; }

/* пустой слот: тихая тёмная плоскость с кольцом и меткой, не дырка */
.tile.slot {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  padding: 1.1rem 1.2rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    #0b0b0d;
  border-style: dashed; border-color: rgba(255,179,64,.35);
}
.slot-ring {
  position: absolute; left: 50%; top: 42%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
}
.slot-ring::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .55rem; height: .55rem;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,.22);
}
.tile.slot.video .slot-ring::after {
  width: 0; height: 0; border-radius: 0; background: none;
  border-left: .6rem solid rgba(255,255,255,.28);
  border-top: .38rem solid transparent; border-bottom: .38rem solid transparent;
  transform: translate(-40%, -50%);
}
.slot-label { font-size: 14px; font-weight: 500; color: var(--fg-80); }

/* фото на всю ширину между главами */
.bleed { position: relative; margin: clamp(1rem, 4vh, 3rem) 0; }
.bleed img { width: 100%; height: clamp(24rem, 82vh, 56rem); object-fit: cover; object-position: 22% 50%; }
.bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent 35%, transparent 80%, rgba(0,0,0,.5));
}
.bleed figcaption {
  position: absolute; z-index: 2;
  left: calc(var(--rail-x) + 2rem); bottom: 2rem;
  font-size: 13px; color: rgba(245,245,247,.8);
}

/* ── заглушки: заметные, но аккуратные ───────────────────────── */

.todo-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber);
}

/* ── футер: путь продолжается, следить можно в прямом эфире ──── */

footer {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--line);
}
.live-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
}
.closing { font-size: clamp(2rem, 5vw, 4.25rem); }
.live-sub { margin-top: 1rem; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--fg-80); }
.live-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem .55rem .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  margin-top: .6rem;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff453a;
  box-shadow: 0 0 0 0 rgba(255,69,58,.5);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,69,58,.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(255,69,58,0); opacity: .75; }
  100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); opacity: 1; }
}
.socials {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--line);
}
.socials li { border-bottom: 1px solid var(--line); }
.socials a {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 0; padding-right: 1rem;
  transition: color .3s;
}
.socials a:hover { color: var(--fg); }
.soc-name { font-size: 15px; font-weight: 500; }
.soc-handle { font-size: 12px; color: var(--dim); }
.socials a.pending { color: var(--dim); cursor: default; }
.socials a.pending .soc-handle { color: var(--amber); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.copyright { margin-top: 2.5rem; font-size: 12px; color: var(--dim); }

/* ── появление блоков ────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ── широкие экраны: контент не расползается, поля растут ──── */

@media (min-width: 1700px) {
  :root { --gutter: calc((100vw - 1560px) / 2); --measure: 42rem; }
  body { font-size: 18px; }
}

/* ── узкие экраны ────────────────────────────────────────────── */

@media (max-width: 860px) {
  :root {
    --rail-x: calc(var(--gutter) + 5px);
    --branch-gap: 1.75rem;
    --yr-size: clamp(2.4rem, 11vw, 3.25rem);
    --ch-pad: clamp(4.5rem, 12vh, 7rem);
  }
  .chapter {
    display: block;
    padding-left: calc(var(--rail-x) + 1.75rem);
  }
  /* на телефоне год не залипает — стоит заголовком главы у своего узла */
  .yr { position: static; text-align: left; margin-bottom: 1.75rem; }
  .yr b { line-height: 1; }
  .chapter .yr { color: var(--fg); }

  .story h2 { max-width: none; }
  .bleed figcaption { left: calc(var(--rail-x) + 1.75rem); bottom: 1.25rem; }
  .bleed img { height: clamp(20rem, 70vh, 36rem); }
  .tile { width: min(72vw, 20rem); }
  .vsl-close { top: 60px; }
  #readout-when { display: none; }
}
.story-text { min-width: 0; }

/* пруфы внутри рассказа: у того абзаца, о котором речь */
.inline-proof { margin: 1.75rem 0 .5rem; }
.inline-proof .strip { margin-top: 0; }
.inline-proof .tile { width: clamp(11rem, 16vw, 14rem); }
.inline-proof .tile.link { min-height: 0; }
.inline-note { margin-top: .6rem; font-size: 12px; color: var(--dim); }

/* ── глава с ветками: один узел, несколько дел одного возраста ── */

.branches .body > .story h2 { max-width: 14ch; }
.branch {
  position: relative;
  margin-top: clamp(4rem, 9vh, 7rem);
}
/* ветка: короткая горизонталь от дорожки к тексту, с точкой на дорожке */
.branch::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--branch-gap)); top: .55rem;
  width: var(--branch-gap); height: 1px;
  background: rgba(255,255,255,.22);
  transition: background .4s;
}
.branch::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--branch-gap)); top: .55rem;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255,255,255,.35);
  transition: background .4s, border-color .4s;
}
.chapter.past .branch::before { background: rgba(255,255,255,.45); }
.chapter.past .branch::after  { background: #f5f5f7; }
.branch.body-line::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #000; border: 1.5px solid rgba(255,255,255,.55); }
.chapter.past .branch.body-line::after { background: #000; border-color: #f5f5f7; }

.branch .story h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-top: 1rem; max-width: 20ch; }
.branch .story p:not(.eyebrow) { font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 32rem; margin-top: 1.1rem; }
.branch .story h3 + p { margin-top: 1.5rem; }
.branch .outcome { margin-top: 2.25rem; padding-top: 1.5rem; }
.branch .facts b { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.branch .takeaway { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 34ch; margin-top: 1.5rem; }
.branch .proof { margin-top: 2.25rem; }
.branch .tile { width: clamp(12rem, 22vw, 16rem); }

/* главная ветка (Wildberries) — в полный кегль опорной главы */
.branch.main .story h3 { font-size: clamp(2.2rem, 4.8vw, 4.25rem); max-width: 16ch; }
.branch.main .story p:not(.eyebrow) { font-size: clamp(1.1rem, 1.55vw, 1.32rem); max-width: var(--measure); margin-top: 1.5rem; }
.branch.main .story h3 + p { margin-top: 2.25rem; }
.branch.main .outcome { margin-top: clamp(3rem, 6vh, 4.5rem); padding-top: 2rem; }
.branch.main .facts b { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
.branch.main .takeaway { font-size: clamp(1.3rem, 2.1vw, 1.8rem); max-width: 30ch; margin-top: 2.5rem; }
.branch.main .tile { width: clamp(15rem, 26vw, 24rem); }

/* сноски и пометки внутри текста */
sup { font-size: .6em; line-height: 0; vertical-align: super; color: var(--dim); }
.story .footnote { margin-top: 1.25rem; max-width: var(--measure); }
.todo-note { margin-top: 1.25rem; }

/* ── финал: из Испании в Америку ─────────────────────────────── */

.chapter.finale { min-height: 100svh; padding-bottom: clamp(2rem, 5vh, 4rem); }
.chapter.finale .story p:not(.eyebrow) { max-width: 30rem; }
.chapter.finale .yr b { font-weight: 500; }

.flight {
  grid-column: 1 / -1;
  position: relative;
  height: clamp(18rem, 46vh, 30rem);
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.flight-svg {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.flight-line {
  fill: none; stroke: #f5f5f7; stroke-width: 2; stroke-linecap: round;
}
#runway { stroke: rgba(245,245,247,.9); }
.flight-dot { fill: #f5f5f7; opacity: 0; transition: opacity .4s; }
.flight-dot.on { opacity: 1; }
.flight-label {
  fill: var(--dim);
  font: 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity .5s;
}
.flight-label.on { opacity: 1; }

.plane { opacity: 0; transition: opacity .35s; will-change: transform; }
.plane.on { opacity: 1; }
.plane-line { fill: none; stroke: #f5f5f7; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.plane-photo { filter: grayscale(1) contrast(1.1) brightness(1); }

@media (max-width: 860px) {
  .chapter.finale { padding-right: var(--gutter); }
  .flight { height: clamp(16rem, 44vh, 24rem); margin-left: calc(-1 * (var(--rail-x) + 1.75rem)); margin-right: calc(-1 * var(--gutter)); }
  .chapter.side .tile { width: min(60vw, 15rem); }
}

/* футер: достаточно высокий, чтобы линия фокуса дошла до конца дорожки */
footer { min-height: 44svh; display: flex; flex-direction: column; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* сноска и пометка внутри повествования не должны наследовать крупный кегль */
.story p.footnote, .story p.todo-note { font-size: 12px; line-height: 1.5; margin-top: 1.25rem; color: var(--dim); }

/* ── фон главы: снимок того возраста подложкой, текст поверх ── */

.chapter-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.chapter-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%;
  /* снимок приглушён сам по себе, чтобы любой кадр держал белый текст */
  filter: brightness(.5) saturate(.8);
}
/* градиент под текстовой колонкой (слева темнее), плюс мягкие края сверху и снизу,
   чтобы главы переходили друг в друга без стыков */
.chapter-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.92) 42%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, #000 0%, transparent 14%, transparent 86%, #000 100%);
}
/* пустой слот: не чёрный прямоугольник, а видимая рамка с подписью возраста */
.chapter-bg.empty::before {
  content: ""; position: absolute; inset: 1rem;
  border: 1px dashed rgba(255,179,64,.28); border-radius: 14px;
  background: radial-gradient(70% 60% at 85% 30%, rgba(255,255,255,.035), transparent 70%);
}
.chapter-bg.empty::after { content: none; }
.bg-label {
  position: absolute; top: 2rem; right: 2rem;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); opacity: .9;
}
.bg-label b { font-weight: 600; }
.chapter > .body, .chapter > .flight { position: relative; z-index: 1; }
.chapter > .yr { z-index: 1; }

/* ── карусель ивента: scroll-snap, стрелки, перетаскивание ───── */

.carousel { margin: 1.75rem 0 .5rem; margin-right: calc(-1 * var(--gutter)); }
.car-track {
  display: flex; gap: .75rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-right: var(--gutter); padding-bottom: .25rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.car-track:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 4px; border-radius: 10px; }
.slide {
  position: relative; flex: 0 0 auto;
  height: clamp(16rem, 52vh, 30rem);
  scroll-snap-align: start;
  border-radius: 10px; overflow: hidden;
  background: #0b0b0d;
}
.slide img { height: 100%; width: auto; display: block; pointer-events: none; }
.slide figcaption {
  position: absolute; left: 1rem; bottom: .9rem;
  font-size: 12px; color: rgba(245,245,247,.85);
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.car-ui { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.car-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--fg);
  font-size: 15px; display: grid; place-items: center;
  transition: background .25s, border-color .25s, opacity .25s;
}
.car-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
.car-count { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .06em; min-width: 3.5rem; text-align: center; }

/* ── телефон: правила для блоков, объявленных ниже основного медиазапроса ── */
@media (max-width: 860px) {
  .inline-proof .tile { width: min(60vw, 14rem); }
  .live-head { flex-direction: column; }
  .live-badge { margin-top: 0; }
}

@media (max-width: 860px) {
  .chapter-bg img { object-position: 60% 25%; }
  .chapter-bg::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.9) 100%),
      linear-gradient(180deg, #000 0%, transparent 10%, transparent 92%, #000 100%);
  }
  .chapter-bg.empty::before { inset: .5rem; }
  .bg-label { top: 1rem; right: 1rem; font-size: 10px; }
  .slide { height: clamp(14rem, 44vh, 20rem); }
}
@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }

/* ── фон-листалка (data-bgs): фото на всю рамку, сами листаются вправо раз в 3 секунды ──
   В главе рамка на всю высоту, а сцена внутри залипает на экран, чтобы кадр не резался
   по высоте длинной главы. overflow: clip, а не hidden: hidden ломает sticky. */

.bgs { overflow: clip; }
.vsl-bgs { position: absolute; inset: 0; }
.chapter-bg.bgs { inset: 1rem; border-radius: 14px; }
.bgs-stage { position: relative; height: 100%; overflow: hidden; }
/* затемнение слабее, чем у пустой главы: фото должно читаться, текст слева всё равно на тёмном */
.chapter-bg.bgs::after {
  background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.38) 72%, rgba(0,0,0,.12) 100%);
}
.chapter-bg.bgs .bgs-stage { position: sticky; top: 0; height: 100svh; max-height: 100%; }

.bgs-slide {
  position: absolute; inset: 0; margin: 0;
  transform: translateX(100%);
  transition: transform .9s cubic-bezier(.65, 0, .25, 1);
}
.bgs-slide.is-on  { transform: none; }
.bgs-slide.is-off { transform: translateX(-100%); }
.bgs-slide.reset  { transition: none; }
.bgs-slide > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
  filter: brightness(.55) saturate(.85);
}
.chapter-bg.bgs .bgs-slide > img { filter: brightness(.6) saturate(.85); }
/* скрин или превью малого размера: на фоне размыто, резкая копия карточкой */
.bgs-slide.shot > img.bgs-bg,
.bgs-slide.yt > img.bgs-bg { filter: blur(28px) brightness(.45) saturate(1.1); transform: scale(1.15); }
/* фото с человеком: фон резкий, скрин его канала приколот карточкой */
.chapter-bg.bgs .bgs-slide.shot.photo > img.bgs-bg { filter: brightness(.6) saturate(.85); transform: none; }

.bgs-slide figcaption {
  position: absolute; top: 2rem; right: 2rem; max-width: 26rem; text-align: right;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
.vsl-bgs .bgs-slide figcaption { top: auto; bottom: 2rem; }

.bgs-card {
  position: absolute; right: 2.5rem; bottom: 3rem;
  width: clamp(20rem, 32vw, 36rem);
  border-radius: 12px; overflow: hidden;
  background: rgba(12,12,14,.82); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
}
.bgs-card img { width: 100%; height: auto; display: block; }
.bgs-slide.yt .bgs-card img { aspect-ratio: 16 / 9; object-fit: cover; }
.bgs-card b { display: block; padding: .9rem 1rem 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.bgs-card b i { font-style: normal; font-weight: 400; color: var(--fg-60); }
.bgs-card span { display: block; padding: .5rem 1rem .9rem; font-size: 12px; color: var(--dim); letter-spacing: .03em; }

/* карточке нужно место справа от текста; где его нет, слайд показывает фон без размытия */
@media (max-width: 1299px) {
  .bgs-card { display: none; }
  .bgs-slide.shot > img.bgs-bg { object-fit: contain; filter: brightness(.6); transform: none; }
  .bgs-slide.shot.photo > img.bgs-bg { object-fit: cover; }
  .bgs-slide.yt > img.bgs-bg { filter: brightness(.55); transform: none; }
}
@media (max-width: 860px) {
  .chapter-bg.bgs { inset: .5rem; }
  .chapter-bg.bgs::after { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 30%, rgba(0,0,0,.85) 100%); }
  .bgs-slide figcaption { top: 1rem; right: 1rem; font-size: 10px; max-width: 70%; }
  .vsl-bgs .bgs-slide figcaption { top: auto; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bgs-slide, .bgs-slide.is-off { transform: none; opacity: 0; transition: opacity .8s; }
  .bgs-slide.is-on { opacity: 1; }
}

/* главы без фото пока без рамки; финал без самолёта, обычной высоты */
.chapter-bg.empty { display: none; }
.chapter.finale { min-height: 0; }