/* ============================================================
   КУЛЬТУРНЫЙ КОД ПОДОЛЬСКА — стили
   ============================================================ */

@font-face{font-family:'Ruslan Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('ruslan-display-cyrillic-400-normal-CrNaAs1F.woff2') format('woff2');
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;}
@font-face{font-family:'Ruslan Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('ruslan-display-latin-400-normal-Bw2GNpT4.woff2') format('woff2');}
@font-face{font-family:'Ruslan Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('ruslan-display-math-400-normal-d5p4cqMz.woff2') format('woff2');
  unicode-range:U+2190,U+2192,U+2194-21AE;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('golos-text-cyrillic-400-normal-C7us6pn1.woff2') format('woff2');
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('golos-text-latin-400-normal-Coi1FYaD.woff2') format('woff2');}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('golos-text-cyrillic-600-normal-lpQ9rVRR.woff2') format('woff2');
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('golos-text-latin-600-normal-Bhk8uV1U.woff2') format('woff2');}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('golos-text-cyrillic-700-normal-BKmY45Ip.woff2') format('woff2');
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('golos-text-latin-700-normal-CxmN_Nfd.woff2') format('woff2');}

:root{
  --paper:#efe6d5;
  --paper-deep:#e2d6bf;
  --dark-bg:#15120f;
  --dark-surface:#201b17;
  --ink:#1d1812;
  --ink-soft:#514738;
  --cream:#f8f1e3;
  --cream-soft:rgba(248,241,227,.72);
  --line:rgba(29,24,18,.14);
  --line-dark:rgba(248,241,227,.16);
  --accent:#a64f40;
  --wash:#8f7868;
  /* дополнительная палитра для атмосферы глав и мелких акцентов */
  --slate-blue:#5c6d80;
  --brick:#a1503f;
  --burgundy:#5c2430;
  --lilac:#c9b9c9;
  --gold:#d69a7b;
  --shadow-soft:0 24px 70px -30px rgba(15,12,9,.55);
  --shadow-lift:0 14px 34px -18px rgba(15,12,9,.5);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --parallax:0;
  --chapter-visibility:1;
  --reveal-delay:0ms;
  --parallax-amount:34px;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-anchor:none;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Golos Text',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3{
  margin:0;
  font-family:'Golos Text',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}
/* Ruslan Display — только для логотипа, номеров глав, печатей и подписей */
.numeral{font-family:'Ruslan Display',serif;font-weight:400;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.kicker{
  font-family:'Golos Text',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .9em;
}
.dark-kicker{color:var(--accent,#a64f40);}

/* ---------- reveal-on-scroll ---------- */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out) var(--reveal-delay),transform .9s var(--ease-out) var(--reveal-delay);
  will-change:transform,opacity;
}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal-on-scroll{transition:opacity .01s linear;transform:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:5vh 6vw 6vh;
  background:
    radial-gradient(120% 90% at 15% -10%, #3a2c22 0%, transparent 55%),
    radial-gradient(140% 120% at 100% 110%, #2c211b 0%, transparent 60%),
    linear-gradient(160deg,#191512,#100d0b 70%);
  color:var(--cream);
  overflow:hidden;
}
.hero-noise{
  position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(circle at 1px 1px, rgba(248,241,227,.06) 1px, transparent 0);
  background-size:3px 3px;
  opacity:.5;
  pointer-events:none;
}
.binary{
  position:absolute;z-index:1;
  font-family:monospace;
  font-size:clamp(.7rem,1.6vw,1rem);
  letter-spacing:.4em;
  color:rgba(248,241,227,.08);
  white-space:nowrap;
  pointer-events:none;
  animation:drift 34s linear infinite;
}
.binary-a{top:14%;left:-10%;animation-duration:46s;}
.binary-b{bottom:18%;right:-10%;animation-duration:38s;animation-direction:reverse;}
@keyframes drift{from{transform:translateX(0);}to{transform:translateX(12vw);}}
@media (prefers-reduced-motion:reduce){.binary{animation:none;}}

.hero-bar{position:relative;z-index:4;}
.brand{
  font-family:'Ruslan Display',serif;
  font-size:1.05rem;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--cream);
}
.brand i{color:var(--gold);font-style:normal;}

.hero-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  will-change:transform;
}
.hero-bg-image{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.02);
}
/* На десктопе возвращена кинематографическая подложка с героями.
   На мобильном фон-картинка скрыт: композицию собирают семь живых WebP
   и три анимированные линии-ленты, без геометрических зданий и деревьев. */
.has-js:not(.motion-static) .hero-bg-image{opacity:.9;filter:saturate(.92) brightness(.9) contrast(1.03);}
@media (max-width:767px){
  .hero-bg{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .has-js:not(.motion-static) .hero-bg-image{opacity:1;filter:none;}
}

/* ---------- слоистая композиция первого экрана ----------
   Живые WebP-портреты показываются ТОЛЬКО на мобильном (≤767px),
   где фон — чистая атмосфера без людей. На десктопе и планшете
   используется уже готовый утверждённый коллаж
   hero-cultural-code-desktop(-approved).jpg, где все герои уже
   нарисованы внутри — повторный показ отдельных портретов поверх
   него давал задвоенные, полупрозрачные лица. */
.hero-layers{
  position:absolute;inset:0;z-index:2;
  display:none;
  align-items:flex-end;justify-content:center;
  pointer-events:none;
}
@media (max-width:767px){
  .has-js:not(.motion-static) .hero-layers{display:flex;}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .has-js .hero-layers{display:flex !important;}
  .hero-figure{opacity:1 !important;transform:translateX(-50%) !important;}
}
@media (prefers-reduced-motion:reduce){
  .hero-ribbon-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
}

.hero-layers-back,.hero-layers-front{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:center;
}
.hero-layers-back{z-index:1;opacity:.82;}
.hero-layers-front{z-index:2;}

/* Плавные линии-ленты — тёплая музейная интерпретация триколора. */
.hero-ribbons{
  position:absolute;inset:-4%;z-index:1;pointer-events:none;
  opacity:.78;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));
}
.hero-ribbons svg{display:block;width:100%;height:100%;overflow:visible;}
.hero-ribbon-line{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.hero-ribbon-set-main .hero-ribbon-line{stroke-width:5.5;opacity:.72;}
.hero-ribbon-set-echo .hero-ribbon-line{stroke-width:2.4;opacity:.23;}
.ribbon-cream{stroke:#efe6d6;}
.ribbon-blue{stroke:#7896a8;}
.ribbon-red{stroke:#ad5b4d;}

.hero-figure{
  position:absolute;bottom:0;left:50%;
  height:52%;width:auto;max-width:38vw;
  object-fit:contain;object-position:bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.55));
  /* без transition на transform — heroIntro() в site-motion.js уже
     анимирует opacity/y/scale через GSAP, конкурирующий CSS-переход
     только тормозит и рассинхронизирует появление фигур. */
}
/* Desktop 1280–1919px: панорама слева направо, свободное тёмное
   пространство сверху по центру для заголовка — фигуры занимают
   нижние ~55% экрана и не поднимаются в зону текста. */
.hero-figure-tchaikovsky{left:40%;height:38%;}
.hero-figure-pokhlebkin{left:52%;height:42%;}
.hero-figure-turchin{left:64%;height:37%;}
.hero-figure-nagaev{left:84%;height:35%;}
.hero-figure-talalikhin{left:10%;height:34%;}
.hero-figure-baramzina{left:24%;height:36%;}
.hero-figure-toys{left:70%;height:19%;max-width:22vw;}

/* Невысокие desktop-окна (например 1366×768) — сжимаем панораму
   ещё немного, чтобы гарантированно оставить зазор под текстом. */
@media (min-width:1280px) and (max-height:820px){
  .hero-figure{height:32%;}
  .hero-figure-toys{height:15%;}
  .hero-copy{margin-top:4vh;}
}

/* Ultrawide 1920px+: не растягиваем композицию — добавляем поле
   по краям и увеличиваем амплитуду фоновых слоёв. */
@media (min-width:1920px){
  .hero-layers-back,.hero-layers-front{max-width:1800px;margin:0 auto;left:0;right:0;}
  .hero-layers-back{opacity:.7;}
}

/* Tablet 768–1279px: два плана — высокие мужские портреты сзади,
   Талалихин/Барамзина/игрушки крупнее спереди, лица не перекрываются. */
@media (max-width:1279px) and (min-width:768px){
  .hero-copy{margin-top:4vh;}
  .hero-figure{height:36%;}
  .hero-layers-back{opacity:.55;transform:scale(.94) translateY(-2%);}
  .hero-figure-tchaikovsky{left:30%;height:34%;}
  .hero-figure-pokhlebkin{left:48%;height:39%;}
  .hero-figure-turchin{left:66%;height:33%;}
  .hero-figure-nagaev{left:86%;height:31%;}
  .hero-figure-talalikhin{left:8%;height:33%;}
  .hero-figure-baramzina{left:28%;height:36%;}
  .hero-figure-toys{left:74%;height:18%;}
}

/* Mobile 320–767px: все семь историй сразу. Четыре героя стоят выше
   и глубже, три — ниже и ближе, образуя живой шахматный ритм. */
@media (max-width:767px){
  .hero{padding-top:1vh;}
  .hero-copy{margin-top:2vh;}
  .hero-ribbons{inset:-8% -52%;opacity:.72;transform:rotate(-7deg);}
  .hero-ribbon-set-main .hero-ribbon-line{stroke-width:4;opacity:.68;}
  .hero-ribbon-set-echo .hero-ribbon-line{stroke-width:2;opacity:.2;}
  .hero-figure{filter:drop-shadow(0 14px 18px rgba(0,0,0,.58));}
  .hero-layers-back{opacity:.74;}
  .hero-layers-front{transform:none;}
  /* Задний ряд — четыре героя, ниже и меньше, с запасом под текстом
     первого экрана (граница текста ~56% высоты экрана на 320–430px). */
  .hero-figure-tchaikovsky{left:12%;height:22%;bottom:21%;max-width:25vw;}
  .hero-figure-pokhlebkin{left:37%;height:23%;bottom:25%;max-width:25vw;}
  .hero-figure-turchin{left:62%;height:22%;bottom:21%;max-width:25vw;}
  .hero-figure-nagaev{left:87%;height:23%;bottom:25%;max-width:25vw;}
  /* Передний ряд — три героя крупнее, у самого низа экрана. */
  .hero-figure-talalikhin{left:18%;height:32%;bottom:0;max-width:33vw;}
  .hero-figure-baramzina{left:82%;height:33%;bottom:0;max-width:33vw;}
  .hero-figure-toys{left:50%;height:19%;bottom:0;max-width:30vw;}
}
/* 320–360px — тот же ритм, но с чуть меньшим передним рядом, чтобы
   гарантированно остался зазор под заголовком на самых узких экранах. */
@media (max-width:360px){
  .hero-copy{margin-top:1vh;}
  .hero-note{display:none;}
  .hero-figure-tchaikovsky,.hero-figure-turchin{height:20%;bottom:20%;}
  .hero-figure-pokhlebkin,.hero-figure-nagaev{height:21%;bottom:24%;}
  .hero-figure-talalikhin,.hero-figure-baramzina{height:29%;}
  .hero-figure-toys{height:17%;}
}
/* Короткие экраны (320×568 и подобные) — освобождаем ещё немного
   места между текстом и фигурами. */
@media (max-height:620px) and (max-width:767px){
  .hero-copy{margin-top:0;}
  .hero-note{display:none;}
  .hero-subtitle{margin-bottom:0;}
  .hero-figure-tchaikovsky,.hero-figure-turchin{height:19%;bottom:19%;}
  .hero-figure-pokhlebkin,.hero-figure-nagaev{height:20%;bottom:23%;}
  .hero-figure-talalikhin,.hero-figure-baramzina{height:29%;}
  .hero-figure-toys{height:17%;}
}

.hero-copy{
  position:relative;z-index:4;
  align-self:start;
  justify-self:center;
  max-width:min(76vw,900px);
  padding:0 6vw;
  margin:6vh auto 0;
  text-align:center;
}
@media (min-width:768px){
  .hero-copy::before{
    content:'';position:absolute;z-index:-1;inset:-3.2rem -5rem;
    background:radial-gradient(ellipse at center,rgba(12,9,7,.76) 0%,rgba(12,9,7,.48) 46%,transparent 74%);
    pointer-events:none;
  }
}
.hero-copy .kicker{color:var(--gold);}
.hero-copy h1{
  display:flex;flex-direction:column;align-items:center;gap:0;
  line-height:.86;
  margin:0 0 .5em;
  text-transform:uppercase;
  /* без CSS-анимации: появление первого экрана целиком ведёт
     heroIntro() в site-motion.js, чтобы не было двойного fade-in */
}
.hero-copy h1 .word-big{
  font-size:clamp(2.6rem,8.4vw,6.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  text-shadow:0 6px 40px rgba(0,0,0,.7);
}
.hero-copy h1 .word-accent{
  font-family:'Ruslan Display',serif;
  font-weight:400;
  font-size:clamp(3.4rem,11vw,8.8rem);
  color:var(--gold);
  letter-spacing:.01em;
  line-height:.8;
  text-shadow:0 8px 46px rgba(0,0,0,.7);
}
.hero-copy h1 .word-line{
  font-size:clamp(1.6rem,4.6vw,3rem);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--cream-soft);
  text-shadow:0 4px 30px rgba(0,0,0,.7);
}
@keyframes rise-in{from{opacity:0;transform:translateY(38px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .hero-copy h1,.hero-subtitle,.hero-note,.hero-copy .primary{animation:none !important;opacity:1;transform:none;}
}

.hero-subtitle{
  font-family:'Golos Text',sans-serif;
  font-weight:600;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--cream);
  max-width:520px;
  margin:0 auto .3em;
}
.hero-note{
  color:var(--cream-soft);
  max-width:480px;
  margin:0 auto;
  font-size:.92rem;
}
/* На десктопе с активной панорамой героев освобождаем вертикальное
   пространство — длинная инструкция дублирует .hero-subtitle
   и уходит в текст ниже по scroll-cue. На мобильном, планшете и в
   статичном режиме (reduced-motion / без панорамы) остаётся видимой. */
@media (min-width:1280px){
  .has-js:not(.motion-static) .hero-note{display:none;}
  .has-js:not(.motion-static) .hero-subtitle{display:none;}
}
.hero-copy .primary{margin-top:.9em;}
.magnetic{transition:transform .18s var(--ease-out),box-shadow .4s var(--ease);}

.scroll-cue{
  position:relative;z-index:2;
  margin-top:6vh;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-soft);
  display:flex;align-items:center;gap:.6em;
}
.scroll-cue span{display:inline-block;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- primary / secondary buttons ---------- */
.primary,.secondary{
  position:relative;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.95em 1.7em;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:2px;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .3s ease;
}
.primary{background:var(--accent,#a64f40);color:#fff;box-shadow:var(--shadow-lift);}
.primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.primary:hover::before{transform:translateX(120%);}
.primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(0,0,0,.5);}
.primary:active{transform:translateY(-1px);}
.primary span{transition:transform .35s var(--ease);}
.primary:hover span{transform:translateX(4px);}

.secondary{background:transparent;border:1.5px solid currentColor;color:inherit;}
.secondary:not(:disabled):hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.secondary:disabled{opacity:.4;cursor:not-allowed;}

.text-button{
  font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent,#a64f40);
  display:inline-flex;align-items:center;gap:.4em;
  border-bottom:1.5px solid transparent;
  transition:border-color .3s ease,gap .3s ease,opacity .3s ease;
}
.text-button:not(:disabled):hover{border-color:currentColor;gap:.6em;}
.text-button:disabled{opacity:.45;cursor:not-allowed;}
.light-text{color:var(--cream-soft);}
.light-text:not(:disabled):hover{color:var(--cream);}

/* ============================================================
   TABLE OF CONTENTS / INTRO
   ============================================================ */
.intro{
  position:relative;
  padding:11vh 6vw;
  background:var(--dark-bg);
  color:var(--cream);
}
.section-heading h2{
  font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.02;
  text-transform:uppercase;
  margin-bottom:.5em;
}
.intro-copy{
  max-width:760px;
  color:var(--cream-soft);
  font-size:1.08rem;
  margin-bottom:4vh;
}
.filmstrip-wrap{
  position:sticky;top:0;z-index:40;
  background:rgba(20,17,14,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  box-shadow:0 12px 24px -20px rgba(0,0,0,.75);
}
@media (max-width:900px){.filmstrip-wrap{position:static;}}

.chapter-nav{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.chapter-nav a{
  position:relative;
  flex:1 1 0;
  scroll-snap-align:start;
  width:auto;min-width:0;
  background:var(--dark-surface);
  padding:.42rem .65rem;
  min-height:58px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.48rem;
  text-decoration:none;color:var(--cream);
  border-right:1px solid var(--line-dark);
  transition:background .4s var(--ease);
}
.chapter-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.chapter-nav a:hover,.chapter-nav a:focus-visible{background:#2a231d;}
.chapter-nav a:hover::after,.chapter-nav a:focus-visible::after{transform:scaleX(1);}
.chapter-nav a.is-current{background:#2a231d;}
.chapter-nav a.is-current::after{transform:scaleX(1);}
.chapter-nav b,.chapter-nav small,.chapter-nav .nav-state{display:none;}
.chapter-nav strong{
  min-width:0;font-size:clamp(.56rem,.72vw,.72rem);letter-spacing:.015em;line-height:1.12;
  overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.chapter-nav .nav-state{
  margin-top:.2em;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(248,241,227,.4);
}
.chapter-nav a.is-passed .nav-state{color:#8fbf8a;}

.nav-icon{
  flex:0 0 auto;width:22px;height:22px;margin:0;
  display:flex;align-items:center;justify-content:center;
  color:#d69a7b;opacity:.85;
}
.nav-icon svg{width:100%;height:100%;display:block;transition:transform .38s ease,filter .38s ease;}
@media (prefers-reduced-motion:reduce){.nav-icon svg{transition:none !important;}}
.chapter-nav a:hover .nav-icon-talalikhin svg,.chapter-nav a:focus-visible .nav-icon-talalikhin svg{transform:translateX(3px);}
.chapter-nav a:hover .nav-icon-baramzina svg,.chapter-nav a:focus-visible .nav-icon-baramzina svg{transform:scale(1.1);filter:drop-shadow(0 0 2px currentColor);}
.chapter-nav a:hover .nav-icon-tchaikovsky svg,.chapter-nav a:focus-visible .nav-icon-tchaikovsky svg{transform:rotate(-10deg);}
.chapter-nav a:hover .nav-icon-pokhlebkin svg,.chapter-nav a:focus-visible .nav-icon-pokhlebkin svg{transform:translateY(-3px);}
.chapter-nav a:hover .nav-icon-turchin svg,.chapter-nav a:focus-visible .nav-icon-turchin svg{filter:brightness(1.6) drop-shadow(0 0 3px currentColor);}
.chapter-nav a:hover .nav-icon-nagaev svg,.chapter-nav a:focus-visible .nav-icon-nagaev svg{transform:translateX(2px) rotate(-3deg);}
.chapter-nav a:hover .nav-icon-toy svg,.chapter-nav a:focus-visible .nav-icon-toy svg{transform:scale(1.15);}
@media (prefers-reduced-motion:reduce){
  .chapter-nav a:hover .nav-icon svg,.chapter-nav a:focus-visible .nav-icon svg{transform:none !important;filter:none !important;}
}

/* ============================================================
   ГЛАВЫ
   ============================================================ */
.chapter{
  position:relative;
  padding:12vh 6vw;
  overflow:hidden;
  isolation:isolate;
  scroll-margin-top:64px; /* учитывает высоту закреплённой .filmstrip-wrap (≥901px) */
}
@media (max-width:900px){.chapter{scroll-margin-top:0;}}
.chapter-light{background:var(--paper);color:var(--ink);}
.chapter-dark{background:var(--dark-bg);color:var(--cream);}
.chapter-dark .kicker{color:#e7a98c;}

.chapter-grain{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size:4px 4px;
  opacity:.04;
}

.chapter::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% -8%, var(--accent) 0%, transparent 62%);
  opacity:.14;
  transform:translateY(calc(var(--parallax,0) * var(--parallax-amount) * -1));
  transition:transform .1s linear;
}
.chapter-dark::before{opacity:.2;}

.chapter-header{
  position:relative;z-index:2;
  display:flex;align-items:flex-start;gap:1.4em;
  margin-bottom:6vh;
}
.chapter-number{
  font-family:'Ruslan Display',serif;
  font-size:clamp(4.4rem,10vw,8.5rem);
  color:var(--accent);
  line-height:.85;
  opacity:.9;
}
.chapter-header h2{
  font-size:clamp(2rem,4.4vw,3.4rem);
  text-transform:uppercase;
  line-height:1.02;
  margin:.15em 0;
}
.chapter-subtitle{
  font-size:1.08rem;
  max-width:34em;
  opacity:.85;
}

/* ---------- многослойный параллакс (единая моушен-система) ----------
   depth-1 дальний фон · depth-2 архивная сетка/мотив · depth-3 крупное
   слово · depth-4 заголовок (лёгкое проявление) · depth-5 портрет
   · depth-6 передний план. Управляется --center-distance/--enter-progress
   /--exit-progress, которые считает initMotionSystem() в site.js. */
.depth-1{transform:translate3d(0, calc(var(--center-distance,0) * 0.045px), 0);}
.depth-2{transform:translate3d(0, calc(var(--center-distance,0) * -0.09px), 0) rotate(calc(var(--center-distance,0) * -0.004deg));}
.depth-3{transform:translate3d(0, calc(var(--center-distance,0) * 0.13px), 0);}
.depth-4{opacity:calc(0.35 + var(--enter-progress,1) * 0.65);}
.depth-5{transform:translate3d(0, calc(var(--center-distance,0) * 0.16px), 0) scale(calc(0.96 + var(--enter-progress,1) * 0.06 + var(--exit-progress,0) * 0.04));}
.depth-6{transform:translate3d(calc(var(--center-distance,0) * 0.02px), calc(var(--center-distance,0) * 0.24px), 0) scale(calc(0.92 + var(--enter-progress,1) * 0.1 + var(--exit-progress,0) * 0.08));}
@media (prefers-reduced-motion:reduce){
  .depth-1,.depth-2,.depth-3,.depth-5,.depth-6{transform:none !important;}
  .depth-4{opacity:1 !important;}
}

.depth-word{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  font-family:'Ruslan Display',serif;
  font-size:clamp(5rem,22vw,16rem);
  line-height:.8;
  color:currentColor;
  opacity:.05;
  white-space:nowrap;
  letter-spacing:-.02em;
}

/* декоративный мотив атмосферы главы */
.chapter-motif{
  position:absolute;z-index:0;pointer-events:none;
  color:var(--accent);opacity:.16;
  width:min(46vw,420px);
}
.chapter-motif-flight{top:6%;left:2%;width:min(30vw,260px);}
.chapter-motif-focus{top:8%;right:4%;width:min(30vw,260px);}
.chapter-motif-music{top:2%;left:0;right:0;width:100%;opacity:.12;}
.chapter-motif-archive{top:6%;right:2%;width:min(32vw,280px);}
.chapter-motif-cybernetics{top:4%;left:50%;transform:translateX(-50%);width:min(60vw,420px);opacity:.1;}
.chapter-motif-navigation{bottom:4%;right:2%;width:min(32vw,280px);}
.chapter-motif-craft{bottom:-4%;right:-2%;width:min(34vw,300px);opacity:.13;}

.editorial-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:5vw;
  align-items:start;
}
.portrait-right .editorial-grid{grid-template-columns:1.15fr .85fr;}
.portrait-right .portrait-stage{order:2;}
.portrait-right .story-copy{order:1;}
.portrait-right .story-video,.portrait-right .media-lab{order:3;}

.portrait-stage{
  position:relative;
  transform:translateY(calc(var(--parallax,0) * var(--parallax-amount) * .4));
  /* transition НЕ используется: GSAP ведёт transform этого элемента
     scroll-scrubbed анимацией (depth-5) — CSS-transition поверх нее
     не даёт значению синхронно следовать за скроллом и «тормозит»
     каждое обновление. */
}
.character-cutout{
  width:100%;
  max-height:74vh;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
  transition:transform .6s var(--ease);
}
.portrait-stage:hover .character-cutout{transform:scale(1.015) translateY(-4px);}
.depth-foreground{
  position:absolute;left:0;bottom:0;width:46%;max-width:220px;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.4));
}

/* ---------- варианты композиции по атмосфере главы ---------- */

/* 01 · ТАЛАЛИХИН — полёт: диагональ, срез портрета, след по курсору */
.layout-flight .portrait-stage{clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);}
.layout-flight .chapter-header{align-items:flex-end;}
.layout-flight .accent-line{width:96px;transform:rotate(-3deg);transform-origin:left;}

/* 02 · БАРАМЗИНА — фокус: симметрия, тишина, портрет в мягкой рамке-диафрагме */
.layout-focus .editorial-grid{align-items:center;}
.layout-focus .portrait-stage{
  clip-path:inset(0 round 2px);
  box-shadow:0 0 0 1px var(--line),0 0 0 14px transparent;
  outline:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:14px;
}
.layout-focus .chapter-subtitle{max-width:28em;}

/* 03 · ЧАЙКОВСКИЙ — музыка: много воздуха, узкая колонка текста */
.layout-music .story-copy{max-width:36em;}
.layout-music .editorial-grid{gap:7vw;padding-top:2vh;}
.layout-music .lead{font-size:1.5rem;}

/* 04 · ПОХЛЁБКИН — архив: карточка-вырезка с рваным краем */
.layout-archive .story-copy{
  background:rgba(128,90,50,.06);
  padding:2em 2.2em;
  clip-path:polygon(0 0,98% 0%,100% 3%,100% 97%,97% 100%,2% 100%,0 96%);
}
.layout-archive .character-cutout{filter:drop-shadow(0 30px 40px rgba(0,0,0,.3)) sepia(.18) saturate(1.05);}

/* 05 · ТУРЧИН — кибернетика: моноширинные метки, тихий скан-эффект */
.layout-cybernetics .kicker,.layout-cybernetics .story-heading{font-family:monospace;letter-spacing:.14em;}
.layout-cybernetics .portrait-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(124,140,95,.05) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay;
}
.layout-cybernetics .accent-line{
  position:relative;
}
.layout-cybernetics .accent-line::after{
  content:'';position:absolute;left:0;top:0;width:2px;height:100%;background:currentColor;
  animation:cursor-blink 1.4s steps(1) infinite;
}
@keyframes cursor-blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.layout-cybernetics .accent-line::after{animation:none;}}

/* 06 · НАГАЕВ — навигация: портрет в иллюминаторе, курс вдоль текста */
.layout-navigation .portrait-stage{
  clip-path:ellipse(58% 54% at 50% 46%);
}
.layout-navigation .story-copy{border-right:1px dashed var(--line);padding-right:1.6em;}
.layout-navigation.portrait-right .story-copy{border-right:none;border-left:1px dashed var(--line);padding-right:0;padding-left:1.6em;}

/* 07 · БАБЕНСКАЯ ИГРУШКА — ремесло: тепло, лёгкий поворот на hover */
.layout-craft .portrait-stage:hover .character-cutout{transform:rotate(-1.2deg) scale(1.02);}
.layout-craft .story-copy{
  background:rgba(160,90,40,.05);
  border-radius:18px;
  padding:2em 2.2em;
}

@media (max-width:980px){
  .layout-flight .portrait-stage,.layout-focus .portrait-stage,.layout-navigation .portrait-stage{clip-path:none;outline:none;}
  .layout-archive .story-copy,.layout-craft .story-copy{clip-path:none;padding:1.6em;}
  .layout-navigation .story-copy,.layout-navigation.portrait-right .story-copy{border:none;padding:0;}
}

.story-copy{max-width:52em;}
.accent-line{display:block;width:56px;height:3px;background:var(--accent);margin-bottom:1.4em;}
.lead{font-size:1.3rem;line-height:1.5;font-weight:600;margin-bottom:1.2em;}
.story-heading{
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9em;
}
.story-copy p{font-size:1.02rem;opacity:.92;margin-top:.9em;}
.story-copy p:first-of-type{margin-top:0;}

blockquote{
  margin:1.8em 0 1.6em;
  padding:1.2em 1.4em;
  background:rgba(128,110,90,.1);
  border-left:3px solid var(--accent);
  font-size:.92rem;
}
blockquote strong{
  display:block;font-size:.68rem;letter-spacing:.16em;color:var(--accent);margin-bottom:.4em;
}

.more-button{margin-top:.4em;}
.more-icon{
  display:inline-block;width:1.2em;text-align:center;
  transition:transform .35s var(--ease);
}
.more-button[aria-expanded="true"] .more-icon{transform:rotate(180deg);}

.expanded-story{
  margin-top:1.6em;
  padding-top:1.6em;
  border-top:1px dashed currentColor;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .4s var(--ease),max-height .5s var(--ease);
}
.expanded-story.is-open{opacity:1;max-height:4000px;}
@media (prefers-reduced-motion:reduce){.expanded-story{transition:none;}}
.expanded-story section{margin-bottom:2em;}
.expanded-story section:last-child{margin-bottom:0;}
.expanded-story h3{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.7em;
}
.expanded-story ul{margin:0;padding-left:1.2em;}
.expanded-story li{margin-bottom:.5em;font-size:.95rem;}

/* ---------- мягкий стык глав: прозрачная зона без отдельной полосы.
   Размытые цветовые облака соседних героев заходят друг в друга,
   а подпись следующей главы остаётся тихим полупрозрачным маркером. */
.chapter-transition{
  position:relative;z-index:5;isolation:isolate;
  min-height:16vh;
  margin:-8vh 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;
  padding:3vh 6vw;
  background:transparent;
  text-align:center;
  overflow:visible;
  pointer-events:none;
}
.chapter-transition::before{
  content:'';position:absolute;inset:-9vh 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 85% at 25% 28%, rgba(161,80,63,.2), transparent 72%),
    radial-gradient(70% 85% at 75% 72%, rgba(79,112,121,.18), transparent 72%);
  background:
    radial-gradient(70% 85% at 25% 28%, color-mix(in srgb,var(--from,#a1503f) 24%,transparent), transparent 72%),
    radial-gradient(70% 85% at 75% 72%, color-mix(in srgb,var(--to,#4f7079) 22%,transparent), transparent 72%);
  filter:blur(28px);opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
}
.chapter-transition > *{pointer-events:auto;}
.transition-archive{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(248,241,227,.3);
}
.transition-word{
  font-family:'Golos Text',sans-serif;font-weight:700;
  font-size:clamp(1.35rem,3.4vw,3rem);
  line-height:.96;letter-spacing:-.01em;
  color:rgba(248,241,227,.32);
  text-transform:uppercase;
  max-width:100%;overflow-wrap:break-word;
}
.transition-icon{
  width:24px;height:24px;color:var(--to,var(--gold));opacity:.42;
}
@media (max-width:640px){
  .chapter-transition{min-height:10vh;margin:-5vh 0;padding:1.5vh 6vw;}
  .chapter-transition::before{inset:-6vh 0;filter:blur(20px);opacity:.55;}
  .transition-archive,.transition-icon{display:none;}
  .transition-word{font-size:1.05rem;letter-spacing:.08em;color:rgba(248,241,227,.18);}
}

/* ---------- story video ---------- */
.story-video{
  position:relative;z-index:2;
  margin-top:5vh;
  width:100%;
  display:flex;align-items:center;gap:1.2em;
  padding:1.3em 1.6em;
  background:var(--ink);
  color:var(--cream);
  border-radius:2px;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.chapter-dark .story-video{background:rgba(255,255,255,.06);}
.story-video:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.film-edge{
  position:absolute;inset:0;
  background-repeat:repeat-x;background-size:14px 100%;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);
  opacity:.5;
}
.video-monogram{
  position:relative;z-index:1;
  font-family:'Ruslan Display',serif;font-size:1.4rem;color:var(--accent);
}
.play{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:2.6em;height:2.6em;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.9rem;
  transition:transform .4s var(--ease);
}
.story-video:hover .play{transform:scale(1.12);}
.video-title{position:relative;z-index:1;font-weight:700;letter-spacing:.06em;font-size:.9rem;text-transform:uppercase;}
.story-video small{position:relative;z-index:1;margin-left:auto;opacity:.7;}

.video-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,6,.72);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
  padding:5vw;
}
.video-modal.is-open{opacity:1;}
.video-dialog{
  background:var(--cream);color:var(--ink);
  max-width:640px;width:100%;
  padding:2.4em;border-radius:4px;
  transform:translateY(24px) scale(.97);
  transition:transform .35s var(--ease);
  box-shadow:var(--shadow-soft);
}
.video-modal.is-open .video-dialog{transform:translateY(0) scale(1);}
.modal-close{
  float:right;font-weight:700;font-size:.78rem;letter-spacing:.08em;
  padding:.5em .8em;border:1px solid var(--line);border-radius:999px;
}
.modal-close:hover{background:var(--ink);color:var(--cream);}
.video-dialog.game-dialog{max-width:900px;}
.video-native{width:100%;margin-top:1.2em;border-radius:4px;background:#000;aspect-ratio:16/9;}
.video-embed{
  position:relative;width:100%;aspect-ratio:16/9;
  margin-top:1.2em;background:#000;border-radius:4px;overflow:hidden;
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.game-embed{
  position:relative;width:100%;aspect-ratio:4/3;
  margin-top:1.2em;background:#0c0a0d;border-radius:4px;overflow:hidden;
}
.game-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.game-note{margin-top:1em;font-size:.8rem;opacity:.6;}
@media (max-width:640px){.game-embed{aspect-ratio:3/4;}}
body.modal-open{overflow:hidden;}

/* ---------- музыкальная лаборатория (Чайковский) ---------- */
.media-lab{
  position:relative;z-index:2;grid-column:1 / -1;
  margin-top:5vh;width:100%;
  display:flex;align-items:center;gap:1.6em;
  padding:1.8em 2em;
  background:linear-gradient(120deg,var(--burgundy),#2a1015);
  color:var(--cream);
  border-radius:4px;overflow:hidden;
  text-align:left;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.media-lab:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.media-lab-staff{
  flex:none;width:64px;height:64px;border-radius:50%;
  background:repeating-linear-gradient(0deg, rgba(248,241,227,.5) 0 1.5px, transparent 1.5px 11px);
  position:relative;
}
.media-lab-staff::after{content:'♪';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--gold);}
.media-lab-copy{flex:1;display:flex;flex-direction:column;gap:.3em;}
.media-lab-copy small{font-size:.68rem;letter-spacing:.18em;color:var(--gold);font-weight:700;}
.media-lab-copy strong{font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;}
.media-lab-copy span{font-size:.88rem;opacity:.75;}
.media-lab-cta{
  flex:none;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:.4em;
  padding:.8em 1.2em;border:1.5px solid var(--gold);border-radius:999px;
  transition:background .3s ease,transform .3s var(--ease);
}
.media-lab:hover .media-lab-cta{background:var(--gold);color:var(--burgundy);transform:translateX(3px);}
@media (max-width:640px){.media-lab{flex-wrap:wrap;}.media-lab-cta{width:100%;justify-content:center;}}

/* ============================================================
   ВИКТОРИНА
   ============================================================ */
.quiz{
  position:relative;z-index:2;
  margin-top:8vh;
  padding-top:6vh;
  border-top:1px solid currentColor;
  opacity:1;
}
.quiz-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1em;gap:1em;flex-wrap:wrap;}
.quiz-heading h3{font-size:1.5rem;text-transform:uppercase;}
.quiz-count{font-size:.8rem;letter-spacing:.1em;opacity:.6;font-weight:700;}
.quiz-progress{height:4px;background:rgba(128,110,90,.25);border-radius:99px;overflow:hidden;margin-bottom:2.2em;}
.quiz-progress i{
  display:block;height:100%;background:var(--accent);
  transition:width .55s var(--ease);
  background-image:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%, white));
}

.question-text{font-size:1.2rem;font-weight:600;margin-bottom:1.2em;}
.answers{display:flex;flex-direction:column;gap:.8em;margin-bottom:1.4em;}
.answers button{
  display:flex;align-items:center;gap:.9em;
  padding:1em 1.2em;
  background:rgba(128,110,90,.08);
  border:1.5px solid transparent;
  border-radius:3px;
  text-align:left;
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.answers button:not(:disabled):hover{transform:translateX(4px);border-color:var(--accent);}
.answers button span{
  display:flex;align-items:center;justify-content:center;
  width:2em;height:2em;flex:none;
  border-radius:50%;border:1.5px solid currentColor;
  font-size:.78rem;font-weight:700;
}
.answers button strong{font-weight:600;flex:1;}
.answers button i{font-style:normal;color:#4c8f5a;font-size:1.1rem;}
.answers button.correct{
  background:rgba(76,143,90,.14);border-color:#4c8f5a;
  animation:pulse-correct .5s var(--ease);
}
.answers button.incorrect{
  background:rgba(178,64,53,.12);border-color:#b24035;
  animation:shake .45s var(--ease);
}
.answers button.incorrect-muted{opacity:.4;}
@keyframes pulse-correct{0%{transform:scale(1);}40%{transform:scale(1.02);}100%{transform:scale(1);}}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(2px);}
}
@media (prefers-reduced-motion:reduce){
  .answers button.correct,.answers button.incorrect{animation:none;}
}

.feedback{
  padding:1em 1.2em;margin-bottom:1.4em;border-radius:3px;
  font-size:.92rem;
  animation:fade-up .35s var(--ease);
}
@keyframes fade-up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.feedback.empty{background:rgba(128,110,90,.08);opacity:.75;}
.feedback.success{background:rgba(76,143,90,.12);}
.feedback.success strong{color:#3c7248;}
.feedback.error{background:rgba(178,64,53,.1);}
.feedback.error strong{color:#a3392f;}
.feedback strong{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4em;}
.feedback p{margin:0;}

.quiz-next{width:100%;justify-content:center;}

.quiz-finish{
  display:flex;gap:2em;align-items:center;flex-wrap:wrap;
  animation:fade-up .5s var(--ease);
}
.stamp-preview{
  flex:none;width:120px;height:120px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  border:2px dashed rgba(128,110,90,.4);
  color:rgba(128,110,90,.5);
  transition:transform .5s var(--ease),color .5s ease,border-color .5s ease;
}
.stamp-preview .stamp-icon{width:44px;height:44px;display:block;}
.stamp-preview small{font-size:.6rem;letter-spacing:.12em;margin-top:.4em;}
.stamp-preview.is-stamped{
  border:2px solid var(--accent);color:var(--accent);
  transform:rotate(-8deg);
}
.stamp-preview.stamp-burst{animation:stamp-pop .8s var(--ease);}
@keyframes stamp-pop{
  0%{transform:scale(.4) rotate(0);opacity:0;}
  55%{transform:scale(1.25) rotate(-14deg);opacity:1;}
  75%{transform:scale(.94) rotate(-4deg);}
  100%{transform:scale(1) rotate(-8deg);}
}
.finish-score{font-size:1rem;}
.finish-actions{display:flex;gap:1.4em;align-items:center;flex-wrap:wrap;margin-top:.8em;}
.stamp-status{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:#3c7248;padding:.4em .8em;background:rgba(76,143,90,.14);border-radius:999px;
}

/* ============================================================
   ПАСПОРТ
   ============================================================ */
.passport{
  position:relative;
  padding:12vh 6vw;
  background:linear-gradient(150deg,#231a15,#120e0b);
  color:var(--cream);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  align-items:center;
}
.passport-copy{min-width:0;}
.passport-copy h2{font-size:clamp(2rem,4.4vw,3.4rem);text-transform:uppercase;margin-bottom:.5em;}
.passport-copy > p{color:var(--cream-soft);max-width:34em;margin-bottom:2em;}
.big-progress{margin-bottom:2em;}
.big-progress strong{display:block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.7em;}
.big-progress > div{height:6px;background:rgba(248,241,227,.14);border-radius:99px;overflow:hidden;}
.big-progress i{
  display:block;height:100%;
  background:linear-gradient(90deg,#d69a7b,#a64f40);
  transition:width .8s var(--ease);
}
.passport-actions{display:flex;gap:1em;flex-wrap:wrap;align-items:center;margin-bottom:.6em;}

.passport-book{
  perspective:1200px;
  min-width:0;
}
.passport-cover{
  background:linear-gradient(155deg,#3a2c22,#1c1512);
  border:1px solid rgba(248,241,227,.15);
  border-radius:6px 6px 0 0;
  padding:3em 2em;
  text-align:center;
  position:relative;
  box-shadow:var(--shadow-soft);
  transition:transform .6s var(--ease);
}
.passport-cover span{display:block;font-size:.68rem;letter-spacing:.24em;color:#d69a7b;margin-bottom:1em;}
.passport-cover h3{font-size:1.7rem;text-transform:uppercase;margin-bottom:1.2em;}
.passport-seal{
  width:64px;height:64px;margin:0 auto 1em;
  border:2px solid #d69a7b;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-family:'Ruslan Display',serif;font-size:.9rem;color:#d69a7b;line-height:1.1;
}
.passport-cover small{color:var(--cream-soft);font-size:.72rem;letter-spacing:.08em;}

/* ---------- открытие обложки по скроллу: однократный поворот,
   без бесконечного вращения печати и без бесконечного свечения ---------- */
.passport-book{transform-style:preserve-3d;}
.passport-cover{
  transform:rotateY(0deg);
  transform-origin:left center;
}
.passport-book.is-open .passport-cover{
  animation:passport-open 1.1s var(--ease) both;
}
@keyframes passport-open{
  0%{transform:rotateY(0deg) translateY(6px);box-shadow:none;}
  60%{transform:rotateY(-14deg) translateY(-6px);box-shadow:var(--shadow-soft);}
  100%{transform:rotateY(-4deg) translateY(-4px);box-shadow:var(--shadow-soft);}
}
.passport-book:not(.is-open) .passport-page{opacity:0;transform:translateY(10px);}
.passport-book.is-open .passport-page{
  opacity:1;transform:translateY(0);
  transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s;
}
.passport-book.is-open .stamp-slot.stamped:last-of-type{animation:stamp-latest .6s var(--ease);}
@keyframes stamp-latest{0%{transform:scale(.7) rotate(0);}60%{transform:scale(1.08) rotate(-6deg);}100%{transform:rotate(-3deg) scale(1.02);}}
@media (prefers-reduced-motion:reduce){
  .passport-book.is-open .passport-cover{animation:none;transform:rotateY(-4deg);}
  .passport-book:not(.is-open) .passport-page{opacity:1;transform:none;}
  .passport-book.is-open .passport-page{transition:none;}
  .passport-book.is-open .stamp-slot.stamped:last-of-type{animation:none;}
}

.passport-page{
  background:var(--cream);color:var(--ink);
  border-radius:0 0 6px 6px;
  padding:2em;
  box-shadow:var(--shadow-soft);
}
.page-meta{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;letter-spacing:.08em;margin-bottom:1.4em;text-transform:uppercase;color:var(--accent);}
.stamp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;min-width:0;}
.stamp-slot{
  aspect-ratio:1;
  min-width:0;
  border:1.5px dashed var(--line);
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  text-align:center;padding:.6em;
  transition:transform .35s var(--ease),border-color .35s ease,background .35s ease;
}
.stamp-slot strong,.stamp-slot small{overflow-wrap:anywhere;max-width:100%;}
.stamp-slot .stamp-glyph{font-family:'Ruslan Display',serif;font-size:1.4rem;opacity:.35;display:flex;align-items:center;justify-content:center;}
.stamp-slot .stamp-glyph .stamp-icon{width:28px;height:28px;}
.stamp-slot strong{font-size:.66rem;letter-spacing:.03em;}
.stamp-slot small{font-size:.6rem;opacity:.55;}
.stamp-slot.stamped{
  border-style:solid;border-color:var(--accent);background:rgba(166,79,64,.06);
  transform:rotate(-3deg) scale(1.02);
}
.stamp-slot.stamped .stamp-glyph{opacity:1;color:var(--accent);}
.passport-book.passport-complete .passport-cover{
  background:linear-gradient(155deg,#4a3527,#241a15);
  box-shadow:0 0 60px -14px rgba(214,154,123,.45);
}

/* ============================================================
   PROGRAM
   ============================================================ */
.program{padding:12vh 6vw;background:var(--dark-bg);color:var(--cream);}
.program-heading h2{font-size:clamp(2rem,4.4vw,3.4rem);text-transform:uppercase;margin-bottom:1.4em;}
.program-list{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.program-item{
  background:var(--dark-surface);
  display:grid;
  transition:transform .4s var(--ease),background .4s ease;
}
.program-item:hover{transform:translateY(-6px);background:#2a231d;}
/* три разных ритма вместо одинаковых карточек */
.program-1{grid-column:span 4;grid-template-columns:1fr 1.3fr;align-items:stretch;}
.program-2{grid-column:span 2;grid-row:span 2;grid-template-rows:auto 1fr;}
.program-3{grid-column:span 4;grid-template-columns:1.3fr 1fr;align-items:stretch;}
.program-3 .program-visual{order:2;}
.program-3 .program-copy{order:1;}

.program-visual{
  position:relative;min-height:160px;
  display:flex;align-items:flex-end;
  padding:1.4em;
  background:
    repeating-linear-gradient(135deg, rgba(248,241,227,.04) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, rgba(214,154,123,.14), transparent 70%);
  border:1px dashed var(--line-dark);
  overflow:hidden;
}
.program-visual.has-image{border-style:solid;padding:1.2em;}
.program-visual.has-image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.program-visual.has-image .program-number{position:relative;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.program-number{font-family:'Ruslan Display',serif;font-size:2.4rem;color:var(--gold);opacity:.85;}
.program-copy{padding:2em 1.8em;display:flex;flex-direction:column;gap:.3em;}
.program-copy small{font-size:.7rem;letter-spacing:.14em;color:#e7a98c;font-weight:700;}
.program-copy h3{font-size:1.3rem;text-transform:uppercase;margin:.2em 0;}
.program-copy p{color:var(--cream-soft);font-size:.95rem;margin-bottom:.6em;}
@media (max-width:900px){
  .program-list{grid-template-columns:1fr;}
  .program-1,.program-2,.program-3{grid-column:span 1;grid-row:auto;grid-template-columns:1fr;}
  .program-3 .program-visual,.program-3 .program-copy{order:initial;}
}

/* ============================================================
   TEACHERS / MATERIALS
   ============================================================ */
.teachers{padding:12vh 6vw;background:var(--paper-deep);}
.teachers-heading h2{font-size:clamp(2rem,4.4vw,3.4rem);text-transform:uppercase;margin-bottom:.4em;}
.teachers-heading p{max-width:36em;opacity:.8;margin-bottom:3em;}
.materials-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.material{
  display:grid;grid-template-columns:3em 1fr auto auto auto;align-items:center;gap:1.4em;
  padding:1.2em 0;border-bottom:1px solid var(--line);
  transition:background .3s ease,padding-left .3s ease;
}
.material:hover{padding-left:.6em;background:rgba(128,110,90,.06);}
.material-number{font-family:'Ruslan Display',serif;font-size:1.2rem;opacity:.4;}
.material strong{display:block;font-size:1rem;}
.material p{margin:.2em 0 0;font-size:.88rem;opacity:.75;}
.material-type{font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:.35em .7em;background:rgba(128,110,90,.14);border-radius:999px;}
.material-size{font-size:.78rem;opacity:.55;}
.material button{
  width:2.4em;height:2.4em;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.material button:disabled{opacity:.35;cursor:not-allowed;}

/* ============================================================
   FINAL / FOOTER
   ============================================================ */
.final{
  position:relative;
  padding:16vh 6vw;
  background:linear-gradient(160deg,#3a1c1a,#191110);
  color:var(--cream);
  text-align:center;
  overflow:hidden;
}
.final-code{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:monospace;font-size:9vw;letter-spacing:.3em;
  color:rgba(248,241,227,.04);
  pointer-events:none;
  white-space:nowrap;
}
.final .kicker{color:#e7a98c;}
.final h2{font-size:clamp(2.2rem,5.4vw,4.2rem);text-transform:uppercase;margin:0 auto .6em;max-width:16em;position:relative;}
.final h2 em{font-style:normal;color:#e7a98c;display:block;}
.final > p{max-width:34em;margin:0 auto 2em;color:var(--cream-soft);position:relative;}
.final .primary{position:relative;}

footer{
  padding:4em 6vw;
  background:var(--dark-bg);color:var(--cream-soft);
  display:flex;flex-wrap:wrap;gap:1em;align-items:center;justify-content:space-between;
  font-size:.82rem;letter-spacing:.04em;
}
footer strong{color:var(--cream);letter-spacing:.08em;}
footer a{text-decoration:none;transition:color .3s ease;}
footer a:hover{color:var(--cream);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .editorial-grid{grid-template-columns:1fr;}
  .portrait-right .editorial-grid{grid-template-columns:1fr;}
  .portrait-right .portrait-stage,.portrait-right .story-copy,.portrait-right .story-video,.portrait-right .media-lab{order:initial;}
  .passport{grid-template-columns:1fr;}
  :root{--parallax-amount:14px;}
  .hero-bg-image{object-position:center 18%;}
  .hero-copy{max-width:100%;margin-left:0;}
}

@media (max-width:640px){
  .chapter,.intro,.passport,.program,.teachers,.final{padding-left:6vw;padding-right:6vw;}
  .chapter-header{flex-direction:column;gap:.6em;}
  .material{grid-template-columns:2em 1fr;row-gap:.4em;}
  .material-type,.material-size,.material button{grid-column:2;justify-self:start;}
  .stamp-grid{grid-template-columns:repeat(3,1fr);}
  .quiz-finish{flex-direction:column;text-align:center;}
  :root{--parallax-amount:0px;}

  /* 390–430px: собственная компоновка, а не сжатый десктоп */
  .hero-bg-image{object-position:center 14%;}
  .hero-copy{padding:1.6em 1.8em;margin:0;border-radius:0;}
  .hero-copy h1{font-size:clamp(2.1rem,11vw,2.9rem);}
  .chapter-number{font-size:clamp(3.2rem,20vw,4.6rem);}
  .chapter-nav a{width:148px;}
  .primary,.secondary,.text-button,.more-button,.story-video,.media-lab,
  .modal-close,.material button,.material a,.answers button,.quiz-next{min-height:44px;}
  .answers button{min-height:48px;}
  .story-copy,.expanded-story p,.lead{max-width:none;}
  .layout-music .story-copy{max-width:none;}
  .video-modal{padding:4vw;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ================================================================
   МОБИЛЬНАЯ АРТ-ДИРЕКЦИЯ (320–767px)
   Самостоятельная композиция поверх десктопного слоя — не сжатие
   десктопной сетки. Стадия 1: композиция и структура (без Swiper/
   GSAP/Lenis — они подключаются отдельным этапом после утверждения).
   ================================================================ */
.mobile-lead,.mobile-chapter-actions,.mobile-dock,.mobile-sheet-backdrop,.mobile-swiper-wrap{display:none;}

@media (max-width:767px){
  .swipe-hint{display:inline-flex;margin-right:.5em;vertical-align:middle;width:16px;}
  .swipe-hint svg{width:100%;height:auto;display:block;}
  .swipe-dot{animation:swipe-drop 1.6s ease-in-out infinite;}
  @keyframes swipe-drop{
    0%{transform:translateY(0);opacity:1;}
    60%{transform:translateY(14px);opacity:.2;}
    61%{transform:translateY(0);opacity:0;}
    80%{opacity:1;}
    100%{transform:translateY(0);opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){.swipe-dot{animation:none;}}

  /* ---------- скрываем старую горизонтальную киноленту — её
     заменяет нижний dock (см. ниже) ---------- */
  .filmstrip-wrap{display:none;}

  /* ---------- карточка героя: номер / имя / лид / портрет / кнопки ----------
     content-visibility:auto здесь намеренно НЕ используется: в этом
     проекте оно уже один раз ломало якорную навигацию, а теперь
     дополнительно мешало GSAP/ScrollTrigger корректно применять
     transform к элементам глав, находящимся вне текущего вьюпорта. */
  .chapter{
    padding:8vh 6vw 6vh;
    min-height:100svh;
    display:flex;flex-direction:column;
  }
  .chapter-header{margin-bottom:2.4vh;}
  .chapter-number{font-size:clamp(3.6rem,22vw,5.2rem);}
  .chapter-header h2{font-size:clamp(1.9rem,9vw,2.6rem);}
  .chapter-subtitle{display:none;} /* дублирует mobile-lead ниже */

  .mobile-lead{
    display:block;
    font-size:1.02rem;font-weight:600;line-height:1.45;
    margin:0 0 3vh;max-width:none;
  }

  .editorial-grid{
    display:flex;flex-direction:column;gap:0;
    flex:1;min-height:0;
  }
  /* transform НЕ блокируется здесь — .portrait-stage несёт класс
     depth-5, и GSAP (assets/site-motion.js) анимирует его transform
     напрямую inline-стилем во время скролла (mobileScenes()). */
  .portrait-stage{order:1;margin-bottom:1.2vh;}
  .character-cutout{
    height:46vh;width:auto;
    display:block;margin:0 auto;
    /* естественная ширина по пропорциям кадра — портрет свободно
       выходит за текстовую колонку; .chapter сохраняет overflow:hidden,
       поэтому вылет ограничен полями секции, а не всей шириной экрана */
    max-width:none;
  }
  .depth-foreground{display:none;}

  .mobile-chapter-actions{
    display:flex;gap:.7em;order:2;margin:1.4vh 0 2.4vh;
  }
  .mobile-cta{
    flex:1;min-height:48px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;text-decoration:none;
    font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
    border-radius:3px;padding:.9em .6em;
    transition:transform .25s var(--ease),background .25s ease;
  }
  .mobile-cta-know{background:var(--accent,#a64f40);color:#fff;}
  .mobile-cta-task{background:transparent;border:1.5px solid currentColor;color:inherit;}
  .mobile-cta:active{transform:scale(.97);}

  .story-copy{order:3;max-width:none;}
  .story-copy .accent-line{display:none;}
  .story-copy .lead{display:none;} /* заменён mobile-lead в шапке карточки */
  .mobile-story-body{
    overflow:hidden;max-height:0;opacity:0;
    transition:max-height .5s var(--ease),opacity .4s ease;
  }
  .story-copy.mobile-open .mobile-story-body{max-height:4000px;opacity:1;}
  .mobile-story-body .story-heading{margin-top:1.2vh;}

  .story-video,.media-lab{order:4;margin-top:3vh;}

  /* тематические предметы главы (существующий мотив) видны крупнее */
  .chapter-motif{opacity:.22;width:min(70vw,320px);}

  /* Стадия 2: лёгкий мобильный параллакс на 3 слоя (фон/тематический
     SVG, типографика, портрет+предмет) теперь ведёт GSAP ScrollTrigger
     напрямую через inline-transform (assets/site-motion.js) — он имеет
     более высокий приоритет, чем формулы depth-N ниже, поэтому здесь
     достаточно не блокировать их через !important, как раньше. */
  .cursor-ring{display:none !important;}
  body.has-custom-cursor{cursor:auto !important;}

  /* сетка в один столбец — уже задано на 980px, здесь фиксируем
     поведение специально для мобильной карточки (без переноса
     десктопной multi-column раскладки) */
  .portrait-right .editorial-grid{flex-direction:column;}
  .portrait-right .portrait-stage,.portrait-right .story-copy,
  .portrait-right .story-video,.portrait-right .media-lab,
  .portrait-right .mobile-chapter-actions{order:initial;}

  /* ---------- минимум 48px для интерактивных элементов ---------- */
  .primary,.secondary,.text-button,.more-button,.answers button,.quiz-next,
  .modal-close,.material button,.material a,.dock-item,.mobile-cta,
  .direction-buttons button,.piece,.staff-note{min-height:48px;}

  /* ---------- нижний dock вместо старой навигации ---------- */
  .mobile-dock{
    display:flex;
    position:fixed;left:3vw;right:3vw;bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:250;
    background:rgba(21,18,15,.96);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(248,241,227,.12);
    border-radius:20px;
    padding:.48em .4em;
    justify-content:space-between;
    box-shadow:0 12px 34px rgba(0,0,0,.38);
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    contain:layout paint;
    isolation:isolate;
    transition:border-color .25s ease,background-color .25s ease,transform .32s cubic-bezier(.22,1,.36,1);
    will-change:auto;
  }
  /* Полное, чёткое скрытие плашки при скролле вниз — без промежуточного
     «обрезанного» состояния: один class-toggle + translate3d на всю
     высоту дока с запасом. Возвращается целиком при скролле вверх или
     когда скролл останавливается (см. initMotionSystem() в site.js). */
  .mobile-dock.is-hidden{
    transform:translate3d(0, calc(100% + 32px + env(safe-area-inset-bottom,0px)), 0);
    -webkit-transform:translate3d(0, calc(100% + 32px + env(safe-area-inset-bottom,0px)), 0);
  }
  @media (prefers-reduced-motion:reduce){
    .mobile-dock{transition:border-color .25s ease,background-color .25s ease;}
    .mobile-dock.is-hidden{transform:none;-webkit-transform:none;}
  }
  .mobile-dock.is-compact .dock-label{opacity:1;max-height:1.2em;}
  .mobile-dock.is-compact .dock-item{gap:.2em;}
  body.modal-open .mobile-dock,body.sheet-open .mobile-dock{display:none;}
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));}
  body.sheet-open,body.modal-open{overflow:hidden;}
  .dock-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.2em;
    color:rgba(248,241,227,.6);
    position:relative;
  }
  .dock-item.is-active{color:var(--gold,#d69a7b);}
  .dock-icon{width:22px;height:22px;}
  .dock-icon svg{width:100%;height:100%;display:block;}
  .dock-label{font-size:.6rem;letter-spacing:.04em;font-weight:700;text-transform:uppercase;transition:opacity .25s ease,max-height .25s ease;overflow:hidden;}
  .dock-item{transition:gap .3s ease;}
  .dock-badge{
    position:absolute;top:-2px;right:18%;
    font-size:.56rem;font-weight:700;line-height:1;
    padding:.25em .4em;border-radius:999px;
    background:var(--accent,#a64f40);color:#fff;
  }
  .dock-badge.is-complete{background:#4c8f5a;}

  /* ---------- шторки «Карта» / «Меню» ---------- */
  .mobile-sheet-backdrop{
    display:flex;align-items:flex-end;justify-content:center;
    position:fixed;inset:0;z-index:260;
    background:rgba(10,8,6,.55);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .mobile-sheet-backdrop.is-open{opacity:1;pointer-events:auto;}
  .mobile-sheet{
    width:100%;max-height:78vh;overflow-y:auto;
    background:var(--dark-surface,#201b17);color:var(--cream);
    border-radius:16px 16px 0 0;
    padding:.6em 5vw calc(1.4em + env(safe-area-inset-bottom,0px));
    transform:translateY(16px);
    transition:transform .35s var(--ease);
  }
  .mobile-sheet-backdrop.is-open .mobile-sheet{transform:translateY(0);}
  .sheet-handle{width:36px;height:4px;border-radius:99px;background:rgba(248,241,227,.3);margin:.6em auto 1em;}
  .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6em;}
  .sheet-head .kicker{margin:0;}
  .sheet-close{font-size:1.6rem;line-height:1;padding:.2em .5em;color:var(--cream);}
  .sheet-map-row{
    display:flex;align-items:center;gap:.8em;
    padding:1em 0;border-bottom:1px solid rgba(248,241,227,.1);
    text-decoration:none;color:var(--cream);min-height:48px;
  }
  .sheet-map-row b{font-family:'Ruslan Display',serif;font-size:1.1rem;opacity:.5;width:2em;}
  .sheet-map-icon{width:26px;height:26px;flex:none;}
  .sheet-map-name{flex:1;font-weight:600;}
  .sheet-map-state{color:#8fbf8a;font-weight:700;}
  .sheet-map-row.is-stamped .sheet-map-name{color:var(--gold,#d69a7b);}
  .sheet-menu-link{
    display:block;width:100%;text-align:left;
    padding:1em 0;border-bottom:1px solid rgba(248,241,227,.1);
    font-weight:600;color:var(--cream);text-decoration:none;min-height:48px;
  }

  /* ---------- Swiper: выбор истории превью-карточками ---------- */
  .mobile-swiper-wrap{display:block;padding:3vh 0 3vh 6vw;background:var(--dark-bg);}
  .swiper-kicker{padding:0 0 1em;margin:0;}
  .hero-swiper{overflow:hidden;}
  .hero-swiper .swiper-wrapper{align-items:stretch;}
  .hero-swiper-slide{
    display:flex;flex-direction:column;justify-content:flex-end;
    height:52vh;min-height:340px;
    border-radius:10px;overflow:hidden;position:relative;
    background:linear-gradient(180deg,#231a15,#120e0b);
    text-decoration:none;color:var(--cream);
    padding:1.2em 1.1em;
  }
  .hero-swiper-number{
    position:absolute;top:.8em;left:1em;z-index:2;
    font-family:'Ruslan Display',serif;font-size:1.6rem;color:var(--gold);opacity:.85;
  }
  .hero-swiper-portrait{
    position:absolute;left:0;right:0;bottom:0;
    width:100%;height:88%;object-fit:contain;object-position:bottom;
    z-index:1;
  }
  .hero-swiper-name{
    position:relative;z-index:2;
    font-weight:700;letter-spacing:.02em;font-size:1.02rem;text-transform:uppercase;
    text-shadow:0 4px 18px rgba(0,0,0,.7);
  }
  .swiper-progress-track{height:2px;margin:1.4em 6vw 0;background:rgba(248,241,227,.14);border-radius:99px;overflow:hidden;}
  .swiper-progress-track i{display:block;height:100%;width:14%;background:var(--gold);transition:width .1s linear;}

  /* ---------- полноэкранные модалки игр/видео ---------- */
  .video-modal{padding:0;align-items:stretch;}
  .video-dialog{
    max-width:none;width:100%;height:100%;height:100dvh;
    border-radius:0;padding:1.2em 5vw calc(1.2em + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .video-dialog.game-dialog{max-width:none;}
  .game-embed,.video-embed{aspect-ratio:auto;flex:1;min-height:52vh;}
}

@media (prefers-reduced-motion:reduce){
  .mobile-story-body{transition:none;}
  .mobile-sheet,.mobile-sheet-backdrop{transition:none;}
}

/* ============================================================
   ЛИНИЯ ПРОГРЕССА СТРАНИЦЫ
   ============================================================ */
.page-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  transform-origin:left;pointer-events:none;
  background:var(--gold);
  transform:scaleX(var(--page-progress,0));
}
@media (prefers-reduced-motion:reduce){.page-progress{display:none;}}

/* ============================================================
   КАСТОМНЫЙ КУРСОР (только pointer:fine, десктоп)
   ============================================================ */
.cursor-ring{
  position:fixed;top:0;left:0;z-index:400;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:width .25s var(--ease),height .25s var(--ease),opacity .2s ease,border-color .25s ease;
  mix-blend-mode:difference;
}
.cursor-ring .cursor-label{
  font-size:.6rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;opacity:0;transition:opacity .2s ease;
}
.cursor-ring[data-mode]{width:78px;height:78px;}
.cursor-ring[data-mode] .cursor-label{opacity:1;}
.cursor-ring[data-mode="link"]{width:46px;height:46px;}
body.has-custom-cursor{cursor:none;}
body.has-custom-cursor a,body.has-custom-cursor button{cursor:none;}
@media (pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor-ring{display:none !important;}
  body.has-custom-cursor{cursor:auto;}
}