:root{--ink:#eee7d8;--dim:#a59d91;--red:#d45339;--blood:#7c2119;--line:#3b302a;--bg:#120d0b;--panel:#1b1310;--paper:#d8c59f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif}body:before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{height:74px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.16em}.topbar a,.hero a,.sources a,footer a{color:var(--ink);text-underline-offset:5px}.topbar a{text-decoration:none}.brand span{color:var(--red);margin-right:8px}.hero{min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);display:grid;grid-template-columns:.86fr 1.14fr;gap:5vw;padding:5vw 4vw;align-items:center;overflow:hidden}.hero h1,.opening h2,.diagnosis h2,.finale h2,.sources h2{font-size:clamp(54px,7.4vw,118px);line-height:.82;letter-spacing:-.065em;margin:.2em 0;font-weight:600}.hero h1 em,.opening h2 em,.diagnosis h2 em,.finale h2 em{font-family:'PT Serif',serif;font-weight:400;color:var(--paper)}.lead{max-width:620px;color:#c8c0b4;font:22px/1.5 'PT Serif',serif}.hero-image{margin:0;min-width:0;position:relative}.hero-copy{min-width:0}.hero-image:before{content:"";position:absolute;inset:8% -6% -5% 14%;background:var(--blood);transform:rotate(4deg)}.hero-image img{position:relative;display:block;width:100%;height:min(72vh,850px);object-fit:cover;object-position:center 38%;filter:sepia(.18) contrast(1.06)}.hero-image figcaption{position:relative;margin-top:13px;color:var(--dim);font-size:10px;line-height:1.5;max-width:760px}.eyebrow,.index,.theories article>p{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--red)}.opening,.diagnosis,.context,.finale,.sources{padding:9vw 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 3fr;gap:4vw}.opening h2{font-size:clamp(42px,6.2vw,92px);margin-top:0}.opening .large{font:clamp(22px,2.4vw,34px)/1.5 'PT Serif',serif;max-width:1050px}.opening div>p:last-child,.finale div>p{max-width:850px;color:#bbb3a7;font:18px/1.7 'PT Serif',serif}.timeline,.numbers{padding:8vw 4vw;border-top:1px solid var(--line)}.timeline{background:var(--panel)}.section-head{display:flex;justify-content:space-between;gap:30px;color:var(--dim);font-size:12px}.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:5vw;border-top:1px solid var(--line)}.steps article{padding:35px 3vw 30px 0;border-right:1px solid var(--line)}.steps article+article{padding-left:3vw}.steps span{font:italic 46px 'PT Serif',serif;color:var(--red)}.steps h3,.number-grid h3,.theories h3{font-size:26px;margin:18px 0 10px}.steps p,.number-grid p,.theories article>p:last-child,.context-grid p{color:#b7afa4;line-height:1.65}.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:4vw;border:1px solid var(--line)}.number-grid article{background:var(--bg);padding:4vw 3vw}.number-grid article.confirmed{background:var(--blood)}.number-grid strong{font-size:clamp(42px,6vw,90px);letter-spacing:-.06em}.number-grid h3{font-size:18px}.verdict{max-width:1000px;margin:4vw auto 0;text-align:center;font:italic clamp(22px,2.5vw,36px)/1.45 'PT Serif',serif;color:var(--paper)}.diagnosis{background:#0d0a08}.diagnosis h2{font-size:clamp(46px,6vw,88px);margin-top:0;position:sticky;top:30px}.diagnosis-body{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}.theories article{padding:0 0 38px;margin-bottom:38px;border-bottom:1px solid var(--line)}.theories h3{font-size:32px}.context .quote{font:italic clamp(32px,4.8vw,70px)/1.18 'PT Serif',serif;color:var(--paper);margin-top:0}.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw}.finale h2,.sources h2{font-size:clamp(42px,6vw,86px);margin-top:0}.sources{background:var(--panel)}.sources p{color:#b7afa4;line-height:1.7;max-width:850px}.sources a{line-height:2.1}footer{border-top:1px solid var(--line);padding:35px 4vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em}@media(max-width:800px){.topbar{padding:0 5vw}.topbar>span{display:none}.hero{grid-template-columns:1fr;padding:12vw 5vw 20vw}.hero h1{font-size:12vw}.hero-image img{height:116vw}.opening,.diagnosis,.context,.finale,.sources{grid-template-columns:1fr;padding:18vw 5vw}.timeline,.numbers{padding:17vw 5vw}.section-head{display:block}.steps,.number-grid,.diagnosis-body,.context-grid{grid-template-columns:1fr}.steps article,.steps article+article{padding:32px 0;border-right:0;border-bottom:1px solid var(--line)}.number-grid article{padding:12vw 8vw}.diagnosis h2{position:static}.theories h3{font-size:26px}footer{gap:20px;line-height:1.5}}

/* Длинное русское слово в крупном заголовке шире экрана 320 px: «МАСТЕРСКОЙ»
   при clamp-кегле занимает 336 px и уезжает за край — прокрутки нет, буквы
   просто пропадают. Разрешаем переносить по слогам, а если словарь переносов
   не подхватился — рвать слово принудительно.

   Только на узких экранах. На десктопе крупный заголовок намеренно выходит
   за текстовую колонку в пустое поле справа — это часть оформления, и
   переносить его там незачем: получается лишняя строка и рваный вид. */
@media(max-width:520px){h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}}

/* --- контраст: приведено к WCAG AA ----------------------------------
   Значения посчитаны: тот же тон и насыщенность, другая светлота —
   минимальная, при которой пара «текст/фон» проходит норму. Область
   действия — секция, которая задаёт фон: один и тот же .index на тёмной
   и на светлой полосе требует разных цветов. */
/* 4.44→4.65 при норме 4.5 на #1b1310 ×1 — «02 / Как город лечил танцем» */
.timeline .eyebrow, .timeline .index, .timeline .theories article > p{color:#d55940}

/* --- тач-цели: минимум 24 px (WCAG 2.5.8) ------------------------------
   Ссылки и кнопки в шапке, подвале и на первом экране были высотой 11-22 px.
   Растим область нажатия симметричным вертикальным отступом: содержимое
   остаётся по центру коробки и не переносится, поэтому вёрстка не меняется.
   Менять display на flex здесь нельзя — у «● ИНТЕРЕСНОЕ ТУТ» точка и текст
   стали бы отдельными флекс-элементами и разъехались на две строки. */
.topbar a,.topbar button,.bar a,.legal-top a,footer a,.links a,.map-actions a,
.controls a,.controls button,.hero-copy a,.hero-text a,.hero>a,.hero .down,
.sound-toggle,.about-open,.fullscreen,.compact-prev,.compact-next,
.translation-toggle,.pin,.hotspot,nav a,.meta a,.sources a{min-height:24px;padding-block:7px}
/* Ползунки: полоса была 16 px, пальцем не поймать. Высоту поднимаем у самого
   поля - область нажатия растёт, родная отрисовка бегунка не ломается. */
input[type=range]{height:26px}
/* Флажки и переключатели: 13-17 px до пальца не дотягивают. */
input[type=checkbox],input[type=radio]{width:24px;height:24px}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */

/* Уважаем системную настройку «меньше движения»: анимации и плавная прокрутка
   у части людей вызывают тошноту и головокружение. Оставляем мгновенные
   состояния — интерфейс работает так же, просто без движения. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Единый клавиатурный фокус: светлый контур и контрастный внешний контур. */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px #000}

/* Заголовок первого экрана не должен заезжать под гравюру. Самое длинное
   слово — «ОСТАНОВИТЬСЯ» — при прежнем кегле 7.4vw занимало 693 px в колонке
   шириной 479 px (замер на 1280), и хвост уходил под изображение на всех
   десктопных ширинах, вплоть до 1920. Grid не переносит и не сжимает такое
   слово: элемент просто выходит за свою колонку.

   Ширина слова относится к кеглю как 7.32 к 1, поэтому кегль ограничен
   долей колонки с запасом около 4 %, а сама колонка чуть расширена за счёт
   иллюстрации — с .86fr/1.14fr до .95fr/1.05fr. Так заголовок остаётся
   крупным, а композиция «текст слева, гравюра справа» сохраняется. */
@media(min-width:801px){
  .hero{grid-template-columns:.95fr 1.05fr}
  .hero h1{font-size:clamp(40px,5.4vw,104px)}
}

/* На узком экране первым шёл разворот гравюры на 116vw, а заголовок и вводный
   абзац оказывались за нижним краем: при 390x844 h1 начинался на 746-м пикселе
   и обрезался. Порядок в разметке и так верный — текст, затем иллюстрация, —
   поэтому правило .hero-copy{order:2} убрано, а не добавлено новое. */