:root{--ink:#17130e;--paper:#ded6c4;--gold:#c7a965;--red:#8d2d22;--muted:#8d8576}*{box-sizing:border-box}html{background:#0d0b09;color:var(--paper);font-family:Georgia,serif}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% 15%,#33291d,#100d0a 60%)}header{height:72px;padding:0 max(18px,4vw);border-bottom:1px solid #524333;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:3;background:rgba(18,14,10,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}header a,header button,.controls button,.controls a{color:#c9bfae;background:none;border:0;text-transform:uppercase;letter-spacing:.12em;font:11px Arial,sans-serif;cursor:pointer}header>div{text-align:center}header span{display:block;color:var(--gold);font:9px Arial,sans-serif;letter-spacing:.22em}header strong{font-size:14px;letter-spacing:.08em}.fullscreen{justify-self:end}main{padding:30px 4vw 80px}.reader{display:grid;grid-template-columns:48px minmax(0,1200px) 48px;justify-content:center;align-items:center}.book{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.42;max-height:76dvh;perspective:1800px;filter:drop-shadow(0 25px 28px rgba(0,0,0,.52))}.leaf{background:#e8e3d8;min-width:0;position:relative;overflow:hidden;transform-style:preserve-3d}.leaf.left{border-radius:5px 0 0 5px;background:linear-gradient(90deg,#d2c9b6,#eee9df 9%,#e4ded0 93%,#b8ad98)}.leaf.right{border-radius:0 5px 5px 0;background:linear-gradient(90deg,#b7ab96,#e7e1d5 7%,#efeae0 91%,#d0c5b1)}.leaf.turning{animation:turn .42s ease-in-out}.leaf img{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:multiply}.page-label{position:absolute;bottom:8px;right:12px;color:#766d5f;font:10px Arial,sans-serif}.left .page-label{right:auto;left:12px}.gutter{position:absolute;z-index:4;left:calc(50% - 11px);top:0;width:22px;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(33,22,12,.24),rgba(255,255,255,.12),rgba(30,20,12,.22),transparent)}.loading{position:absolute;z-index:8;inset:0;display:none;place-items:center;color:#5d5549;background:rgba(224,217,203,.6);font-style:italic}.book.busy .loading{display:grid}.turn{border:1px solid #62513d;background:#18130e;color:var(--gold);width:42px;height:72px;font-size:40px;cursor:pointer}.turn:disabled{opacity:.2}.controls{max-width:1000px;margin:20px auto 55px;display:flex;align-items:center;justify-content:center;gap:25px;color:var(--muted);font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}.controls input{width:64px;background:#17120e;color:var(--paper);border:1px solid #66533c;padding:8px;text-align:center}.controls a{border-bottom:1px solid #766347;padding-bottom:4px}.translation{max-width:1000px;margin:auto;border-top:1px solid #5a4936;padding-top:30px}.translation-head{display:flex;justify-content:space-between;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font:9px Arial,sans-serif}.translation h1{font-weight:normal;font-size:clamp(30px,5vw,60px);margin:25px 0}.translation-pages{display:grid;grid-template-columns:1fr 1fr;gap:55px}.translation-page{color:#c9c0b1;font-size:17px;line-height:1.7}.translation-page h2{color:#8f826d;text-transform:uppercase;letter-spacing:.14em;font:10px Arial,sans-serif;border-bottom:1px solid #403629;padding-bottom:8px}.translation-page.pending{color:#736c62;font-style:italic}.translation-note{margin-top:35px;color:#6f675d;font:10px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:.09em}@keyframes turn{50%{transform:rotateY(-13deg) scale(.985);filter:brightness(.65)}}
.book.cover-mode .leaf.left{visibility:hidden}.book.cover-mode .leaf.right{grid-column:1/3;width:50%;justify-self:center;border-radius:5px}.book.cover-mode .gutter{display:none}.translation-toggle{border-bottom:1px solid #766347!important;padding-bottom:4px!important}.translation-window{position:fixed;z-index:20;right:24px;top:96px;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:hidden;background:#17120e;border:1px solid #6b573e;box-shadow:0 20px 60px rgba(0,0,0,.62);transform:translateX(calc(100% + 40px));opacity:0;transition:.28s ease;pointer-events:none}.translation-window.open{transform:none;opacity:1;pointer-events:auto}.translation-bar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#2a2118;border-bottom:1px solid #5d4c37;text-transform:uppercase;letter-spacing:.15em;font:9px Arial,sans-serif;color:var(--gold)}.translation-bar button{border:0;background:none;color:#bdb19f;text-transform:uppercase;letter-spacing:.08em;font:9px Arial,sans-serif;cursor:pointer}.translation-tabs{display:flex;border-bottom:1px solid #4c3d2c}.translation-tabs button{flex:1;border:0;border-right:1px solid #4c3d2c;background:#110e0b;color:#817665;padding:12px 8px;text-transform:uppercase;letter-spacing:.1em;font:9px Arial,sans-serif;cursor:pointer}.translation-tabs button.active{background:#302519;color:var(--gold)}.translation-body{padding:22px;overflow:auto;max-height:calc(100dvh - 205px)}.translation-body>h1{font-size:27px;line-height:1.05;font-weight:normal;margin:12px 0 24px}.translation-status{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font:9px Arial,sans-serif}.translation-page{font-size:17px;line-height:1.65;color:#d2c8b8}.translation-page h2{text-transform:uppercase;letter-spacing:.12em;color:#8f826d;font:9px Arial,sans-serif;border-bottom:1px solid #403629;padding-bottom:8px}.translation-page.pending{color:#81796d;font-style:italic}.translation-note{color:#6f675d;font:9px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin-top:25px}
@media(max-width:760px){header{height:60px;grid-template-columns:1fr auto}header>div{display:none}main{padding:18px 0 25px}.reader{grid-template-columns:34px minmax(0,1fr) 34px}.book{grid-template-columns:1fr;aspect-ratio:.707;max-height:none}.leaf.left,.gutter{display:none}.leaf.right{border-radius:3px}.book.cover-mode .leaf.right{grid-column:1;width:100%}.turn{width:32px;height:60px;font-size:30px}.controls{margin:15px 15px 30px;gap:10px;flex-wrap:wrap}.controls>a{width:100%;text-align:center;margin-top:8px}.fullscreen{font-size:9px}.translation-window{position:relative;top:auto;right:auto;bottom:auto;margin:0 14px 35px;width:calc(100% - 28px);max-height:none;display:none;transform:none;opacity:1;pointer-events:auto}.translation-window.open{display:block}.translation-body{max-height:none}.translation-body>h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){.leaf.turning{animation:none}}
@media(min-width:761px){.reader{grid-template-columns:48px auto 48px}.book{width:min(1200px,calc(76dvh * 1.42),calc(100vw - 160px))}.turn{position:relative;z-index:30}.turn.prev{justify-self:start}.turn.next{justify-self:end}}
@media(min-width:761px) and (max-width:1100px){.translation-window{position:relative;top:auto;right:auto;margin:0 auto 40px;width:calc(100% - 48px);max-width:760px;max-height:none;display:none;transform:none;opacity:1;pointer-events:auto}.translation-window.open{display:block}.translation-body{max-height:none}}
@media(min-width:1101px){main{transition:padding .3s ease}body:has(.translation-window.open) main{padding-left:24px;padding-right:430px}.translation-window{width:380px;right:24px}body:has(.translation-window.open) .book{width:min(1200px,calc(76dvh * 1.42),calc(100vw - 590px))}}
.translation-modes,.mobile-view-switch{display:flex;border:1px solid #4c3d2c;margin:0 0 20px}.translation-modes button,.mobile-view-switch button{flex:1;padding:9px;border:0;border-right:1px solid #4c3d2c;background:#110e0b;color:#8f826d;text-transform:uppercase;letter-spacing:.08em;font:9px Arial,sans-serif;cursor:pointer}.translation-modes button:last-child,.mobile-view-switch button:last-child{border-right:0}.translation-modes button.active,.mobile-view-switch button.active{color:var(--gold);background:#302519}.text-block{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid #30281f}.text-block p{white-space:pre-line;margin:0;overflow-wrap:anywhere}.source-text{color:#918777;font:13px/1.55 Georgia,serif}.translated-text{color:#d8cfc0}.mode-parallel .text-block{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mode-parallel .translated-text{border-left:1px solid #4a3b2b;padding-left:18px}.mobile-view-switch{display:none}
@media(max-width:760px){main{padding-top:64px}.mobile-view-switch{display:flex;position:fixed;z-index:50;top:60px;left:0;right:0;margin:0;background:#17120e}.translation-body{padding:18px}.translation-bar{display:none}.mode-parallel .text-block{display:block}.mode-parallel .translated-text{border-left:0;border-top:1px dashed #4a3b2b;padding:10px 0 0;margin-top:10px}.mobile-translation-view main{display:none}.mobile-translation-view .translation-window{display:block;margin-top:64px}.mobile-translation-view .translation-tabs{position:static;background:#17120e}}
.reader-title{margin:0 auto 22px;max-width:1000px;text-align:center;font-weight:normal;font-size:clamp(17px,2.2vw,24px);letter-spacing:.06em;color:var(--paper)}.translation-body>.translation-title{font-size:27px;line-height:1.05;margin:12px 0 24px}.provenance{max-width:1000px;margin:0 auto 60px;padding-top:26px;border-top:1px solid #4a3b2b;color:#b3a894;font-size:15px;line-height:1.65}.provenance h2{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font:10px Arial,sans-serif;margin:0 0 16px}.provenance p{margin:0 0 12px}.provenance b{color:var(--paper);font-weight:normal}.provenance code{font:12px/1 Menlo,Consolas,monospace;color:#8f826d}.provenance a{color:var(--gold)}.provenance-note{color:#8b8272;font-style:italic}
footer{border-top:1px solid #4a3b2b;padding:22px max(18px,4vw);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font:10px Arial,sans-serif}footer a{color:#c9bfae;text-decoration:none;border-bottom:1px solid #5d4c37;padding-bottom:3px}footer span{color:var(--gold);letter-spacing:.18em}
@media(max-width:760px){.reader-title{margin:0 14px 16px;font-size:17px}.provenance{margin:0 14px 34px;font-size:14px}.translation-body>.translation-title{font-size:23px}footer{justify-content:center;text-align:center}}

/* Длинное русское слово в крупном заголовке шире экрана 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.34→4.67 при норме 4.5 на #17120e ×1 — «На локальном скане нет распознанно» */
.translation-window.open .translation-note{color:#887e72}

/* Читалка объявлена viewport-fit=cover: под вырезом и полосой жестов iPhone
   плавающие панели иначе оказываются наполовину под системным элементом. */
.translation-window{right:max(24px,env(safe-area-inset-right));max-height:calc(100dvh - 120px - env(safe-area-inset-bottom))}
.mobile-view-switch{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* --- тач-цели: минимум 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}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */
header>a{min-height:24px;display:flex;align-items:center}
/* Кнопка «Свернуть ×» в полосе перевода была высотой 12 px. */
.translation-bar button{min-height:24px;padding-block:7px}


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

/* Крошки против фиксированного переключателя «Скан/Перевод»: он прибит
   под шапкой (position:fixed; top:60px) и накрывал строку навигации —
   ссылка «Главная» не нажималась ни мышью, ни пальцем. Опускаем крошки
   на высоту переключателя. */
@media(max-width:760px){.breadcrumbs{margin-top:32px}}