/* ===========================================================================
   Дверь «Налево — встретишь»
   4 экрана: подводка → страница истории → hover закладки → финал
   Визуальный язык: тот же, что первый экран + «Прямо», но теплее (уголь-сепия).
   Регистр: рассказ-у-костра, книга с корешками-закладками по правому краю.
   =========================================================================== */

@import url('./hero.css');
@import url('./door2.css');

/* -------- temperature shift (warmer charcoal-sepia) -------- */
:root {
  --d3-bg:          #100B08;   /* тёплый глубокий уголь */
  --d3-bg-soft:     #1A120C;
  --d3-bg-deepest:  #080504;
  --d3-sepia-hi:    #3A2616;   /* сепия-подогрев для радиалов */
  --d3-sepia-mid:   #221609;
  --d3-ember:       #6B3F1E;   /* уголь, в котором тлеет огонь (лёгкий) */

  --d3-ink:         #F2E8D6;   /* бумага при свете лампы — тёплый белый */
  --d3-ink-dim:     rgba(242,232,214,.72);
  --d3-ink-mid:     rgba(242,232,214,.56);
  --d3-ink-mute:    rgba(242,232,214,.40);
  --d3-ink-whisper: rgba(242,232,214,.22);
  --d3-hair:        rgba(242,232,214,.10);
  --d3-hair-soft:   rgba(242,232,214,.05);

  --d3-accent:      var(--ts-accent, #C4952A);   /* та же охра, единый акцент */

  /* Tweaks-слайдеры */
  --d3-sepia:        35;   /* 0..100 — насколько тёплый сдвиг */
  --d3-darkness:     0;    /* -10..+10 — плотность фона */
  --d3-breath-scale: 1;    /* скорость дыхания (1 = базовое 14s) */
}

.door3-stage {
  background: var(--d3-bg);
  color: var(--d3-ink);
  font-family: 'Cormorant Garamond', serif;
}

/* =========================================================================
   SCREEN — общий контейнер (сцена 1920×1080 / 390×844)
   ========================================================================= */
.d3 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--d3-bg);
  isolation: isolate;
  color: var(--d3-ink);
  font-family: 'Cormorant Garamond', serif;
}

/* -------- фон: тёплый уголь с тихим сепия-светом -------- */
.d3-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 95%, var(--d3-sepia-hi) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 15%, var(--d3-sepia-mid) 0%, transparent 70%),
    linear-gradient(180deg, var(--d3-bg-deepest) 0%, var(--d3-bg) 48%, var(--d3-bg-soft) 100%);
}
.d3-bg__ember {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle 620px at 16% 84%, rgba(107,63,30,0.22), transparent 70%),
    radial-gradient(circle 540px at 88% 18%, rgba(107,63,30,0.14), transparent 70%);
  mix-blend-mode: screen;
  opacity: .9;
}
.d3-bg__breath {
  position: absolute; inset: -4%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(196,149,42,0.06) 0%, transparent 70%);
  animation: d3-breath 14s ease-in-out infinite;
}
@keyframes d3-breath {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}

/* тонкое зерно — «бумажная шероховатость» */
.d3-grain {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.7  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.d3-vignette {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.5) 100%);
}

/* углы — подписи/метки */
.d3-corner {
  position: absolute;
  z-index: 6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d3-ink-whisper);
  pointer-events: none;
}
.d3-corner--tl { top: 44px; left: 60px; }
.d3-corner--tr { top: 44px; right: 60px; }
.d3-corner--bl { bottom: 44px; left: 60px; }
.d3-corner--br { bottom: 44px; right: 60px; }

/* breadcrumb — возврат к трём дверям */
.d3-home {
  position: absolute; bottom: 44px; left: 60px; z-index: 6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d3-ink-mute);
  background: none; border: none; cursor: pointer;
  padding: 0;
  transition: color 280ms ease;
}
.d3-home:hover { color: var(--d3-ink-dim); }
.d3-home::before { content: '← '; color: var(--d3-ink-whisper); }
/* на странице чтения — pill-подложка, чтобы не пересекаться с хвостом текста */
.d3--read .d3-home {
  background: var(--d3-bg);
  border: 1px solid rgba(242,232,214,0.14);
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  color: var(--d3-ink-dim);
}
.d3--read .d3-home:hover { color: var(--d3-ink); border-color: rgba(196,149,42,0.45); }

/* центральный фокус */
.d3-focus {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  padding: 140px 80px;
}
.d3-stack {
  max-width: 1020px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* =========================================================================
   SCREEN 01 — Подводка · «ТЫ ВЫБРАЛ — НАЛЕВО»
   ========================================================================= */
.d3--intro .d3-bg { filter: brightness(0.82) saturate(1.02); }

.d3-intro__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d3-ink-mute);
  margin-bottom: 44px;
}
.d3-intro__eyebrow::before,
.d3-intro__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--d3-ink-whisper);
  vertical-align: middle;
  margin: 0 16px;
}
.d3-intro__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 6.8vw, 108px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--d3-ink);
  margin: 0 0 14px;
  max-width: 18ch;
  text-wrap: balance;
}
.d3-intro__title em {
  font-style: italic;
  color: var(--d3-ink);
}
/* слово «Семь» — тонкая охристая линия-подчёркивание */
.d3-seven {
  position: relative;
  display: inline-block;
  color: inherit;
}
.d3-seven::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  bottom: 0.08em;
  height: 1px;
  background: var(--d3-accent);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  animation: d3-seven-in 1400ms cubic-bezier(.2,.7,.2,1) 820ms forwards;
}
@keyframes d3-seven-in {
  to { transform: scaleX(1); }
}
.d3-intro__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.42;
  color: var(--d3-ink-dim);
  margin: 44px 0 0;
  max-width: 40ch;
  text-wrap: pretty;
}
.d3-intro__subtitle em {
  font-style: italic;
  color: var(--d3-ink);
}
.d3-intro__cta {
  margin-top: 80px;
  background: transparent;
  border: 1px solid var(--d3-hair);
  color: var(--d3-ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 16px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transition: all 260ms ease;
  position: relative;
  overflow: hidden;
}
.d3-intro__cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(196,149,42,0.28), transparent 70%);
  opacity: 0;
  transition: opacity 480ms ease;
}
.d3-intro__cta:hover {
  border-color: var(--d3-accent);
  color: var(--d3-accent);
}
.d3-intro__cta:hover::before { opacity: 1; }
.d3-intro__cta__arrow {
  display: inline-block;
  transition: transform 320ms ease;
}
.d3-intro__cta:hover .d3-intro__cta__arrow { transform: translateX(4px); }

.d3-intro__hint {
  margin-top: 68px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d3-ink-whisper);
  animation: d3-hint-pulse 3.6s ease-in-out infinite;
}
@keyframes d3-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* Фоновый намёк — силуэт книги (очень тихий) */
.d3-intro__book {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0.08;
}
.d3-intro__book svg { width: 620px; height: auto; }

/* =========================================================================
   SCREEN 02/03 — Страница истории (book layout)
   ========================================================================= */
.d3--read { overflow: hidden; position: relative; }

.d3-book {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

/* левая/центральная часть — читальный зал */
.d3-read {
  position: relative;
  padding: 120px 96px 720px 120px; /* большой нижний воздух: текст полностью прокручивается ВЫШЕ pill «Следующая» — последний абзац встаёт над кнопкой, не под ней */
  scroll-padding-bottom: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,232,214,0.18) transparent;
}
.d3-read::-webkit-scrollbar { width: 6px; }
.d3-read::-webkit-scrollbar-thumb { background: rgba(242,232,214,0.14); }

/* нижняя fade-маска: текст под pill «Следующая» плавно растворяется в фоне,
   а не обрывается резко за кнопкой. Маска применяется к содержимому скролла,
   а не к самой кнопке (она вне .d3-read). */
.d3-read {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - 180px),
    rgba(0,0,0,0.5) calc(100% - 80px),
    rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - 180px),
    rgba(0,0,0,0.5) calc(100% - 80px),
    rgba(0,0,0,0) 100%);
}

.d3-read__inner {
  max-width: 720px;
  margin: 0 auto;
}

.d3-read__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d3-ink-mute);
  margin-bottom: 28px;
  text-align: center;
}
.d3-read__eyebrow::before,
.d3-read__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--d3-ink-whisper);
  vertical-align: middle;
  margin: 0 14px;
}

.d3-read__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(52px, 5.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--d3-ink);
  margin: 0 0 24px;
  text-align: center;
  text-wrap: balance;
}
.d3-read__title em { font-style: italic; }
.d3-read__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--d3-ink-mid);
  margin: 0 0 72px;
  text-align: center;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.d3-read__rule {
  width: 36px; height: 1px;
  background: var(--d3-ink-whisper);
  margin: 0 auto 64px;
}

.d3-read__body p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.62;
  color: var(--d3-ink-dim);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.d3-read__body p.is-lead {
  font-size: 24px;
  color: var(--d3-ink);
  line-height: 1.58;
}
.d3-read__body p:last-child { margin-bottom: 0; }
.d3-read__body em {
  font-style: italic;
  color: var(--d3-ink);
}

/* первая литера абзаца — drop cap (тихий, антиква) */
.d3-read__body p.is-lead::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 82px;
  line-height: 0.88;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--d3-ink);
  opacity: 0;
  animation: d3-dropcap-in 1200ms cubic-bezier(.2,.7,.2,1) 700ms forwards;
}
@keyframes d3-dropcap-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* окончание главы — тихая звёздочка */
.d3-read__endmark {
  width: 100%;
  text-align: center;
  margin-top: 64px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--d3-ink-whisper);
  font-size: 22px;
  letter-spacing: 1em;
}

/* =========================================================================
   Закладки-корешки по правому краю
   (линия-«корешок книги» слева от колонки,
    названия лежат правее линии и не пересекают её)
   ========================================================================= */
.d3-shelf {
  position: relative;
  width: 116px;
  /* непрозрачная подложка цвета сцены слева мягко затемняется к 0 — 
     гарантированно перекрывает скроллящийся текст */
  background:
    linear-gradient(270deg,
      var(--d3-bg) 0%,
      var(--d3-bg) 60%,
      rgba(14,10,6,0.85) 80%,
      rgba(14,10,6,0) 100%);
}
.d3-shelf__list {
  position: relative;
  height: 100%;
  padding: 140px 0 140px 22px;   /* отступ слева: место под «tab» закладки */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* вертикальная "плоскость книги" — hairline строго СЛЕВА от корешков */
.d3-shelf__list::before {
  content: '';
  position: absolute; top: 120px; bottom: 120px; left: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--d3-hair), transparent);
}

/* head (заголовок оглавления) — скрыт на desktop */
.d3-shelf__head { display: none; }

/* один корешок */
.d3-bookmark {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 10px 18px 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 480ms cubic-bezier(.2,.7,.2,1), color 320ms ease;
  color: var(--d3-ink-dim);
}
.d3-bookmark__spine {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: inherit;
  padding: 12px 0;
}
/* tab-лента: охристая горизонтальная риска слева от корешка */
.d3-bookmark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
  width: 22px; height: 1px;
  background: var(--d3-accent);
  opacity: .55;
  transition: width 420ms cubic-bezier(.2,.7,.2,1), opacity 320ms ease, left 420ms cubic-bezier(.2,.7,.2,1), height 320ms ease;
}
/* hover: корешок "выдвигается" влево на 6-8px, лента удлиняется */
.d3-bookmark:hover,
.d3-bookmark.is-active {
  color: var(--d3-accent);
  transform: translateX(-8px);
}
.d3-bookmark:hover::before,
.d3-bookmark.is-active::before {
  width: 52px;
  left: -48px;
  opacity: 1;
  height: 2px;
}
.d3-bookmark__num {
  color: var(--d3-ink-whisper);
  font-size: 10px;
  letter-spacing: 0.3em;
}
.d3-bookmark:hover .d3-bookmark__num,
.d3-bookmark.is-active .d3-bookmark__num {
  color: var(--d3-accent);
}
/* текущая (открытая) — маленький заполненный охристый квадрат-стикер */
.d3-bookmark.is-current {
  color: var(--d3-ink);
  cursor: default;
}
.d3-bookmark.is-current::before {
  width: 9px; height: 9px;
  left: -24px;
  background: var(--d3-accent);
  opacity: 1;
}
.d3-bookmark.is-current:hover { transform: none; }

/* нижняя строка-индикатор истории */
.d3-read__footer {
  position: absolute;
  left: 120px; right: 116px;
  bottom: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d3-ink-mute);
  pointer-events: none;
  z-index: 6;
}
.d3-read__footer-name { max-width: 60%; }
.d3-read__footer-num  { color: var(--d3-ink-whisper); }

/* стрелка вниз — следующая история */
.d3-next {
  position: absolute;
  left: 50%;
  bottom: 44px;                       /* ближе ко дну, отдельно от текстовой зоны */
  transform: translateX(-50%) translateY(14px);
  background: var(--d3-bg);           /* непрозрачная pill */
  border: 1px solid rgba(242,232,214,0.14);
  border-radius: 999px;
  color: var(--d3-ink-dim);
  cursor: pointer;
  display: flex;
  flex-direction: row;                /* горизонтальная компоновка */
  align-items: center;
  gap: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding: 14px 26px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  transition: color 280ms ease, border-color 280ms ease, opacity 640ms ease, transform 640ms cubic-bezier(.2,.7,.2,1);
}
.d3-next:hover { color: var(--d3-ink); border-color: rgba(196,149,42,0.45); }
.d3--read.is-at-end .d3-next {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.d3-next__arrow {
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .7;
  position: relative;
}
.d3-next__arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* =========================================================================
   SCREEN 04 — Финал · КАРТА / СЕДЬМАЯ
   ========================================================================= */
.d3--final .d3-bg__breath { opacity: .8; }

.d3-final {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.d3-final__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d3-ink-mute);
  margin-bottom: 52px;
}
.d3-final__eyebrow::before,
.d3-final__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--d3-ink-whisper);
  vertical-align: middle;
  margin: 0 16px;
}
.d3-final__lines {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(30px, 3.0vw, 48px);
  line-height: 1.34;
  color: var(--d3-ink-dim);
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 0 72px;
  text-wrap: pretty;
}
.d3-final__lines p { margin: 0; }
.d3-final__lines p em {
  font-style: italic;
  color: var(--d3-ink);
  background-image: linear-gradient(transparent 76%, rgba(196,149,42,0.45) 76%, rgba(196,149,42,0.45) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 4px;
}
.d3-final__lines p.is-strong {
  color: var(--d3-ink);
  font-weight: 400;
}
.d3-final__actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.d3-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 1px solid var(--d3-hair);
  color: var(--d3-ink-dim);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 16px 26px;
  cursor: pointer;
  transition: all 320ms ease;
  position: relative;
  overflow: hidden;
}
.d3-btn__arrow { display: inline-block; color: var(--d3-ink-mute); transition: color 320ms ease, transform 320ms ease; }
.d3-btn:hover { border-color: var(--d3-ink); color: var(--d3-ink); }
.d3-btn:hover .d3-btn__arrow { color: var(--d3-ink); transform: translateX(3px); }
.d3-btn--primary {
  color: var(--d3-ink);
  border-color: rgba(196,149,42,0.28);
}
.d3-btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(196,149,42,0.32), transparent 70%);
  opacity: .6;
  transition: opacity 480ms ease;
}
.d3-btn--primary::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px; bottom: 10px;
  height: 2px;
  background: var(--d3-accent);
  opacity: .9;
}
.d3-btn--primary .d3-btn__arrow { color: var(--d3-accent); }
.d3-btn--primary:hover { border-color: var(--d3-accent); }
.d3-btn--primary:hover::before { opacity: 1; }
/* альтернативы финальной кнопки (tweak) */
.d3-btn--primary.is-equal { border-color: var(--d3-hair); }
.d3-btn--primary.is-equal::before { display: none; }
.d3-btn--primary.is-equal::after { background: currentColor; opacity: .35; }
.d3-btn--primary.is-equal .d3-btn__arrow { color: var(--d3-ink-dim); }
.d3-btn--primary.is-accent { color: var(--d3-accent); border-color: rgba(196,149,42,0.18); }
.d3-btn--primary.is-accent::before { display: none; }
.d3-btn--primary.is-accent::after { background: var(--d3-accent); opacity: .55; }

/* =========================================================================
   MOBILE overrides (390×844)
   Закладки переосмысливаем: на мобильном закладки не справа-вертикально,
   а тонкая полоса корешков внизу страницы истории (горизонтально).
   ========================================================================= */
.frame__stage--mobile .d3-focus { padding: 80px 28px; }
.frame__stage--mobile .d3-corner--tl,
.frame__stage--mobile .d3-corner--tr { top: 24px; font-size: 10px; letter-spacing: 0.22em; }
.frame__stage--mobile .d3-corner--tl { left: 24px; }
.frame__stage--mobile .d3-corner--tr { right: 24px; }
.frame__stage--mobile .d3-corner--br { bottom: 28px; right: 24px; font-size: 9px; letter-spacing: 0.22em; }
.frame__stage--mobile .d3-home       {
  bottom: 20px; left: 20px;
  font-size: 10px; letter-spacing: 0.22em;
  z-index: 11;
  padding: 9px 14px;
  background: var(--d3-bg);
  border-radius: 999px;
  border: 1px solid rgba(242,232,214,0.14);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.frame__stage--mobile .d3-next {
  background: var(--d3-bg);
  border-radius: 999px;
  border: 1px solid rgba(242,232,214,0.14);
  padding: 10px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
/* на mobile скрываем угловой логотип M · TSALKIN в сцене читалки — место нужно тексту и кнопке «Главы» */
.frame__stage--mobile .d3--read .d3-corner--tl,
.frame__stage--mobile .d3--read .d3-corner--bl { display: none; }

.frame__stage--mobile .d3-intro__eyebrow { font-size: 10px; letter-spacing: 0.32em; margin-bottom: 28px; }
.frame__stage--mobile .d3-intro__eyebrow::before,
.frame__stage--mobile .d3-intro__eyebrow::after { width: 18px; margin: 0 10px; }
.frame__stage--mobile .d3-intro__title { font-size: 46px; line-height: 1.08; }
.frame__stage--mobile .d3-intro__subtitle { font-size: 18px; margin-top: 32px; max-width: 28ch; }
.frame__stage--mobile .d3-intro__cta { margin-top: 52px; font-size: 10px; letter-spacing: 0.28em; padding: 14px 22px; }
.frame__stage--mobile .d3-intro__hint { margin-top: 42px; font-size: 9px; letter-spacing: 0.34em; }

/* mobile: страница истории — книга без бокового корешка; закладки в оверлее */
.frame__stage--mobile .d3-book {
  grid-template-columns: 1fr;
}
/* прячем tr-угол на mobile — его место займёт кнопка «Главы» */
.frame__stage--mobile .d3-corner--tr-mobile-hide { display: none; }

/* кнопка «Главы» — только mobile, верхний правый */
.d3-chapters-btn { display: none; }
.frame__stage--mobile .d3-chapters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 28px; right: 24px;
  z-index: 10;
  background: none;
  border: 1px solid rgba(242,232,214,0.12);
  color: var(--d3-ink-mute);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 240ms ease, border-color 240ms ease;
}
.frame__stage--mobile .d3-chapters-btn:hover { color: var(--d3-ink); border-color: rgba(242,232,214,0.24); }
.frame__stage--mobile .d3-chapters-btn__num { color: var(--d3-ink-whisper); letter-spacing: 0.22em; }

/* Оверлей оглавления (mobile) */
.frame__stage--mobile .d3-shelf {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  background: var(--d3-bg);   /* полностью непрозрачный цвет сцены */
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
  display: flex;
  flex-direction: column;
}
/* тонкий декоративный радиал-фон поверх bg, чтобы оверлей не был «плоский» */
.frame__stage--mobile .d3-shelf::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(196,149,42,0.06) 0%, rgba(196,149,42,0) 48%),
    radial-gradient(ellipse at 50% 100%,
      rgba(10,7,4,0.7) 0%, rgba(10,7,4,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.frame__stage--mobile .d3-shelf > * { position: relative; z-index: 1; }
.frame__stage--mobile .d3.is-chapters-open .d3-shelf {
  opacity: 1;
  pointer-events: auto;
}
.frame__stage--mobile .d3-shelf__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 24px 24px;
  border-bottom: 1px solid rgba(242,232,214,0.07);
}
.frame__stage--mobile .d3-shelf__head-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--d3-ink-whisper);
}
.frame__stage--mobile .d3-shelf__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--d3-ink-mute);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.frame__stage--mobile .d3-shelf__close-x { font-size: 20px; line-height: 0.8; letter-spacing: 0; color: var(--d3-ink-dim); }

.frame__stage--mobile .d3-shelf__list {
  flex: 1;
  height: auto;
  padding: 22px 24px 48px;
  gap: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}
.frame__stage--mobile .d3-shelf__list::before { display: none; }

.frame__stage--mobile .d3-bookmark {
  width: 100%;
  padding: 18px 12px 18px 28px;
  text-align: left;
  border-bottom: 1px solid rgba(242,232,214,0.05);
}
.frame__stage--mobile .d3-bookmark:last-child { border-bottom: none; }
.frame__stage--mobile .d3-bookmark__spine {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 12px;
  letter-spacing: 0.34em;
  gap: 10px;
  padding: 0;
  width: 100%;
  justify-content: space-between;
}
.frame__stage--mobile .d3-bookmark::before {
  top: 50%; bottom: auto; left: 8px; transform: translateY(-50%);
  width: 12px; height: 1px;
}
.frame__stage--mobile .d3-bookmark:hover,
.frame__stage--mobile .d3-bookmark.is-active,
.frame__stage--mobile .d3-bookmark.is-current { transform: none; }
.frame__stage--mobile .d3-bookmark.is-current::before,
.frame__stage--mobile .d3-bookmark:hover::before,
.frame__stage--mobile .d3-bookmark.is-active::before { width: 18px; left: 6px; }

.frame__stage--mobile .d3-read {
  padding: 88px 28px 420px;
  scroll-padding-bottom: 200px;
}
.frame__stage--mobile .d3-read__title { font-size: 38px; }
.frame__stage--mobile .d3-read__subtitle { font-size: 16px; margin-bottom: 40px; }
.frame__stage--mobile .d3-read__rule { margin-bottom: 40px; }
.frame__stage--mobile .d3-read__body p { font-size: 17px; line-height: 1.58; margin-bottom: 20px; }
.frame__stage--mobile .d3-read__body p.is-lead { font-size: 18px; }
.frame__stage--mobile .d3-read__body p.is-lead::first-letter { font-size: 58px; padding-right: 8px; }

/* чистый футер mobile: home слева, next справа */
.frame__stage--mobile .d3-next {
  bottom: 28px;
  left: auto; right: 24px;
  transform: translateY(14px);
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.28em;
}
.frame__stage--mobile .d3--read.is-at-end .d3-next {
  transform: translateY(0);
}
.frame__stage--mobile .d3-next__arrow { margin: 0; transform: rotate(-90deg); }

.frame__stage--mobile .d3-final__eyebrow { font-size: 10px; margin-bottom: 36px; letter-spacing: 0.32em; color: var(--d3-ink-dim); }
.frame__stage--mobile .d3-final__eyebrow::before,
.frame__stage--mobile .d3-final__eyebrow::after {
  width: 22px; height: 1px;
  background: var(--d3-accent);
  opacity: .6;
  margin: 0 12px;
}
.frame__stage--mobile .d3-final__lines { font-size: 22px; gap: 14px; margin-bottom: 40px; }
.frame__stage--mobile .d3-final__lines p.is-strong { font-size: 24px; }
.frame__stage--mobile .d3-final__actions { flex-direction: column; gap: 14px; width: 100%; }
.frame__stage--mobile .d3-btn { font-size: 11px; letter-spacing: 0.28em; padding: 14px 22px; width: 100%; justify-content: center; }
/* mobile: primary — полноценная охристая подложка */
.frame__stage--mobile .d3-btn--primary {
  background: rgba(196,149,42,0.12);
  border-color: rgba(196,149,42,0.55);
}
.frame__stage--mobile .d3-btn--primary::before { opacity: 1; }
/* mobile: secondary (без --primary) — текстовая ссылка без рамки */
.frame__stage--mobile .d3-btn:not(.d3-btn--primary) {
  border-color: transparent;
  color: var(--d3-ink-mute);
  font-size: 10px;
  letter-spacing: 0.3em;
  padding: 8px 22px;
}