:root{color-scheme:dark;--ink:#17140f;--paper:#e8dec9;--red:#b33a2e;--gold:#c7a861;--panel:rgba(20,17,13,.93)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink)}body{color:var(--paper);font-family:Manrope,sans-serif}button,a{font:inherit}button{color:inherit}#viewer{position:fixed;inset:0;background:#17140f}#annotation-canvas{position:absolute;inset:0;z-index:20;width:100%;height:100%;pointer-events:none}.wash{position:fixed;inset:0;z-index:22;pointer-events:none;box-shadow:inset 0 0 140px 24px rgba(0,0,0,.65)}
.topbar{position:fixed;z-index:70;top:0;left:0;right:0;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;border-bottom:1px solid rgba(232,222,201,.2);background:linear-gradient(#17140fe8,#17140fb8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.topbar a{color:var(--paper);text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.topbar>div{text-align:center}.topbar span{display:block;color:#9f927c;font-size:9px;letter-spacing:.2em}.topbar strong{font:400 16px PT Serif,serif;letter-spacing:.08em}.topbar button{justify-self:end;border:0;background:none;cursor:pointer;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.controls{position:fixed;z-index:65;left:26px;bottom:25px;display:flex;align-items:center;padding:5px;border:1px solid rgba(199,168,97,.45);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls button{width:42px;height:40px;border:0;border-right:1px solid rgba(232,222,201,.13);background:none;font:24px PT Serif,serif;cursor:pointer}.controls button:hover{color:var(--gold);background:#ffffff0b}.controls span{min-width:64px;text-align:center;color:#aa9e88;font-size:11px}
.controls .translation-button{width:auto;padding:0 14px;color:var(--gold);font:10px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.intro{position:fixed;z-index:60;left:5vw;top:50%;width:min(560px,90vw);padding:44px 38px 38px;transform:translateY(-45%);background:linear-gradient(90deg,rgba(20,17,13,.9),rgba(20,17,13,.66) 72%,transparent);text-shadow:0 3px 20px #000}.intro .kicker,.index{margin:0 0 18px;color:var(--gold);font-size:10px;letter-spacing:.22em;text-transform:uppercase}.intro h1{margin:0;font:400 clamp(65px,9vw,132px)/.7 PT Serif,serif;letter-spacing:-.055em}.intro h1 em{color:var(--gold);font-weight:400}.intro>p:not(.kicker){width:min(450px,100%);margin:38px 0 24px;color:#f2e8d5;font:18px/1.55 PT Serif,serif}.intro button{padding:15px 19px;border:1px solid var(--gold);background:rgba(20,17,13,.78);cursor:pointer;text-transform:uppercase;font-size:11px;letter-spacing:.12em}.intro button span{margin-left:26px;color:var(--gold)}.intro small{display:block;margin-top:18px;color:#c9bca5;font-size:9px;letter-spacing:.06em}.intro.hidden{opacity:0;transform:translate(-30px,-45%);pointer-events:none;transition:.6s ease}
.story,.creature{position:fixed;z-index:80;top:0;right:0;width:min(520px,100vw);height:100dvh;padding:94px 48px 40px;background:var(--panel);box-shadow:-25px 0 80px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:auto;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.story.open,.creature.open{transform:none}.story-close,.creature-close{position:absolute;top:21px;right:27px;width:38px;height:38px;border:0;background:none;font:30px PT Serif,serif;cursor:pointer}.story h2,.creature h2{margin:0 0 22px;font:400 42px/1.05 PT Serif,serif}.story .lead{color:#e8dec9d9;font:18px/1.5 PT Serif,serif}.timeline{margin:40px 0;border-top:1px solid #ffffff24}.timeline article{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid #ffffff1a}.timeline time{color:var(--gold);font:italic 15px PT Serif,serif}.timeline p{margin:0;color:#c8bdab;font-size:12px;line-height:1.55}.story blockquote{margin:34px 0;padding-left:22px;border-left:2px solid var(--red);color:#e5d9c4;font:italic 18px/1.5 PT Serif,serif}.sources{color:#8f8575;font-size:10px;line-height:1.5}
.creature{top:auto;right:26px;bottom:25px;width:min(410px,calc(100vw - 36px));height:auto;max-height:calc(100dvh - 105px);padding:29px 34px 32px;border:1px solid rgba(199,168,97,.5);transform:translateY(calc(100% + 40px));transition:transform .35s ease}.creature.open{transform:none}.creature-close{top:10px;right:12px}.creature .index{margin-bottom:16px}.creature .latin{margin:0 0 6px;color:var(--red);font:italic 12px PT Serif,serif;letter-spacing:.12em}.creature h2{padding-right:30px;font-size:31px}.creature .translation{color:#eee3cf;font:italic 17px/1.48 PT Serif,serif}.creature .note{padding-top:16px;border-top:1px solid #ffffff20;color:#a99e8c;font-size:11px;line-height:1.55}.hint{position:fixed;z-index:55;left:50%;bottom:29px;transform:translateX(-50%);color:#b9ad98;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 8px #000}.navigator{border:1px solid rgba(199,168,97,.5)!important;background:#17140f!important}.openseadragon-container:focus{}
.translation-index{position:fixed;z-index:90;top:0;right:0;width:min(620px,100vw);height:100dvh;padding:86px 44px 40px;background:#14110d;box-shadow:-30px 0 90px #0009;overflow-y:auto;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.translation-index.open{transform:none}.translation-index h2{margin:0 0 18px;font:400 42px/1.04 PT Serif,serif}.translation-close{position:fixed;z-index:3;top:20px;right:26px;background:#14110d;width:38px;height:38px;border:0;background:none;font:30px PT Serif,serif;cursor:pointer}.translation-intro{color:#aaa08e;font:15px/1.55 PT Serif,serif}.sheet-tabs{position:sticky;z-index:2;top:0;display:grid;grid-template-columns:repeat(9,1fr);margin:26px 0;background:#14110d;border:1px solid #ffffff20}.sheet-tabs button{height:42px;padding:0;border:0;border-right:1px solid #ffffff20;background:none;color:#aaa08e;cursor:pointer}.sheet-tabs button:last-child{border:0}.sheet-tabs button.active{background:var(--red);color:#fff}.sheet-copy{scroll-margin-top:126px}.sheet-copy h3{margin:0 0 18px;color:var(--gold);font:24px PT Serif,serif}.sheet-copy ol{margin:0;padding:0;list-style:none}.sheet-copy li{padding:12px 0;border-top:1px solid #ffffff17;color:#d9cfbd;font:15px/1.5 PT Serif,serif}.translation-source{margin-top:30px;color:#81796c;font-size:9px;line-height:1.5;letter-spacing:.05em}
@media(max-width:700px){.topbar{height:62px;padding:0 14px;grid-template-columns:1fr auto}.topbar>div{display:none}.topbar button{font-size:10px}.intro{left:10px;top:48%;width:calc(100vw - 20px);padding:30px 18px;background:rgba(20,17,13,.78)}.intro h1{font-size:68px}.intro>p:not(.kicker){margin-top:30px;font-size:16px}.intro small{max-width:90%}.controls{left:10px;bottom:10px;max-width:calc(100vw - 20px)}.controls button{width:38px}.controls .translation-button{width:auto;padding:0 9px;font-size:8px}.controls span{display:none}.hint{display:none}.story{padding:82px 24px 32px}.story h2{font-size:35px}.creature{right:10px;bottom:64px;padding:25px 24px}.creature h2{font-size:27px}.translation-index{padding:74px 20px 30px}.translation-index h2{font-size:35px}.navigator{width:24vw!important;height:18vw!important;right:10px!important;bottom:10px!important}}

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

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

/* Просмотрщик объявлен viewport-fit=cover — значит рисуется под вырезом и под
   полосой жестов iPhone. Панели прижаты к краям абсолютом, поэтому отступы
   берём не меньше системных. env() без поддержки даёт пустое значение,
   и max() возвращает прежнюю величину — на десктопе ничего не меняется. */
.topbar{padding-top:env(safe-area-inset-top);height:calc(72px + env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.controls{left:max(26px,env(safe-area-inset-left));bottom:max(25px,env(safe-area-inset-bottom))}
.hint{bottom:max(29px,env(safe-area-inset-bottom))}
.translation-close{top:max(20px,env(safe-area-inset-top));right:max(26px,env(safe-area-inset-right))}
.story,.creature,.translation-index{padding-right:max(44px,env(safe-area-inset-right));padding-bottom:max(40px,env(safe-area-inset-bottom))}

/* --- тач-цели: минимум 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}}
/* Вкладки листов A–I: на 280 px выходило 23,8 px — на два десятых ниже нормы. */
.sheet-tabs button{min-width:24px}
/* Кнопка «Перевод карты» была 8 px. */
.translation-button{font-size:9px}
/* На телефоне кнопка перевода падала до 8 px — правило в медиазапросе. */
@media(max-width:700px){.controls .translation-button{font-size:9px}}
/* Выход из полного экрана: в этом режиме OSD уносит просмотрщик в пустой body,
   и панель управления со своей кнопкой ⛶ исчезает. Держим кнопку вверху справа —
   навигатор карты стоит внизу справа и не задевается. */
.exit-full-page{position:absolute;z-index:200;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));min-height:40px;padding:9px 14px;border:1px solid rgba(199,168,97,.5);background:var(--panel,#17140f);color:#e8dec9;font:10px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.exit-full-page:hover,.exit-full-page:focus-visible{color:var(--gold,#c7a861);border-color:rgba(199,168,97,.9)}
.exit-full-page[hidden]{display:none}


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