/* ============================================================
   Обзор подвигов героев — общий каркас лендинга-ленты.
   Стиль: бренд-2026 проекта (docs/BRAND-2026.md).
   Механика как в «Одиссее»: 7 слоёв погружения (лот «Глубина»),
   рельс станций, градиент ночь→рассвет. Один файл на всех героев;
   идентичность — через --night/--accent/--accent2 и theme.gradient.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@1,400;1,600&display=swap');

:root{
  --night:#12152B; --night-2:#1B1F3B;
  --accent:#E9C46A; --accent2:#6C8A5E;
  --papyrus:#F6F1E4; --mist:#AEB4C7; --ink:#14161F;
  --disp:"Noto Sans","Segoe UI",Arial,sans-serif;
  --body:"Noto Sans","Segoe UI",Arial,sans-serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif; /* голос древности: только эпиграфы и цитаты первоисточников */
  --measure:700px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--papyrus);
  background:var(--night); line-height:1.8; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

.readbar{position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent2),var(--accent)); z-index:60; transition:width .12s linear}

/* ---------- ПОДЛОЖКА: у каждого героя своя культурная текстура ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* текстура должна угадываться, а не перебивать текст */
  opacity:.035; background-repeat:repeat; background-position:center;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, rgba(0,0,0,.35) 100%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, rgba(0,0,0,.35) 100%);
}
body[data-pattern]{position:relative}
body[data-pattern] > *{position:relative; z-index:1}

/* Греция — меандр */
body[data-pattern="meander"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M8 8h64v64H24V24h32v32H40' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size:80px 80px;
}
/* Крит — лабиринт */
body[data-pattern="labyrinth"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M10 10h80v80H10V22h68v56H22V34h44v32H34V46h20v8' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Египет — солнечный диск и лучи */
body[data-pattern="sun"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Ccircle cx='55' cy='55' r='13' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M55 22v-12M55 100v-12M22 55H10M100 55h-12M32 32l-8-8M78 78l8 8M78 32l8-8M32 78l-8 8' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Междуречье — клинопись */
body[data-pattern="cuneiform"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M14 20l16 6-16 6zM50 14l6 16-12 0zM60 50l16 6-16 6zM24 56l6 16-12 0z' fill='%23ffffff'/%3E%3Cpath d='M14 26h22M56 20v20M60 56h22M30 62v20' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:90px 90px;
}
/* Данте — звёзды и своды */
body[data-pattern="stars"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M30 30l3 9 9 3-9 3-3 9-3-9-9-3 9-3zM90 80l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%23ffffff'/%3E%3Cpath d='M60 110V70a18 18 0 0 1 36 0v40' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
/* Бурятия — облачный узор и горы */
body[data-pattern="clouds"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='90'%3E%3Cpath d='M5 30q16-16 32 0t32 0 32 0 24 0' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='M10 80l25-30 25 30zM70 80l25-24 25 24z' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:130px 90px;
}
/* Индия — лотос и круги */
body[data-pattern="lotus"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Ccircle cx='55' cy='55' r='30' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3Cpath d='M55 25c10 14 10 26 0 36-10-10-10-22 0-36zM85 55c-14 10-26 10-36 0 10-10 22-10 36 0zM55 85c-10-14-10-26 0-36 10 10 10 22 0 36zM25 55c14-10 26-10 36 0-10 10-22 10-36 0z' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Русь — засеянное поле и холмы */
body[data-pattern="earth"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 18l32 32-32 32-32-32z' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M50 18v64M18 50h64' stroke='%23ffffff' stroke-width='1.2'/%3E%3Ccircle cx='34' cy='34' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='66' cy='34' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='34' cy='66' r='2.5' fill='%23ffffff'/%3E%3Ccircle cx='66' cy='66' r='2.5' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Орфей — лира */
body[data-pattern="lyre"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M32 74V38a18 18 0 0 1 36 0v36' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M42 40v34M50 38v36M58 40v34' stroke='%23ffffff' stroke-width='1.4'/%3E%3Cpath d='M28 74h44' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Психея — бабочка (psyche = душа и бабочка) */
body[data-pattern="butterfly"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M55 34v42' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M55 40c-14-16-32-12-32 2s16 22 32 12zM55 40c14-16 32-12 32 2s-16 22-32 12z' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M50 28l-6-8M60 28l6-8' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Прометей — прикованный огонь */
body[data-pattern="fire"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 22c10 16 18 22 18 34a18 18 0 0 1-36 0c0-12 8-18 18-34z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M50 44c5 8 8 11 8 17a8 8 0 0 1-16 0c0-6 3-9 8-17z' fill='%23ffffff' opacity='0.7'/%3E%3Cpath d='M20 84h60' stroke='%23ffffff' stroke-width='1.4' stroke-dasharray='6 5'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Персей — зеркальный щит */
body[data-pattern="shield"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 20l26 10v22c0 16-12 24-26 30-14-6-26-14-26-30V30z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='11' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3Cpath d='M42 44l16 12M58 44L42 56' stroke='%23ffffff' stroke-width='1.2' opacity='0.8'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Грааль — крест и сияние */
body[data-pattern="grail"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 24v52M28 44h44' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='50' cy='44' r='20' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Север — руны и плетение */
body[data-pattern="runes"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='%23ffffff' stroke-width='2' fill='none'%3E%3Cpath d='M22 20v34M22 20l14 10-14 10'/%3E%3Cpath d='M64 20v34M64 20l12 12M64 32l12-12'/%3E%3Cpath d='M22 62v24M22 62l12 12-12 12'/%3E%3Cpath d='M70 62v24M62 62h16M62 86h16'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100px 100px;
}
/* Кельты — бесконечный узел */
body[data-pattern="knot"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Ccircle cx='55' cy='55' r='26'/%3E%3Cpath d='M55 29c18 12 18 40 0 52-18-12-18-40 0-52z'/%3E%3Cpath d='M29 55c12-18 40-18 52 0-12 18-40 18-52 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Персия — арка и роза */
body[data-pattern="arch"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='120'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Cpath d='M25 105V55a25 25 0 0 1 50 0v50'/%3E%3Cpath d='M50 30V16M43 22l7-8 7 8'/%3E%3Ccircle cx='50' cy='62' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100px 120px;
}
/* Степь — юрта и рог */
body[data-pattern="steppe"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Cpath d='M20 70h40l-8-30H28z'/%3E%3Cpath d='M28 40q12-14 24 0'/%3E%3Cpath d='M78 66q10-14 20 0q-10 6-20 0z'/%3E%3Cpath d='M14 84h92'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 100px;
}
/* Армения — хачкар */
body[data-pattern="khachkar"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='2' fill='none'%3E%3Cpath d='M50 22v66M26 44h48'/%3E%3Ccircle cx='50' cy='44' r='14'/%3E%3Cpath d='M50 88q-10 8-16 0M50 88q10 8 16 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100px 110px;
}
/* Китай — облачный завиток */
body[data-pattern="cloudscroll"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Cpath d='M14 46q10-16 24-8t20 8q10-16 24-8t20 8'/%3E%3Ccircle cx='38' cy='38' r='6'/%3E%3Ccircle cx='82' cy='38' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 80px;
}
/* Рим — лавр и колонна */
body[data-pattern="laurel"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Cpath d='M55 20v70'/%3E%3Cpath d='M55 34q-14-6-18 4M55 34q14-6 18 4M55 52q-14-6-18 4M55 52q14-6 18 4M55 70q-14-6-18 4M55 70q14-6 18 4'/%3E%3Cpath d='M38 96h34'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Клад — кольца и гривны */
body[data-pattern="rings"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='2' fill='none'%3E%3Ccircle cx='36' cy='36' r='18'/%3E%3Ccircle cx='74' cy='52' r='12'/%3E%3Ccircle cx='46' cy='80' r='14'/%3E%3Ccircle cx='86' cy='88' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
/* Рим — орёл-аквила и волна */
body[data-pattern="eagle"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='1.8' fill='none'%3E%3Cpath d='M60 34v44'/%3E%3Cpath d='M60 42q-22-16-40-6 14 4 22 14t18 8z'/%3E%3Cpath d='M60 42q22-16 40-6-14 4-22 14t-18 8z'/%3E%3Ccircle cx='60' cy='28' r='6'/%3E%3Cpath d='M44 88h32'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 110px;
}
/* Восток — арабеска и звезда */
body[data-pattern="arabesque"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%23ffffff' stroke-width='1.6' fill='none'%3E%3Cpath d='M55 18l10 27 27 10-27 10-10 27-10-27-27-10 27-10z'/%3E%3Crect x='33' y='33' width='44' height='44' transform='rotate(45 55 55)'/%3E%3Ccircle cx='55' cy='55' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
@media (max-width:560px){ body::before{opacity:.025} }

/* лента с градиентом ночь→рассвет (из theme.gradient) */
.voyage{background:linear-gradient(180deg, var(--night) 0%, var(--night) 100%)}

/* ---------- ПРОЛОГ ---------- */
.prologue{min-height:100vh; position:relative; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 8%, var(--night-2), var(--night) 62%)}
.stars{position:absolute; inset:0; pointer-events:none}
.stars i{position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--papyrus); opacity:.6; animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.8}}
.halo{position:absolute; top:12vh; left:50%; transform:translateX(-50%);
  width:min(60vw,420px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 40%,transparent), transparent 62%);
  filter:blur(6px); opacity:.5; pointer-events:none; animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.6}}
/* дрейфующая дымка */
.mist-band{position:absolute; left:-20%; width:140%; height:120px; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb,var(--accent2) 22%,transparent), transparent 70%);
  opacity:.5; animation:drift 26s linear infinite}
.mist-band.b2{bottom:8vh; height:180px; animation-duration:38s; animation-direction:reverse; opacity:.35}
.mist-band.b1{bottom:0}
@keyframes drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}

.prologue-copy{position:relative; z-index:2; padding:0 24px; max-width:720px}
.series-tag{font-size:.7rem; letter-spacing:.42em; text-transform:uppercase; color:var(--mist); margin-bottom:1.6rem}
.prologue-copy .cluster{font-family:var(--disp); font-style:italic; color:var(--accent);
  font-size:clamp(.95rem,2.4vw,1.15rem); letter-spacing:.06em; margin-bottom:1rem}
.cap{font-family:var(--disp); font-style:italic; color:var(--mist);
  font-size:clamp(1rem,2.4vw,1.3rem); line-height:1.5; min-height:1.5em; margin-bottom:.6rem;
  opacity:0; animation:capfade 4.6s ease forwards}
@keyframes capfade{0%{opacity:0; transform:translateY(10px)} 12%{opacity:1; transform:none} 80%{opacity:1} 100%{opacity:0; transform:translateY(-8px)}}
.title-block{opacity:0; animation:rise 2s ease forwards}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
h1{font-family:var(--disp); font-weight:900; font-size:clamp(2.7rem,10vw,5.4rem);
  letter-spacing:.14em; text-indent:.14em; line-height:1.04; color:var(--papyrus)}
.prologue-copy .subtitle{font-family:var(--disp); font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem); color:var(--accent); margin-top:1rem}
.epigraph{font-family:var(--serif); font-style:italic; color:var(--mist);
  font-size:clamp(1rem,2.2vw,1.2rem); margin-top:1.6rem; line-height:1.6}
.prologue-copy .note{font-size:.82rem; color:var(--mist); margin-top:1.3rem}
.cta{display:inline-block; margin-top:2rem; padding:.85rem 2.4rem; font-family:var(--disp);
  font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  color:var(--ink); background:var(--accent); border:1px solid var(--accent); border-radius:2px; transition:.3s}
.cta:hover{background:transparent; color:var(--accent)}
.cta-quest{margin-left:.7rem; background:transparent; color:var(--accent)}
.cta-quest:hover{background:var(--accent); color:var(--ink)}
@media (max-width:560px){ .cta-quest{margin-left:0; margin-top:.9rem} }
.scroll-hint{position:absolute; bottom:3.4vh; left:50%; transform:translateX(-50%); z-index:3;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.5); text-decoration:none}
.scroll-hint:hover{color:var(--papyrus)}

/* ---------- ЛЕНТА / СЕКЦИИ ---------- */
main{position:relative; overflow:hidden; overflow:clip}
.section{max-width:var(--measure); margin:0 auto; position:relative; padding:14vh 24px 8vh}
.station-sec{padding-top:12vh}
.glyph{position:absolute; top:6vh; right:-1.2rem; z-index:0; font-family:var(--disp); font-weight:900;
  font-size:clamp(7rem,20vw,14rem); line-height:1; opacity:.06; pointer-events:none; user-select:none; color:var(--papyrus)}
.section > *:not(.glyph){position:relative; z-index:1}
.mea{display:block; width:150px; height:14px; margin:0 auto 2.6rem; color:var(--accent); opacity:.6}
.eyebrow{font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--mist); margin-bottom:1rem}
h2{font-family:var(--disp); font-weight:900; font-size:clamp(1.9rem,5.2vw,3rem);
  line-height:1.16; margin-bottom:1.4rem; color:var(--papyrus)}
.lead{font-size:1.18rem; color:var(--papyrus); margin-bottom:1.4rem}
.section p{margin-bottom:1.15rem}
.intro .body p:first-of-type::first-letter{font-family:var(--disp); font-weight:900; float:left;
  font-size:3.4rem; line-height:.82; padding-right:.5rem; color:var(--accent2)}

/* переключатель глубины в потоке текста (виден на любом устройстве) */
.depth-inline{margin:2.4rem 0 0; padding:1.2rem 1.3rem; border-radius:4px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent2) 8%,transparent)}
.depth-inline .di-head{display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:baseline; margin-bottom:.9rem}
.depth-inline .di-head b{font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:600}
.depth-inline .di-head span{font-family:var(--disp); font-style:italic; color:var(--papyrus); font-size:1rem}
.depth-inline .di-row{display:flex; flex-wrap:wrap; gap:.5rem}
.depth-inline button{width:40px; height:40px; padding:0; cursor:pointer; font-family:var(--disp);
  font-weight:600; font-size:.95rem; color:var(--papyrus); background:transparent;
  border:1px solid rgba(255,255,255,.28); border-radius:50%; transition:.2s}
.depth-inline button:hover{border-color:var(--accent); color:var(--accent)}
.depth-inline button.passed{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.depth-inline button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--ink)}
.depth-inline .di-hint{margin:.9rem 0 0; font-size:.9rem; color:var(--mist)}

/* заголовок станции (слой I виден всегда) */
.station-head{border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent); padding-top:2.4rem; margin-top:2rem}
.st-no{font-family:var(--disp); font-weight:900; color:var(--accent); font-size:.95rem; letter-spacing:.24em}
.station-head h3{font-family:var(--disp); font-weight:900; font-size:clamp(1.5rem,3.8vw,2.1rem);
  line-height:1.18; margin:.4rem 0 1rem; color:var(--papyrus)}
.teaser{font-family:var(--disp); font-style:italic; font-size:1.16rem; color:var(--papyrus); opacity:.92}

/* виньетка-мотив */
.vignette{margin:1.6rem 0 .4rem; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:3px; overflow:hidden; background:color-mix(in srgb,var(--night-2) 70%, transparent)}
.vignette svg{display:block; width:100%; height:auto}
.vignette .vg-pulse{transform-origin:center; animation:vgpulse 5s ease-in-out infinite}
.vignette .vg-rise{animation:vgrise 6s ease-in-out infinite}
.vignette .vg-spin{transform-origin:center; animation:vgspin 30s linear infinite}
.vignette .vg-flame{transform-origin:50% 100%; animation:vgflame 2.4s ease-in-out infinite}
.vignette .vg-sway{transform-origin:50% 100%; animation:vgsway 7s ease-in-out infinite}
.vignette .vg-drift{animation:vgdrift 18s linear infinite}
.vignette .vg-fall{animation:vgfall 5s ease-in infinite}
.vignette .vg-blink{animation:vgblink 4s ease-in-out infinite}
.vignette .vg-grow{transform-origin:50% 100%; animation:vggrow 6s ease-in-out infinite}
.vignette .vg-shake{animation:vgshake 5s ease-in-out infinite}
.vignette .vg-slow{transform-origin:center; animation:vgspin 70s linear infinite}
.vignette .d1{animation-delay:.5s} .vignette .d2{animation-delay:1.1s} .vignette .d3{animation-delay:1.8s}
@keyframes vgpulse{0%,100%{opacity:.55; transform:scale(1)}50%{opacity:1; transform:scale(1.06)}}
@keyframes vgrise{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@keyframes vgspin{to{transform:rotate(360deg)}}
@keyframes vgflame{0%,100%{transform:scaleY(1) scaleX(1); opacity:.85}50%{transform:scaleY(1.18) scaleX(.94); opacity:1}}
@keyframes vgsway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes vgdrift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
@keyframes vgfall{0%{transform:translateY(-6px); opacity:0}20%{opacity:.9}100%{transform:translateY(26px); opacity:0}}
@keyframes vgblink{0%,90%,100%{opacity:1}95%{opacity:.25}}
@keyframes vggrow{0%,100%{transform:scaleY(.96)}50%{transform:scaleY(1.05)}}
@keyframes vgshake{0%,92%,100%{transform:translateX(0)}94%{transform:translateX(-2px)}96%{transform:translateX(2px)}98%{transform:translateX(-1px)}}

/* иллюстрация станции или пролога (необязательное поле art в hero-data).
   Появление — общий класс .rv: он уже выключен в @media (prefers-reduced-motion:reduce). */
.art{width:100%; max-width:var(--measure); margin:1.8rem auto .4rem;
  border:1px solid color-mix(in srgb,var(--mist) 34%,transparent);
  border-radius:3px; overflow:hidden; background:color-mix(in srgb,var(--night-2) 70%, transparent)}
.art img{display:block; width:100%; max-width:100%; height:auto}
.art figcaption{padding:.75rem .95rem .85rem; font-size:.82rem; line-height:1.5; color:var(--mist)}
.art .art-note{display:block; margin-top:.4rem; opacity:.92}
.art .art-credit{display:block; margin-top:.5rem; font-size:.72rem; letter-spacing:.04em; opacity:.72}
.art .art-credit a{color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.art .art-credit a:hover{border-bottom-color:var(--accent)}
/* в прологе — тот же кадр, но со своими полями: пролог центрирован сеткой,
   а внизу у него абсолютная подсказка «вниз ↓», на которую наезжать нельзя */
.prologue .art{position:relative; z-index:2; margin:2.2rem auto 4.4rem;
  max-width:min(460px, calc(100% - 48px))}

/* слои погружения */
.layer[hidden]{display:none}
.layer{margin-top:1.6rem}
.layer-label{display:flex; align-items:baseline; gap:.7rem; margin:1.8rem 0 .8rem}
.layer-label .rom{font-family:var(--disp); font-weight:900; color:var(--accent); opacity:.7; font-size:1rem}
.layer-label .lname{font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mist)}
/* голос первоисточника */
.verse{margin:0 0 1.4rem; padding:1.3rem 1.4rem; position:relative;
  border-top:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.verse blockquote{font-family:var(--serif); font-size:1.24rem; line-height:1.75; font-style:italic; color:var(--papyrus)}
.verse.retold blockquote{font-family:var(--disp); font-style:normal; font-size:1.14rem}
.verse figcaption{margin-top:.9rem; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mist)}
/* бейдж честности — единый вид с «Одиссеей»: рамка, без заливки */
.v-badge{display:inline-block; margin-bottom:.7rem; padding:.16rem .55rem; border-radius:2px;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--accent); background:transparent;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.verse.retold .v-badge{background:transparent; color:var(--mist); border:1px solid rgba(255,255,255,.35)}

/* голоса читавших миф до нас */
.voice{margin:0 0 1.1rem; padding:1rem 1.2rem; border-radius:4px;
  border-left:2px solid var(--accent2);
  background:color-mix(in srgb,var(--accent2) 9%,transparent)}
.voice blockquote{font-family:var(--serif); font-style:italic; font-size:1.04rem; line-height:1.7; color:var(--papyrus)}
.voice figcaption{margin-top:.6rem; font-size:.8rem; color:var(--accent)}
.voice .v-badge{margin-bottom:.5rem}
.voice .v-badge.p{background:transparent; color:var(--mist); border:1px solid rgba(255,255,255,.28)}

.retell{font-family:var(--disp); font-size:1.22rem; line-height:1.7;
  border-top:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent); padding:1.3rem 1.4rem}
.sublabel{display:block; font-weight:600; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); margin:1.4rem 0 .5rem}
.symbol p:first-of-type::first-letter{font-family:var(--disp); font-weight:900; float:left;
  font-size:3rem; line-height:.82; padding-right:.5rem; color:var(--accent2)}
.practice{border-left:2px solid var(--accent2); padding:.2rem 0 .2rem 1.1rem}
.intuition{font-family:var(--disp); font-style:italic; font-size:1.2rem; color:var(--papyrus); opacity:.95}
.iam{font-family:var(--disp); font-size:1.15rem; color:var(--accent); border-left:2px solid var(--accent); padding-left:1.1rem}
.st-question{margin-top:1.4rem; font-family:var(--disp); font-style:italic; color:var(--accent); font-size:1.15rem}

/* путь целиком / вопрос / рядом / источники */
.path{background:linear-gradient(180deg, color-mix(in srgb,var(--accent2) 10%,transparent), transparent)}
.path .quote{font-family:var(--disp); font-size:1.25rem; line-height:1.7;
  border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding:1.4rem 1.5rem; margin-top:1.4rem}
.question{text-align:center}
.question .q{font-family:var(--disp); font-style:italic; color:var(--accent);
  font-size:clamp(1.5rem,4.4vw,2.3rem); line-height:1.4; max-width:620px; margin:0 auto}
.sources ul{list-style:none}
.sources li{padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:.95rem; color:var(--mist)}
.sources a{color:var(--papyrus); text-decoration:none; border-bottom:1px solid transparent}
.sources a:hover{border-bottom-color:var(--accent)}
.sources .tag{display:inline-block; min-width:2.4em; margin-right:.6rem; font-size:.66rem; letter-spacing:.16em; color:var(--accent)}
.related{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem}
.related a{text-decoration:none; padding:.5rem 1.1rem; border-radius:2px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:var(--papyrus); font-size:.9rem; transition:.25s}
.related a:hover{background:var(--accent); color:var(--ink)}
.rel-soon{padding:.5rem 1.1rem; border-radius:2px; border:1px dashed color-mix(in srgb,var(--mist) 45%,transparent);
  color:var(--mist); font-size:.9rem; cursor:default}
.rel-soon em{font-style:normal; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-left:.35rem}
footer{text-align:center; padding:6vh 24px 12vh; color:var(--papyrus);
  border-top:1px solid rgba(255,255,255,.18); font-size:.82rem}
footer .mea{margin:2.2rem auto 1rem; opacity:.75}
footer .motto{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem}
footer a{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
footer .stamp{display:block; margin-top:1rem; font-size:.7rem; opacity:.75; letter-spacing:.1em}
footer .course-line{margin:0 0 1.2rem; font-size:.92rem; color:var(--mist)}
footer .course-line a{color:var(--accent); font-weight:600;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
footer .course-line a:hover{border-bottom-color:var(--accent)}

/* ---------- РЕЛЬС СТАНЦИЙ ---------- */
#rail{position:fixed; right:24px; top:50%; transform:translateY(-50%);
  height:62vh; width:2px; background:rgba(255,255,255,.22); z-index:40}
#rail::after{content:""; position:absolute; bottom:-5px; left:50%; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg); background:var(--accent)}
#rail .dot{position:absolute; left:50%; width:7px; height:7px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.5); border:0; cursor:pointer; padding:0; transition:background .2s, box-shadow .2s}
#rail .dot:hover,#rail .dot.active{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
#railMark{position:absolute; left:50%; top:0; width:14px; height:14px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--papyrus); border:2px solid var(--accent); pointer-events:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}

/* ---------- ЛОТ ГЛУБИНЫ ---------- */
#depthlot{position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:41;
  display:flex; flex-direction:column; gap:9px; padding:.7rem .5rem; border-radius:4px;
  background:color-mix(in srgb,var(--night) 82%, transparent); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
#depthlot .d-title{writing-mode:vertical-rl; transform:rotate(180deg); font-size:.56rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--mist); margin:0 auto .2rem}
#depthlot button{width:30px; height:30px; padding:0; cursor:pointer; font-family:var(--disp); font-size:.8rem;
  color:var(--papyrus); background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:50%; transition:.22s}
#depthlot button:hover{border-color:var(--accent); color:var(--accent)}
#depthlot button.passed{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
#depthlot button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--ink)}
/* подпись слоя: рядом с лотом, не налезая, и только когда есть что сказать */
#depthCap{position:fixed; left:84px; top:50%; transform:translateY(-50%); z-index:41;
  width:200px; padding:.7rem .8rem; border-radius:4px;
  background:color-mix(in srgb,var(--night) 88%, transparent); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  font-size:.78rem; line-height:1.45; color:var(--mist);
  pointer-events:none; opacity:0; transition:opacity .3s}
#depthCap.show{opacity:1}
@media (max-width:1100px){ #depthCap{display:none} }
#depthCap b{display:block; color:var(--accent); font-size:.82rem; letter-spacing:.06em; margin-bottom:.2rem}

/* появление */
.rv{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.rv.in{opacity:1; transform:none}

/* на телефоне рельс не помещается — станции листаются полосой под вступлением */
.station-nav{display:none}
@media (max-width:900px){
  .station-nav{display:flex; gap:.5rem; overflow-x:auto; padding:.2rem 0 .6rem;
    margin:1.6rem 0 0; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .station-nav::-webkit-scrollbar{display:none}
  .station-nav a{flex:none; text-decoration:none; padding:.45rem .9rem; border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
    color:var(--papyrus); font-size:.8rem; white-space:nowrap}
  .station-nav a.active{background:var(--accent); color:var(--ink); border-color:var(--accent)}
}
@media (max-width:900px){
  #rail{display:none}
  #depthCap{display:none}
  #depthlot{left:50%; top:auto; bottom:12px; transform:translateX(-50%); flex-direction:row; gap:7px; padding:.4rem .55rem;
    transition:opacity .3s ease, transform .3s ease}
  #depthlot .d-title{display:none}
  #depthlot button{width:28px; height:28px}
  body:not([data-scrolled]) #depthlot{opacity:0; transform:translateX(-50%) translateY(24px); pointer-events:none}
  .glyph{right:-.4rem}
  footer{padding-bottom:calc(8vh + 60px)}
}
@media (max-width:560px){ body{font-size:16px} .glyph{font-size:6.5rem} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stars i,.halo,.mist-band,.cap,.title-block,.vignette *{animation:none}
  .cap{opacity:1} .title-block{opacity:1}
  .rv{opacity:1; transform:none; transition:none}
  .readbar{transition:none}
}