:root{--ink:#ece7d8;--muted:#a7a89f;--paper:#111711;--panel:#182018;--line:#384338;--acid:#c7f36b;--sea:#60b7c8;--old:#e88355}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit}.topbar{height:70px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em}.brand{text-decoration:none}.brand b,.eyebrow,.index{color:var(--acid)}.hero{min-height:calc(100svh - 70px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:6vw 4vw;gap:5vw;background:radial-gradient(circle at 75% 40%,#253b31,transparent 44%)}h1{font-size:clamp(54px,8vw,126px);line-height:.82;letter-spacing:-.065em;margin:.18em 0}h1 em,h2 em{font-family:'PT Serif',serif;font-weight:400;color:var(--acid)}.lead,.prose p{font:19px/1.65 'PT Serif',serif;color:#c7c7be}.hero-figure svg{width:100%;max-height:70svh;filter:drop-shadow(0 20px 40px #0008)}.hero-figure path{fill:#68bcc2}.hero-note{font-size:10px;letter-spacing:.12em;color:var(--muted)}.chapter,.lab,.sources,.level{padding:8vw 4vw;border-top:1px solid var(--line)}.chapter{display:grid;grid-template-columns:1fr 3fr;gap:5vw}.chapter h2,.sources h2{font-size:clamp(38px,5.8vw,84px);line-height:.95;margin:0 0 .4em}.callout{border-left:2px solid var(--acid);padding-left:25px;color:var(--acid)!important}.lab{background:var(--panel)}.lab-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.lab-head h2{font-size:clamp(35px,5vw,70px);margin:.2em 0}.controls{display:flex;gap:10px;flex-wrap:wrap}.controls button,.era{background:transparent;color:var(--ink);border:1px solid var(--line);min-height:44px;padding:10px 14px;cursor:pointer}.controls button:hover,.controls button:focus-visible,.era:focus-visible,.era[aria-current=true]{border-color:var(--acid);color:var(--acid)}.viz{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:30px;margin-top:30px}.map-stage{position:relative;min-height:520px;overflow:hidden;background:#0b100d;border:1px solid var(--line)}.map-stage img{width:100%;height:100%;object-fit:cover;opacity:.38;filter:grayscale(.35) sepia(.2)}.shape{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}#old-shape{fill:color-mix(in srgb,var(--old) 45%,transparent);stroke:var(--old);stroke-width:3;transition:.7s}#modern-shape{fill:none;stroke:var(--acid);stroke-width:3;stroke-dasharray:7 6;transition:.2s}.metrics{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.metric{padding:20px;background:var(--paper)}.metric span{display:block;font-size:10px;color:var(--muted);letter-spacing:.13em}.metric strong{font-size:24px}.caption{font:16px/1.55 'PT Serif',serif;color:#c7c7be;padding:20px;margin:0}.timeline{display:flex;overflow:auto;margin-top:25px;padding-bottom:8px}.era{min-width:140px;text-align:left}.era span{display:block;color:var(--acid);font-size:10px}.dependencies .era{opacity:.42}.dependencies .era[aria-current=true],.dependencies .era:nth-child(5),.dependencies .era:nth-child(6){opacity:1}.dependencies .era:nth-child(5){border-color:var(--sea)}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.level svg{width:100%;max-height:440px}.level input{width:100%;height:32px}.legend{font-size:12px;color:var(--muted)}.sources{display:grid;grid-template-columns:1fr 3fr;gap:4vw}.source-list{display:grid;gap:16px}.source{padding:18px 0;border-top:1px solid var(--line)}.source p{margin:.4em 0;color:var(--muted);line-height:1.55}.source small{color:#858a83}.source a{overflow-wrap:anywhere}footer{padding:35px 4vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px}button:focus-visible,a:focus-visible{outline:3px solid var(--acid);outline-offset:3px}@media(max-width:800px){.topbar>span{display:none}.hero{grid-template-columns:1fr;padding:15vw 5vw}.hero-figure{order:-1}.hero-figure svg{max-height:35svh}.chapter,.sources,.level-grid{grid-template-columns:1fr;padding:16vw 5vw}.lab{padding:16vw 5vw}.lab-head{display:block}.viz{grid-template-columns:1fr}.map-stage{min-height:420px}.metrics{grid-template-columns:repeat(3,1fr)}.metric{padding:12px}.metric strong{font-size:15px}.source p{font-size:14px}}@media(max-width:520px){h1,h2{overflow-wrap:break-word;hyphens:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}

/* Предупреждение для страницы без JavaScript: лента эпох и переключение
   карт собираются скриптом. */
.noscript{margin:0;padding:14px 4vw;background:var(--panel);color:var(--ink);line-height:1.5;border-bottom:1px solid var(--line)}

/* Семь эпох шире телефона: ограничиваем сам viewport ленты шириной секции,
   оставляем кнопки удобными и переносим избыток во внутреннюю прокрутку. */
@media(max-width:520px){.timeline{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.era{flex:0 0 140px}}

/* --- тач-цели: минимум 24 px (WCAG 2.5.8) ----------------------------
   Ссылки в шапке, подвале, на первом экране и под карточками источников
   были высотой 15-22 px. Растим область нажатия симметричным вертикальным
   отступом: строка остаётся на месте, вёрстка не меняется. Менять display
   нельзя — у «● ИНТЕРЕСНОЕ ТУТ» точка и текст разъехались бы на две строки. */
.topbar a,footer a,.hero a,.source a{min-height:24px;padding-block:7px}

/* Слова КАПИТЕЛЬЮ Firefox и WebKit по слогам не переносят: при
   overflow-wrap:break-word слово рвётся посреди без дефиса («ЧУДОВИЩА/МИ»),
   а Chromium ставит в крупном заголовке дефис. Поэтому на узких экранах
   автоперенос в h1–h3 выключен, а кегль подобран так, чтобы самое длинное
   слово влезало в строку целиком. Значения измерены Playwright на 320,
   360 и 390 px в Chromium, Firefox и WebKit. Десктоп не затронут. */
/* «ПРОИСХОЖДЕНИЕ» шире 288 px: обнуляем min-content-минимум колонки и
   ограничиваем мобильный кегль, не меняя оформление на широких экранах. */
@media(max-width:520px){h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}.sources{grid-template-columns:minmax(0,1fr)}.sources h2{font-size:min(clamp(38px,5.8vw,84px),9.5vw)}}


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