/* Правки по замечаниям дизайнера (28.10): тишина вместо тряски, страницы, читаемая панель, заметные ссылки. */

/* ---------------------------------------------------------------- тряска только там, где она к месту
   Всё нарисованное по умолчанию стоит на первом кадре. «Кипят» только существа (мышь, скелет, глаза)
   и название на обложке — глаз отдыхает на тексте и рисунках. */
html[data-boil] .frames > .f0 { visibility: visible !important; }
html[data-boil] .frames > .f1, html[data-boil] .frames > .f2 { visibility: hidden !important; }
html[data-boil="1"] :is(.critters, .eyes) .frames > .f0, html[data-boil="2"] :is(.critters, .eyes) .frames > .f0 { visibility: hidden !important; }
html[data-boil="1"] :is(.critters, .eyes) .frames > .f1, html[data-boil="2"] :is(.critters, .eyes) .frames > .f2 { visibility: visible !important; }
html[data-boil] .h, html[data-boil] .h .w, html[data-boil] .hero .sub, html[data-boil] .end-h { transform: none !important; text-shadow: none !important; }
html[data-boil] .boil:not(.title) { filter: none !important; }
.growth li.hot .frames { filter: none; }

/* ---------------------------------------------------------------- страницы */
#sk > [hidden] { display: none !important; }
.sk { min-height: 100vh; box-sizing: border-box; padding-bottom: 110px; }
html, body { overflow-x: clip; max-width: 100%; }
.critters { overflow: hidden; width: 100%; }
#sk > .stop { min-height: calc(100vh - 230px); box-sizing: border-box; max-width: 100%; }
.sk-pager { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 8px 18px; background: rgba(226, 213, 184, .97); border: 1.5px solid rgba(18, 13, 10, .45); border-radius: 14px 18px 12px 16px; box-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.sk-pager .sk-btn { font-size: 22px; color: #1a120c; text-shadow: none; }
.sk-pager .sk-btn:disabled { opacity: .3; cursor: default; }
.sk-pager .sk-btn:disabled .btn-ink { display: none; }
.p-num { font: 20px var(--hand); color: #3a2d22; min-width: 52px; text-align: center; }
.epilogue { padding-bottom: 150px; }
.hero { min-height: calc(100vh - 190px); }

/* ---------------------------------------------------------------- панели: тёмный переплёт книги
   Полоса сверху и листалка снизу — цвета обожжённого края страницы (как виньетка вокруг), буквы — бумажные.
   Так они не спорят с листом, а продолжают его тёмную рамку. */
.sk-bar { background: linear-gradient(#1c120a, #2a1b10) !important; border-bottom: 1px solid #0d0804; box-shadow: 0 1px 0 rgba(214, 190, 150, .18), 0 4px 16px rgba(10, 5, 2, .55);
  padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
.sk-bar .sk-btn, .sk-pager .sk-btn { color: #eadcbf; text-shadow: none; font-size: 22px; }
.sk-bar .sk-btn .btn-ink .pen, .sk-pager .sk-btn .btn-ink .pen { stroke: rgba(234, 220, 191, .55); }
.sk-bar .sk-btn:hover .btn-ink .pen, .sk-pager .sk-btn:hover .btn-ink .pen { stroke: #e0705a; }
.sk-bar .sk-dl { color: #f0a48f; }
.sk-bar .sk-dl .btn-ink .pen { stroke: #c4432d; }
#b-lang .lg { opacity: .55; color: #eadcbf; }
#b-lang .lg.on { opacity: 1; color: #f0a48f; text-decoration-color: rgba(240, 164, 143, .7); }
#b-lang .sl { opacity: .5; color: #eadcbf; }
.btn-ico .pen, .btn-ico .pen.thin { stroke: #eadcbf; }
.btn-ico .pen.red { stroke: #e0705a; }
.sk-btn:hover .btn-ico .pen:not(.red) { stroke: #f0a48f; }
.sk-pager { background: linear-gradient(#2a1b10, #1c120a); border: 1px solid #0d0804; box-shadow: 0 0 0 1px rgba(214, 190, 150, .14) inset, 0 6px 20px rgba(10, 5, 2, .6); }
.p-num { color: #cbb894; }

/* ---------------------------------------------------------------- ссылки видно сразу: красные, подчёркнутые, жирнее текста */
.links a { color: #7a160c; font-weight: 700; text-decoration: underline rgba(122, 22, 12, .55) 1.5px; text-underline-offset: 5px; }
.links a.main { color: #fff8ea; background: rgba(122, 22, 12, .9); border-radius: 6px 10px 7px 9px; text-decoration: none; }
.links a:hover, .links a:focus-visible { color: #000; text-decoration-style: wavy; }
.links a.main:hover { color: #fff; background: #5c0f07; }
.toc a { color: #2b3f7a; text-decoration: underline dotted rgba(43, 63, 122, .6) 1.5px; text-underline-offset: 4px; }
.toc a:hover { color: #7a160c; }

/* ---------------------------------------------------------------- рисунки не вылезают из рамок */
.art, .art-sk, .frames.stack { max-width: 100%; }
.art-sk { overflow: hidden; }
.frames.stack > img { max-width: 100%; }
.col { min-width: 0; }
.growth li { min-width: 0; }
.growth .frames > img { max-width: 100%; }

/* ---------------------------------------------------------------- юридическое внизу последней страницы */
.legal { max-width: 640px; margin: 30px auto 0; font: 15px/1.45 "Cormorant", serif; color: #3a2d22; opacity: .85; }
.legal p { margin: 4px 0; }

@media (max-width: 520px) {
  .sk-bar .sk-btn { font-size: 18px; padding: 4px 6px; }
  .sk-pager { gap: 10px; padding: 6px 12px; }
  .sk-pager .sk-btn { font-size: 19px; }
}

/* ---------------------------------------------------------------- не жёсткий центр: разворот как живой лист
   Колонки неравные и чередуются от страницы к странице, вторая колонка опущена, лист чуть сдвинут к корешку —
   как записи в блокноте, а не выровненная по центру вёрстка. */
@media (min-width: 821px) {
  #sk > .stop { width: min(1060px, calc(100% - 90px)); }
  #sk > .stop.left { margin: 0 auto 0 max(24px, calc(50% - 560px)); grid-template-columns: 1.12fr .88fr; }
  #sk > .stop.right { margin: 0 max(24px, calc(50% - 560px)) 0 auto; grid-template-columns: .88fr 1.12fr; }
  #sk > .stop > .col:nth-of-type(2) { padding-top: 56px; }
  #sk > .stop.right > .col:nth-of-type(1) { padding-top: 22px; }
}
@media (max-width: 820px) {
  #sk > .stop { width: calc(100% - 14px); margin: 0 0 0 auto !important; padding-left: 10px; padding-right: 10px; }
  .sk { padding-left: 10px; padding-right: 10px; }
}

/* ---------------------------------------------------------------- лёгкая тряска акцентов
   Красные обводки, подчёркивания, стрелки, крестики и каракули на полях «кипят» своими тремя кадрами;
   чёрные рамки, текст и рисунки стоят. */
html[data-boil] svg.ink > g.f1, html[data-boil] svg.ink > g.f2 { visibility: visible !important; }
html[data-boil] svg.ink > g .pen { visibility: hidden !important; }
html[data-boil] svg.ink > g.f0 .pen:not(.red, .doodle) { visibility: visible !important; }
html[data-boil="0"] svg.ink > g.f0 .pen:is(.red, .doodle),
html[data-boil="1"] svg.ink > g.f1 .pen:is(.red, .doodle),
html[data-boil="2"] svg.ink > g.f2 .pen:is(.red, .doodle) { visibility: visible !important; }
.list li::before { display: inline-block; }
html[data-boil="0"] .list li::before { transform: translate(.4px, -.3px) rotate(-3deg); }
html[data-boil="1"] .list li::before { transform: translate(-.4px, .3px) rotate(2deg); }
html[data-boil="2"] .list li::before { transform: translate(.2px, .4px) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) { .list li::before { transform: none !important; } }

/* обложка помещается в экран; главы не вылезают за свой низ */
.hero { min-height: 0; padding-bottom: 10px; }
.hero-art img, .hero-art .frames.stack > img { max-height: max(180px, calc(100vh - 470px)); width: auto; max-width: 100%; margin: 0 auto; }
.hero-art .art-sk { display: flex; justify-content: center; }
#sk > .hero, #sk > .stop { overflow: clip; overflow-clip-margin: 30px; }
/* паутина и потёки — поверх обложки в углу, а не в потоке (иначе .frames.stack делал их relative и они удлиняли страницу) */
.hero > .cobweb.frames, .hero > .drips { position: absolute; z-index: 2; }
.hero > .cobweb.frames { top: 0; right: 0; left: auto; }
.hero > .drips { top: 0; left: 18%; }

/* длинная глава раскладывается на несколько разворотов (js split) — меряется невидимо */
#sk { position: relative; }
#sk > .stop.measuring { position: fixed !important; left: 0; top: 0; visibility: hidden !important; pointer-events: none; }

/* рисунки — по высоте экрана, а не по ширине колонки: так разворот помещается без прокрутки */
#sk > .stop .art-sk .frames.stack > img { max-height: min(330px, calc(100vh - 540px)); width: auto; max-width: 100%; margin: 0 auto; }
#sk > .stop .art-sk { display: flex; justify-content: center; }
#sk > .stop { padding-top: 34px; padding-bottom: 40px; }
.sk { padding-top: 70px; }
.hero-art img, .hero-art .frames.stack > img { max-height: max(160px, calc(100vh - 560px)); }
.end-tree { width: min(340px, 70vw, 42vh) !important; }
.epilogue { min-height: 0 !important; padding-top: 0; padding-bottom: 20px; }
.end-tree { width: min(300px, 60vw, 32vh) !important; }
.end-h { margin-top: 8px; } .end-p { margin-bottom: 14px; }
.legal { margin-top: 16px; }

/* ---------------------------------------------------------------- панели — обожжённый край той же бумаги
   Под тёмной заливкой просвечивает волокно листа (art/paper.webp), сверху — штриховка углём,
   край неровный, будто страницу опалили свечой. */
.sk-bar, .sk-pager {
  background-color: #23170d !important;
  background-image:
    repeating-linear-gradient(-62deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 5px),
    radial-gradient(120% 140% at 50% 0%, rgba(92, 58, 30, .45), rgba(20, 12, 6, .2) 70%),
    linear-gradient(rgba(30, 19, 10, .82), rgba(30, 19, 10, .82)),
    url(../art/paper.webp) !important;
  background-size: auto, auto, auto, 260px !important;
  background-blend-mode: normal, soft-light, multiply, normal;
}
.sk-bar { border-bottom: 0; overflow: visible; }
.sk-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: linear-gradient(#23170d, rgba(35, 23, 13, .0));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V3C228 7 221 4 212 8S196 5 188 9 170 4 160 7 141 10 131 6 112 9 101 5 84 10 73 6 55 9 44 5 27 8 16 6 6 9 0 5Z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V3C228 7 221 4 212 8S196 5 188 9 170 4 160 7 141 10 131 6 112 9 101 5 84 10 73 6 55 9 44 5 27 8 16 6 6 9 0 5Z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x; }
.sk-pager { border: 0; border-radius: 6px 14px 5px 12px / 12px 6px 14px 5px;
  box-shadow: 0 0 0 1px rgba(10, 6, 3, .9), 0 0 0 2px rgba(214, 190, 150, .12), inset 0 0 18px rgba(0, 0, 0, .6), 0 6px 22px rgba(10, 5, 2, .6); }
/* каракули, следы и глаза на полях — поверх листа, не в сетке разворота (.frames.stack делал их relative → лишняя строка) */
#sk > .stop > .frames.stack.trace, #sk > .stop > .trace, #sk > .stop > .eyes, #sk > .hero > .trace { position: absolute; }
/* глаза — на самом поле, не на тексте */
#sk > .stop > .eyes { width: 58px; }
#sk > .stop > .eyes.e1, #sk > .stop > .eyes.e3 { left: 4px !important; right: auto; }
#sk > .stop > .eyes.e2 { right: 4px !important; left: auto; }
@media (min-width: 821px) {
  #sk > .stop.solo { grid-template-columns: 1fr; width: min(620px, calc(100% - 90px)); margin-left: auto !important; margin-right: auto !important; }
  #sk > .stop.solo > .col { padding-top: 0 !important; }
}