:root{--ink:#171713;--paper:#e7dfca;--red:#9c3828;--green:#1b2920;--gold:#c7a25a;--line:#17171333}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;overflow-x:hidden}a{color:inherit}button{font:inherit}.bar{height:58px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:10;width:100%;color:#f4ecd9;font-size:11px;letter-spacing:.14em}.bar a{text-decoration:none}.bar a:first-child{color:#e8bb67}.dream-nav{position:fixed;z-index:20;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:7px}.dream-nav button{border:1px solid #ddd6;background:#18201ddd;color:#eee;width:42px;height:42px;border-radius:50%;cursor:pointer}.dream-nav span{position:absolute;right:50px;background:#18201d;color:#fff;padding:8px;white-space:nowrap;opacity:0;pointer-events:none}.dream-nav button:hover span,.dream-nav button:focus-visible span{opacity:1}.dream-nav button.active{background:var(--red);border-color:var(--red)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e1b24c;outline-offset:3px}.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--green);color:#f4ecd9;overflow:hidden}.hero-text{padding:18vh 6vw 9vh;position:relative;z-index:2}.eyebrow,.step{font-size:11px;letter-spacing:.18em;text-transform:uppercase}.hero h1{font:400 clamp(72px,11vw,170px)/.75 Georgia,serif;margin:.25em 0}.hero h1 i{font-weight:400;color:var(--gold)}.deck{font:clamp(21px,2.2vw,34px)/1.35 Georgia,serif;max-width:650px}.start{display:inline-block;margin-top:28px;text-decoration:none;border-bottom:1px solid;padding-bottom:8px;letter-spacing:.12em;font-size:11px}.hero figure{margin:0;height:100svh;position:relative}.hero img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.15) contrast(1.04)}figcaption{font-size:10px;line-height:1.5;letter-spacing:.11em}.hero figcaption{position:absolute;bottom:25px;left:25px;background:#172019e6;padding:10px}.threshold,.language,.acrostic,.legacy,.sources{padding:14vh 9vw;display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;border-bottom:1px solid var(--line)}h2{font:400 clamp(45px,6.2vw,100px)/.92 Georgia,serif;margin:.12em 0 .45em}.large{font:clamp(24px,2.8vw,41px)/1.3 Georgia,serif}.threshold p,.language p,.polia p,.legacy p,.sources p{font-size:17px;line-height:1.72}.threshold aside{margin-top:40px;border-left:3px solid var(--red);padding:8px 24px;display:grid;gap:12px}.threshold q{font:italic 24px/1.4 Georgia,serif}.threshold small{line-height:1.5}.route{background:#b9ab8e;padding:12vh 9vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw}.route ol{list-style:none;margin:0;padding:35px 0;position:relative;display:flex;justify-content:space-between}.route ol:before{content:"";position:absolute;top:58px;left:5%;right:5%;height:1px;background:var(--ink)}.route li{z-index:1}.route button{width:48px;height:48px;border-radius:50%;border:1px solid;background:var(--paper);cursor:pointer}.route button span{display:block;width:110px;transform:translate(-32px,16px);font-size:11px;text-transform:uppercase}.route output{grid-column:2;min-height:60px;font:22px/1.4 Georgia,serif}.ruins,.polia,.comparison,.cythera{min-height:105vh;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding:11vh 9vw;background:#eee6d5}.ruins{background:#242b24;color:#f4ecd9}.ruin-copy p{line-height:1.7}.plate,.polia figure,.comparison figure,.cythera figure{margin:0;max-width:600px;position:relative}.plate img,.polia img,.comparison img,.cythera img{width:100%;height:auto;display:block;box-shadow:0 22px 60px #0004}.plate figcaption,.cythera figcaption{margin-top:12px}.hotspot-list{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}.hotspot-list button,.comparison button,.lens button{background:transparent;color:inherit;border:1px solid currentColor;padding:11px 14px;cursor:pointer}#spot-output{display:block;min-height:78px;border-top:1px solid #fff5;padding-top:18px;line-height:1.5}.inscriptions{background:#9d3b2d;color:#faecd7;padding:13vh 9vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.decoder{align-self:center}.glyphs{display:flex;gap:10px;flex-wrap:wrap}.glyphs button{font-size:30px;padding:18px;background:#f1dfbf;border:0;cursor:pointer}.decoder output{display:grid;gap:10px;margin-top:20px;padding:25px;background:#241c18;min-height:120px}.language dl{display:grid;gap:10px}.language dt{font:34px Georgia,serif;color:var(--red);margin-top:18px}.language dd{margin:0;line-height:1.65}.polia{background:#c8b89d}.lens{margin-top:30px}.lens button.active{background:var(--ink);color:var(--paper)}#lens-text{border-top:1px solid;padding-top:18px}.acrostic{background:#181b17;color:#f3e7d0}.letters{font:clamp(24px,4vw,60px)/1.35 Georgia,serif;letter-spacing:.15em;color:var(--gold);word-break:break-word}.acrostic p{line-height:1.7}.comparison{background:#ded4bd}.comparison figure.highlight:after{content:"ИЗОБРАЖЕНИЕ ВСТРОЕНО В ХОД НАБОРА";position:absolute;inset:28% 8% auto;background:#9c3828e8;color:white;padding:20px;text-align:center;font-size:12px;letter-spacing:.13em}.comparison figcaption{margin-top:12px}.cythera{background:#24342b;color:#f3e8d3}.builder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.builder fieldset{border:1px solid #ffffff55}.builder label{display:block;margin:10px 0;font-size:13px}.cythera output{display:block;margin-top:24px;padding:18px;border:1px solid #ffffff55;line-height:1.6}.wake{padding:20vh 9vw;text-align:center;background:#efe9dc}.wake h2{font-size:clamp(56px,9vw,145px)}.wake p:last-child{max-width:720px;margin:auto;font:22px/1.5 Georgia,serif}.evidence{padding:13vh 9vw;background:#b99f70}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink)}.evidence article{padding:30px;background:#e6dcc5}.evidence article b{font-size:11px;letter-spacing:.15em;color:var(--red)}.evidence article p{line-height:1.65}.sources{background:#151713;color:#eee3cf}.sources nav{display:grid;gap:10px;margin:30px 0}.sources a{text-underline-offset:4px}.registry{border-top:1px solid #fff4;padding-top:25px}footer{padding:25px 3vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;background:#151713;color:#eee3cf}
@media(max-width:760px){.bar span,.bar a:last-child{display:none}.dream-nav{right:7px}.dream-nav button{width:34px;height:34px}.hero{grid-template-columns:1fr}.hero-text{padding:16vh 7vw 6vh}.hero h1{font-size:19vw}.hero figure{height:52vh;margin-left:17vw}.threshold,.language,.acrostic,.legacy,.sources,.route,.ruins,.polia,.comparison,.cythera{grid-template-columns:1fr;padding:10vh 7vw;min-height:auto}.route ol{overflow-x:auto;padding-bottom:65px}.route output{grid-column:1}.ruins figure,.polia figure,.comparison figure,.cythera figure{order:-1}.inscriptions{grid-template-columns:1fr;padding:10vh 7vw}.builder{grid-template-columns:1fr}.evidence{padding:10vh 7vw}.evidence-grid{grid-template-columns:1fr}.wake{padding:14vh 7vw}footer{gap:20px}.dream-nav span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* На телефоне подписи остановок (110 px) стояли под кружками, разложенными
   space-between, и налезали друг на друга. Даём каждой остановке свою ширину
   и пускаем ряд в горизонтальную прокрутку; заодно уводим текст из-под
   плавающей навигации справа. */
.route ol{justify-content:flex-start;gap:10px;overflow-x:auto}
.route li{flex:1 0 112px;display:flex;justify-content:center}
.route button span{width:112px;transform:translate(-32px,16px)}
@media(max-width:760px){
  .route button span{font-size:10px}
  .threshold,.language,.acrostic,.legacy,.sources,.route,.ruins,.polia,.comparison,.cythera{padding-right:calc(7vw + 34px)}
}

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

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

/* В реестре иллюстраций стоит путь к скрипту в <code>. Пробелов внутри нет,
   и на 320 px он раздвигал страницу до 334 px. Пути и имена файлов рвём
   в любом месте: читаемость от переноса не страдает. */
code{overflow-wrap:anywhere}

/* --- тач-цели: минимум 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}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */
:focus-visible{outline:3px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 6px #000}