/* Design read: инвестиционное предложение для службы развития сети DIY. Читают с ноутбука и проектора.
   Тёмный лист, шрифт ЕКР (Mulish: заголовки 600, текст 400), тонкие линии, прямые углы.
   Модель в окне справа, без затемнения; слева заголовок и цифры; под окном данные шага.
   Цвета из палитры ЕКР, монохром: Midnight #1A1A1C, графит #26262A, Snow #F3F2EE (15.5:1),
   вторичный #A8A29C (6.9:1). Цветного акцента нет: главное светлее и плотнее, остальное приглушено.
   Скругление одно: 2px. Теней, градиентов и «таблеток» нет. */

/* Mulish из брендбука ЕКР: латинское подмножество пересобрано со знаками ₽ ≈ ≤ ≥ */
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/mulish-cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/mulish-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+2248, U+2264-2265, U+FEFF, U+FFFD; }

:root {
  --bg: #1a1a1c;
  --paper: #26262a;
  --ink: #f3f2ee;
  --muted: #a8a29c;
  --accent: #f3f2ee;                 /* акцента нет: выделение — Snow против вторичного серого */
  --on-accent: #1a1a1c;
  --line: rgba(243, 242, 238, .14);
  --bar: rgba(243, 242, 238, .24);
  --r: 2px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --top: 4rem;
  --m: 3rem;                         /* поле листа */
  --gap: 3.5rem;                       /* между колонками */
  --left: calc((100vw - 2 * var(--m) - var(--gap)) * 5 / 12);  /* текстовая колонка: 5 из 12 */
  --left-n: calc((100vw - 2 * var(--m) - var(--gap)) * 4 / 12); /* узкая — для «широкого окна» */
  --win-x: calc(var(--m) + var(--left) + var(--gap));
  --win-w: calc(100vw - var(--win-x) - var(--m));
  --win-y: calc(var(--top) + 1.5rem);
  --data-h: clamp(16.25rem, 36dvh, 26.25rem);
  --win-h: calc(100dvh - var(--win-y) - 2.5rem);      /* «рядом»: окно во всю высоту */
  --rw: 0.5rem; --mo: 0.875rem; --ml: 1.875rem;   /* скругление окна, отступ и длина меток обреза */
}
/* «под окном»: окно ниже на полосу данных */
/* «широкое окно»: на слайдах с коротким текстом колонна 4 из 12, модель шире */
@media (min-width: 1100px) and (min-height: 600px) {
  html[data-layout="under"] { --win-h: calc(100dvh - var(--win-y) - var(--data-h) - 4rem); }
  html[data-layout="wide"] { --win-x: calc(var(--m) + var(--left-n) + var(--gap)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
html { overflow-x: clip; }  /* на телефоне прокрутка обычная: слайды выше экрана, прилипание дёргало чтение */
/* широкий экран — колода: листает только story.js, свободной прокрутки нет */
/* Колода (широкий экран): вся раскладка в rem, а rem растёт и сжимается с экраном —
   по меньшей из сторон относительно эталона 1440 × 900 (там 1rem = 16px). */
@media (min-width: 1100px) and (min-height: 600px) {
  html { overflow: hidden; font-size: clamp(12px, min(1.111vw, 1.778vh), 30px); }
}
body { font: 400 1.0625rem/1.5 'Mulish', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; }

/* Окно со сценой: карта или 3D. Текст уходит под окно при прокрутке.
   Угол окна скруглён на --rw; снаружи по углам метки обреза — дуги того же центра (радиус --rw + --mo). */
#stage, .labels {
  position: fixed !important; inset: auto !important; z-index: 6;
  left: var(--win-x) !important; top: var(--win-y) !important;
  width: var(--win-w) !important; height: var(--win-h) !important;
  border-radius: var(--rw); overflow: hidden;
  transition: height .5s cubic-bezier(.77, 0, .175, 1), width .5s cubic-bezier(.77, 0, .175, 1), left .5s cubic-bezier(.77, 0, .175, 1), opacity .4s ease;
}
#stage { background: var(--paper); }
.scrim {
  position: fixed; z-index: 6; pointer-events: none;
  left: calc(var(--win-x) - var(--mo)); top: calc(var(--win-y) - var(--mo));
  width: calc(var(--win-w) + 2 * var(--mo)); height: calc(var(--win-h) + 2 * var(--mo));
  border: 1px solid rgba(243, 242, 238, .42); border-radius: calc(var(--rw) + var(--mo));
  /* от рамки остаются только четыре угла */
  --c: linear-gradient(#000 0 0);
  -webkit-mask: var(--c) left top / var(--ml) var(--ml) no-repeat, var(--c) right top / var(--ml) var(--ml) no-repeat,
                var(--c) left bottom / var(--ml) var(--ml) no-repeat, var(--c) right bottom / var(--ml) var(--ml) no-repeat;
  mask: var(--c) left top / var(--ml) var(--ml) no-repeat, var(--c) right top / var(--ml) var(--ml) no-repeat,
        var(--c) left bottom / var(--ml) var(--ml) no-repeat, var(--c) right bottom / var(--ml) var(--ml) no-repeat;
  transition: height .5s cubic-bezier(.77, 0, .175, 1), width .5s cubic-bezier(.77, 0, .175, 1), left .5s cubic-bezier(.77, 0, .175, 1), opacity .4s ease;
}
.labels { overflow: hidden; pointer-events: none; transition: opacity .3s ease; }
#map, #scene { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s ease; }
#stage[data-kind="map"] #scene, #stage[data-kind="map"] ~ .labels { opacity: 0; pointer-events: none; }
#stage[data-kind="3d"] #map { opacity: 0; pointer-events: none; }

/* Шапка: главы отрезками шкалы во всю ширину (у каждой своя полоса прохода), справа номер слайда и стрелки */
.top {
  position: fixed; inset: 0 0 auto; z-index: 7; height: var(--top); padding: 0 var(--m); background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: center;
}
#chapters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; align-self: stretch; }
#chapters a { display: flex; flex-direction: column; justify-content: center; gap: 0.5625rem; font-size: 0.9375rem; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: color .15s ease; }
#chapters a i { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; }
#chapters a i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left;
  transform: scaleX(var(--p, 0)); transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { #chapters a:hover { color: var(--ink); } }
#chapters a.on { color: var(--ink); font-weight: 600; }
#chapters a:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.25rem; }
html[data-end="true"] #stage, html[data-end="true"] .labels, html[data-end="true"] .scrim, html[data-end="true"] body::before { opacity: 0; pointer-events: none; }

/* Шаг — лист на экран. Две раскладки, выбираются в steps.js для каждого слайда:
   «рядом» (по умолчанию) — данные в левой колонне под текстом, окно во всю высоту;
   «под окном» (.under) — широкие данные под окном, слева только текст. */
#story { position: relative; z-index: 4; }
.step {
  min-height: 100dvh; padding: calc(var(--win-y) + 0.5rem) var(--m) 2.5rem;
  display: grid; grid-template-columns: var(--left) var(--win-w); column-gap: var(--gap);
  grid-template-rows: auto minmax(2rem, 1fr) auto auto; grid-template-areas: "copy ." ". ." "data ." "src .";  /* данные прижаты к низу окна */
}
.step.wide { grid-template-columns: var(--left-n) 1fr; }
.step.under { grid-template-rows: 1fr auto auto; grid-template-areas: "copy ." "copy data" "src data"; }
.pane { display: contents; }
.copy { grid-area: copy; }
.data { grid-area: data; }
.src { grid-area: src; }
.step.under .data { margin-top: 0; align-self: end; height: var(--data-h); overflow: hidden; }
.step h2 { margin: 0; font-weight: 600; font-size: 2.8rem; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.step.cover h2 { font-size: 3.5rem; line-height: 1.05; }
.lead { margin: 1.25rem 0 0; font-size: 1.25rem; line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.more { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); max-width: 48ch; }
.more p { margin: 0 0 0.375rem; }
.src { margin: 0; padding-top: 1.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); max-width: 52ch; }

.figs { list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line);
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.figs b { display: block; font-weight: 600; font-size: 2.875rem; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.figs span { display: block; margin-top: 0.625rem; font-size: 1rem; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; align-self: start; height: 3rem; padding: 0 1.375rem; margin-top: 1.75rem; border-radius: var(--r);
  background: var(--accent); color: var(--on-accent); font: 600 1.0625rem/1 'Mulish', sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, transform .16s var(--ease);
}
.btn:hover { background: #dcdad4; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Данные шага */
.data-title { margin: 0 0 0.625rem; font-size: 0.9375rem; color: var(--muted); }

.v-list { margin: 0; display: grid; }
.v-list div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: baseline; padding: 0.6875rem 0; border-top: 1px solid var(--line); }
.v-list dt { font-size: 1rem; color: var(--muted); }
.v-list dd { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.step.under .v-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.step.under .v-list div { display: block; padding: 0.625rem 0 0.75rem; }
.step.under .v-list dd { margin-top: 2px; font-size: 1.1875rem; }

.v-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.v-bars.dense { gap: 0.25rem; }
.v-bars.dense li { row-gap: 0.25rem; }
.step.under .v-bars { gap: 0.375rem; }
.v-bars.dense .k, .v-bars.dense .t { font-size: 1rem; }
.step.under .v-bars.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.5rem; }
.v-bars li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: 0.375rem; align-items: baseline; }
.v-bars .k, .v-bars .t { font-size: 1.0625rem; }
.v-bars .t { color: var(--muted); }
.v-bars i { grid-column: 1 / -1; height: 0.375rem; background: var(--bar); width: calc(var(--w) * 100%); transform-origin: left; }
.v-bars.dense i { height: 3px; }
.v-bars li.hl .k, .v-bars li.hl .t { color: var(--ink); font-weight: 600; }
.v-bars li.hl i { background: var(--accent); }
.v-bars + .v-list { margin-top: 1.25rem; }
.step.under .v-bars + .v-list div { padding: 0.375rem 0 2px; }
.step.under .v-bars + .v-list dd { font-size: 1.0625rem; }

.v-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.step.under .v-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
.v-grid li { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.v-grid b { display: block; font-size: 2.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.v-grid span { display: block; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.4; color: var(--muted); }

.v-flow { list-style: none; margin: 0; padding: 0; }
.v-flow li { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.v-flow span { font-size: 1.0625rem; color: var(--muted); }
.v-flow b { font-size: 1.375rem; font-weight: 600; white-space: nowrap; }
.v-flow li:last-child { border-top: 2px solid var(--ink); }
.v-flow li:last-child span { color: var(--ink); }
.v-flow li:last-child b { font-size: 2.125rem; color: var(--accent); letter-spacing: -.02em; }

.v-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.v-steps li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: baseline; padding: 1.125rem 0 1.25rem; border-top: 1px solid var(--line); }
.v-steps li:first-child { border-top: 2px solid var(--accent); }
.v-steps b { font-size: 1.375rem; font-weight: 600; }
.v-steps span { font-size: 1.0625rem; line-height: 1.45; color: var(--muted); }

.v-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.v-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--paper); }
.v-photos span { display: block; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.35; color: var(--muted); }

/* Смена слайда: текст, данные и источники проявляются друг за другом и чуть въезжают
   с той стороны, откуда пришёл слайд */
.copy, .data, .src { opacity: 0; transform: translateY(1rem);
  transition: opacity .45s var(--ease), transform .6s var(--ease); }
html[data-dir="up"] .copy, html[data-dir="up"] .data, html[data-dir="up"] .src { transform: translateY(-16px); }
.step.in .copy, .step.in .data, .step.in .src { opacity: 1; transform: none; transition-delay: .15s; }
.step.in .data { transition-delay: .25s; }
.step.in .src { transition-delay: .35s; }

/* Номер слайда и стрелки — в шапке справа */
.pager { display: flex; align-items: center; gap: 0.375rem; }
.count { margin: 0 0.625rem 0 0; font-size: 0.9375rem; color: var(--muted); white-space: nowrap; }
.count b { font-weight: 600; color: var(--ink); }
.pager button { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--r); border: 1px solid rgba(243, 242, 238, .18);
  background: var(--paper); color: var(--ink); font: 500 1.0625rem/1 system-ui, sans-serif; cursor: pointer;
  transition: background-color .15s ease, transform .16s var(--ease), opacity .15s ease; }
@media (hover: hover) and (pointer: fine) { .pager button:hover:not(:disabled) { background: #34343a; } }
.pager button:active:not(:disabled) { transform: scale(.97); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.v-bars i { transform: scaleX(0); transition: transform .6s var(--ease); }
.step.in .v-bars i { transform: scaleX(1); transition-delay: .1s; }

/* Источники */
.sources { position: relative; z-index: 6; background: var(--bg); padding: 6rem var(--m) 7.5rem; border-top: 1px solid var(--line); }
@media (min-width: 1100px) and (min-height: 600px) { .sources { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } }
.sources h2 { margin: 0 0 1.5rem; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.sources ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3.5rem; max-width: 75rem; }
.sources li { break-inside: avoid; padding: 0.75rem 0; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.sources li span { color: var(--muted); text-align: right; }
.sources a { color: var(--ink); text-underline-offset: 3px; }

/* Подписи на сцене (3D и карта): прямоугольные бирки, как выноски на чертеже */
.label {
  font: 500 0.875rem/1.25 'Mulish', sans-serif; color: var(--ink); background: var(--paper);
  padding: 0.375rem 0.5625rem; border-radius: var(--r); border: 1px solid rgba(243, 242, 238, .18); white-space: nowrap;
}
.label small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.label.main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }  /* «Здание» — светлая бирка среди графитовых */
.label.zone { background: var(--bg); border-color: var(--bg); }

/* Загрузка */
#loader { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 1rem;
          background: var(--bg); transition: opacity .4s ease; }
#loader .brand { margin: 0; font-size: 1.25rem; }
#loader .bar { width: 10rem; height: 2px; background: var(--line); position: relative; overflow: hidden; }
#loader .bar::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left;
                      transform: scaleX(var(--p, 0)); transition: transform .3s var(--ease); }
#loader .hint { margin: 0; font-size: 0.9375rem; color: var(--muted); }
#loader.done { opacity: 0; pointer-events: none; }

.maplibregl-ctrl-attrib { font-family: 'Mulish', sans-serif; font-size: 0.6875rem; }

/* Узкий экран: окно сверху во всю ширину, текст под ним */
@media (max-width: 1099px), (max-height: 599px) {
  :root { --m: 1.5rem; --win-x: var(--m); --win-w: calc(100vw - 2 * var(--m)); --win-h: 44svh; --win-y: calc(var(--top) + 0.75rem); --mo: 0.625rem; --ml: 1.5rem; }
  .step, .step.under, .step.wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "data" "src";
    padding-top: calc(var(--win-y) + var(--win-h) + 1.75rem); min-height: 0; padding-bottom: 2.5rem; }
  .data, .step.under .data { margin-top: 2rem; height: auto; overflow: visible; }
  /* текст виден сразу: проявление по середине экрана при ручной прокрутке давало рывки */
  .copy, .data, .src, html[data-dir="up"] .copy, html[data-dir="up"] .data, html[data-dir="up"] .src { opacity: 1; transform: none; transition: none; }
  /* сплошная подложка от верха до низа окна: уходящий вверх текст не просвечивает у краёв окна */
  body::before { content: ''; position: fixed; inset: 0 0 auto; z-index: 5; pointer-events: none; background: var(--bg);
    height: calc(var(--win-y) + var(--win-h) + var(--mo) + 0.5rem); }
}

@media (max-width: 760px) {
  :root { --m: 1rem; --top: 3.5rem; --win-h: 38svh; }
  .top { column-gap: 1rem; }
  /* в шапке телефона — только текущая глава со своей шкалой */
  #chapters a { font-size: 0.9375rem; gap: 0.5rem; }
  #chapters a:not(.on) { display: none; }
  .pager button { width: 2rem; height: 2rem; }
  .step h2 { font-size: 1.875rem; }
  .step.cover h2 { font-size: 2.125rem; }
  .lead { font-size: 1.125rem; }
  .figs b { font-size: 2.125rem; }
  .v-list, .step.under .v-list, .v-bars.dense, .v-steps { grid-template-columns: minmax(0, 1fr); }
  .v-list div { grid-template-columns: 1fr; gap: 2px; }
  .v-steps li { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.875rem 0; }
  .v-grid, .step.under .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 1.25rem; }
  .v-grid b { font-size: 1.75rem; }
  .v-flow li { grid-template-columns: 1fr; gap: 0.25rem; }
  .v-flow b { white-space: normal; }
  .v-flow li:last-child b { font-size: 1.75rem; }
  .v-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sources { padding: 4rem var(--m) 5rem; }
  .sources ul { columns: 1; }
  .count { margin-right: 0.25rem; }
  .label { font-size: 0.75rem; padding: 0.25rem 0.375rem; }
  .label small { display: none; }
}

/* Альбомная ориентация телефона и планшета: пополам — текст слева листается, сцена справа во всю высоту */
@media (orientation: landscape) and (max-width: 1099px), (orientation: landscape) and (max-height: 599px) {
  :root { --m: 1.25rem; --win-x: 50vw; --win-w: calc(50vw - var(--m)); --win-y: calc(var(--top) + 0.5rem);
          --win-h: calc(100svh - var(--win-y) - 0.75rem); }
  .step, .step.under, .step.wide { padding: calc(var(--win-y) + 0.25rem) calc(50vw + var(--m)) 3rem var(--m); }
  #chapters a:not(.on) { display: none; }
  .count { display: block; margin-right: 0.25rem; }
  body::before { display: none; }  /* текст слева, окно справа — подложка не нужна */
  .v-list, .step.under .v-list, .v-bars.dense { grid-template-columns: minmax(0, 1fr); }
  .v-list div { grid-template-columns: 1fr; gap: 2px; }
  .v-grid, .step.under .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* низкий альбомный телефон: всё на ступень меньше */
@media (orientation: landscape) and (max-height: 500px) {
  html { font-size: 14px; }
  :root { --top: 3rem; }
  .step h2 { font-size: 1.75rem; }
  .step.cover h2 { font-size: 2rem; }
  .lead { font-size: 1.0625rem; }
  .figs b { font-size: 2rem; }
  .label small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .copy, .data, .src, .v-bars i, #map, #scene, #stage, .labels, .scrim, #chapters a i::after, .pager button { transition: none; }
  .copy, .data, .src, .v-bars i { transform: none; }
}