:root{--ink:#201b17;--paper:#eee5cf;--red:#9d2e22;--jade:#315f56;--line:#b7aa8d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 Georgia,"Times New Roman",serif}a{color:inherit}.hero{min-height:92vh;background:#181a17;color:#f0e8d5;padding:28px max(5vw,24px);position:relative;overflow:hidden}.hero:after{content:"山 海 經";position:absolute;right:-.05em;bottom:-.18em;font-size:min(32vw,440px);line-height:1;color:#242923;writing-mode:vertical-rl;pointer-events:none}.hero nav{display:flex;justify-content:space-between;font:12px/1.2 system-ui;letter-spacing:.16em;text-transform:uppercase;position:relative;z-index:1}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:8vw;max-width:1280px;margin:7vh auto 0;position:relative;z-index:1}.eyebrow,.kicker{font:700 12px/1.2 system-ui;letter-spacing:.2em;text-transform:uppercase;color:#b64b3a}.hero h1{font-size:clamp(64px,11vw,154px);line-height:.78;letter-spacing:-.065em;margin:.18em 0}.dek{font-size:clamp(22px,3vw,40px);max-width:620px}.hero figure{margin:0;transform:rotate(2deg)}.hero img{display:block;width:min(100%,460px);height:auto;filter:sepia(.2);border:10px solid #e6ddc7}.hero figcaption{font:12px/1.4 system-ui;max-width:460px;margin-top:12px;color:#bdb5a3}main{max-width:1320px;margin:auto;padding:0 4vw}.lead{padding:12vh 0 10vh;display:grid;grid-template-columns:1.4fr .6fr;gap:9vw}.lead .drop{font-size:clamp(25px,3.1vw,46px);line-height:1.25;margin:0}.facts{display:flex;flex-direction:column;border-top:1px solid var(--line)}.facts span{padding:20px 0;border-bottom:1px solid var(--line);font-family:system-ui;font-size:13px}.facts b{display:block;font:600 24px Georgia}.panel{border:1px solid var(--line);padding:clamp(24px,5vw,70px);margin:6vh 0;background:#e8dcc1}.timeline{display:grid;grid-template-columns:.65fr 1.35fr;gap:6vw}.timeline h2,.structure h2,.catalog h2,.reading h2,.rituals h2,.limits h2,.influence h2,.sources h2{font-size:clamp(38px,6vw,80px);line-height:.94;letter-spacing:-.045em;margin:.25em 0 .6em}.timeline ol{list-style:none;margin:0;padding:0}.timeline li{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.timeline li span{font-family:system-ui;font-size:14px}.structure,.catalog,.rituals,.influence,.sources{padding:10vh 0}.bands{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.bands button{background:#252a26;color:#eee4cf;border:0;padding:25px 18px;text-align:left;min-height:145px;cursor:pointer}.bands button:hover,.bands button:focus-visible{background:var(--red);outline:3px solid #fff;outline-offset:2px}.bands b{font-size:35px}.bands span{font:13px system-ui;color:#c8bfad}.journey{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw}.map{position:relative;min-height:430px;background:linear-gradient(150deg,#d7c9a8,#ede5d1);border:1px solid var(--line);overflow:hidden}.map button{position:absolute;border:2px solid var(--red);background:#eee5cf;border-radius:50%;width:28px;height:28px;cursor:pointer;color:transparent}.map button:hover,.map button:focus-visible,.map button.active{background:var(--red);outline:3px solid white}.route-card{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;min-height:130px}.route-card b{font-size:25px}.route-card small{display:block;font:12px system-ui;color:#665}.catalog-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.filters,.switcher{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:30px}.filters button,.switcher button{border:1px solid var(--ink);background:transparent;padding:9px 14px;font:12px system-ui;cursor:pointer}.filters button.active,.switcher button.active{background:var(--ink);color:var(--paper)}button:focus-visible,a:focus-visible{outline:3px solid #dc6a51;outline-offset:3px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;min-height:530px}.card[hidden]{display:none}.card img{width:100%;height:230px;object-fit:contain;background:#ded2b7}.placeholder{height:230px;display:grid;place-items:center;background:#252a26;color:#dfd5be;font-size:74px}.card h3{font-size:29px;line-height:1.05;margin:18px 0 6px}.latin{font:12px system-ui;color:#706654}.quote{font-size:15px;border-left:3px solid var(--red);padding-left:13px}.meta{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;font:12px/1.5 system-ui}.danger{display:flex;gap:4px}.danger i{width:22px;height:5px;background:#c8bda4}.danger i.on{background:var(--red)}.reading{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:6vw}.reading .kicker,.reading h2{grid-column:1}.switcher,#layer-copy{grid-column:2}.ritual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.ritual-grid article{padding:30px;border-top:4px solid var(--jade);background:#ddd0b4}.ritual-grid span{font:11px system-ui;text-transform:uppercase;letter-spacing:.2em}.warning{margin-top:30px;padding:20px;border-left:5px solid var(--red);font:bold 14px system-ui}.sources ul{columns:2;column-gap:5vw;padding-left:20px}.sources li{break-inside:avoid;margin-bottom:18px;font:14px/1.5 system-ui}.source-note{font:12px system-ui;color:#655}footer{background:#181a17;color:#ddd3c0;padding:35px 5vw;display:flex;justify-content:space-between;font:12px system-ui}
@media(max-width:850px){.hero{min-height:auto}.hero-grid,.lead,.timeline,.journey,.reading{grid-template-columns:1fr}.hero figure{max-width:310px}.timeline li{grid-template-columns:1fr}.bands{grid-template-columns:1fr 1fr}.bands button{min-height:110px}.cards{grid-template-columns:1fr 1fr}.catalog-head{display:block}.switcher,#layer-copy,.reading .kicker,.reading h2{grid-column:1}.sources ul{columns:1}}
@media(max-width:560px){body{font-size:16px}.hero-grid{margin-top:10vh}.hero h1{font-size:58px}.hero figcaption{font-size:11px}.lead{padding:70px 0}.bands,.cards,.ritual-grid{grid-template-columns:1fr}.card{min-height:0}.map{min-height:330px}.panel{margin-left:-2vw;margin-right:-2vw}.sources{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Метка архива — как во всех разделах: точка цвета акцента плюс название. */
nav a{text-decoration:none;font-weight:700}
nav b{color:var(--red);margin-right:8px}
/* Линия маршрута рисуется по координатам самих гор (см. app.js), поэтому
   растягивается вместе со схемой; штрих и пунктир при этом остаются
   экранными — иначе на широком блоке точки превращаются в тире. */
/* left/top теперь задают центр горы, а не угол кружка: так точка ложится
   ровно на линию. */
.map button{transform:translate(-50%,-50%);z-index:1}
/* Маршрут — мерная лента, а не карта: горизонтальная ось, промежутки на ней
   пропорциональны ли из текста. Всё, что стоит за точками, — сами числа.
   Подложка «Хуа и ту» (1136) — только фактура эпохи: её реки и горы никак не
   соответствуют точкам оси, поэтому она приглушена и подписана в источниках. */
.map{display:block;isolation:isolate}
.map:before{content:"";position:absolute;inset:0;background:url(assets/route-map.webp) center/cover no-repeat;opacity:.85;mix-blend-mode:multiply;z-index:0}
/* Вуаль цвета бумаги гасит карту к центру и к низу — там подписи гор и итог. */
.map:after{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 62% at 50% 52%,rgba(238,229,207,.72) 0%,rgba(238,229,207,.34) 55%,rgba(238,229,207,0) 100%),
  linear-gradient(180deg,rgba(238,229,207,0) 26%,rgba(238,229,207,.5) 44%,rgba(238,229,207,.5) 74%,rgba(238,229,207,0) 92%),
  linear-gradient(180deg,rgba(238,229,207,0),rgba(238,229,207,.55) 86%)}
/* Карта под подписями — читаемость держит бумажный ореол вокруг букв,
   иначе иероглифы эстампа спорят с названиями гор. */
.map .leg,.map .stop b,.map .stop i,.map .edge,.map .tally{text-shadow:0 0 7px var(--paper),0 0 4px var(--paper),0 0 2px var(--paper)}
.map .axis,.map .leg,.map .stop,.map .edge,.map .tally{z-index:1}
.map button{z-index:2}
.map .axis{position:absolute;height:0;border-top:2px dotted var(--red);opacity:.65;transform:translateY(-50%)}
/* Отступы у оси заданы в пикселях, а не в процентах от собственной высоты:
   кружок горы 28 px, и подпись перехода обязана его миновать. */
.map .leg{position:absolute;transform:translate(-50%,-34px);font:12px/1 system-ui;color:#5f5544;white-space:nowrap}
.map .stop{position:absolute;text-align:center;white-space:nowrap;pointer-events:none}
/* Девять названий в один ряд наезжают друг на друга: разводим через одно. */
.map .stop.high{transform:translate(-50%,24px)}
.map .stop.low{transform:translate(-50%,66px)}
.map .stop b{display:block;font:600 13px/1.2 system-ui;color:#41392a}
.map .stop i{display:block;font-style:normal;font-size:12px;color:#6f6553}
.map .stop.active b{color:var(--red)}
.map .edge{position:absolute;font:11px/1 system-ui;letter-spacing:.1em;text-transform:uppercase;color:#847959;white-space:nowrap}
.map .edge.west{transform:translate(-6%,-58px)}
.map .edge.east{transform:translate(-94%,-58px)}
.map .tally{position:absolute;left:6%;right:6%;bottom:14px;margin:0;font:12px/1.45 system-ui;color:#5c5241}
/* На телефоне девять подписей в строку не встают: оставляем ту, что выбрана. */
@media(max-width:760px){
 .map .stop{display:none}
 /* На узком экране подпись встаёт по центру схемы, а не над своей точкой:
    у крайних гор она иначе вылезает за рамку. */
 .map .stop.active{display:block;left:50%!important;transform:translate(-50%,30px)}
 .map .leg{display:none;font-size:11px}
 .map .leg.active{display:block}
 .map .edge{font-size:9px}
 .map .tally{font-size:11px}
}

/* Длинное русское слово в крупном заголовке шире экрана 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 на тёмной
   и на светлой полосе требует разных цветов. */
/* 3.8→4.65 при норме 4.5 на #e8dcc1 ×1 — «Как возник текст» */
#history .eyebrow, #history .kicker{color:#a04233}
/* 3.8→4.65 при норме 4.5 на #e8dcc1 ×1 — «Маршрут · Южные горы I» */
#route .eyebrow, #route .kicker{color:#a04233}
/* 4.29→4.63 при норме 4.5 на #e8dcc1 ×1 — «Гора 1 из 9 в первой цепи Южных го» */
#route .route-card small{color:#616150}
/* 3.38→4.66 при норме 4.5 на #181a17 ×1 — «山海經 · Shānhǎi jīng» */
.hero .eyebrow, .hero .kicker{color:#ca6757}
/* 3.8→4.65 при норме 4.5 на #e8dcc1 ×1 — «Где кончается карта» */
.limits.panel .eyebrow, .limits.panel .kicker{color:#a04233}
/* 3.8→4.65 при норме 4.5 на #e8dcc1 ×1 — «Как читать карточку» */
.reading.panel .eyebrow, .reading.panel .kicker{color:#a04233}
/* 4.12→4.63 при норме 4.5 на #eee5cf ×5 — «Архитектура корпуса» */
body .eyebrow, body .kicker{color:#a94636}

/* --- тач-цели: минимум 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}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */
.meta a{min-height:24px}