/* story.css — «История Байсангура»: книга в стилистике VAYDAY
   Те же шрифты (PT Serif + Onest), монохром, тонкие линии, горы на обложке. */

.story { position: relative; }

.story__stage {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,10,12,.55) 0%, rgba(8,10,12,.35) 45%, rgba(8,10,12,.7) 100%),
    url(./assets/bg2-towers-m.webp) center / cover no-repeat;
}

.story__wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(5rem, 8vh, 6.5rem) var(--space-4) var(--space-12);
  gap: var(--space-5); overflow: hidden;
}
.story__hint { color: rgba(244,242,236,.75) !important; text-align: center; margin: 0; }

/* ---------- Книга ---------- */
.book { width: 100%; max-width: 1120px; margin-inline: auto; transition: transform .9s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.book:not(.is-ready) { display: grid; gap: var(--space-6); max-width: 520px; filter: none; }
.book:not(.is-ready) .page { aspect-ratio: 5 / 7; }

.page { background: transparent; container-type: inline-size; }
.page > * { height: 100%; }

/* Страница */
.leaf {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 13cqw 11cqw 18cqw;
  background: var(--color-surface);
  color: var(--color-text);
}
/* тень у корешка — едва заметная */
.page--left .leaf::after,
.page--right .leaf::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.page--left .leaf::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.07)); }
.page--right .leaf::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0,0,0,.07)); }
[data-theme='dark'] .page--left .leaf::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.35)); }
[data-theme='dark'] .page--right .leaf::after { background: linear-gradient(270deg, transparent, rgba(0,0,0,.35)); }

.leaf h3 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: calc(7.6cqw * var(--k, 1)); line-height: 1.15; letter-spacing: -0.005em;
  color: var(--color-text);
}
.rule { display: block; flex: none; width: 12cqw; height: 1px; background: var(--color-text); opacity: .6; margin: calc(6cqw * var(--k, 1)) 0 calc(7cqw * var(--k, 1)); }

.leaf p {
  font-family: var(--font-body); font-weight: 300;
  font-size: calc(3.55cqw * var(--k, 1)); line-height: 1.75;
  color: var(--color-text-muted);
  text-wrap: pretty; hyphens: manual;
}
.leaf p + p { margin-top: calc(3.6cqw * var(--k, 1)); }

.leaf__closing {
  margin-top: auto !important; padding-top: 8cqw; margin-bottom: 6cqw;
  font-family: var(--font-heading) !important; font-weight: 400 !important;
  font-size: calc(5.6cqw * var(--k, 1)) !important; line-height: 1.35 !important;
  color: var(--color-text) !important;
}

.folio {
  position: absolute; left: 11cqw; right: 11cqw; bottom: 7cqw;
  display: flex; justify-content: flex-end; gap: .5em;
  padding-top: 3cqw; border-top: 1px solid var(--color-divider);
  font-family: var(--font-body); font-size: 2.6cqw; letter-spacing: .18em; color: var(--color-text-faint);
}
.page--left .folio { justify-content: flex-start; }
.folio i { font-style: normal; opacity: .6; }

/* Титул и посвящение */
.leaf--title, .leaf--end { align-items: center; justify-content: center; text-align: center; }
.orn { width: 34cqw; height: auto; color: var(--color-text); opacity: .85; margin-bottom: 9cqw; }
.title-name { font-family: var(--font-heading); font-weight: 400; font-size: 8.6cqw; line-height: 1.15; }
.title-years { margin-top: 3cqw; font-size: 2.8cqw !important; letter-spacing: .3em; text-transform: uppercase; color: var(--color-text-faint) !important; }
.leaf--title .rule { margin: 8cqw auto; }
.title-sub { font-family: var(--font-heading) !important; font-weight: 400 !important; font-size: 4.6cqw !important; line-height: 1.45 !important; color: var(--color-text) !important; max-width: 24ch; }
.end-line { font-family: var(--font-heading) !important; font-weight: 400 !important; font-size: 6cqw !important; line-height: 1.3 !important; color: var(--color-text) !important; max-width: 16ch; margin-bottom: 9cqw; }
.leaf--end .btn { font-size: 3.2cqw; }

/* Обложка — как первый экран сайта: горы, туман, белый серифный заголовок */
.cover {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  padding: 11cqw 9cqw;
  color: #f4f2ec;
  background:
    linear-gradient(180deg, rgba(8,10,12,.45) 0%, rgba(8,10,12,.2) 40%, rgba(8,10,12,.65) 100%),
    url(./assets/bg2-peaks-m.webp?v=20261025b) 50% 40% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.08);
}
.cover::before { content: ''; position: absolute; inset: 4.5cqw; border: 1px solid rgba(244,242,236,.35); pointer-events: none; }
.cover p { color: rgba(244,242,236,.85) !important; }
.cover__brand { font-family: var(--font-logo); font-size: 5cqw; letter-spacing: .32em; padding-left: .32em; }
.cover__title { font-family: var(--font-heading); font-weight: 400; font-size: 10.5cqw; line-height: 1.1; color: #f4f2ec; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.cover__years { margin-top: 5cqw; font-family: var(--font-body); font-size: 2.9cqw; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: rgba(244,242,236,.8); }
.cover__foot { font-family: var(--font-body); font-size: 2.6cqw; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: rgba(244,242,236,.7); }
.cover { cursor: pointer; }
.cover__open {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .6em;
  margin-top: 9cqw; padding: .9em 1.6em; background: #f4f2ec; color: #15140f;
  font-family: var(--font-body); font-size: 3.2cqw; font-weight: 500; letter-spacing: .02em;
}
.cover__open svg { width: 1em; height: 1em; }
.cover--back { cursor: default; }
.cover--back { justify-content: flex-end; background: #15140f; padding-bottom: 12cqw; }
.cover__portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.cover--back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,12,0) 45%, rgba(8,10,12,.55) 75%, rgba(8,10,12,.9) 100%); pointer-events: none; }
.cover--back::before { z-index: 1; }
.cover__caption { position: relative; z-index: 2; }
.cover__cap-name { font-family: var(--font-heading) !important; font-size: 7cqw; line-height: 1.15; color: #f4f2ec !important; }
.cover__caption .cover__years { margin-top: 3cqw; }
.cover--back::before { border-color: rgba(244,242,236,.3); }
.cover__mono { width: 15cqw; opacity: .8; filter: invert(1) brightness(1.1); }

/* Навигация */
.book-nav { display: flex; align-items: center; gap: var(--space-6); color: #f4f2ec; }
.book-nav__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(244,242,236,.55); background: transparent; color: inherit; cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive), opacity var(--transition-interactive);
}
.book-nav__btn:hover:not(:disabled) { background: #f4f2ec; color: #15140f; }
.book-nav__btn:disabled { opacity: .3; cursor: default; }
.book-nav__count { min-width: 14ch; text-align: center; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; }

.story-page .site-footer { background: var(--color-bg); position: relative; }

@media (max-width: 700px) {
  .leaf { padding: 11cqw 9cqw 19cqw; }
  .leaf p { font-size: calc(4.2cqw * var(--k, 1)); line-height: 1.7; }
  .leaf h3 { font-size: calc(8.6cqw * var(--k, 1)); }
  .folio { left: 9cqw; right: 9cqw; font-size: 3cqw; }
  .story__wrap { padding-top: 5rem; gap: var(--space-5); }
}

/* Скругленные углы, как у настоящей книги: внешние края мягкие, у корешка — прямые */
.book { --r: 2.4cqw; }
.page { --r: 2.6cqw; }
.page--right > .leaf, .page--cover:not(.page--back) > .cover { border-radius: 0 var(--r) var(--r) 0; }
.page--left > .leaf, .page--back > .cover { border-radius: var(--r) 0 0 var(--r); }
.cover::before { border-radius: 0 calc(var(--r) * .6) calc(var(--r) * .6) 0; }
.page--back .cover::before { border-radius: calc(var(--r) * .6) 0 0 calc(var(--r) * .6); }
.cover--back::after { border-radius: inherit; }
/* на телефоне видна одна страница — скругляем ее внешний (правый) край */
.book.is-portrait .page > .leaf, .book.is-portrait .page > .cover { border-radius: 0 var(--r) var(--r) 0; }
.book.is-portrait .page--back .cover::before { border-radius: 0 calc(var(--r) * .6) calc(var(--r) * .6) 0; }
.book:not(.is-ready) .page > * { border-radius: var(--r); }

/* ---------- Открытая книга на телефоне ----------
   Под страницами — твердый переплет, слева — левая страница разворота
   со стопкой прочитанных листов, по центру — корешок, справа — торец стопки */
.book-frame { position: relative; width: 100%; max-width: 1120px; margin-inline: auto; display: flex; justify-content: center; }
.book-frame > .book { position: relative; z-index: 3; }
.bk { display: none; position: absolute; pointer-events: none; }
.book-frame.is-portrait { transform: translateX(14px); }
.book-frame.is-portrait .bk { display: block; transition: opacity .5s ease; }

/* переплет */
.bk-board {
  z-index: 0; top: -7px; bottom: -7px; left: -44px; right: -13px; opacity: 0;
  border-radius: 9px;
  background: linear-gradient(90deg, #22252a 0%, #2c3036 8%, #1b1d21 13%, #2a2d33 16%, #24272c 100%);
  box-shadow: 0 24px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* левая страница — уходит к корешку, видна узкой полосой */
.bk-left {
  z-index: 2; top: -2px; bottom: -2px; left: -36px; width: 37px; opacity: 0;
  border-radius: 6px 0 0 6px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.18) 80%, rgba(0,0,0,.38) 100%),
    var(--color-surface);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.08);
}
/* стопка прочитанных листов слева */
.bk-left::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: -5px; width: 6px;
  border-radius: 4px 0 0 4px;
  background: repeating-linear-gradient(90deg, var(--color-surface) 0 1.2px, rgba(0,0,0,.22) 1.2px 2px);
}
/* корешок — глубокая складка между страницами */
.bk-left::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -3px; width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.12) 60%, transparent);
}
/* торец непрочитанных страниц справа */
.bk-edge {
  z-index: 1; top: 3px; bottom: 3px; right: -8px; width: 10px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(90deg, var(--color-surface) 0 1.3px, rgba(0,0,0,.2) 1.3px 2px), var(--color-surface);
  box-shadow: 2px 0 5px rgba(0,0,0,.3);
}
.book-frame.is-open .bk-board,
.book-frame.is-open .bk-left,
.book-frame.is-moving .bk-board,
.book-frame.is-moving .bk-left { opacity: 1; }
.book-frame.is-back .bk-edge { right: auto; left: -8px; border-radius: 6px 0 0 6px; }
.book-frame.is-portrait:not(.is-open):not(.is-moving) { transform: translateX(0); }

/* изгиб страницы у корешка */
.book.is-portrait .page:not(.page--cover) .leaf::after {
  left: 0; right: auto; width: 16%;
  background: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.02) 70%, transparent 100%);
}
.book.is-portrait .page:not(.page--cover) > .leaf { border-radius: 0 var(--r) var(--r) 0; }

/* ---------- Перелистывание на телефоне ---------- */
.book.mbook { position: relative; perspective: 1900px; perspective-origin: 0% 50%; filter: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; margin: 0; }
.mbook .page { position: absolute; top: 0; left: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.mbook .mface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mbook .mface--front { box-shadow: 0 0 0 .5px rgba(0,0,0,.06); }
/* оборот листа — бумага, светлее у корешка */
.mbook .mface--back {
  transform: rotateY(180deg);
  border-radius: var(--r) 0 0 var(--r);
  background: linear-gradient(270deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.03) 18%, transparent 40%), var(--color-surface);
}
.mbook .mface--back.is-board { background: linear-gradient(270deg, rgba(0,0,0,.35), transparent 30%), #24272c; }
/* свет и тень на поворачиваемой странице */
.mbook .mshade {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 5;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  opacity: 0;
}
/* тень от листа на следующей странице */
.mbook .mcast {
  position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,0) 75%);
  opacity: 0; transform: translateZ(.1px);
}

/* левая (перевернутая) страница продолжается до края экрана — фон не виден */
.book-frame.is-portrait .bk-left { left: calc(-1 * var(--lx, 36px)); width: calc(var(--lx, 36px) + 1px); border-radius: 0; }
.book-frame.is-portrait .bk-left::before { display: none; }
.book-frame.is-portrait .bk-board { left: calc(-1 * var(--lx, 36px) - 12px); border-radius: 0 9px 9px 0; }

/* Обложка с портретом: изображение сверху, имя — на темной полосе под ним */
.cover--portrait { justify-content: flex-end; background: #15140f; padding: 0 7cqw 9cqw; cursor: pointer; }
.cover--portrait .cover__portrait { inset: 0 0 auto 0; height: 76%; object-position: 50% 0; }
.cover--portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,20,15,0) 58%, rgba(21,20,15,.85) 72%, #15140f 77%); }
.cover--portrait::before { z-index: 3; border-color: rgba(244,242,236,.3); }
.cover--portrait .cover__caption { position: relative; z-index: 2; }
.cover--portrait .cover__cap-name { font-size: 7.2cqw; white-space: nowrap; margin: 0; font-weight: 400; }
.cover--portrait .cover__years { margin-top: 2.6cqw; }
.cover--portrait .cover__foot { margin-top: 4.5cqw; font-size: 2.4cqw; }
/* задняя обложка — горы */
.cover--end { cursor: default; }
.cover__quote { font-family: var(--font-heading) !important; font-size: 5.4cqw; line-height: 1.35; color: #f4f2ec !important; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.cover--portrait::after { border-radius: inherit; }

/* Задняя обложка: только горы и логотип */
.cover--logo { justify-content: center; }
.cover--logo::before { display: none; }
.cover--logo::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 40% at 50% 50%, rgba(10,12,14,.45), rgba(10,12,14,0) 70%), linear-gradient(180deg, rgba(10,12,14,.15), rgba(10,12,14,.25)); }
.cover__logo { position: relative; z-index: 2; width: 40%; height: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); }

/* ---------- Закрытие книги на телефоне ----------
   оборот последнего листа — задняя обложка */
.mbook .mface--back.is-close { background: #24272c; overflow: hidden; }
.mbook .mface--back.is-close > .cover { position: absolute; inset: 0; border-radius: var(--r) 0 0 var(--r); }
.mbook .mface--back.is-close .mshade-b {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: linear-gradient(270deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,0) 70%);
  opacity: 1;
}
/* лист с обложкой толще бумаги */
.mbook .page.is-lastleaf .mface--front { box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
/* пока книга закрывается, правая половина поднята — под ней ничего нет */
.book-frame.is-closing .bk { transition: none; }
.mbook .mshade, .mbook .mcast, .mbook .mshade-b { will-change: opacity; }
.book.mbook { transition: none; }
.book-frame.is-portrait { transition: transform .7s cubic-bezier(.4,0,.2,1); }
.book-frame.is-closing { transition: none; }

/* оборот обложки — темный форзац, как у твердого переплета */
.mbook .mface--back.is-board {
  background:
    linear-gradient(270deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,0) 32%),
    radial-gradient(120% 90% at 60% 40%, #24231e 0%, #17160f 100%);
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.05);
}
/* в телефонной книге декоративная левая страница больше не нужна — ее роль играет настоящий лист */
.book-frame.is-portrait .bk-left { background: transparent; box-shadow: none; }
.book-frame.is-portrait .bk-left::after { display: none; }

/* форзац — внутренняя сторона твердой обложки */
.endpaper { height: 100%; border-radius: var(--r) 0 0 var(--r);
  background:
    linear-gradient(270deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,0) 26%),
    radial-gradient(120% 90% at 40% 40%, #24231e 0%, #17160f 100%);
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.05); }

/* ---------- Посвящение: страница дорогого издания ---------- */
.leaf--end {
  padding: 0 9cqw 0 13cqw; /* оптический центр чуть дальше от корешка */
  background:
    radial-gradient(ellipse 85% 75% at 55% 48%, rgba(0,0,0,0) 55%, rgba(0,0,0,.045) 100%),
    var(--color-surface);
}
/* двойная тонкая рамка */
.leaf--end::before {
  content: ''; position: absolute; inset: 6cqw 5.5cqw 6cqw 8.5cqw; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  outline: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); outline-offset: -1.6cqw;
}
.end-kicker {
  position: absolute; top: 11cqw; left: 13cqw; right: 9cqw; margin: 0;
  font-family: var(--font-body); font-size: 2.3cqw !important; letter-spacing: .42em; padding-left: .42em;
  text-transform: uppercase; color: var(--color-text-faint) !important;
}
.leaf--end .orn { width: 30cqw; opacity: .8; margin-bottom: 8cqw; }
.leaf--end .end-line { font-size: 6.2cqw !important; line-height: 1.32 !important; margin-bottom: 0; letter-spacing: .005em; }
.end-rule { display: block; width: 9cqw; height: 1px; margin: 7.5cqw auto; background: color-mix(in srgb, var(--color-text) 35%, transparent); }
.end-btn {
  display: inline-flex; align-items: center; gap: 2.2cqw;
  padding: 3.4cqw 6.4cqw 3.4cqw 7cqw;
  font-family: var(--font-body); font-size: 2.6cqw; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none; background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 70%, transparent);
  border-radius: 0; transform: translateZ(0);
  outline: 1px solid color-mix(in srgb, var(--color-text) 32%, transparent); outline-offset: 1.1cqw;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, outline-offset .35s ease;
}
.end-btn svg { width: 3.6cqw; height: 3.6cqw; transition: transform .35s ease; }
.end-btn:hover { background: var(--color-text); color: var(--color-surface); outline-offset: 1.6cqw; }
.end-btn:hover svg { transform: translateX(.8cqw); }
.end-colophon {
  position: absolute; bottom: 11cqw; left: 13cqw; right: 9cqw; margin: 0;
  font-family: var(--font-logo); font-size: 2.4cqw !important; letter-spacing: .34em; padding-left: .34em;
  color: var(--color-text-faint) !important;
}

/* ---------- Торец книги справа: тонко и плотно, как у настоящего блока ---------- */
.book-frame.is-portrait .bk-board { top: -4px; bottom: -4px; right: -9px; border-radius: 0 12px 12px 0;
  box-shadow: 0 20px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05); }
.book-frame.is-portrait .bk-edge {
  top: 0; bottom: 0; right: -6px; width: 16px; border-radius: 0 10px 10px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, var(--color-surface) 0 .9px, color-mix(in srgb, var(--color-surface) 78%, #000) .9px 1.4px);
  box-shadow: none;
}
.book-frame.is-portrait.is-back .bk-edge { right: auto; left: -6px; border-radius: 10px 0 0 10px;
  background:
    linear-gradient(270deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, var(--color-surface) 0 .9px, color-mix(in srgb, var(--color-surface) 78%, #000) .9px 1.4px); }

/* Горы за книгой: фон body прозрачный, цвет страницы задает html (иначе фон body перекрывает fixed-сцену) */
.story-page { background: transparent; }

/* ---------- Подсказка «смахните»: контурная ладонь ведет пальцем справа налево ---------- */
.swipe-hint {
  position: absolute; z-index: 4; pointer-events: none;
  right: 8cqw; bottom: 27%; width: 38cqw; height: 14cqw;
  color: #2d363d; /* цвет тумана с фона страницы */
  transition: opacity .5s ease;
}
.swipe-hint__hand {
  position: absolute; right: 0; top: 0; width: 10.5cqw; height: 13.125cqw;
  transform-origin: 34.4% 5%;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
  opacity: 0;
  animation: sh-hand 2.6s infinite;
}
.swipe-hint__hand svg { display: block; width: 100%; height: 100%; overflow: visible;
  /* запястье растворяется в дымке */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.18) 86%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.18) 86%, transparent 98%); }
.swipe-hint__touch { /* точка касания под кончиком пальца */
  position: absolute; left: 34.4%; top: 5%; width: 4.6cqw; height: 4.6cqw;
  margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%;
  border: 1px solid rgba(206,216,224,.7); background: rgba(45,54,61,.45);
  opacity: 0; transform: scale(.4);
  animation: sh-touch 2.6s infinite;
}
.swipe-hint__trail { /* тонкий след, тянется за пальцем */
  position: absolute; top: .66cqw; right: 6.89cqw; width: 22cqw; height: 1px;
  background: linear-gradient(90deg, rgba(206,216,224,.85), rgba(206,216,224,0));
  transform-origin: right center; transform: scaleX(0); opacity: 0;
  animation: sh-trail 2.6s infinite;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
}
@keyframes sh-hand {
  0%   { opacity: 0; transform: translateX(2cqw) scale(1); animation-timing-function: ease-out; }
  8%   { opacity: 1; transform: translateX(0) scale(1); animation-timing-function: ease-in-out; }
  14%  { opacity: 1; transform: translateX(0) scale(.9); animation-timing-function: cubic-bezier(.55,0,.25,1); }
  46%  { opacity: 1; transform: translateX(-22cqw) rotate(-7deg) scale(.9); animation-timing-function: ease-out; }
  56%  { opacity: 0; transform: translateX(-24cqw) rotate(-9deg) scale(1); }
  100% { opacity: 0; transform: translateX(-24cqw) scale(1); }
}
@keyframes sh-touch {
  0%, 11% { opacity: 0; transform: scale(.4); }
  16%     { opacity: 1; transform: scale(1); }
  44%     { opacity: .8; transform: scale(.9); }
  54%     { opacity: 0; transform: scale(1.9); }
  100%    { opacity: 0; transform: scale(1.9); }
}
@keyframes sh-trail {
  0%, 14% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.55,0,.25,1); }
  46%     { opacity: 1; transform: scaleX(1); animation-timing-function: ease-out; }
  64%     { opacity: 0; transform: scaleX(1); }
  100%    { opacity: 0; transform: scaleX(1); }
}
/* после первого перелистывания подсказка больше не нужна */
.book-touched .swipe-hint { opacity: 0; }
.book-touched .swipe-hint * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .swipe-hint__hand { animation: none; opacity: .9; transform: none; }
  .swipe-hint__touch, .swipe-hint__trail { animation: none; }
}
/* книга и кнопки листания — поверх тумана над подвалом */
.story__wrap { position: relative; z-index: 2; }
.story__wrap { padding-bottom: clamp(6rem, 16vw, 8rem); }
.story-page .site-footer[data-mist]::before { height: calc(64px + var(--mist) * 84px); }

/* soft corners — same quiet radius as the rest of the site */
.leaf--end::before { border-radius: 1.6cqw; }
.end-btn { border-radius: 1cqw; }
.book-nav__btn { border-radius: 6px; }

/* hyperreal backgrounds — wide frame on desktop */
@media (min-width: 900px) {
  .story__stage {
    background:
      linear-gradient(180deg, rgba(8,10,12,.55) 0%, rgba(8,10,12,.35) 45%, rgba(8,10,12,.7) 100%),
      url(./assets/bg2-towers-d.webp) center / cover no-repeat;
  }
}

/* Page label hidden visually, kept for screen readers */
.book-nav__count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-width: 0; }

/* raised buttons with inner hairline frame */
.book-nav__btn {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 1px rgba(0,0,0,.18),
              0 1px 2px rgba(0,0,0,.25), 0 6px 16px -6px rgba(0,0,0,.5);
}
.book-nav__btn::after { content: ''; position: absolute; inset: 3px; border-radius: 4px; border: 1px solid rgba(244,242,236,.22); pointer-events: none; }
.end-btn {
  position: relative; outline: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 100%, #fff 40%) 0%, color-mix(in srgb, var(--color-surface) 88%, #000 12%) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 55%, transparent),
              inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.1),
              0 .3cqw .6cqw rgba(0,0,0,.18), 0 2cqw 4cqw -1.4cqw rgba(0,0,0,.4);
}
.end-btn::after { content: ''; position: absolute; inset: .8cqw; border-radius: .5cqw; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); pointer-events: none; }
.end-btn:hover { outline: none; }
.end-btn:hover::after { border-color: color-mix(in srgb, var(--color-surface) 35%, transparent); }

/* ==========================================================================
   Твердый переплет: материал обложки, шарнир у корешка, тиснение, толщина блока
   ========================================================================== */
.book { --bt: 10px; }
.cover__relief { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; }
.cover__relief::before, .cover__relief::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* корешок скругляется под переплет, рядом — шарнирная канавка */
.cover__relief::before {
  background: linear-gradient(90deg,
    rgba(0,0,0,.36) 0, rgba(0,0,0,.18) .9%, rgba(255,255,255,.10) 1.9%, rgba(255,255,255,0) 2.5%,
    rgba(0,0,0,0) 2.6%, rgba(0,0,0,.38) 3.05%, rgba(0,0,0,.66) 3.35%, rgba(255,255,255,.20) 3.75%,
    rgba(255,255,255,.06) 4.6%, rgba(255,255,255,0) 6.2%);
}
.cover--logo .cover__relief::before { transform: scaleX(-1); }
/* свет на картоне, мягкая выпуклость к краям, зерно материала, скругленный кант */
.cover__relief::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .13 0 0 0 -.055'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    linear-gradient(116deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,.24) 100%),
    radial-gradient(140% 95% at 32% 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 3px 3px -2px rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -7px 9px -5px rgba(0,0,0,.5),
    inset -7px 0 9px -6px rgba(0,0,0,.4);
}
.cover--logo .cover__relief::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 3px 3px -2px rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 -7px 9px -5px rgba(0,0,0,.5),
    inset 7px 0 9px -6px rgba(0,0,0,.4);
}
/* рамка — вдавленное фольгированное тиснение */
.cover--portrait::before {
  border-color: rgba(236,232,222,.42);
  box-shadow: 0 1px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.05);
}
/* имя — серебряная фольга, вдавленная в переплет */
.cover--portrait .cover__cap-name {
  background: linear-gradient(180deg, #fffdf7 0%, #ebe6d9 34%, #a9a395 50%, #f3efe5 66%, #cfc9ba 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -.5px 0 rgba(255,255,255,.18));
}
.cover--portrait .cover__years, .cover--portrait .cover__foot { text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 -.5px 0 rgba(255,255,255,.08); }
/* логотип на задней обложке — блинтовое тиснение */
.cover--logo .cover__logo { filter: drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 -1px 0 rgba(255,255,255,.14)) drop-shadow(0 3px 12px rgba(0,0,0,.35)); }

/* ---------- Закрытая книга на телефоне: под обложкой — блок листов со скругленными углами ---------- */
.book-frame { --paper: color-mix(in srgb, var(--color-surface) 55%, #e6dcc6); }
.book-frame.is-portrait:not(.is-open):not(.is-moving):not(.is-closing) .bk-board {
  display: block; opacity: 1; z-index: 1; top: 0; left: 0; right: auto; bottom: auto; width: 100%; height: 100%;
  transform: none; overflow: visible;
  background: var(--paper);
  border-radius: 0 2.6% 2.6% 0 / 0 1.6% 1.6% 0;
  box-shadow:
    1px 1px 0 color-mix(in srgb, var(--paper) 94%, #6b5a3c),
    2px 2px 0 color-mix(in srgb, var(--paper) 87%, #6b5a3c),
    3px 3px 0 color-mix(in srgb, var(--paper) 89%, #6b5a3c),
    4px 4px 0 color-mix(in srgb, var(--paper) 82%, #6b5a3c),
    5px 5px 0 color-mix(in srgb, var(--paper) 85%, #6b5a3c),
    6px 6px 0 color-mix(in srgb, var(--paper) 78%, #6b5a3c),
    7px 7px 0 color-mix(in srgb, var(--paper) 81%, #6b5a3c),
    8px 8px 0 color-mix(in srgb, var(--paper) 73%, #6b5a3c),
    9px 9px 0 color-mix(in srgb, var(--paper) 76%, #6b5a3c),
    10px 10px 0 color-mix(in srgb, var(--paper) 69%, #6b5a3c),
    11px 12px 10px rgba(0,0,0,.28),
    6px 22px 30px -6px rgba(0,0,0,.45);
}
.book-frame.is-portrait:not(.is-open):not(.is-moving):not(.is-closing) .bk-board::before, .book-frame.is-portrait:not(.is-open):not(.is-moving):not(.is-closing) .bk-board::after { content: none; }
.book-frame.is-portrait.is-back:not(.is-moving):not(.is-closing) .bk-board {
  border-radius: 2.6% 0 0 2.6% / 1.6% 0 0 1.6%;
  box-shadow:
    -1px 1px 0 color-mix(in srgb, var(--paper) 94%, #6b5a3c),
    -2px 2px 0 color-mix(in srgb, var(--paper) 87%, #6b5a3c),
    -3px 3px 0 color-mix(in srgb, var(--paper) 89%, #6b5a3c),
    -4px 4px 0 color-mix(in srgb, var(--paper) 82%, #6b5a3c),
    -5px 5px 0 color-mix(in srgb, var(--paper) 85%, #6b5a3c),
    -6px 6px 0 color-mix(in srgb, var(--paper) 78%, #6b5a3c),
    -7px 7px 0 color-mix(in srgb, var(--paper) 81%, #6b5a3c),
    -8px 8px 0 color-mix(in srgb, var(--paper) 73%, #6b5a3c),
    -9px 9px 0 color-mix(in srgb, var(--paper) 76%, #6b5a3c),
    -10px 10px 0 color-mix(in srgb, var(--paper) 69%, #6b5a3c),
    -11px 12px 10px rgba(0,0,0,.28),
    -6px 22px 30px -6px rgba(0,0,0,.45);
}
.book-frame.is-portrait:not(.is-open):not(.is-moving):not(.is-closing) .bk-edge { opacity: 0; }

/* ---------- Бумага: волокно, мягкий изгиб листа к корешку и к обрезу ---------- */
.leaf {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 .16 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--sheen) 22%, rgba(255,255,255,0) 55%, var(--shade1) 88%, var(--shade2) 100%),
    var(--color-surface);
}
.leaf--end {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 .16 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    radial-gradient(ellipse 85% 75% at 55% 48%, rgba(0,0,0,0) 55%, rgba(0,0,0,.05) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--sheen) 22%, rgba(255,255,255,0) 55%, var(--shade1) 88%, var(--shade2) 100%),
    var(--color-surface);
}
.book { --sheen: rgba(255,255,255,.35); --shade1: rgba(0,0,0,.035); --shade2: rgba(0,0,0,.07); }
[data-theme='dark'] .book { --sheen: rgba(255,255,255,.025); --shade1: rgba(0,0,0,.12); --shade2: rgba(0,0,0,.22); }
/* последняя страница: рамка и орнамент вдавлены в бумагу, как блинтовое тиснение */
.leaf--end::before {
  box-shadow: 0 1px 0 rgba(255,255,255,.85), inset 0 1px 0 rgba(0,0,0,.06);
}
.leaf--end .orn { filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(0,0,0,.18)); }
.leaf--end .end-line { text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.end-rule { box-shadow: 0 1px 0 rgba(255,255,255,.85); }
[data-theme='dark'] .leaf--end::before { box-shadow: 0 1px 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(0,0,0,.4); }
[data-theme='dark'] .leaf--end .orn { filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 -1px 0 rgba(255,255,255,.08)); }
[data-theme='dark'] .leaf--end .end-line, [data-theme='dark'] .end-rule { text-shadow: 0 1px 0 rgba(0,0,0,.6); box-shadow: none; }
.book:not(.is-portrait) .page--left .leaf {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 .16 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    linear-gradient(270deg, rgba(0,0,0,0) 0%, var(--sheen) 22%, rgba(255,255,255,0) 55%, var(--shade1) 88%, var(--shade2) 100%),
    var(--color-surface);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .book { --sheen: rgba(255,255,255,.025); --shade1: rgba(0,0,0,.12); --shade2: rgba(0,0,0,.22); } }