:root{--bg:#11120d;--panel:#191b12;--ink:#ece8d8;--dim:#a09f91;--line:#37382a;--sand:#c5a35c;--green:#768d52;--water:#4f8a91;--red:#c85b3d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;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='.8' numOctaves='4'/%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,.index,.eyebrow,.stamp{color:var(--red)}.hero{height:calc(100vh - 74px);height:calc(100svh - 74px);min-height:680px;position:relative;overflow:hidden}.hero>img{width:100%;height:100%;object-fit:cover;object-position:center 43%;filter:saturate(.78) contrast(1.05)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#11120df2 0%,#11120dc4 41%,#11120d23 74%),linear-gradient(0deg,#11120d 0%,transparent 32%)}.hero-copy{position:absolute;left:4vw;top:48%;transform:translateY(-50%);max-width:950px}.hero h1,.people h2,.old-map h2,.sources h2{font-size:clamp(58px,8.7vw,132px);line-height:.82;letter-spacing:-.065em;margin:.2em 0;font-weight:600}.hero h1 em,.people h2 em,.old-map h2 em,.mechanism h2 em{font:italic 400 1em 'PT Serif',serif;color:var(--sand)}.lead{max-width:720px;font:21px/1.55 'PT Serif',serif;color:#d1cdbf}.caption{position:absolute;right:4vw;bottom:3vw;font-size:9px;letter-spacing:.15em}.index,.eyebrow,.stamp{font-size:10px;letter-spacing:.19em;text-transform:uppercase}.answer,.mechanism,.old-map,.sources{padding:9vw 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 3fr;gap:4vw}.answer .kicker{font-size:clamp(30px,4.5vw,68px);line-height:1.04;letter-spacing:-.045em;margin:0}.answer div>p:last-child,.old-map div>p,.mechanism div>p{max-width:940px;font:20px/1.65 'PT Serif',serif;color:#c3c2b8}.map-test,.evidence,.timeline{padding:8vw 4vw;border-top:1px solid var(--line);background:var(--panel)}.section-head{display:flex;justify-content:space-between;gap:30px;color:var(--dim);font-size:11px;letter-spacing:.08em}.section-head>p:last-child{max-width:650px}.switch{display:flex;margin:35px 0;border-bottom:1px solid var(--line)}.switch button{border:0;background:none;color:var(--dim);padding:16px 24px;cursor:pointer;font:500 12px Manrope;letter-spacing:.08em}.switch button.active{color:var(--ink);box-shadow:inset 0 -2px var(--red)}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}.map-layout{display:grid;grid-template-columns:1.5fr .5fr;gap:5vw;align-items:center}.africa{position:relative;border:1px solid var(--line);min-height:580px;background:#13150f}.africa svg{width:100%;height:580px}.land{fill:#b79b60;stroke:#ddc78e;stroke-width:2}.green{fill:var(--green);opacity:.9;transition:opacity .5s}.lake{fill:var(--water);transition:opacity .5s}.river{fill:none;stroke:var(--water);stroke-width:8;stroke-linecap:round;transition:opacity .5s}.river.nile{stroke-width:5}.africa.now .green,.africa.now .lake,.africa.now .taman{opacity:.06}.africa.now .label{opacity:.18}.label{position:absolute;font-size:9px;line-height:1.45;letter-spacing:.13em;text-transform:uppercase;transition:opacity .5s}.l1{left:15%;bottom:37%}.l2{left:43%;top:27%}.l3{left:56%;top:58%}.map-layout aside h2{font-size:clamp(37px,4vw,64px);line-height:.94;letter-spacing:-.045em}.map-layout aside>p:last-child{font:18px/1.65 'PT Serif',serif;color:#c4c3b8}.mechanism{background:#17140c}.mechanism h2{font-size:clamp(70px,11vw,165px);line-height:.75;letter-spacing:-.06em;margin:0}.mechanism h2 em{font-size:.35em;letter-spacing:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:4vw}.cards article{background:var(--panel);padding:32px 27px}.cards span{color:var(--red);font-size:10px}.cards h3{font-size:22px}.cards p{font:15px/1.6 'PT Serif',serif;color:#b9b9ae}.people{display:grid;grid-template-columns:1.35fr .65fr;gap:6vw;padding:9vw 4vw;border-top:1px solid var(--line);align-items:start}.people figure{margin:0;position:sticky;top:30px}.people img{width:100%;height:auto;display:block;filter:saturate(.75) contrast(1.08)}figcaption{padding-top:11px;font-size:9px;letter-spacing:.13em;color:var(--dim)}.people h2{font-size:clamp(48px,6vw,87px)}.people article>p,.people blockquote{font:18px/1.68 'PT Serif',serif;color:#c1c0b6}.people blockquote{margin:32px 0;padding:18px 0 18px 25px;border-left:2px solid var(--red);font-size:23px;color:var(--sand)}.old-map{background:#15130e}.old-map h2,.sources h2{font-size:clamp(50px,6.2vw,94px);margin-top:0}.timeline{background:var(--bg)}.line{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:4vw}.line article{background:var(--bg);padding:30px;min-height:250px}.line time{font-size:clamp(30px,3vw,50px);color:var(--sand);letter-spacing:-.04em}.line p{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.line h3{margin-top:50px;font-size:17px;line-height:1.4}.sources p{color:#b7b7ac;line-height:1.7}.sources a{line-height:2.2;overflow-wrap:anywhere}.credit{font-size:11px;max-width:900px}.credit b{color:var(--ink)}footer{border-top:1px solid var(--line);padding:35px 4vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}@media(max-width:800px){.topbar{padding:0 5vw}.topbar>span{display:none}.hero{min-height:730px}.hero-copy{left:5vw;right:5vw;top:46%}.hero h1{font-size:15.3vw}.caption{left:5vw;right:auto}.answer,.mechanism,.old-map,.sources{grid-template-columns:1fr;padding:18vw 5vw}.map-test,.evidence,.timeline{padding:17vw 5vw}.section-head{display:block}.switch{overflow:auto}.switch button{padding:14px 13px;white-space:nowrap}.map-layout,.people{grid-template-columns:1fr}.africa{min-height:105vw}.africa svg{height:105vw}.label{font-size:7px}.people{padding:18vw 5vw}.people figure{position:static}.cards,.line{grid-template-columns:1fr}.line article{min-height:190px}.line h3{margin-top:30px}.sources h2{font-size:12vw;overflow-wrap:anywhere}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.15→4.65 при норме 4.5 на #191b12 ×1 — «04 / Следы воды» */
.evidence .brand span, .evidence .index, .evidence .eyebrow, .evidence .stamp{color:#cc674b}
/* 4.15→4.65 при норме 4.5 на #191b12 ×2 — «02 / Два слоя» */
.map-test .brand span, .map-test .index, .map-test .eyebrow, .map-test .stamp{color:#cc674b}
/* 4.39→4.65 при норме 4.5 на #17140c ×1 — «03 / Почему пошёл дождь» */
.mechanism .brand span, .mechanism .index, .mechanism .eyebrow, .mechanism .stamp{color:#ca6144}
/* 4.43→4.65 при норме 4.5 на #15130e ×1 — «06 / А что же карта?» */
.old-map .brand span, .old-map .index, .old-map .eyebrow, .old-map .stamp{color:#ca6043}
/* 4.49→4.66 при норме 4.5 на #11120d ×1 — «07 / Масштаб времени» */
.timeline .brand span, .timeline .index, .timeline .eyebrow, .timeline .stamp{color:#c95f41}
/* 4.49→4.66 при норме 4.5 на #11120d ×1 — «01 / Короткий ответ» */
body .brand span, body .index, body .eyebrow, body .stamp{color:#c95f41}
/* Номера карточек: 4.15 на #191b12. Фон задаёт <article> без класса,
   поэтому область — сама сетка карточек. */
.cards span{color:#cc664b}

/* --- тач-цели: минимум 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}}

/* Подписи слоёв на карте падали до 7 px на телефоне. */
.label{font-size:9px}

/* Слова КАПИТЕЛЬЮ Firefox и WebKit по слогам не переносят: при
   overflow-wrap:break-word слово рвётся посреди без дефиса («ЧУДОВИЩА/МИ»),
   а Chromium ставит в крупном заголовке дефис. Поэтому на узких экранах
   автоперенос в h1–h3 выключен, а кегль подобран так, чтобы самое длинное
   слово влезало в строку целиком. Значения измерены Playwright на 320,
   360 и 390 px в Chromium, Firefox и WebKit. Десктоп не затронут. */
@media(max-width:520px){h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}.sources h2{font-size:9.9vw}}


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