/* Читалка всех 213 листов. Базовые токены и .grain берутся из style.css. */
body{overflow-x:hidden}
.reader{padding:96px 4vw 60px;background:radial-gradient(circle at 70% 0,#332c21 0,transparent 45%),#16130f}
.reader-head{display:grid;grid-template-columns:auto 1fr;gap:6px 4vw;align-items:center}
.reader .index{grid-area:1/1}
.reader h1{grid-area:2/1;font-size:clamp(36px,4.4vw,64px);line-height:.85;letter-spacing:-.05em;margin:0;font-weight:600}
.reader h1 em{font:italic 400 .8em/.9 "PT Serif",serif;color:#b74836;margin-left:.3em}
.reader-lead{grid-area:1/2/3/3;margin:0;max-width:560px;color:#c7bfac;font:400 15px/1.5 "PT Serif",serif;justify-self:end}
.lab{margin:54px 0 72px;border-top:1px solid #575044;padding-top:30px}
.lab-heading{display:grid;grid-template-columns:1fr minmax(240px,430px);gap:30px;align-items:end}
.lab-heading h2,.lost-leaf h2,.full-reader-intro h2{font-size:clamp(34px,5vw,72px);line-height:.88;letter-spacing:-.05em;margin:8px 0 0}
.lab-heading h2 em,.lost-leaf h2 em,.full-reader-intro h2 em{font:italic 400 .75em/.9 "PT Serif",serif;color:#c14b38;text-transform:none}
.lab-heading>p{color:#aaa18f;font:15px/1.6 "PT Serif",serif}
.specimen-tabs{display:flex;gap:7px;overflow-x:auto;margin:26px 0 14px;padding:0 0 9px;scrollbar-color:#575044 transparent}
.specimen-tabs button,.puzzle-options button,.new-puzzle{flex:none;border:1px solid #575044;background:#131109;color:#c7bfac;min-height:38px;padding:9px 13px;font:600 9px/1.2 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.specimen-tabs button.active,.puzzle-options button.answer{background:#9e382b;border-color:#c65342;color:#fff}
.lab-desk{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);min-height:630px;background:#0b0a07;border:1px solid #353127}
.lab-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;background:radial-gradient(circle,#292318,#090806 68%)}
.lab-image{display:block;max-width:100%;max-height:680px;width:auto;height:auto;box-shadow:0 18px 55px #000}
.lab-note{padding:34px;align-self:center}
.lab-note h3{margin:8px 0 22px;color:#efe4c9;font:italic 400 42px/1 "PT Serif",serif}
.lab-section{color:#df7664;font:700 9px/1.3 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.lab-summary,.lab-caution{color:#c7bfac;font:15px/1.65 "PT Serif",serif}
.lab-caution{padding-left:15px;border-left:2px solid #8d753c;color:#aaa18f}
.yale-leaf{display:inline-block;color:#eee0c1;margin-top:14px;min-height:24px;padding-block:5px;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.scan-note{margin:12px 0 0;color:#aaa18f;font:14px/1.6 "PT Serif",serif}
.lost-leaf{margin:0 0 80px;padding:clamp(26px,5vw,60px);background:#ded0ab;color:#201b13;border:1px solid #baa977;box-shadow:12px 14px 0 #090806}
.lost-leaf .index{color:#783224}.lost-leaf h2{color:#201b13}.puzzle-rule{max-width:700px;font:16px/1.6 "PT Serif",serif}
.clues{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:28px 0}
.clues li{border:1px solid #887b5b;padding:20px;font:600 14px/1.5 "PT Serif",serif;background:#eadfbe}
.puzzle-options{display:flex;flex-wrap:wrap;gap:8px}.puzzle-options button,.new-puzzle{background:#292319;border-color:#292319;color:#f4e8cb}.puzzle-options button:disabled{opacity:.75}
.puzzle-result{min-height:48px;font:600 15px/1.5 "PT Serif",serif}.puzzle-result.correct{color:#315d3b}.puzzle-result.wrong{color:#862e24}.new-puzzle{margin-top:6px}
.full-reader-intro{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;border-top:1px solid #575044;padding-top:38px}.full-reader-intro p:last-child{color:#aaa18f;font:15px/1.6 "PT Serif",serif}
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 12px}
.jumps button{border:1px solid #575044;background:transparent;color:#aaa18f;padding:11px 16px;font-size:9px;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.jumps button:hover{border-color:#b74836;color:var(--cream)}
.jumps button.active{background:var(--red);border-color:var(--red);color:#fff}
.stage-bar{display:flex;justify-content:space-between;align-items:center;height:34px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#999181}
.stage-hint{color:#c14b38}
.stage-row{display:grid;grid-template-columns:56px 1fr 56px;gap:10px;align-items:stretch}
.stage{height:min(58vh,720px);background:#090806;border:1px solid #353127;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.stage img[hidden]{display:none}
/* Фолдауту даём больше высоты: вписанный в общий кадр разворот 3—4 экрана шириной
   становится нечитаемо мелким. */
.stage.foldout{height:min(72vh,860px);justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-color:#575044 #090806}
.stage.foldout img{max-width:none;max-height:none;width:auto;height:100%}
.stage-missing{margin:0;padding:0 20px;color:#8a8271;font-size:11px;letter-spacing:.08em;text-align:center}
.turn{border:1px solid #353127;background:#131109;color:#c7bfac;font-size:26px;line-height:1;cursor:pointer}
.turn:hover:not(:disabled){border-color:#b74836;color:#fff}
.turn:disabled{opacity:.3;cursor:default}
/* Подпись листа появляется только после загрузки pages.json. Строку под неё
   держим заранее, чтобы её появление не сдвигало вниз всё, что ниже. */
.stage-label{margin:16px 0 0;min-height:1.2em;font:italic 400 26px/1.2 "PT Serif",serif;color:#c14b38;text-align:center}
.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:22px;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#aaa18f}
.controls button{border:1px solid #575044;background:transparent;color:#aaa18f;padding:11px 16px;font:inherit;cursor:pointer}
.controls button:hover:not(:disabled){border-color:#b74836;color:var(--cream)}
.controls button:disabled{opacity:.35;cursor:default}
.controls label{display:flex;align-items:center;gap:8px}
.page-input{width:78px;background:#0d0b08;border:1px solid #575044;color:var(--cream);padding:10px;font:500 12px Manrope,Arial,sans-serif;text-align:center}
.reader .source-links a:hover{background:var(--ink);color:var(--cream)}
@media(max-width:800px){
  .reader{padding:100px 5vw 50px}
  .reader-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .reader .index,.reader h1{grid-area:auto}
  .reader-lead{grid-area:auto;justify-self:start}
  .reader h1{font-size:13vw}
  .stage-row{grid-template-columns:40px 1fr 40px;gap:6px}
  .stage{height:58vh}
  .stage.foldout{height:64vh}
  .stage-label{font-size:20px}
  .stage-bar{height:auto;flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:8px}
  .lab-heading,.lab-desk,.full-reader-intro{grid-template-columns:1fr}
  .lab-desk{min-height:0}.lab-image-wrap{min-height:52svh;padding:12px}.lab-note{padding:24px}
  .clues{grid-template-columns:1fr}.lost-leaf{box-shadow:6px 8px 0 #090806}
}

button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e4b84c;outline-offset:3px}

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

   Только на узких экранах. На десктопе крупный заголовок намеренно выходит
   за текстовую колонку в пустое поле справа — это часть оформления, и
   переносить его там незачем: получается лишняя строка и рваный вид. */
@media(max-width:520px){
  h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  /* Капитель и курсив в заголовках читалки не должны распадаться
     на слоги; 11.3vw оставляет в 390 px запас даже во вложенной lost-leaf. */
  .reader-head h1{font-size:min(13vw,11.3vw);hyphens:manual;-webkit-hyphens:manual}
  .lab-heading h2,.lost-leaf h2,.full-reader-intro h2{font-size:min(clamp(34px,5vw,72px),11.3vw);hyphens:manual;-webkit-hyphens:manual}
  .reader-head h1 em,.lab-heading h2 em,.lost-leaf h2 em,.full-reader-intro h2 em{hyphens:manual;-webkit-hyphens:manual}
}

/* --- тач-цели: минимум 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}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}