/* ==========================================================================
   Свет и серебро. Дело «Синей бусины» — Наталья Караванова
   Авторский одностраничный прелендинг (РФ: 152-ФЗ, 38-ФЗ, 436-ФЗ, модерация Директа)
   Локальные шрифты без обращения к зарубежным серверам
   ========================================================================== */

:root {
  /* Палитра: осенняя акварельная бумага, тушь, латунь и кобальт синей бусины */
  --paper-bg: #f5efe4;
  --paper-elevated: #fbf8f2;
  --paper-warm: #ede3d2;
  --ink-primary: #1f1a16;
  --ink-secondary: #4a3f36;
  --ink-muted: #726457;
  --ink-line: rgba(45, 34, 24, 0.16);
  --ink-line-strong: rgba(45, 34, 24, 0.34);

  /* Акцент «Синей бусины» */
  --bead-blue: #163d94;
  --bead-blue-hover: #0f2c6e;
  --bead-blue-glow: rgba(22, 61, 148, 0.26);
  --bead-blue-soft: rgba(22, 61, 148, 0.08);

  /* Осенняя охра и старая латунь */
  --autumn-amber: #a85d28;
  --autumn-amber-soft: rgba(168, 93, 40, 0.11);
  --brass: #8c6b3c;

  /* Шрифты (100% локальные WOFF2) */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Literata', Georgia, 'Book Antiqua', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Размер текста в читалке (управляется кнопками А- / А+) */
  --reader-font-size: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--paper-bg);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 75% 45% at 12% 8%, rgba(196, 128, 62, 0.11) 0%, transparent 70%),
    radial-gradient(ellipse 65% 40% at 88% 18%, rgba(30, 68, 138, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 20% 55%, rgba(168, 93, 40, 0.07) 0%, transparent 72%),
    radial-gradient(ellipse 80% 45% at 85% 82%, rgba(35, 62, 112, 0.07) 0%, transparent 70%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.21 0 0 0 0 0.14 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,
footer {
  position: relative;
  z-index: 2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

.container--narrow {
  max-width: 780px;
}

/* ==========================================================================
   ЭКРАН 1 — ШАПКА-КОЛЛАЖ (БЕЗ КНОПОК — ЗАЩИТА ОТ СКЛИКИВАНИЯ И МИСКЛИКОВ)
   ========================================================================== */

.hero {
  padding: 22px 0 34px;
}

.hero__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
}

.hero__author {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border: 1px solid var(--ink-line-strong);
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  background: rgba(251, 248, 242, 0.72);
  user-select: none;
}

.hero__frame {
  position: relative;
  padding: 9px;
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 4px;
  box-shadow:
    0 18px 42px rgba(28, 20, 12, 0.13),
    0 2px 8px rgba(28, 20, 12, 0.07);
}

.hero__frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(140, 107, 60, 0.28);
  pointer-events: none;
}

.hero__image {
  width: 100%;
  aspect-ratio: 1376 / 768;
  object-fit: cover;
  border-radius: 2px;
}

.hero__title-block {
  text-align: center;
  margin-top: 24px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
}

.hero__subtitle {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(22px, 3.3vw, 32px);
  line-height: 1.2;
  color: var(--bead-blue);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-secondary);
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.03em;
}

.hero__meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5b8ef0, var(--bead-blue));
  display: inline-block;
}

.hero__meta-free {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--autumn-amber-soft);
  border: 1px solid rgba(168, 93, 40, 0.3);
  color: #7d3f14;
  font-weight: 600;
}

.hero__scroll-hint {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  user-select: none;
  pointer-events: none;
}

.beads-trio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bead-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #7dabff 0%, #1e4db7 45%, #0c235c 100%);
  box-shadow: 0 2px 5px rgba(14, 38, 99, 0.35);
}

/* ==========================================================================
   СЕКЦИИ И ДЕКОРАТИВНЫЕ РАЗДЕЛИТЕЛИ (ПРОЗРАЧНЫЙ PNG/WEBP)
   ========================================================================== */

.section {
  padding: 34px 0;
}

.section__header {
  text-align: center;
  margin-bottom: 26px;
}

.section__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--autumn-amber);
  margin-bottom: 6px;
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-primary);
}

.section__subtitle {
  margin: 8px auto 0;
  max-width: 600px;
  font-size: 15.5px;
  color: var(--ink-muted);
}

.art-divider {
  max-width: 640px;
  margin: 4px auto;
  padding: 0 20px;
}

.art-divider img,
.art-vignette img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(32, 22, 12, 0.13));
}

.art-vignette {
  max-width: 620px;
  margin: 0 auto 22px;
}

/* ==========================================================================
   ЭКРАН 2 — ТЕГИ («ЧТО ЖДЁТ ВНУТРИ»)
   ========================================================================== */

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 880px;
  margin: 0 auto;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-primary);
  box-shadow: 0 2px 6px rgba(31, 26, 22, 0.04);
  user-select: none;
}

.tag-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}

.tag-pill--accent {
  border-color: rgba(22, 61, 148, 0.38);
  background: linear-gradient(180deg, #fcfaf5 0%, #eef2fa 100%);
}

.tag-pill--accent::before {
  background: radial-gradient(circle at 30% 30%, #6d9eff, var(--bead-blue));
}

/* ==========================================================================
   ЭКРАН 3 — ПАРАДНЫЙ ШИРОКИЙ МОКАП ВО ВСЮ ШИРИНУ И АННОТАЦИЯ ПОД НИМ
   ========================================================================== */

.mockup-showcase {
  margin: 0 auto 30px;
  padding: 9px;
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 5px;
  box-shadow:
    0 18px 44px rgba(31, 23, 15, 0.14),
    0 2px 8px rgba(31, 23, 15, 0.06);
  position: relative;
}

.mockup-showcase::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(140, 107, 60, 0.25);
  pointer-events: none;
}

.mockup-showcase__img {
  border-radius: 2px;
  width: 100%;
  aspect-ratio: 1672 / 940;
  object-fit: cover;
}

.mockup-showcase__caption {
  padding: 10px 8px 3px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-muted);
}

.annotation-box {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 5px;
  padding: clamp(22px, 4vw, 36px) clamp(20px, 5vw, 44px);
  box-shadow: 0 10px 28px rgba(31, 23, 15, 0.07);
}

.annotation-box__eyebrow {
  text-align: center;
  margin-bottom: 14px;
}

.annotation-box__lead {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 27px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink-primary);
}

.annotation-box p {
  margin: 0 0 15px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-secondary);
}

.annotation-box p:last-child {
  margin-bottom: 0;
}

.annotation-box__clue {
  margin: 18px 0 !important;
  padding: 12px 18px;
  border-left: 3px solid var(--bead-blue);
  background: var(--bead-blue-soft);
  font-weight: 600;
  color: var(--ink-primary) !important;
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   ЭКРАН 4 — СВОРАЧИВАЕМАЯ ЧИТАЛКА ЗА КНОПКОЙ «ЧИТАТЬ ФРАГМЕНТ БЕСПЛАТНО»
   ========================================================================== */

.reader-launcher {
  max-width: 760px;
  margin: 22px auto 0;
  padding: 24px 22px;
  background: linear-gradient(180deg, #fcf9f2 0%, #efe6d6 100%);
  border: 1px solid var(--ink-line-strong);
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(31, 23, 15, 0.08);
}

.reader-launcher__meta {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 23px);
  color: var(--ink-secondary);
}

.reader-toggle-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 5px;
  border: 1px solid #2b221a;
  background: linear-gradient(180deg, #352b22 0%, #1f1914 100%);
  color: #f8f2e7;
  font-family: var(--font-ui);
  font-size: clamp(15.5px, 2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(31, 25, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.16s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.reader-toggle-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #42362b 0%, #282019 100%);
  box-shadow: 0 12px 24px rgba(31, 25, 20, 0.28);
}

.reader-toggle-btn[aria-expanded="true"] {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--ink-line-strong);
  box-shadow: none;
}

.reader-launcher__hint {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
}

.reader-collapse {
  max-width: 780px;
  margin: 18px auto 0;
}

.reader-collapse[hidden] {
  display: none !important;
}

.reader-card {
  position: relative;
  background: var(--paper-elevated);
  color: var(--ink-primary);
  border: 1px solid var(--ink-line-strong);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(27, 20, 14, 0.13);
  overflow: hidden;
  animation: unfoldReader 0.32s ease-out;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

@keyframes unfoldReader {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reader-card--dark {
  background: #181614;
  color: #e7dfd3;
  border-color: rgba(214, 193, 161, 0.24);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.reader-card__progress-track {
  height: 3px;
  width: 100%;
  background: rgba(140, 107, 60, 0.15);
}

.reader-card__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--autumn-amber), var(--bead-blue));
  transition: width 0.15s linear;
}

.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--ink-line);
  background: rgba(237, 227, 210, 0.45);
  font-family: var(--font-ui);
  font-size: 13px;
}

.reader-card--dark .reader-toolbar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.reader-toolbar__label {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
}

.reader-card--dark .reader-toolbar__label {
  color: #bfb3a2;
}

.reader-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reader-ctrl-btn {
  appearance: none;
  border: 1px solid var(--ink-line-strong);
  background: var(--paper-elevated);
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}

.reader-ctrl-btn:hover {
  border-color: var(--bead-blue);
}

.reader-card--dark .reader-ctrl-btn {
  background: #25221f;
  color: #efe7db;
  border-color: rgba(255, 255, 255, 0.2);
}

.reader-body {
  padding: 30px clamp(20px, 5vw, 54px) 22px;
  font-family: var(--font-body);
  font-size: var(--reader-font-size);
  line-height: 1.78;
}

.reader-body p {
  margin: 0 0 1.05em;
  text-indent: 1.4em;
}

.reader-body p.no-indent {
  text-indent: 0;
}

.reader-body p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 2.7em;
  font-weight: 700;
  float: left;
  line-height: 0.84;
  padding-right: 10px;
  padding-top: 4px;
  color: var(--bead-blue);
}

.reader-card--dark .reader-body p:first-child::first-letter {
  color: #79a4ff;
}

.reader-body p:first-child {
  text-indent: 0;
}

.reader-scene-break {
  text-align: center;
  margin: 22px 0;
  letter-spacing: 0.5em;
  color: var(--brass);
  user-select: none;
}

.reader-hook-line {
  position: relative;
  margin-bottom: 0 !important;
  font-weight: 500;
}

.reader-cta-box {
  margin: 26px clamp(16px, 4vw, 44px) 32px;
  padding: 26px 22px;
  text-align: center;
  border-top: 1px dashed var(--ink-line-strong);
  border-bottom: 1px dashed var(--ink-line-strong);
  background: rgba(22, 61, 148, 0.04);
  border-radius: 4px;
}

.reader-card--dark .reader-cta-box {
  background: rgba(109, 158, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.reader-cta-box__tease {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.5vw, 23px);
  color: var(--ink-secondary);
}

.reader-card--dark .reader-cta-box__tease {
  color: #d6cab8;
}

.reader-close-bottom {
  margin-top: 14px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 5px;
  background: linear-gradient(180deg, #2150ba 0%, var(--bead-blue) 55%, #102e73 100%);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: clamp(15.5px, 2vw, 17.5px);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    0 10px 24px var(--bead-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 28px rgba(22, 61, 148, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cta-button:active {
  transform: translateY(0);
}

.cta-button__bead {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9ec0ff 45%, #3f76e6 100%);
  flex-shrink: 0;
}

.reader-cta-box__coffee {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.reader-cta-box__coffee strong {
  color: var(--ink-primary);
}

.reader-card--dark .reader-cta-box__coffee {
  color: #b8ac9b;
}

.reader-card--dark .reader-cta-box__coffee strong {
  color: #f3ece0;
}

/* ==========================================================================
   ГАЛЕРЕЯ ПЕРСОНАЖЕЙ — «ПОЛИЦЕЙСКАЯ ДОСКА / АРХИВ СЛЕДСТВИЯ»
   ========================================================================== */

.evidence-board {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, #342b24 0%, #231c17 100%);
  border: 6px solid #423326;
  outline: 1px solid rgba(255, 240, 215, 0.18);
  outline-offset: -10px;
  border-radius: 6px;
  padding: clamp(22px, 3.5vw, 36px) clamp(14px, 3vw, 28px) clamp(26px, 4vw, 38px);
  box-shadow:
    0 22px 50px rgba(24, 17, 11, 0.28),
    inset 0 0 60px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

/* Лёгкая фактура сукна/пробки доски */
.evidence-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 5px);
}

.evidence-board__stamp {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(226, 208, 181, 0.24);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cbbba3;
}

.evidence-board__hint {
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 13.5px;
  color: #dfd2be;
}

/* Декоративные нити расследования на широких экранах */
.evidence-threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.evidence-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 16px;
}

.dossier-pin-card {
  appearance: none;
  text-align: left;
  width: 100%;
  background: #f8f3e8;
  border: 1px solid rgba(35, 26, 18, 0.35);
  border-radius: 3px;
  padding: 10px 9px 12px;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.42),
    0 2px 4px rgba(0, 0, 0, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

/* Едва заметный живой разворот карточек, будто приколоты вручную */
.dossier-pin-card:nth-child(odd) {
  transform: rotate(-1.1deg);
}

.dossier-pin-card:nth-child(even) {
  transform: rotate(1.1deg);
}

.dossier-pin-card:nth-child(3n) {
  transform: rotate(-0.4deg);
}

.dossier-pin-card:hover,
.dossier-pin-card:focus-visible {
  transform: translateY(-5px) rotate(0deg) scale(1.02);
  background: #fffdf8;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(125, 171, 255, 0.55);
  outline: none;
  z-index: 4;
}

/* Канцелярская кнопка-гвоздик сверху карточки */
.dossier-pin-card__pin {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5dfad 0%, #b58946 52%, #5c3f17 100%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  z-index: 3;
}

/* Особые синие булавки для ключевой четвёрки тайны «Синей бусины» */
.dossier-pin-card--blue-pin .dossier-pin-card__pin {
  background: radial-gradient(circle at 32% 30%, #9ec2ff 0%, #1c4ec2 52%, #0a1f56 100%);
}

.dossier-pin-card__photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #dfd5c5;
  border: 1px solid rgba(45, 34, 24, 0.18);
}

.dossier-pin-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.dossier-pin-card:hover .dossier-pin-card__photo {
  transform: scale(1.04);
}

.dossier-pin-card__name {
  display: block;
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.12;
  color: #1d1712;
}

.dossier-pin-card__role {
  display: block;
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.35;
  color: #6b5b4c;
}

.dossier-pin-card__more {
  margin-top: auto;
  padding-top: 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bead-blue);
}

/* Модальное окно досье персонажа */
.char-modal-window {
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper-elevated);
  color: var(--ink-primary);
  border: 1px solid var(--ink-line-strong);
  border-radius: 6px;
  padding: clamp(18px, 3.5vw, 30px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.48);
  position: relative;
}

.char-dossier-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: center;
}

.char-dossier__portrait-frame {
  padding: 7px;
  background: #ffffff;
  border: 1px solid var(--ink-line-strong);
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(27, 20, 14, 0.12);
}

.char-dossier__portrait {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  margin: 0 auto;
  background: #f5efe4;
}

.char-dossier__stamp {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(168, 93, 40, 0.42);
  background: var(--autumn-amber-soft);
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #824216;
  margin-bottom: 10px;
}

.char-dossier__name {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-primary);
}

.char-dossier__bio {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-secondary);
}

.char-dossier__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
}

.char-nav-btn {
  appearance: none;
  background: var(--paper-warm);
  border: 1px solid var(--ink-line-strong);
  border-radius: 4px;
  padding: 7px 13px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  cursor: pointer;
}

.char-nav-btn:hover {
  border-color: var(--bead-blue);
  color: var(--bead-blue);
}

/* ==========================================================================
   ЭКРАН 5 — ВИДЕО-ЗАВЛЕКАЛКА ИЗ СЕРИАЛА (ВК ВИДЕО БЕЗ АВТОЗАПУСКА)
   ========================================================================== */

.video-frame-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 10px;
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 5px;
  box-shadow: 0 16px 38px rgba(28, 20, 12, 0.12);
}

.video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #1c1917;
  background-image: url('./img/video_poster.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  overflow: hidden;
}

.video-load-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #1c1917;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
}

.video-load-btn picture {
  display: block;
  width: 100%;
  height: 100%;
}

.video-load-btn__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, filter 220ms ease;
}

.video-load-btn__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(10, 18, 34, 0.08), rgba(10, 18, 34, 0.54));
  font-family: var(--font-ui);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.video-load-btn__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(22, 61, 148, 0.88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
  font-size: 30px;
  line-height: 1;
}

.video-load-btn__label {
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 0.02em;
}

.video-load-btn:hover .video-load-btn__poster {
  transform: scale(1.015);
  filter: brightness(0.92);
}

.video-load-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}

.video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  margin: 12px auto 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink-muted);
}

.video-caption a {
  color: var(--bead-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   ЭКРАН 6 — СЛОВО ОТ АВТОРА, ОТКЛИКИ ЧИТАТЕЛЕЙ И ВТОРАЯ КНОПКА НА АТ
   ========================================================================== */

.author-note {
  background: var(--paper-elevated);
  border: 1px solid var(--ink-line-strong);
  border-radius: 5px;
  padding: clamp(24px, 4.5vw, 42px);
  box-shadow: 0 12px 30px rgba(31, 24, 17, 0.08);
  position: relative;
}

.author-note::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(140, 107, 60, 0.22);
  pointer-events: none;
}

.author-note p {
  margin: 0 0 15px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-secondary);
}

.author-note__invite {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px !important;
  color: var(--ink-primary) !important;
  margin-top: 18px !important;
}

.author-note__sign {
  margin-top: 14px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-primary);
}

.reviews-strip {
  margin-top: 28px;
}

.reviews-strip__label {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.review-card {
  margin: 0;
  padding: 16px 18px;
  background: rgba(251, 248, 242, 0.78);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  font-style: italic;
}

.final-cta {
  margin-top: 34px;
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.9) 0%, rgba(235, 226, 211, 0.75) 100%);
  border: 1px solid var(--ink-line-strong);
  border-radius: 6px;
}

.final-cta__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 700;
  color: var(--ink-primary);
}

.final-cta__sub {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--ink-secondary);
}

/* ==========================================================================
   ПОДВАЛ, COOKIE-БАННЕР И МОДАЛЬНЫЕ ОКНА (152-ФЗ, 436-ФЗ, 38-ФЗ)
   ========================================================================== */

.site-footer {
  margin-top: 36px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--ink-line-strong);
  background: rgba(232, 222, 206, 0.55);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ink-secondary);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.site-footer a,
.footer-link-btn {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.site-footer a:hover,
.footer-link-btn:hover {
  color: var(--bead-blue);
}

.site-footer__disclaimer {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 18px;
  background: #211c18;
  color: #ede5d8;
  border: 1px solid rgba(214, 193, 161, 0.28);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.48;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner__text {
  flex: 1 1 420px;
  margin: 0;
}

.cookie-banner__text button {
  background: none;
  border: 0;
  padding: 0;
  color: #93b5ff;
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-btn {
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.cookie-btn--accept {
  background: #2252be;
  color: #ffffff;
}

.cookie-btn--accept:hover {
  background: #1a429e;
}

.cookie-btn--decline {
  background: transparent;
  color: #d6cbb9;
  border-color: rgba(214, 203, 185, 0.32);
}

.cookie-btn--decline:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 11, 0.72);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal-window {
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper-elevated);
  color: var(--ink-primary);
  border: 1px solid var(--ink-line-strong);
  border-radius: 6px;
  padding: 26px clamp(18px, 4vw, 34px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.62;
}

.modal-window__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.modal-window__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
}

.modal-close-btn {
  background: none;
  border: 1px solid var(--ink-line-strong);
  border-radius: 4px;
  padding: 5px 11px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-primary);
  flex-shrink: 0;
}

.modal-window h3 {
  margin: 18px 0 6px;
  font-size: 15px;
  color: var(--ink-primary);
}

.modal-window p,
.modal-window ul {
  margin: 0 0 10px;
  color: var(--ink-secondary);
}

.modal-window ul {
  padding-left: 20px;
}

/* ==========================================================================
   АДАПТИВНОСТЬ ПОД ПЛАНШЕТЫ И СМАРТФОНЫ
   ========================================================================== */

@media (max-width: 920px) {
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .evidence-threads {
    display: none;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 11px;
  }

  .char-dossier-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .char-dossier__portrait {
    max-height: 44vh;
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 14px;
  }

  .hero {
    padding: 14px 0 26px;
  }

  .hero__frame,
  .mockup-showcase {
    padding: 5px;
  }

  .hero__meta {
    font-size: 13px;
    gap: 6px 10px;
  }

  .section {
    padding: 26px 0;
  }

  .tag-pill {
    font-size: 14px;
    padding: 7px 13px;
  }

  .reader-toolbar {
    padding: 10px 14px;
  }

  .cta-button,
  .reader-toggle-btn {
    width: 100%;
    padding: 15px 18px;
    text-align: center;
  }

  .dossier-pin-card {
    padding: 8px 7px 10px;
  }

  .dossier-pin-card__name {
    font-size: 17px;
  }
}