/* Critical CSS - loads first for performance */
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--cocoa);background:var(--bg-0);min-height:100vh;transition:var(--transition-base);overflow-x:hidden;position:relative}#preloader{position:fixed;inset:0;background:linear-gradient(135deg,rgba(250,248,245,1) 0%,rgba(255,239,245,.98) 25%,rgba(250,248,245,1) 50%,rgba(255,239,245,.98) 75%,rgba(250,248,245,1) 100%);background-size:400% 400%;animation:gradient-breathe 8s ease infinite;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}#preloader.fade-out{opacity:0;pointer-events:none}.navbar{position:sticky;top:0;z-index:var(--z-sticky);background:repeating-linear-gradient(45deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 15px,rgba(255,192,203,.08) 15px,rgba(255,192,203,.08) 30px),repeating-linear-gradient(-45deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 15px,rgba(255,192,203,.08) 15px,rgba(255,192,203,.08) 30px),rgba(250,248,245,.9);background-blend-mode:multiply;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:var(--transition-base)}

/* Design Tokens - Elegant Cozy & Antique Gold Style */
:root {
  /* Colors - Элегантные тона пыльной розы и теплого молока */
  --bg-0: #FDF8F3; /* тёплый молочный фон */
  --bg-1: #FDF8F3; /* единый молочный фон */
  --rose: #D48295; /* элегантная пыльная роза */
  --rose-grad: linear-gradient(95deg, #D48295 0%, #E8AAB8 100%);
  --rose-deep: #963D52; /* глубокий оттенок пыльной розы для CTA и ссылок */
  --rose-deep-rgb: 150, 61, 82;
  --rose-ink: #752B3C;
  --gold: #D4AF37; /* благородное античное золото */
  --gold-soft: rgba(212, 175, 55, 0.15);
  --cocoa: #2D2926; /* тёплый тёмный */
  --ink: #1A1612; /* почти-чёрный для крупных серифных заголовков */
  --blush: #FFF0F3; /* нежный розовый блаш */

  /* Theme Accents & UI Colors */
  --canary: #FFF9C4; /* нежный лимонный */
  --warm-white: #FDF8F3; /* тёплый молочный */
  --card-bg: #FFFBF7; /* фон карточек - тёплый кремовый */
  --emerald: #D48295; /* розовый акцент */
  --navy: #2D2926; /* тёплый тёмный */
  --burgundy: #2D2926; /* тёплый для текста */
  --dusty-rose: #D48295; /* пыльная роза */
  --bronze: #C5A059; /* бронзовое золото */
  --cream: #FDF8F3; /* молочный */
  --sage: #9CAF88; /* шалфей для разнообразия */

  /* Серый вспомогательный - тёплый */
  --smoky-blue: #A89F9A; /* тёплый серый */
  --smoky-blue-light: rgba(168, 159, 154, 0.15);
  --smoky-blue-dark: #7A7067;
  
  /* Cool inks — холодные цвета для заголовков и текста статей/подкастов */
  --ink-cool: #2A2B3D;          /* graphite — заголовки статей и подкастов */
  --ink-cool-2: #4B4E60;        /* сине-серый — excerpt и описания */
  --ink-cool-3: #5E6172;        /* приглушённый — meta и подписи */
  --ink-cool-grad: #5E4773;     /* фиолетовый акцент в градиенте заголовков */

  /* Card radii — унифицированные скругления карточек */
  --card-radius-md: 18px;       /* мелкие карточки, pills */
  --card-radius-lg: 24px;       /* большие карточки, секции */

  /* Shadows - Light */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 18px 42px rgba(0,0,0,0.07);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.12);
  
  /* Typography scales - Collage Style */
  --font-display: 'Fraunces', Georgia, serif; /* Заголовки - выразительный книжный сериф */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Машинописный для цитат и фрагментов */
  --font-body: 'Lora', Georgia, serif; /* Основной текст - книжный сериф */
  --font-reading: 'Lora', Georgia, serif; /* Литературные цитаты и редкие длинные акценты */
  --font-script: 'Marck Script', cursive; /* Рукописные акценты */
  
  /* Font sizes */
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-base: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;
}

/* Dark theme - Сумеречная библиотека / Уютный готический гримуар */
:root.dark {
  /* Harmon's Color Wheel: Deep Obsidian Velvet Base (~280°) + Champagne Gold Accent (~45°) + Velvet Rose (~340°) */
  --bg-0: #0D0B12; /* Глубокий бархатный обсидиан */
  --bg-1: #15111E; /* Сумеречный бархат */
  --rose: #E2B86E; /* Благородное шампанское золото (комплементарный акцент) */
  --rose-grad: linear-gradient(135deg, #B22B58 0%, #721434 100%);
  --ui-surface: rgba(32, 14, 24, 0.85);
  --ui-surface-strong: rgba(46, 16, 30, 0.95);
  --ui-surface-tint: rgba(178, 43, 88, 0.12);
  --ui-border: rgba(226, 184, 110, 0.28);
  --ui-border-accent: rgba(226, 184, 110, 0.45);
  --rose-deep: #A8435C; /* Роскошная бархатная роза для CTA */
  --rose-deep-rgb: 168, 67, 92;
  --rose-ink: #F0CF8D;
  --gold: #E2B86E; /* Сияющее античное золото */
  --gold-soft: rgba(226, 184, 110, 0.18);
  --ink: #EFE9DF; /* Мягкий пергаментный айвори — 0% рези в темноте */
  --cocoa: #CDC5BA; /* Теплый мягкий лен для основного текста */
  --blush: #1A1426; /* Бархатный аметист для подложек */
  --card-bg: #161220; /* Благородный сумеречный фон карточек */
  --emerald: #E2B86E;
  --bronze: #D4A359;

  /* Гармоничные акценты по кругу Хармона */
  --neon-blue: #E2B86E;
  --neon-purple: #9E82BC;
  --neon-indigo: #7E659E;
  --neon-cyan: #E2B86E;
  --neon-glow: 0 0 16px rgba(226, 184, 110, 0.28);

  /* Мягкая каменная шкала (без трупного холодного серого) */
  --smoky-blue: #A39B90;
  --smoky-blue-light: rgba(226, 184, 110, 0.10);
  --smoky-blue-dark: #7A7268;

  /* Теплый пергаментный свет */
  --soft-white: #EFE9DF;
  --soft-white-dim: #CDC5BA;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
  --shadow-md: 0 8px 22px rgba(0,0,0,0.60);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.65);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.70);
}

/* Тёмная тема: смягчаем pure white в inline-стилях — не бьёт глаза */
.dark [style*="color: white"],
.dark [style*="color:white"],
.dark [style*="color: #fff"],
.dark [style*="color:#fff"],
.dark [style*="color: #FFFFFF"],
.dark [style*="color: #ffffff"] {
  color: #D8DAE4 !important;
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cocoa);
  background: var(--bg-0);
  min-height: 100vh;
  transition: var(--transition-base);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paper texture overlay - эффект бумаги */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    /* Бумажная текстура - мелкие волокна */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}

@media (max-width: 1180px) {
  body::before {
    display: none;
  }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--rose);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 999999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 6px;
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, var(--rose) 0%, #B983DB 25%, #FF1493 50%, #FFB8D1 75%, #B983DB 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 4s ease infinite;
}

/* Тёмная тема - голубо-фиолетовый градиент */
.dark .gradient-text {
  background: linear-gradient(135deg, #E28FA8 0%, #A8A0D0 25%, #E28FA8 50%, #C4B5E0 75%, #E28FA8 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ===== Стикеры-наклейки в стиле лендинга ===== */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: #FFF1B5;
  border-radius: 6px;
  box-shadow:
    0 2px 0 rgba(45, 41, 38, 0.08),
    0 6px 16px rgba(45, 41, 38, 0.1);
  transform: rotate(-2.5deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  z-index: 2;
}

.sticker:hover {
  transform: rotate(-1deg) scale(1.03);
}

.sticker-pink {
  background: var(--rose);
  color: white;
}

.sticker-cream {
  background: #FFFBF7;
  color: var(--ink);
  border: 1px solid rgba(45, 41, 38, 0.08);
}

.sticker svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* === Премиальные круглые бейджи на карточках книг === */
.book-card .sticker-round {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 8px 8px 12px;
  word-spacing: -0.05em;
  transform: rotate(-8deg);
  z-index: 5;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 3px solid #fff;
  box-shadow:
    0 8px 22px rgba(45, 41, 38, 0.18),
    0 2px 6px rgba(45, 41, 38, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08);
}

.book-card:hover .sticker-round {
  transform: rotate(-4deg) translateY(-2px) scale(1.06);
  box-shadow:
    0 14px 32px rgba(45, 41, 38, 0.26),
    0 4px 10px rgba(45, 41, 38, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.10);
}

@keyframes floatSticker {
  0% { transform: rotate(-8deg) translateY(0px) scale(1); }
  50% { transform: rotate(-5deg) translateY(-4px) scale(1.02); }
  100% { transform: rotate(-8deg) translateY(0px) scale(1); }
}

/* Иконка-эмблема сверху, приподнята к верхушке бейджа */
.book-card .sticker-round::before {
  display: block;
  font-size: 15px;
  line-height: 1;
  margin-top: -4px;
  margin-bottom: 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

/* Декоративное «свечение» по краю */
.book-card .sticker-round::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.book-card:hover .sticker-round::after { opacity: 1; }

/* НОВИНКА — розовый, эмблема искра */
.sticker-round--new {
  background: linear-gradient(140deg, #FFB8C8 0%, #F08FA8 45%, #D85B79 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(120, 30, 50, 0.30);
}
.sticker-round--new::before { content: '✦'; }

/* БЕСТСЕЛЛЕР — золото с глубиной */
.sticker-round--bestseller {
  background:
    radial-gradient(circle at 30% 30%, #FFF4B0 0%, #FFE066 30%, #F4C540 65%, #C9962A 100%);
  color: #5D3A1F;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}
.sticker-round--bestseller::before {
  content: '★';
  color: #8C5A1A;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
}

/* ЛЮБОВЬ ЧИТАТЕЛЕЙ — насыщенный красный */
.sticker-round--love {
  background:
    radial-gradient(circle at 30% 30%, #FF6B6B 0%, #E63946 40%, #C1121F 75%, #8B0000 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.55);
}
.sticker-round--love::before {
  content: '♥';
  font-size: 15px;
  color: #FFF;
  filter: drop-shadow(0 1px 2px rgba(120, 0, 0, 0.7));
}

/* Dark theme */
.dark .book-card .sticker-round {
  border-color: #1F1F2E;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark .sticker {
  background: rgba(229, 169, 59, 0.18);
  color: #F0C878;
  border: 1px solid rgba(229, 169, 59, 0.38);
}

.dark .sticker-pink {
  background: var(--rose);
  color: var(--ink);
}

.dark .sticker-cream {
  background: rgba(255, 255, 255, 0.06);
  color: #E8E6E2;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .hero-sticker {
  background: rgba(255, 255, 255, 0.06);
  color: #E8E6E2;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-sticker { animation: none; }
}

/* Имя в hero: спокойное выделение без ощущения наклейки */
.hero-title-sticker {
  display: inline-block;
  padding: 0.02em 0.18em 0.08em;
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 58%,
    rgba(244, 167, 185, 0.18) 58%,
    rgba(244, 167, 185, 0.18) 86%,
    transparent 86%);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
  transition: transform 0.25s ease;
}

.hero-title-sticker::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 0.04em;
  height: 0.18em;
  border-radius: 8px 10px 7px 9px;
  background: linear-gradient(135deg,
    rgba(244, 167, 185, 0.44) 0%,
    rgba(255, 199, 214, 0.56) 38%,
    rgba(244, 167, 185, 0.38) 72%,
    rgba(255, 183, 147, 0.42) 100%);
  transform-origin: left center;
  transform: rotate(-0.5deg) skewX(-1deg) scaleX(0);
  animation: marker-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
  z-index: -1;
  pointer-events: none;
}

.hero-title-sticker:hover {
  transform: translateY(-1px);
}

.dark .hero-title-sticker {
  background: linear-gradient(
    180deg,
    transparent 58%,
    rgba(226, 143, 168, 0.18) 58%,
    rgba(226, 143, 168, 0.18) 86%,
    transparent 86%);
  box-shadow: none;
}

.dark .hero-title-sticker::after {
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%);
}

.hero-title--intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
}

.hero-title-prefix {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(45, 41, 38, 0.72);
}

.hero-intro-copy {
  max-width: 660px;
  margin: 0 auto 36px;
  color: rgba(45, 41, 38, 0.76);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.72;
  text-align: center;
}

.dark .hero-title-prefix,
.dark .hero-intro-copy {
  color: rgba(248, 246, 242, 0.78);
}

/* Курсив <em>: наследует шрифт контекста, чтобы не превращать каждый акцент в декоративный заголовок */
em {
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}

/* Класс для серого курсива в стиле лендинга Филиппова - применять явно */
.italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: #8A8A87;
}

.dark .italic-display {
  color: #B5B5B0;
}

.italic-display-bold {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #8A8A87;
}

.dark .italic-display-bold {
  color: #B5B5B0;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa);
  opacity: 0.65;
}

.font-quote {
  font-family: var(--font-script);
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  line-height: 1.2;
  color: var(--cocoa);
}

.font-quote.gold {
  background: linear-gradient(90deg, rgb(var(--section-accent)) 0%, rgba(var(--section-accent), 0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: gold-shine 3s linear infinite;
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes gold-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes gold-shimmer {
  0%, 100% {
    opacity: 0.6;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.2);
  }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUpSlow {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%, 28% { transform: scale(1.15); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes gradient-breathe {
  0%, 100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  25% {
    background-position: 50% 50%;
    filter: brightness(1.05);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.02);
  }
  75% {
    background-position: 50% 50%;
    filter: brightness(1.05);
  }
}

/* ===== UTILITY CLASSES ===== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== COMPONENTS ===== */

/* Button Component - Collage Style: скруглённые, пыльно-розовые, без жёстких теней */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  border-radius: 50px; /* Сильно скруглённые */
  background: var(--rose); /* Пыльно-розовый без градиента */
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translateY(0);
  box-shadow: none; /* Без жёстких теней */
  position: relative;
  overflow: hidden;
  z-index: 1;
  min-height: 44px;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 165, 181, 0.3); /* Мягкая розовая тень */
  background: #D4939F; /* Чуть темнее при наведении */
}

.btn:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

/* Убираем лишние эффекты для простоты */
.btn::after {
  display: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #6B7280;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--rose);
  color: var(--rose);
}

.btn-outline:hover {
  background: var(--rose);
  color: white;
}

.btn-small {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  min-height: 36px;
}

.btn-large {
  padding: var(--space-lg) var(--space-2xl);
  font-size: 18px;
  min-height: 52px;
}

/* Кнопки в тёмной теме - теплое золото и янтарное свечение */
.dark .btn {
  background: var(--rose-grad);
  color: var(--bg-0);
  box-shadow: none;
  outline: none;
  border: none;
  text-shadow: none;
  filter: none;
}

.dark .btn:hover:not(:disabled) {
  background: var(--gold) !important;
  color: var(--bg-0) !important;
  box-shadow: 0 4px 20px rgba(229, 169, 59, 0.25);
  transform: translateY(-2px);
}

.dark .btn-outline {
  background: transparent;
  border: 2px solid var(--rose);
  color: var(--rose);
  box-shadow: none;
  outline: none;
  text-shadow: none;
  filter: none;
}

.dark .btn-outline:hover {
  background: rgba(226, 184, 110, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: none;
}

/* Единая тактильная отдача при нажатии (Active Click Feedback) */
.btn:active,
.tag-pill:active,
.buy-btn:active,
.play-btn:active,
.podcast-play-btn:active,
.audio-listen-btn:active,
.store-link:active,
.back-btn:active,
.expand-btn:active,
.nav-link:active,
.home-nav-link:active,
.footer-link:active,
.bento-card:active {
  transform: scale(0.96) translateY(0) !important;
  transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Tag Pill & Genre Pill Component */
/* ===== ЕДИНЫЙ СТАНДАРТ ПИЛЮЛЬ И ФИЛЬТРОВ (.tag-pill + .enc-genre-pill) ===== */
.tag-pill,
.enc-genre-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: rgba(var(--section-accent), 0.08) !important;
  color: var(--ink) !important;
  border: 1.5px solid rgba(var(--section-accent), 0.25) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  min-height: 40px !important;
  position: relative !important;
  box-shadow: none !important;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tag-pill:hover,
.enc-genre-pill:hover {
  background: rgba(var(--section-accent), 0.16) !important;
  border-color: rgba(var(--section-accent), 0.5) !important;
  color: var(--ink) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(var(--section-accent), 0.12) !important;
}

.tag-pill.active,
.enc-genre-pill.active {
  /* color-mix: затемнённый акцент для отличного контраста белого текста на любой пастели */
  background: color-mix(in srgb, rgb(var(--section-accent)) 68%, #4A2E35) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(var(--section-accent), 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Розовая обводка при любом фокусе (клик мышью, tab с клавы) — единая на всех пилюлях */
.tag-pill:focus,
.enc-genre-pill:focus {
  outline: none !important;
  border-color: rgba(var(--section-accent), 0.52) !important;
  box-shadow: 0 0 0 3px rgba(var(--section-accent), 0.24), 0 6px 18px rgba(var(--section-accent), 0.16) !important;
}
.tag-pill.active:focus,
.enc-genre-pill.active:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 4px rgba(var(--section-accent), 0.24), 0 4px 16px rgba(var(--section-accent), 0.30) !important;
}

/* (убрано: специфический #articles override — теперь активная пилюля везде использует общий
   color-mix для гарантированной читаемости белого текста на любом пастельном акценте) */

/* Тёмная тема - сумеречно-золотые кнопки фильтров */
.dark .tag-pill,
.dark .enc-genre-pill {
  background: rgba(46, 16, 30, 0.82);
  color: #EDE5D8;
  border: 1.5px solid rgba(226, 184, 110, 0.40);
}

.dark .tag-pill:hover,
.dark .enc-genre-pill:hover {
  background: rgba(68, 24, 46, 0.94);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(226, 184, 110, 0.25);
  border-color: rgba(226, 184, 110, 0.85);
}

.dark .tag-pill:focus,
.dark .enc-genre-pill:focus {
  outline: none;
  border-color: #E2B86E;
  box-shadow: 0 0 0 3px rgba(226, 184, 110, 0.35);
}

.dark .tag-pill.active,
.dark .enc-genre-pill.active {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-color: #E2B86E !important;
  box-shadow: 0 4px 20px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.35) !important;
}
.dark .tag-pill.active *,
.dark .enc-genre-pill.active * {
  color: #FFFFFF !important;
}

/* Meta Pill */
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--fs-tiny);
  color: var(--cocoa);
  background: var(--blush);
  border-radius: 16px;
  opacity: 0.8;
}

/* Card Component - скруглённые края с розовой подсветкой как в Мир книг */
.card {
  background: rgba(250, 248, 245, 0.75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md), 0 10px 40px rgba(237, 106, 167, 0.12);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  border: 1px solid rgba(var(--section-accent), 0.2);
}

/* Убираем эффекты */
.card::before {
  display: none;
}

/* Убираем лишние эффекты */
.card::after {
  display: none;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl), 0 20px 60px rgba(237, 106, 167, 0.3), 0 6px 20px rgba(237, 106, 167, 0.2);
  border-color: rgb(var(--section-accent));
}

/* Унифицированные анимации для всех карточек */
.card[data-animate] {
  animation: fadeInUp 0.6s ease both;
  will-change: transform, opacity;
}

.card[data-animate].animate {
  will-change: auto;
}

/* ===== COLLAGE EFFECTS - Скотч, булавки, бумажные элементы ===== */

/* Эффект скотча - элитный washi tape */
.tape {
  position: absolute;
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, rgba(255,228,225,0.85) 0%, rgba(255,240,235,0.92) 50%, rgba(255,228,225,0.85) 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
  border-top: 1px dashed rgba(220,180,180,0.35);
  border-bottom: 1px dashed rgba(220,180,180,0.35);
  z-index: 10;
}

.tape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none;
}

.tape-top-left {
  top: -10px;
  left: 20px;
  transform: rotate(-15deg);
}

.tape-top-right {
  top: -10px;
  right: 20px;
  transform: rotate(12deg);
}

.tape-bottom {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
}

/* Эффект булавки */
.pin {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E6A5B5 0%, #D4939F 60%, #C08090 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.1),
    inset 0 2px 4px rgba(255,255,255,0.3);
  z-index: 15;
}

.pin::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 15px;
  background: linear-gradient(to bottom, #888 0%, #666 100%);
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
}

.pin-top {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

/* Фото с эффектом "прикреплено" */
.photo-pinned {
  position: relative;
  transform: rotate(-2deg);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 20px rgba(0,0,0,0.05);
  border: 8px solid var(--card-bg);
  background: var(--card-bg);
}

.photo-pinned:nth-child(even) {
  transform: rotate(1.5deg);
}

.photo-pinned:nth-child(3n) {
  transform: rotate(-3deg);
}

/* Рукописные заметки */
.handwritten {
  font-family: var(--font-script);
  color: var(--cocoa);
  transform: rotate(-2deg);
  opacity: 0.9;
}

/* Стикер / заметка */
.sticky-note {
  background: var(--canary);
  padding: 20px;
  box-shadow:
    2px 2px 8px rgba(0,0,0,0.1),
    inset 0 -2px 0 rgba(0,0,0,0.05);
  transform: rotate(-1deg);
  position: relative;
}

.sticky-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.03), transparent);
}

/* Washi tape / декоративный скотч - элитный стиль */
.washi-tape {
  position: absolute;
  height: 28px;
  width: 95px;
  background: linear-gradient(90deg, rgba(248,187,217,0.8) 0%, rgba(252,228,236,0.9) 50%, rgba(248,187,217,0.8) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-top: 1px dashed rgba(233,30,99,0.25);
  border-bottom: 1px dashed rgba(233,30,99,0.25);
  z-index: 10;
}

/* Loading states */
.skeleton {
  background: linear-gradient(90deg, var(--blush) 25%, rgba(255,255,255,0.5) 50%, var(--blush) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.skeleton-text {
  height: 20px;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

/* Error states */
.error-boundary {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--cocoa);
}

.error-message {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}

/* Navigation Component */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* «Шапочка» под notch / Dynamic Island на iOS — фон растягивается на safe-area */
  padding-top: env(safe-area-inset-top, 0px);
  background:
    /* White-pink checkered pattern */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.95) 0px,
      rgba(255, 255, 255, 0.95) 15px,
      rgba(255, 192, 203, 0.08) 15px,
      rgba(255, 192, 203, 0.08) 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.95) 0px,
      rgba(255, 255, 255, 0.95) 15px,
      rgba(255, 192, 203, 0.08) 15px,
      rgba(255, 192, 203, 0.08) 30px
    ),
    rgba(250, 248, 245, 0.9);
  background-blend-mode: multiply;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: var(--transition-base);
  contain: layout style;
  transform: translateZ(0);
}

/* Цветной верхний край у navbar — закрывает status bar / notch */
.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: linear-gradient(135deg, #FAF8F5 0%, #FFF0F5 100%);
  z-index: -1;
}
.dark .navbar::before {
  background: linear-gradient(135deg, #0F0F1A 0%, #1A1A2E 100%);
}

.dark .navbar {
  background: rgba(13, 13, 20, 0.85);
  border-bottom-color: rgba(226, 143, 168, 0.1);
}

.navbar.scrolled {
  border-bottom-color: rgb(var(--section-accent));
  box-shadow: var(--shadow-sm);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
}

/* Logo and brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--cocoa);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.nav-brand:hover {
  transform: scale(1.02);
}

.logo-circle {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #D48295 0%, #E8AAB8 100%) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(212, 130, 149, 0.35) !important;
}

.brand-logo-icon {
  width: 30px;
  height: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(184, 85, 112, 0.3));
  transition: transform 0.3s ease;
}

.nav-brand:hover .brand-logo-icon {
  transform: scale(1.05);
}

/* Размер лого больше не меняется при скролле - убрано чтобы не дёргался layout */

.nav-brand:hover .logo-circle {
  animation: heartbeat 1.2s ease-in-out infinite;
}

/* Имя в навбаре - Marck Script как личная роспись писательницы */
.brand-text .brand-name {
  font-family: var(--font-script);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  display: block;
}

.brand-text p {
  font-size: 13px;
  color: var(--rose);
  margin: 0;
}

/* Nav menu */
.nav-menu {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 10px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  color: var(--cocoa);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
  min-height: 44px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: blur(0.5px);
}

.nav-link:hover {
  color: var(--rose);
  transform: translateY(-2px);
}

.nav-link:hover::after {
  transform: scaleX(1);
  animation: gold-shimmer 2s ease-in-out infinite;
}

.nav-link.active {
  color: var(--rose);
  font-weight: 600;
}

.nav-link.active::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, rgb(var(--section-accent)), transparent);
  animation: gold-shimmer 3s ease-in-out infinite;
}

/* Nav controls */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-toggle {
  width: 56px;
  height: 28px;
  background: linear-gradient(135deg, #F4D1D8, #F0C4CF);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  padding: 0;
  overflow: hidden;
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #2A2A4A, #3D3566);
}

/* Auto mode indicator (gradient background) */
.theme-toggle.auto-mode {
  background: linear-gradient(90deg, #F4D1D8 0%, #3D3566 100%);
  animation: gradient-shift 3s ease infinite;
}

.dark .theme-toggle.auto-mode {
  background: linear-gradient(90deg, #3D3566 0%, #F4D1D8 100%);
  animation: gradient-shift 3s ease infinite;
}

.theme-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.dark .theme-toggle-slider {
  transform: translateX(28px);
}

/* Mobile Menu */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--rose);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rose);
  font-size: 20px;
  transition: var(--transition-fast);
}

.menu-toggle:hover {
  background: var(--rose);
  color: white;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  z-index: var(--z-overlay);
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-mobile {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 400px;
  height: 100vh;
  background: var(--bg-1);
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: calc(var(--z-overlay) + 1);
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

.nav-mobile.active {
  right: 0;
}

.nav-mobile-header {
  padding: var(--space-lg);
  border-bottom: 1px solid rgb(var(--section-accent));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--cocoa);
  padding: 10px;
  transition: var(--transition-fast);
  min-width: 44px;
  min-height: 44px;
}

.nav-close:hover {
  color: var(--rose);
  transform: rotate(90deg);
}

.nav-mobile-links {
  padding: var(--space-lg);
}

.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--cocoa);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  border-radius: 14px;
  margin-bottom: 4px;
  background: transparent;
  overflow: hidden;
}
.nav-mobile-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0.2);
  width: 4px;
  height: 60%;
  border-radius: 2px;
  background: var(--rose);
  opacity: 0;
  transition: all 0.3s ease;
}
.nav-mobile-link[data-color="rose"]::before     { background: #F4A7B9; }
.nav-mobile-link[data-color="peach"]::before    { background: #FFB793; }
.nav-mobile-link[data-color="mint"]::before     { background: #A8D8C5; }
.nav-mobile-link[data-color="lavender"]::before { background: #C9B4E8; }
.nav-mobile-link[data-color="cream"]::before    { background: #F5DCA1; }

.nav-mobile-link .nml-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(244, 167, 185, 0.10);
  transition: all 0.3s ease;
}
.nav-mobile-link[data-color="rose"]     .nml-icon { background: rgba(244, 167, 185, 0.18); }
.nav-mobile-link[data-color="peach"]    .nml-icon { background: rgba(255, 183, 147, 0.20); }
.nav-mobile-link[data-color="mint"]     .nml-icon { background: rgba(168, 216, 197, 0.24); }
.nav-mobile-link[data-color="lavender"] .nml-icon { background: rgba(201, 180, 232, 0.22); }
.nav-mobile-link[data-color="cream"]    .nml-icon { background: rgba(245, 220, 161, 0.28); }

.nav-mobile-link .nml-text { flex: 1; }
.nav-mobile-link .nml-pill {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  font-weight: 600;
  color: var(--cocoa);
  opacity: 0.7;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(45, 41, 38, 0.08);
  transition: all 0.3s ease;
  letter-spacing: 0.04em;
}
.nav-mobile-link[data-color="rose"]     .nml-pill { border-color: rgba(244, 167, 185, 0.45); color: #B86779; }
.nav-mobile-link[data-color="peach"]    .nml-pill { border-color: rgba(255, 183, 147, 0.5);  color: #B85B33; }
.nav-mobile-link[data-color="mint"]     .nml-pill { border-color: rgba(168, 216, 197, 0.55); color: #4E7E66; }
.nav-mobile-link[data-color="lavender"] .nml-pill { border-color: rgba(201, 180, 232, 0.55); color: #6B4FA0; }
.nav-mobile-link[data-color="cream"]    .nml-pill { border-color: rgba(245, 220, 161, 0.7);  color: #886A20; }

.nav-mobile-link:hover,
.nav-mobile-link.active {
  background: rgba(244, 167, 185, 0.06);
  padding-left: 22px;
}
.nav-mobile-link[data-color="rose"]:hover,     .nav-mobile-link[data-color="rose"].active     { background: rgba(244, 167, 185, 0.10); }
.nav-mobile-link[data-color="peach"]:hover,    .nav-mobile-link[data-color="peach"].active    { background: rgba(255, 183, 147, 0.10); }
.nav-mobile-link[data-color="mint"]:hover,     .nav-mobile-link[data-color="mint"].active     { background: rgba(168, 216, 197, 0.14); }
.nav-mobile-link[data-color="lavender"]:hover, .nav-mobile-link[data-color="lavender"].active { background: rgba(201, 180, 232, 0.14); }
.nav-mobile-link[data-color="cream"]:hover,    .nav-mobile-link[data-color="cream"].active    { background: rgba(245, 220, 161, 0.18); }

.nav-mobile-link:hover::before,
.nav-mobile-link.active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
.nav-mobile-link:hover .nml-icon,
.nav-mobile-link.active .nml-icon {
  transform: scale(1.1) rotate(-6deg);
}
.nav-mobile-link:hover .nml-pill,
.nav-mobile-link.active .nml-pill {
  opacity: 1;
  transform: scale(1.05);
  background: #fff;
}

/* Цитата в подвале мобильного меню */
.nav-mobile-quote {
  margin: 24px 8px 16px;
  padding: 18px 16px;
  text-align: center;
  border-top: 1px dashed rgba(244, 167, 185, 0.35);
}
.nav-mobile-quote .nmq-sticker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cocoa);
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(201, 180, 232, 0.25), rgba(201, 180, 232, 0.35));
  border-radius: 999px;
}
.nav-mobile-quote .nmq-author {
  display: block;
  margin-top: 10px;
  font-family: 'Marck Script', cursive;
  font-size: 18px;
  color: var(--rose);
  opacity: 0.8;
}

/* Reading Progress Bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--rose-grad);
  width: 0%;
  z-index: calc(var(--z-sticky) + 1);
  transition: width 0.2s ease;
}

/* Hero Section - Collage / Journal Style */
.hero {
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 60px var(--space-lg);
  margin-top: 0;
  background: transparent; /* Клетка-тетрадка приходит из #home */
}

/* Декоративные элементы hero - убраны (сетка теперь общая на #home) */
.hero::before {
  content: none;
}

/* Матовая подложка с золотой рамкой - удалена, теперь используется в hero-content */

@keyframes gold-border-glow {
  0%, 100% {
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(var(--section-accent), 0.4),
      inset 0 0 0 8px rgba(250, 248, 245, 0.5),
      inset 0 0 0 9px rgba(var(--section-accent), 0.25),
      0 0 35px rgba(var(--section-accent), 0.2);
    border-color: rgba(var(--section-accent), 0.8);
  }
  50% {
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(var(--section-accent), 0.6),
      inset 0 0 0 8px rgba(250, 248, 245, 0.5),
      inset 0 0 0 9px rgba(var(--section-accent), 0.4),
      0 0 50px rgba(var(--section-accent), 0.35);
    border-color: rgba(var(--section-accent), 1);
  }
}

/* Hero content - Collage Style: как приклеенная бумага/фото */
.hero-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding: 50px 60px;

  /* Молочная бумага */
  background: var(--card-bg);
  border-radius: 2px;

  /* Тень как от листа бумаги */
  box-shadow:
    3px 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05);

  /* Лёгкий наклон */
  transform: rotate(-1deg);
  animation: none;
}

/* Эффект скотча сверху */
.hero-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 100px;
  height: 28px;
  background: rgba(255, 255, 240, 0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 20;
}

/* Второй кусочек скотча */
.hero-content::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 60px;
  transform: rotate(-8deg);
  width: 70px;
  height: 24px;
  background: rgba(255, 255, 240, 0.75);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  z-index: 20;
}

/* На главной — без скотча */
.hero-modern .hero-content::before,
.hero-modern .hero-content::after {
  display: none;
}

.hero-modern .hero-content {
  max-width: 860px;
  padding: 56px 64px 54px;
  border-radius: 24px !important;
  transform: none;
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.28) !important;
  box-shadow: 
    0 24px 60px rgba(87, 74, 68, 0.06),
    0 4px 16px rgba(87, 74, 68, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.dark .hero-modern .hero-content {
  background: rgba(12, 10, 15, 0.72) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-color: rgba(226, 184, 110, 0.16) !important;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border-radius: 24px !important;
}

/* Hero quote styling */
.hero-quote {
  position: relative;
}

/* Chapter label */
.hero-chapter {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-chapter::before,
.hero-chapter::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.15;
  font-weight: 800; /* ExtraBold как в ТЗ */
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.dark .hero-title {
  color: #E28FA8;
}

/* Subtitle - рукописный стиль */
.hero-subtitle {
  font-family: var(--font-display); /* Fraunces italic */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 32px;
  padding: 0 20px;
  position: relative;
  animation: fadeInUp 0.6s ease 0.4s both;
  opacity: 0.78;
  letter-spacing: -0.005em;
}

.dark .hero-subtitle {
  color: #E8E6E2;
}

.hero-subtitle::before {
  display: none; /* Убираем кавычку */
}

/* Manifest block - gold highlight style */
.hero-quote {
  --section-accent: 201, 180, 232;                /* лавандовый акцент только для этой плашки */
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 40px;
  padding: 20px;
  position: relative;
  animation: fadeInUp 0.6s ease 0.6s both;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    rgba(var(--section-accent), 0.32) 20%,
    rgba(var(--section-accent), 0.32) 80%,
    transparent 80%,
    transparent 100%
  );
  background-size: 100% 100%;
  animation: fadeInUp 0.6s ease 0.6s both, gold-highlight-pulse 3s ease-in-out infinite;
}

@keyframes gold-highlight-pulse {
  0%, 100% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 20%,
      rgba(var(--section-accent), 0.26) 20%,
      rgba(var(--section-accent), 0.26) 80%,
      transparent 80%,
      transparent 100%
    );
  }
  50% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 20%,
      rgba(var(--section-accent), 0.4) 20%,
      rgba(var(--section-accent), 0.4) 80%,
      transparent 80%,
      transparent 100%
    );
  }
}

/* Тёмная тема - голубая подложка */
.dark .hero-quote {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    rgba(226, 143, 168, 0.35) 20%,
    rgba(226, 143, 168, 0.35) 80%,
    transparent 80%,
    transparent 100%
  ) !important;
  animation: fadeInUp 0.6s ease 0.6s both, blue-highlight-pulse 3s ease-in-out infinite !important;
}

@keyframes blue-highlight-pulse {
  0%, 100% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 20%,
      rgba(226, 143, 168, 0.3) 20%,
      rgba(226, 143, 168, 0.3) 80%,
      transparent 80%,
      transparent 100%
    );
  }
  50% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 20%,
      rgba(226, 143, 168, 0.45) 20%,
      rgba(226, 143, 168, 0.45) 80%,
      transparent 80%,
      transparent 100%
    );
  }
}



/* Точки галереи */
.dark .gallery-dot {
  background: rgba(168, 160, 208, 0.5) !important;
}

#hero-gallery .gallery-slide {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

#hero-gallery .gallery-slide img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* ============ ПОЛАРОИД СЛАЙДЕРЫ ============ */
.polaroid-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.polaroid-slider .polaroid-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.polaroid-slider .polaroid-slide.active {
  opacity: 1;
}

.polaroid-slider .polaroid-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid-slider .polaroid-slide .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

/* =============================================================================
   POLAROID PLAY OVERLAY & AWARD CEREMONY VIDEO STYLES
   ============================================================================= */
.polaroid-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 8 !important;
  background: rgba(18, 8, 14, 0.18) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background 0.25s ease !important;
}

.polaroid-play-overlay:hover {
  background: rgba(18, 8, 14, 0.35) !important;
}

.polaroid-play-disc {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: rgba(26, 10, 18, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 2px solid #E2B86E !important;
  color: #E2B86E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.60), 0 0 16px rgba(178, 43, 88, 0.40) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.polaroid-play-disc svg {
  margin-left: 3px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

.polaroid-play-overlay:hover .polaroid-play-disc {
  transform: scale(1.12) !important;
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border-color: #F0CF8D !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(178, 43, 88, 0.75), 0 0 20px rgba(226, 184, 110, 0.60) !important;
}

.polaroid-play-tag {
  background: rgba(18, 8, 14, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #EDE5D8 !important;
  border: 1px solid rgba(226, 184, 110, 0.45) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.50) !important;
}

.caption-video-badge {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(178, 43, 88, 0.25) !important;
  border: 1px solid rgba(226, 184, 110, 0.35) !important;
  color: #E2B86E !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.about-award-video-wrap {
  margin-top: 22px !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.about-award-video-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 26px !important;
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border: 1.5px solid #E2B86E !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(178, 43, 88, 0.45), 0 0 12px rgba(226, 184, 110, 0.25) !important;
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

.about-award-video-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #C83566 0%, #88193E 100%) !important;
  border-color: #F0CF8D !important;
  box-shadow: 0 10px 28px rgba(178, 43, 88, 0.70), 0 0 20px rgba(226, 184, 110, 0.50) !important;
  color: #FFFFFF !important;
}

.about-award-video-icon {
  font-size: 14px !important;
  color: #E2B86E !important;
  line-height: 1 !important;
}

/* =============================================================================
   ABOUT PHOTO GALLERY LIGHTBOX & ZOOM STYLES (Элегантная галерея фотохроники)
   ============================================================================= */
.about-record-frame .polaroid-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
  z-index: 1 !important;
}

.about-record-frame .polaroid-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.about-record-frame .polaroid-slide img.about-polaroid-img {
  cursor: zoom-in !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.about-record-frame .polaroid-slider:hover .polaroid-slide.active img.about-polaroid-img {
  transform: scale(1.025) !important;
}

.polaroid-zoom-hint,
.about-record-frame .polaroid-zoom-hint {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(18, 8, 14, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(226, 184, 110, 0.55) !important;
  color: #E2B86E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: scale(0.85) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  z-index: 15 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.about-record-frame:hover .polaroid-slide.active .polaroid-zoom-hint,
.about-record-frame .polaroid-slider:hover .polaroid-slide.active .polaroid-zoom-hint,
.about-record-frame .polaroid-slide.active:hover .polaroid-zoom-hint {
  opacity: 1 !important;
  transform: scale(1) !important;
}

@media (hover: none) {
  .about-record-frame .polaroid-slide.active .polaroid-zoom-hint {
    opacity: 0.9 !important;
    transform: scale(1) !important;
  }
}

.about-photo-lightbox {
  background: rgba(10, 4, 8, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  z-index: 10050 !important;
}

.about-photo-lightbox .lightbox-content {
  transform: scale(0.93);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease !important;
}

.about-photo-lightbox.active .lightbox-content {
  transform: scale(1);
  opacity: 1;
}

.about-photo-lightbox .lightbox-content {
  max-height: 96vh !important;
  justify-content: center;
}

.about-photo-lightbox-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: calc(96vh - 130px);
}

.about-photo-lightbox .lightbox-image {
  max-width: min(92vw, 860px) !important;
  max-height: calc(96vh - 130px) !important;
  width: auto;
  height: auto;
  object-fit: contain !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(226, 184, 110, 0.35) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 36px rgba(178, 43, 88, 0.30) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.about-photo-lightbox .lightbox-image.anim-fade {
  opacity: 0 !important;
  transform: scale(0.97) !important;
}

.about-photo-lightbox-footer {
  flex: 0 0 auto;
  width: 100%;
  max-width: min(92vw, 760px);
  text-align: center;
  margin-top: 10px;
  padding: 0 10px;
  box-sizing: border-box;
}

.about-photo-lightbox .lightbox-caption {
  font-family: var(--font-display, 'Lora', serif) !important;
  font-style: italic !important;
  font-size: clamp(14px, 1.8vw, 17px) !important;
  color: #F7E7D0 !important;
  letter-spacing: 0.01em !important;
  margin: 0 auto !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  max-width: 740px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.about-photo-lightbox .lightbox-counter {
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gold, #E2B86E) !important;
  margin-top: 4px !important;
  font-weight: 700 !important;
}

.about-photo-lightbox .lightbox-close {
  background: rgba(26, 10, 18, 0.80) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  color: #F7E7D0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.about-photo-lightbox .lightbox-close:hover {
  transform: rotate(90deg) scale(1.12) !important;
  background: rgba(178, 43, 88, 0.7) !important;
  border-color: #F0CF8D !important;
  color: #FFFFFF !important;
}

/* About Record Container & Clean Text Styles (entire container colored, no nested card underlays) */
.about-card,
.dark .about-card,
#about .about-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dark .about-card h3 {
  color: #EDE5D8 !important;
}

.dark .about-card h3 em {
  color: #E2B86E !important;
}

.dark .about-card p {
  color: #CDC5BA !important;
}
/* Звёздное небо - статичные звёзды (фон) - плавный переход при смене темы */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.5s ease;
  background:
    /* === ЗВЁЗДЫ — яркие с чётким ядром === */
    /* Крупные яркие */
    radial-gradient(2px 2px at 5% 12%, #fff 0%, #fff 40%, transparent 100%),
    radial-gradient(2px 2px at 3% 75%, #fff 0%, #fff 40%, transparent 100%),
    radial-gradient(2px 2px at 4% 62%, #fff 0%, #fff 40%, transparent 100%),
    radial-gradient(2px 2px at 12% 58%, #fff 0%, #fff 40%, transparent 100%),
    /* Средние */
    radial-gradient(1.5px 1.5px at 8% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 2% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 7% 45%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 38%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 14% 68%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 82%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.8) 50%, transparent 100%),
    /* Мелкие */
    radial-gradient(1px 1px at 22% 15%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 52%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 88%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 32%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 72%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 55%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 28%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 42%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 78%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 15%, rgba(255,255,255,0.5) 0%, transparent 100%);
}

/* Звёзды появляются в тёмной теме */
.dark body::after {
  opacity: 1;
}

/* ===== МЕРЦАЮЩИЕ ЗВЁЗДЫ И СОЛНЦЕ (отдельные элементы) ===== */
.twinkle-star {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.dark .twinkle-star {
  opacity: 1;
}

/* === БЕЛЫЕ ЗВЁЗДЫ — спокойные, мерцают редко и деликатно === */
.dark .twinkle-star.star-1,
.dark .twinkle-star:nth-child(1) {
  width: 4px;
  height: 4px;
  top: 8%;
  left: 6%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.75);
  animation: starBlink 11s ease-in-out infinite;
}

.dark .twinkle-star.star-2,
.dark .twinkle-star:nth-child(2) {
  width: 3.5px;
  height: 3.5px;
  top: 15%;
  left: 8%;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(255,255,255,0.7);
  animation: starBlink 14s ease-in-out infinite;
  animation-delay: 4.5s;
}

.dark .twinkle-star.star-3,
.dark .twinkle-star:nth-child(3) {
  width: 3px;
  height: 3px;
  top: 45%;
  left: 4%;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(255,255,255,0.65);
  animation: starBlink 13s ease-in-out infinite;
  animation-delay: 2s;
}

.dark .twinkle-star.star-4,
.dark .twinkle-star:nth-child(4) {
  width: 3px;
  height: 3px;
  top: 65%;
  left: 18%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6);
  animation: starBlink 16s ease-in-out infinite;
  animation-delay: 7s;
}

.dark .twinkle-star.star-6,
.dark .twinkle-star:nth-child(6) {
  width: 4px;
  height: 4px;
  top: 55%;
  left: 92%;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(255,255,255,0.7);
  animation: starBlink 12s ease-in-out infinite;
  animation-delay: 3.5s;
}

.dark .twinkle-star.star-7,
.dark .twinkle-star:nth-child(7) {
  width: 3px;
  height: 3px;
  top: 70%;
  left: 12%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6);
  animation: starBlink 17s ease-in-out infinite;
  animation-delay: 9s;
}

.dark .twinkle-star.star-8,
.dark .twinkle-star:nth-child(8) {
  width: 3px;
  height: 3px;
  top: 35%;
  left: 75%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6);
  animation: starBlink 15s ease-in-out infinite;
  animation-delay: 6s;
}

/* === ЕДИНСТВЕННОЕ ЗОЛОТОЕ СОЛНЦЕ === */
.dark .twinkle-star.star-5,
.dark .twinkle-star:nth-child(5) {
  width: 20px;
  height: 20px;
  top: 22%;
  right: 6%;
  left: auto;
  background: radial-gradient(circle, #fff 0%, #fff 25%, rgba(255,215,0,0.9) 60%, rgba(255,175,0,0.35) 100%);
  border: 1.5px solid rgba(255,205,40,0.75);
  box-shadow:
    0 0 16px 4px rgba(255,195,40,0.4),
    0 0 36px 10px rgba(255,160,20,0.18);
  animation: sunGoldenPulse 7s ease-in-out infinite;
  animation-delay: 1s;
}

/* === Анимация подмигивания звёзд — светят стабильно, мерцают редко === */
@keyframes starBlink {
  0%, 88%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }
  92% {
    opacity: 0.2;
    transform: scale(0.65);
  }
  95% {
    opacity: 1;
    transform: scale(1.15);
  }
  97% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

/* === Анимация солнца — мягкая тёплая пульсация ореола === */
@keyframes sunGoldenPulse {
  0%, 100% {
    border-color: rgba(255,200,40,0.55);
    box-shadow:
      0 0 14px 3px rgba(255,190,30,0.3),
      0 0 30px 8px rgba(255,160,20,0.12);
    transform: scale(1);
  }
  50% {
    border-color: rgba(255,225,80,0.85);
    box-shadow:
      0 0 22px 7px rgba(255,200,40,0.5),
      0 0 44px 14px rgba(255,160,20,0.22);
    transform: scale(1.06);
  }
}

/* ===== КОМЕТЫ - РАЗНЫЕ, МЕДЛЕННЫЕ, С РАЗНЫХ СТОРОН ===== */
.dark .shooting-star {
  position: fixed;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* === КОМЕТА 1: Большая, слева направо, сверху вниз === */
.dark .shooting-star:nth-child(1) {
  width: 10px;
  height: 10px;
  background: #fff;
  top: 8%;
  left: 0;
  box-shadow:
    0 0 12px 4px rgba(255,255,255,0.95),
    0 0 25px 8px rgba(255,200,100,0.7),
    0 0 40px 15px rgba(255,150,50,0.4);
  animation: cometFly1 240s linear infinite;
  animation-delay: 90s; /* Первая через 1.5 минуты */
  will-change: transform, opacity;
}

.dark .shooting-star:nth-child(1)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 180px;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,80,30,0.1) 10%,
    rgba(255,130,50,0.3) 30%,
    rgba(255,180,80,0.6) 60%,
    rgba(255,220,150,0.85) 85%,
    rgba(255,255,255,1) 100%);
  border-radius: 0 50% 50% 0;
  filter: blur(1px);
}

.dark .shooting-star:nth-child(1)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 140px;
  height: 10px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,100,0,0.05) 20%,
    rgba(255,150,50,0.2) 50%,
    rgba(255,200,100,0.35) 80%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(4px);
}

/* === КОМЕТА 2: Средняя, справа налево, голубоватая === */
.dark .shooting-star:nth-child(2) {
  width: 7px;
  height: 7px;
  background: #E0F0FF;
  top: 30%;
  left: 0;
  box-shadow:
    0 0 10px 3px rgba(200,230,255,0.9),
    0 0 20px 6px rgba(150,200,255,0.6),
    0 0 35px 12px rgba(100,180,255,0.35);
  animation: cometFly2 300s linear infinite;
  animation-delay: 240s; /* Через 4 минуты */
  will-change: transform, opacity;
}

.dark .shooting-star:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 130px;
  height: 3px;
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(100,180,255,0.15) 15%,
    rgba(150,200,255,0.4) 40%,
    rgba(200,230,255,0.7) 70%,
    rgba(230,245,255,1) 100%);
  border-radius: 50% 0 0 50%;
  filter: blur(1px);
}

.dark .shooting-star:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 100px;
  height: 8px;
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(100,150,255,0.1) 30%,
    rgba(150,200,255,0.2) 60%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(3px);
}

/* === КОМЕТА 3: Маленькая, снизу вверх, зеленоватая === */
.dark .shooting-star:nth-child(3) {
  width: 5px;
  height: 5px;
  background: #D0FFE0;
  top: 0;
  left: 20%;
  box-shadow:
    0 0 8px 2px rgba(180,255,200,0.85),
    0 0 18px 5px rgba(100,230,150,0.5),
    0 0 30px 10px rgba(80,200,120,0.3);
  animation: cometFly3 360s linear infinite;
  animation-delay: 420s; /* Через 7 минут */
  will-change: transform, opacity;
}

.dark .shooting-star:nth-child(3)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 3px;
  height: 100px;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(80,200,120,0.15) 15%,
    rgba(120,230,160,0.4) 45%,
    rgba(180,255,200,0.75) 80%,
    rgba(220,255,230,1) 100%);
  border-radius: 50% 50% 0 0;
  filter: blur(1px);
}

.dark .shooting-star:nth-child(3)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 7px;
  height: 80px;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(100,220,140,0.1) 40%,
    rgba(150,240,180,0.2) 70%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(3px);
}

/* Анимация кометы 1: слева направо вниз — хвост тянется вверх-влево */
@keyframes cometFly1 {
  0% {
    transform: translate(-80px, 0) rotate(22deg);
    opacity: 0;
  }
  1% { opacity: 0.9; }
  12% {
    transform: translate(calc(100vw + 100px), 70vh) rotate(22deg);
    opacity: 0.9;
  }
  13%, 100% {
    transform: translate(calc(100vw + 100px), 70vh) rotate(22deg);
    opacity: 0;
  }
}

/* Анимация кометы 2: справа налево, наискосок вверх */
@keyframes cometFly2 {
  0% {
    transform: translate(calc(100vw + 60px), 0) rotate(12deg);
    opacity: 0;
  }
  1% { opacity: 0.85; }
  10% {
    transform: translate(-100px, -20vh) rotate(12deg);
    opacity: 0.85;
  }
  11%, 100% {
    transform: translate(-100px, -20vh) rotate(12deg);
    opacity: 0;
  }
}

/* Анимация кометы 3: снизу вверх, немного наискосок */
@keyframes cometFly3 {
  0% {
    transform: translate(0, calc(100vh + 50px)) rotate(10deg);
    opacity: 0;
  }
  1% { opacity: 0.8; }
  9% {
    transform: translate(20vw, -100vh) rotate(10deg);
    opacity: 0.8;
  }
  10%, 100% {
    transform: translate(20vw, -100vh) rotate(10deg);
    opacity: 0;
  }
}

/* ===== СЕВЕРНОЕ СИЯНИЕ (секретная фишка!) ===== */
.dark .aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(226, 143, 168,0.03) 20%,
    rgba(168,160,208,0.05) 40%,
    rgba(139,142,216,0.03) 60%,
    transparent 100%);
  filter: blur(30px);
  animation: auroraGlow 60s ease-in-out infinite;
}

@keyframes auroraGlow {
  0%, 85%, 100% { opacity: 0; transform: translateX(0) scaleY(1); }
  90% { opacity: 0.6; transform: translateX(5%) scaleY(1.2); }
  95% { opacity: 0.4; transform: translateX(-5%) scaleY(0.9); }
}

/* ===== НЛО (редкое появление) с эффектами ===== */
/* НЛО — только в тёмной теме */
.dark .ufo {
  position: fixed;
  width: 48px;
  height: 32px;
  top: 20%;
  left: -60px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: ufoFly 90s linear infinite;
  animation-delay: 5s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cdefs%3E%3ClinearGradient id='dome' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23F8C8D4' stop-opacity='0.95'/%3E%3Cstop offset='100%25' stop-color='%23F4A7B9' stop-opacity='0.85'/%3E%3C/linearGradient%3E%3ClinearGradient id='body' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffe0e8'/%3E%3Cstop offset='50%25' stop-color='%23F4A7B9'/%3E%3Cstop offset='100%25' stop-color='%23d4889a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='24' cy='18' rx='22' ry='8' fill='url(%23body)' stroke='rgba(255,255,255,0.4)' stroke-width='0.5'/%3E%3Cellipse cx='24' cy='14' rx='10' ry='10' fill='url(%23dome)' stroke='rgba(255,255,255,0.5)' stroke-width='0.5'/%3E%3Ccircle cx='12' cy='20' r='2' fill='%23D4AF37' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='22' r='2' fill='%23D4AF37' opacity='0.9'%3E%3Canimate attributeName='opacity' values='1;0.4;1' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='36' cy='20' r='2' fill='%23D4AF37' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cellipse cx='24' cy='13' rx='5' ry='4' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E") no-repeat center/contain;
  filter: drop-shadow(0 0 8px rgba(244,167,185,0.4));
}

/* Купол и огоньки НЛО — теперь в SVG */
.dark .ufo::before,
.dark .ufo::after {
  display: none;
}

/* === ЛУЧ СВЕТА от НЛО — ОТКЛЮЧЕН === */
.dark .ufo-beam {
  display: none;
}

/* === МОЛНИЯ от НЛО === */
.dark .ufo-lightning {
  position: fixed;
  width: 3px;
  height: 60px;
  background: linear-gradient(180deg, #E28FA8 0%, #A8A0D0 50%, transparent 100%);
  top: 20%;
  left: -60px;
  margin-left: 23px;
  margin-top: 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: ufoLightningFly 90s linear infinite;
  animation-delay: 5s;
  clip-path: polygon(40% 0%, 60% 0%, 70% 30%, 55% 30%, 75% 60%, 50% 60%, 80% 100%, 20% 100%, 50% 60%, 25% 60%, 45% 30%, 30% 30%);
}

/* === СОНАР от НЛО === */
.dark .ufo-sonar {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(226, 143, 168,0.4);
  border-radius: 50%;
  top: 20%;
  left: -60px;
  margin-left: 15px;
  margin-top: -5px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: ufoSonarFly 90s linear infinite;
  animation-delay: 5s;
}

.dark .ufo-sonar::before,
.dark .ufo-sonar::after {
  content: '';
  position: absolute;
  border: 2px solid rgba(168,160,208,0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dark .ufo-sonar::before {
  width: 40px;
  height: 40px;
  animation: sonarExpand 2s ease-out infinite;
  animation-delay: 0.5s;
}

.dark .ufo-sonar::after {
  width: 60px;
  height: 60px;
  animation: sonarExpand 2s ease-out infinite;
  animation-delay: 1s;
}

@keyframes ufoLights {
  0% { color: #FFE066; }
  50% { color: #E28FA8; }
  100% { color: #A8A0D0; }
}

@keyframes ufoFly {
  0% { left: -50px; top: 20%; opacity: 0; transform: rotate(0deg); visibility: hidden; }
  1% { visibility: visible; }
  2% { opacity: 0.9; }
  8% { top: 25%; transform: rotate(0deg); }
  /* Первая молния от кометы */
  10% { transform: rotate(-3deg) translateY(-2px); }
  10.5% { transform: rotate(3deg) translateY(2px); }
  11% { transform: rotate(-2deg) translateY(-1px); }
  11.5% { transform: rotate(2deg) translateY(1px); }
  12% { transform: rotate(0deg); top: 20%; }
  /* Столкновение с кометой 1! Сильная тряска */
  17% { transform: rotate(0deg); }
  17.2% { transform: rotate(-6deg) translateY(-5px) translateX(3px); }
  17.4% { transform: rotate(6deg) translateY(5px) translateX(-3px); }
  17.6% { transform: rotate(-4deg) translateY(-3px) translateX(2px); }
  17.8% { transform: rotate(4deg) translateY(3px) translateX(-2px); }
  18% { transform: rotate(-2deg) translateY(-1px); }
  18.2% { transform: rotate(2deg) translateY(1px); }
  18.4% { transform: rotate(0deg); }
  20% { top: 15%; }
  /* Вторая тряска */
  28% { transform: rotate(0deg); }
  28.5% { transform: rotate(-4deg) translateY(-3px); }
  29% { transform: rotate(4deg) translateY(3px); }
  29.5% { transform: rotate(-2deg); }
  30% { transform: rotate(0deg); top: 22%; }
  /* Ещё одно столкновение! */
  35% { transform: rotate(0deg); }
  35.1% { transform: rotate(-8deg) translateY(-6px) translateX(4px); }
  35.3% { transform: rotate(8deg) translateY(6px) translateX(-4px); }
  35.5% { transform: rotate(-5deg) translateY(-4px); }
  35.7% { transform: rotate(5deg) translateY(4px); }
  36% { transform: rotate(-2deg); }
  36.3% { transform: rotate(2deg); }
  36.6% { transform: rotate(0deg); }
  48% { opacity: 0.9; }
  49% { left: calc(100vw - 10px); opacity: 0; visibility: visible; }
  50% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
  100% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
}

/* Луч следует за НЛО - ПОЛНАЯ синхронизация через transform как у НЛО */
@keyframes ufoBeamFly {
  0% { transform: translate(-80px, 0); opacity: 0; }
  2% { opacity: 0; }
  4% { opacity: 0.5; }
  8% { opacity: 0.4; transform: translate(-40px, 5vh); }
  9% { opacity: 0; }
  10% { transform: translate(-30px, 6vh) rotate(-3deg); }
  10.5% { transform: translate(-28px, 6.2vh) rotate(3deg); }
  11% { transform: translate(-26px, 6.4vh) rotate(-2deg); }
  11.5% { transform: translate(-24px, 6.6vh) rotate(2deg); }
  12% { opacity: 0; transform: translate(-22px, 7vh) rotate(0deg); }
  13% { opacity: 0.5; }
  16% { opacity: 0; }
  17% { transform: translate(-5px, 12vh) rotate(0deg); }
  17.2% { transform: translate(-2px, 12vh) rotate(-6deg); }
  17.4% { transform: translate(-8px, 12vh) rotate(6deg); }
  17.6% { transform: translate(-3px, 12vh) rotate(-4deg); }
  17.8% { transform: translate(-7px, 12vh) rotate(4deg); }
  18% { transform: translate(-5px, 12vh) rotate(-2deg); }
  18.2% { transform: translate(-5px, 12vh) rotate(2deg); }
  18.4% { transform: translate(-5px, 12vh) rotate(0deg); }
  19% { opacity: 0; }
  20% { transform: translate(5px, 15vh); }
  21% { opacity: 0.5; }
  27% { opacity: 0; }
  28% { transform: translate(30px, 28vh) rotate(0deg); }
  28.5% { transform: translate(30px, 25vh) rotate(-4deg); }
  29% { transform: translate(30px, 31vh) rotate(4deg); }
  29.5% { transform: translate(30px, 28vh) rotate(-2deg); }
  30% { opacity: 0; transform: translate(32px, 30vh) rotate(0deg); }
  32% { opacity: 0.4; }
  34% { opacity: 0; }
  35% { transform: translate(45px, 38vh) rotate(0deg); }
  35.1% { transform: translate(49px, 32vh) rotate(-8deg); }
  35.3% { transform: translate(41px, 44vh) rotate(8deg); }
  35.5% { transform: translate(45px, 34vh) rotate(-5deg); }
  35.7% { transform: translate(45px, 42vh) rotate(5deg); }
  36% { transform: translate(45px, 38vh) rotate(-2deg); }
  36.3% { transform: translate(45px, 38vh) rotate(2deg); }
  36.6% { transform: translate(45px, 38vh) rotate(0deg); }
  37% { opacity: 0; }
  39% { opacity: 0.3; }
  44% { opacity: 0; }
  48% { opacity: 0; }
  49% { transform: translate(calc(100vw + 100px), 70vh); opacity: 0; }
  50%, 100% { transform: translate(calc(100vw + 100px), 70vh); opacity: 0; }
}

@keyframes ufoBeamPulse {
  0%, 100% { border-top-color: rgba(226, 143, 168,0.1); }
  50% { border-top-color: rgba(226, 143, 168,0.25); }
}

/* Молния - сверкает при столкновении с кометой */
@keyframes ufoLightningFly {
  0% { left: -50px; top: 20%; opacity: 0; visibility: hidden; }
  1% { visibility: visible; }
  9.5% { opacity: 0; top: 25%; }
  10% { opacity: 1; }
  10.2% { opacity: 0; }
  10.4% { opacity: 0.8; }
  10.6% { opacity: 0; }
  10.8% { opacity: 1; }
  11.5% { opacity: 0; }
  /* Столкновение с кометой 1! Молния! */
  16.8% { opacity: 0; }
  17% { opacity: 1; }
  17.1% { opacity: 0.2; }
  17.2% { opacity: 1; }
  17.3% { opacity: 0; }
  17.5% { opacity: 0.9; }
  17.6% { opacity: 0.3; }
  17.8% { opacity: 1; }
  18% { opacity: 0; }
  28% { top: 20%; opacity: 0; }
  28.5% { opacity: 1; }
  28.7% { opacity: 0; }
  28.9% { opacity: 0.7; }
  29.3% { opacity: 0; }
  /* Столкновение с кометой 2! Мощная молния! */
  34.8% { opacity: 0; }
  35% { opacity: 1; }
  35.1% { opacity: 0; }
  35.2% { opacity: 1; }
  35.25% { opacity: 0.5; }
  35.3% { opacity: 1; }
  35.35% { opacity: 0; }
  35.5% { opacity: 0.8; }
  35.6% { opacity: 0.2; }
  35.8% { opacity: 1; }
  36% { opacity: 0; }
  49% { left: calc(100vw - 10px); opacity: 0; visibility: visible; }
  50% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
  100% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
}

/* Сонар */
@keyframes ufoSonarFly {
  0% { left: -50px; top: 20%; opacity: 0; visibility: hidden; }
  1% { visibility: visible; }
  2% { opacity: 0; }
  20% { opacity: 0; top: 15%; }
  22% { opacity: 0.8; }
  26% { opacity: 0; }
  38% { top: 22%; opacity: 0; }
  40% { opacity: 0.7; }
  44% { opacity: 0; }
  48% { opacity: 0; }
  49% { left: calc(100vw - 10px); opacity: 0; visibility: visible; }
  50% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
  100% { left: calc(100vw - 10px); opacity: 0; visibility: hidden; }
}

@keyframes sonarExpand {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ===== Секретное печенье с предсказаниями ===== */
.fortune-cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.fortune-cookie-overlay.active {
  opacity: 1;
  visibility: visible;
}

.fortune-cookie-card {
  background: linear-gradient(145deg, #FDF8F3 0%, #FFF5E6 50%, #FDF8F3 100%);
  border-radius: 20px;
  padding: 40px 50px;
  max-width: 420px;
  margin: 20px;
  text-align: center;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 192, 203, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: scale(0.8) rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.fortune-cookie-overlay.active .fortune-cookie-card {
  transform: scale(1) rotate(0deg);
}

.fortune-cookie-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
    transparent 30%,
    rgba(255, 215, 0, 0.1) 50%,
    transparent 70%);
  animation: fortuneShine 3s ease-in-out infinite;
}

@keyframes fortuneShine {
  0%, 100% { transform: translateX(-100%) rotate(45deg); }
  50% { transform: translateX(100%) rotate(45deg); }
}

.fortune-cookie-emoji {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fortuneBounce 2s ease-in-out infinite;
}
.fortune-cookie-emoji svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,0.3));
}

@keyframes fortuneBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}

.fortune-cookie-text {
  font-family: 'Marck Script', cursive;
  font-size: 24px;
  line-height: 1.5;
  color: #5D4E3C;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.fortune-cookie-close {
  background: var(--rose-grad);
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.fortune-cookie-close:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(244, 167, 185, 0.4);
}

/* Конфетти */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  z-index: 10001;
  pointer-events: none;
}

.confetti.square { border-radius: 2px; }
.confetti.circle { border-radius: 50%; }
.confetti.heart {
  width: 0;
  height: 0;
  background: none !important;
}
.confetti.heart::before,
.confetti.heart::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 16px;
  background: inherit;
  border-radius: 10px 10px 0 0;
}
.confetti.heart::before {
  left: 5px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  background: var(--confetti-color, #E28FA8);
}
.confetti.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  background: var(--confetti-color, #E28FA8);
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Темная тема для печенья */
.dark .fortune-cookie-card {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(226, 143, 168, 0.2),
    0 0 40px rgba(226, 143, 168, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark .fortune-cookie-text {
  color: #D8DAE4;
}

.dark .fortune-cookie-close {
  background: linear-gradient(135deg, #E28FA8 0%, #A8A0D0 100%);
  color: #0D0B12;
}

.dark .fortune-cookie-card::before {
  background: linear-gradient(45deg,
    transparent 30%,
    rgba(226, 143, 168, 0.15) 50%,
    transparent 70%);
}

/* Dark theme для hero section — прозрачный чтобы видна клетка с body */
.dark .hero {
  background: transparent;
}

.dark .hero-content {
  background: rgba(21, 21, 32, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 143, 168, 0.25);
  box-shadow: 0 0 25px rgba(226, 143, 168, 0.1), 0 0 50px rgba(168, 160, 208, 0.05);
}

/* Dark theme для карточек - чистый вид без размытия */
.dark .card {
  background: rgba(21, 21, 32, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(226, 143, 168, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark .card:hover {
  border-color: rgba(226, 143, 168, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(226, 143, 168, 0.2);
}

.dark .book-card {
  background: rgba(21, 21, 32, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(168, 160, 208, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* === DARK THEME — добор тёмной темы для забытых элементов === */
.dark .book-cover {
  background: linear-gradient(135deg, #2A2440, #1A1828);   /* было светлый розовый — теперь под dark */
}
.dark .meta-pill {
  background: rgba(226, 143, 168, 0.16);
  color: rgba(216, 218, 228, 0.92);
  border: 1px solid rgba(226, 143, 168, 0.25);
}
.dark .expand-btn {
  color: #F0C878;
}
.dark .expand-btn:hover {
  color: #BFE0F0;
}
.dark .store-link {
  background: linear-gradient(135deg, rgba(226, 143, 168, 0.85), rgba(199, 90, 124, 0.95));
  color: #0F1018;
  box-shadow: 0 4px 12px rgba(226, 143, 168, 0.25);
  border-color: rgba(226, 143, 168, 0.3);
}
.dark .store-link:hover {
  box-shadow: 0 6px 18px rgba(226, 143, 168, 0.4);
}

.dark .book-card:hover {
  border-color: rgba(168, 160, 208, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 160, 208, 0.2);
}

.dark .article-card {
  background: rgba(21, 21, 32, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(226, 143, 168, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark .article-card:hover {
  border-color: rgba(226, 143, 168, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(226, 143, 168, 0.2);
}

.dark .character-card {
  background: rgba(21, 21, 32, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(168, 160, 208, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark .character-card:hover {
  border-color: rgba(168, 160, 208, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 160, 208, 0.2);
}

/* Section */
/* Sections - Collage Style с чередованием фонов */
.section {
  padding: var(--space-3xl) 0;
  contain: layout style;
  position: relative;
}

/* Убираем нижний отступ у последней секции перед футером */
.section:last-child,
#home .section:last-of-type,
.page .section:last-child {
  padding-bottom: var(--space-xl);
}

/* Чередование светлых / розовых секций */
.section:nth-child(even) {
  background: rgba(230, 165, 181, 0.08); /* Лёгкий розовый */
}

.section:nth-child(3n) {
  background: var(--bg-0); /* Бумажный */
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  position: relative;
  padding-bottom: var(--space-md);
}

/* Убираем золотые линии — делаем проще */
.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--rose);
  opacity: 0.5;
}

/* Тёмная тема - убираем линию под заголовком */
.dark .section-header::after {
  display: none;
}

.section-title {
  margin-bottom: var(--space-md);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  z-index: 1;
}

.dark .section-title {
  color: #F0EFEC;
}

/* Eyebrow - моно-метка над заголовком секции */
.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--section-accent), 0.85);
  margin-bottom: 14px;
  opacity: 0.95;
}

.dark .section-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}

/* === Палитра разделов: каждой странице свой цвет акцента === */
:root {
  --section-accent: 244, 167, 185; /* розовый по умолчанию */
}
#home { --section-accent: 244, 167, 185; }      /* розовый - главная */
#books { --section-accent: 181, 137, 201; }     /* лиловый */
#audio { --section-accent: 167, 209, 195; }     /* пастельный мятный (пара к розе) */
#encyclopedia { --section-accent: 168, 201, 166; } /* пастельный sage в пару к розе */
#world { --section-accent: 74, 158, 232; }      /* голубой */
#articles { --section-accent: 212, 108, 142; }  /* благородная французская роза / ягодный бархат */
#reviews { --section-accent: 230, 132, 159; }   /* коралл-розовый */
#about { --section-accent: 244, 167, 185; }     /* розовый — единый с брендом */

/* Маркер-выделитель под заголовком (цвет берёт из своей секции) */
.section-title::after {
  display: block;
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 4px;
  height: 14px;
  background: linear-gradient(135deg,
    rgba(var(--section-accent), 0.42) 0%,
    rgba(var(--section-accent), 0.55) 35%,
    rgba(var(--section-accent), 0.4) 70%,
    rgba(var(--section-accent), 0.45) 100%);
  box-shadow: 0 1px 2px rgba(var(--section-accent), 0.15) inset;
  z-index: -1;
  border-radius: 6px 8px 5px 7px;
  transform-origin: left center;
  transform: rotate(-0.8deg) skewX(-2deg) scaleX(0);
  pointer-events: none;
  animation: marker-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

@keyframes marker-draw {
  0% {
    transform: rotate(-0.8deg) skewX(-2deg) scaleX(0);
  }
  60% {
    transform: rotate(-0.8deg) skewX(-2deg) scaleX(1.04);
  }
  100% {
    transform: rotate(-0.8deg) skewX(-2deg) scaleX(1);
  }
}

.dark .section-title::after {
  left: 0.05em !important;
  right: 0.05em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 2px rgba(226, 184, 110, 0.9) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}

/* Респект пользователю: без анимации если выбран prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .section-title::after,
  .audio-section-title::after,
  .hero-title-sticker::after {
    animation: none;
    transform: rotate(-0.8deg) skewX(-2deg) scaleX(1);
  }
}

.section-subtitle {
  font-size: 16px;
  color: var(--ink);
  opacity: 0.7;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.dark .section-subtitle {
  color: #E8E6E2;
  opacity: 0.7;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Book Card Component - с розовой подсветкой как в Мир книг */
.book-card {
  background: var(--card-bg);
  border-radius: var(--card-radius-lg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  border: 1px solid rgba(var(--section-accent), 0.16);
  cursor: pointer;
  animation: fadeInUp 0.6s ease both;
  position: relative;
}

.book-card .book-cover {
  border-radius: 20px 20px 0 0;
}

/* Убираем лишние эффекты */
.book-card::before {
  display: none;
}

.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(var(--section-accent), 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
  border-color: rgba(var(--section-accent), 0.45);
}

.book-card:hover::before {
  opacity: 1;
}

.book-cover {
  width: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(135deg, var(--rose), var(--blush));
  position: relative;
  overflow: hidden;
}

/* Глянцевый блик */
.book-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.35) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
  z-index: 3;
}

.book-card:hover .book-cover::after {
  left: 150%;
  transition: left 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.book-cover-fallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 2 / 3;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.72), transparent 30%),
    linear-gradient(145deg, rgba(255,183,147,0.95), rgba(201,180,232,0.86) 55%, rgba(168,216,197,0.82));
  color: #2d2926;
  text-align: left;
}

.book-cover-fallback[hidden] {
  display: none !important;
}

.book-cover-fallback__eyebrow,
.book-cover-fallback__genre {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

.book-cover-fallback__title {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.2vw, 1.8rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.book-detail-cover .book-cover-fallback {
  min-height: 480px;
  border-radius: inherit;
}

.book-detail-cover .book-cover-fallback__title {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.dark .book-cover-fallback {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.13), transparent 30%),
    linear-gradient(145deg, rgba(226, 143, 168,0.76), rgba(91,168,199,0.58) 52%, rgba(168,216,197,0.35));
  color: #F8F5F0;
}

.book-card:hover .book-cover img {
  transform: scale(1.04);
}

.book-info {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.book-series {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 24px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  line-height: 1;
  padding: 4px 9px 3px;
  background: rgba(var(--section-accent), 0.10);
  border-radius: 999px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.book-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  line-height: 1;
}

.book-meta-line .book-series {
  margin-bottom: 0;
}

.book-status-badge {
  --book-status-bg: rgba(244, 167, 185, 0.16);
  --book-status-border: rgba(202, 130, 152, 0.28);
  --book-status-text: #88475C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 5px;
  min-height: 24px;
  box-sizing: border-box;
  padding: 4px 8px 3px;
  border-radius: 999px;
  background: var(--book-status-bg);
  border: 1px solid var(--book-status-border);
  color: var(--book-status-text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.book-status-badge::before {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 251, 247, 0.70);
  color: currentColor;
  font-size: 8px;
  line-height: 1;
}

.book-status-badge--new {
  --book-status-bg: rgba(244, 167, 185, 0.18);
  --book-status-border: rgba(202, 130, 152, 0.30);
  --book-status-text: #8B4058;
}

.book-status-badge--new::before {
  content: '✦';
}

.book-status-badge--bestseller {
  --book-status-bg: rgba(245, 220, 161, 0.36);
  --book-status-border: rgba(201, 150, 42, 0.26);
  --book-status-text: #765512;
}

.book-status-badge--bestseller::before {
  content: '★';
}

.book-status-badge--love {
  --book-status-bg: rgba(201, 180, 232, 0.20);
  --book-status-border: rgba(180, 112, 156, 0.24);
  --book-status-text: #74405F;
}

.book-status-badge--love::before {
  content: '♥';
}

.dark .book-status-badge {
  --book-status-bg: rgba(226, 143, 168, 0.14);
  --book-status-border: rgba(226, 143, 168, 0.26);
  --book-status-text: #9BDCF3;
}

.dark .book-status-badge::before {
  background: rgba(255, 255, 255, 0.08);
}

.dark .book-status-badge--bestseller {
  --book-status-bg: rgba(168, 160, 208, 0.17);
  --book-status-border: rgba(168, 160, 208, 0.30);
  --book-status-text: #C8C1EE;
}

.dark .book-status-badge--love {
  --book-status-bg: rgba(196, 181, 224, 0.16);
  --book-status-border: rgba(196, 181, 224, 0.30);
  --book-status-text: #D5CBF0;
}

.book-age-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  box-sizing: border-box;
  padding: 4px 8px 3px;
  border-radius: 999px;
  background: rgba(45, 41, 38, 0.06);
  border: 1px solid rgba(45, 41, 38, 0.10);
  color: rgba(45, 41, 38, 0.72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.book-age-rating--adult {
  background: rgba(180, 74, 104, 0.12);
  border-color: rgba(180, 74, 104, 0.24);
  color: #8F3856;
}

.dark .book-age-rating {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.74);
}

.dark .book-age-rating--adult {
  background: rgba(244, 167, 185, 0.16);
  border-color: rgba(244, 167, 185, 0.28);
  color: #F4B5C7;
}

.book-age-rating:hover,
.book-age-rating:focus-visible,
.book-age-rating--adult:hover,
.book-age-rating--adult:focus-visible {
  background: linear-gradient(135deg, #963D52 0%, #B22B58 100%) !important;
  border-color: #D4AF37 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(150, 61, 82, 0.42), 0 0 10px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-1px) scale(1.08);
}

.dark .book-age-rating:hover,
.dark .book-age-rating:focus-visible,
.dark .book-age-rating--adult:hover,
.dark .book-age-rating--adult:focus-visible {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.5) !important;
  transform: translateY(-1px) scale(1.08);
}

.book-coauthor {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6B4FA0;
  background: rgba(201, 180, 232, 0.20);
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 0 4px;
}
.book-coauthor a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(107, 79, 160, 0.4);
  transition: all 0.2s ease;
}
.book-coauthor a:hover {
  color: #4A3578;
  border-bottom-color: #4A3578;
  background: rgba(201, 180, 232, 0.30);
}
.dark .book-coauthor {
  color: #C9B4E8;
  background: rgba(201, 180, 232, 0.14);
}

.book-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.25;
  word-wrap: break-word;
  hyphens: auto;
}

/* Книги «в работе»: плашка ожидания вместо описания */
.book-description--coming {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--section-accent), 0.10);
  border: 1px dashed rgba(var(--section-accent), 0.42);
  color: var(--ink-cool-3);
  font-style: normal;
  font-size: 13px;
  margin: 4px 0;
}

.book-description {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink);
  opacity: 0.72;
  line-height: 1.55;
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  max-height: 3.2em;
  transition: max-height 0.3s ease;
}

.book-description.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: 200px;
}

.expand-btn {
  font-size: 12px;
  color: var(--rose);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-sm);
  transition: var(--transition-fast);
  min-height: 24px;
}

.expand-btn:hover {
  text-decoration: underline;
}

.book-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.book-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: #FFA500;
  font-size: 13px;
}

.book-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.store-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--rose-grad);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  min-height: 32px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.store-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.store-link:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-md), 0 4px 16px rgba(237, 106, 167, 0.3);
  filter: brightness(1.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.store-link:hover::before {
  left: 100%;
}

.store-link:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s ease;
}

/* ===== Кнопки покупки книг - мягкая палитра ===== */
.buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(45, 41, 38, 0.08);
  background: #FFFBF7;
  color: var(--ink);
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(45, 41, 38, 0.04);
}

.buy-btn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--btn-accent, var(--rose));
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 251, 247, 0.9);
}

.buy-btn:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: var(--btn-accent, var(--rose));
  box-shadow: 0 4px 14px rgba(45, 41, 38, 0.08);
}

/* Компактные кнопки на карточках книг */
.book-actions .buy-btn {
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  gap: 6px;
}

.book-actions .buy-btn::before {
  width: 6px;
  height: 6px;
}

/* Цветовые акценты по магазинам - только точка-маркер */
.buy-btn-litres { --btn-accent: #FF8C42; }
.buy-btn-litmarket { --btn-accent: #6FAB7C; }
.buy-btn-wb { --btn-accent: #B589C9; }
.buy-btn-ozon { --btn-accent: #4A9EE8; }
.buy-btn-author { --btn-accent: #E6849F; }
.buy-btn-audio { --btn-accent: #5BA8A8; }

/* Тёмная тема - такая же чистая pill-форма с цветной точкой */
.dark .buy-btn {
  background: rgba(255, 255, 255, 0.04);
  color: #E8E6E2;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.dark .buy-btn::before {
  box-shadow: 0 0 0 2px rgba(20, 20, 30, 0.6);
}

.dark .buy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--btn-accent, var(--rose));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ===== Галерея изображений книги ===== */
.book-gallery {
  margin-top: 40px;
}

.book-gallery h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--cocoa);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Вертикальные изображения */
.gallery-item.vertical {
  aspect-ratio: 3/4;
}

/* Горизонтальные изображения */
.gallery-item.horizontal {
  aspect-ratio: 4/3;
  grid-column: span 2;
}

/* Лайтбокс для просмотра */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 96vh !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: calc(96vh - 130px) !important;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  color: white;
  font-size: 15px;
  line-height: 1.45;
  margin-top: 10px;
  text-align: center;
  max-width: min(92vw, 740px);
  opacity: 0.95;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: -70px;
}

.lightbox-next {
  right: -70px;
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 12px;
}

/* Мобильная адаптация галереи */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gallery-item.horizontal {
    grid-column: span 2;
  }

  .lightbox-content {
    max-width: 95vw;
    max-height: 90vh;
  }

  .lightbox-image {
    max-height: 70vh;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    position: fixed;
  }

  .lightbox-caption {
    font-size: 14px;
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Скрываем стрелки на мобильных - используем свайп */
  .lightbox-nav {
    display: none !important;
  }

  /* Подсказка для свайпа */
  .lightbox-counter::after {
    content: ' • свайп ←→';
    opacity: 0.6;
  }
}

/* ===== Буктрейлер видео ===== */
.book-trailer {
  margin-top: clamp(34px, 5vw, 50px);
}

.trailer-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  background: #000;
  margin-inline: auto;
}

/* Горизонтальное видео (16:9) */
.trailer-horizontal {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
}

/* Вертикальное видео (9:16) - для Shorts/Reels */
.trailer-vertical {
  width: min(100%, 400px);
  max-width: calc(100vw - 40px);
  aspect-ratio: 9/16;
}

.trailer-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .book-trailer {
    margin-top: clamp(28px, 8vw, 42px);
  }

  .trailer-horizontal {
    width: min(100%, calc(100vw - 32px));
    max-width: 100%;
  }

  .trailer-vertical {
    width: min(86vw, 360px);
    width: min(86vw, 360px, 54svh);
    min-width: min(100%, 260px);
    max-width: calc(100vw - 32px);
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .trailer-vertical {
    width: min(88vw, 340px);
    width: min(88vw, 340px, 54svh);
    min-width: min(100%, 250px);
  }
}

@media (max-width: 390px) {
  .trailer-vertical {
    width: min(90vw, 320px);
    width: min(90vw, 320px, 54svh);
    min-width: min(100%, 238px);
  }
}

@media (max-width: 360px) {
  .trailer-vertical {
    width: min(92vw, 304px);
    width: min(92vw, 304px, 54svh);
    min-width: min(100%, 226px);
    border-radius: 12px;
  }
}

@media (max-width: 320px) {
  .trailer-vertical {
    width: calc(100vw - 24px);
    min-width: 0;
  }
}

/* Footer */
.footer {
  position: relative;
  z-index: 3;
  color: var(--cocoa);
  padding: var(--space-3xl) 0 var(--space-xl);
  margin-top: 0;
  box-shadow: 0 -8px 32px rgba(237, 106, 167, 0.08);
  border-top: 1px solid rgba(237, 106, 167, 0.1);
  overflow: hidden;

  /* Клетчатый паттерн с матовой подложкой */
  background:
    /* Матовая подложка сверху для уменьшения контраста */
    linear-gradient(
      to bottom,
      rgba(250, 248, 245, 0.85),
      rgba(250, 248, 245, 0.85)
    ),
    /* White-pink checkered pattern */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.95) 0px,
      rgba(255, 255, 255, 0.95) 15px,
      rgba(255, 192, 203, 0.08) 15px,
      rgba(255, 192, 203, 0.08) 30px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.95) 0px,
      rgba(255, 255, 255, 0.95) 15px,
      rgba(255, 192, 203, 0.08) 15px,
      rgba(255, 192, 203, 0.08) 30px
    ),
    linear-gradient(135deg,
      #FDF8F3 0%,
      #FFF5F0 20%,
      #FFEFF5 40%,
      #FFE8F1 60%,
      #FFF0F0 80%,
      #FDF8F3 100%
    );
  background-blend-mode: normal, multiply, multiply, normal;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--section-accent)) 0%, rgba(var(--section-accent), 0.5) 50%, rgb(var(--section-accent)) 100%);
  background-size: 200% auto;
  animation: gold-shine 3s linear infinite;
}

.dark .footer {
  background: #0D0B12;
  border-top: 1px solid rgba(226, 143, 168, 0.2);
  color: #E0E0E8;
  box-shadow: none;
}

.dark .footer::before {
  display: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-bio {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 0.78;
  margin-bottom: 22px;
}

.footer-section h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--rose);
  display: inline-block;
}
.footer-section h3:not(.footer-brand-name)::before {
  content: '— ';
  opacity: 0.7;
}
.footer-section h3:not(.footer-brand-name)::after {
  content: ' —';
  opacity: 0.7;
}

.dark .footer-section h3 {
  color: var(--rose);
}

.footer-link {
  display: block;
  font-family: var(--font-body);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  padding: 6px 0;
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.78;
  min-height: 28px;
}

.footer-link:hover {
  color: var(--rose);
  transform: translateX(4px);
  opacity: 1;
}

.dark .footer-link {
  color: #B0C4DE;
}

.dark .footer-link:hover {
  color: #E28FA8;
  text-shadow: 0 0 8px rgba(226, 143, 168, 0.3);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.social-link {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
  color: #9A7481;
  color: color-mix(in srgb, var(--rose-deep) 58%, #B8AAA6);
  opacity: 1;
  border: 1px solid rgba(var(--rose-deep-rgb), 0.22);
}

.social-link:hover {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: white;
  opacity: 1;
  transform: translateY(-2px);
}

.social-link::before { display: none; }

.social-link:hover {
  color: white;
  transform: translateY(-5px) scale(1.1) rotate(5deg);
  box-shadow: 0 10px 25px rgba(var(--rose-deep-rgb), 0.26);
  border-color: var(--rose-deep);
}

.social-link:hover::before {
  transform: scale(1);
}

.social-link:active {
  transform: translateY(-3px) scale(1.05) rotate(0deg);
  transition: all 0.15s ease;
}

/* Улучшенные hover эффекты для социальных кнопок в разделе "Обо мне" */
#about-content .social-link:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Исправление для больших социальных кнопок в секции "Давайте дружить!" */
#about-content .social-link[style*="flex-direction: column"] {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 16px !important;
}

#about-content .social-link[style*="flex-direction: column"]::before {
  display: none !important;
}

#about-content .social-link[style*="flex-direction: column"] svg {
  flex-shrink: 0;
}

.dark .social-link {
  background: rgba(100, 149, 237, 0.15);
  color: #B0C4DE;
  border-color: rgba(100, 149, 237, 0.3);
}

.dark .social-link:hover {
  background: rgba(226, 143, 168, 0.25);
  color: #D8DAE4;
  box-shadow: 0 0 15px rgba(226, 143, 168, 0.3);
}

/* ===== СТРАНИЦА "ОБО МНЕ" В ТЁМНОЙ ТЕМЕ ===== */
/* Фон страницы */
.dark #about-content > div:first-child {
  background: linear-gradient(135deg, #0D0B12 0%, #14141f 50%, #0D0B12 100%) !important;
  background-image: none !important;
}

/* Тетрадка/дневник */
.dark #about-content > div:first-child > div:first-child {
  background: rgba(20, 20, 31, 0.95) !important;
  border: 1px solid rgba(226, 143, 168, 0.15) !important;
  box-shadow: none !important;
}

/* Текстура клетки - делаем темнее */
.dark #about-content > div:first-child > div:first-child > div:first-child {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(226, 143, 168,0.08) 24px, rgba(226, 143, 168,0.08) 25px),
                    repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(226, 143, 168,0.08) 24px, rgba(226, 143, 168,0.08) 25px) !important;
}

/* Полароиды/карточки */
.dark #about-content div[style*="background: var(--card-bg)"],
.dark #about-content div[style*="background: #FFFBF7"],
.dark #about-content div[style*="background: linear-gradient(180deg, #FFFBF7"],
.dark #about-content div[style*="background: linear-gradient(180deg, var(--canary)"] {
  background: rgba(22, 22, 42, 0.9) !important;
  border: 1px solid rgba(226, 143, 168, 0.15) !important;
}

/* Стикеры жёлтые -> тёмные с фиолетовым акцентом */
.dark #about-content div[style*="background: linear-gradient(135deg, var(--canary)"],
.dark #about-content div[style*="background: var(--canary)"] {
  background: linear-gradient(135deg, rgba(168, 160, 208, 0.2) 0%, rgba(139, 142, 216, 0.15) 100%) !important;
  border: 1px solid rgba(168, 160, 208, 0.3) !important;
}

/* Текст на стикерах */
.dark #about-content p[style*="color: var(--cocoa)"],
.dark #about-content p[style*="color: #333"],
.dark #about-content span {
  color: #D8DAE4 !important;
}

/* Strong текст */
.dark #about-content strong[style*="color: #5D4E3C"] {
  color: #E28FA8 !important;
}

/* Скотч washi tape -> полупрозрачный голубой */
.dark #about-content div[style*="dashed"] {
  background: linear-gradient(90deg, rgba(226, 143, 168,0.15) 0%, rgba(226, 143, 168,0.25) 50%, rgba(226, 143, 168,0.15) 100%) !important;
  border-color: rgba(226, 143, 168,0.3) !important;
}

/* Булавки/кнопки -> голубо-фиолетовые */
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #FF6B6B"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #F8BBD9"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #E1BEE7"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #A5D6A7"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #C8E6C9"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #81D4FA"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #B3E5FC"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #FFF59D"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #FFCC80"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #FFE082"],
.dark #about-content div[style*="radial-gradient(circle at 35% 35%, #FFECB3"] {
  background: radial-gradient(circle at 35% 35%, #A8A0D0 0%, #7B73B8 60%, #5D5694 100%) !important;
}

/* Овальные стикеры */
.dark #about-content div[style*="border-radius: 20px"],
.dark #about-content div[style*="border-radius: 15px"] {
  background: rgba(226, 143, 168, 0.2) !important;
  color: #B8C4D8 !important;
}

/* Timeline */
.dark .timeline::before {
  background: linear-gradient(180deg, transparent, rgba(226, 143, 168,0.4), rgba(168,160,208,0.4), transparent) !important;
}

.dark .timeline-dot {
  background: linear-gradient(135deg, #E28FA8, #A8A0D0) !important;
  border-color: var(--bg-0) !important;
}

/* Красивая пульсация точек таймлайна в тёмной теме */
.dark .timeline-item.animate .timeline-dot {
  animation: timeline-dot-glow 2.5s ease-in-out infinite !important;
}

@keyframes timeline-dot-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(226, 143, 168, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(226, 143, 168, 0);
    transform: scale(1.08);
  }
}

.dark .timeline-content {
  background: rgba(22, 22, 42, 0.9) !important;
  border: 1px solid rgba(226, 143, 168, 0.25) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark .timeline-item {
  box-shadow: none !important;
  filter: none !important;
}

.dark .timeline-content:hover,
.dark .timeline-item.animate .timeline-content:hover {
  box-shadow: none !important;
  transform: translateY(-5px);
}

/* Карточки "Ещё немного обо мне" - чистый вид без теней */
.dark #about-content .card {
  background: rgba(22, 22, 42, 0.9) !important;
  border: 1px solid rgba(226, 143, 168, 0.2) !important;
  box-shadow: none !important;
}

.dark #about-content .card:hover {
  border-color: rgba(226, 143, 168, 0.4) !important;
  box-shadow: none !important;
}

/* Секция "Давайте дружить!" */
.dark #about-content div[style*="background: var(--bg-1)"] {
  background: rgba(20, 20, 31, 0.9) !important;
  border: 1px solid rgba(226, 143, 168, 0.15) !important;
}

/* Социальные кнопки в секции "Давайте дружить!" - приглушённые цвета */
.dark #about-content .social-link[style*="flex-direction: column"] {
  border: 1px solid rgba(226, 143, 168, 0.2) !important;
  opacity: 0.85;
  filter: saturate(0.6) brightness(0.85);
}

.dark #about-content .social-link[style*="flex-direction: column"]:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 15px rgba(226, 143, 168, 0.2) !important;
  opacity: 1;
  filter: saturate(0.75) brightness(0.95);
}

/* Приглушаем отдельные соцсети по цветам */
.dark .social-link[style*="#4C75A3"],
.dark .social-link[style*="#0088CC"],
.dark .social-link[style*="#FF6B8A"],
.dark .social-link[style*="#00D4AA"],
.dark .social-link[style*="#FC5B2A"] {
  filter: saturate(0.55) brightness(0.8) !important;
  opacity: 0.9;
}

.dark .social-link[style*="#4C75A3"]:hover,
.dark .social-link[style*="#0088CC"]:hover,
.dark .social-link[style*="#FF6B8A"]:hover,
.dark .social-link[style*="#00D4AA"]:hover,
.dark .social-link[style*="#FC5B2A"]:hover {
  filter: saturate(0.7) brightness(0.9) !important;
  opacity: 1;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(237, 106, 167, 0.15);
  color: var(--cocoa);
  font-size: var(--fs-small);
  opacity: 0.7;
}

.dark .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #808080;
}

/* Page */
.page {
  display: none;
  min-height: calc(100vh - 80px);
  padding: var(--space-2xl) 0 var(--space-3xl);
  animation: pageIn 0.5s ease;
  position: relative;
  z-index: 3;
}

/* Винил: 1) выкатывается из-под обложки, 2) бесконечно крутится */
.song-vinyl {
  animation:
    vinyl-emerge 1.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s both,
    vinyl-spin 14s linear 2s infinite !important;
}

@keyframes vinyl-emerge {
  0% {
    transform: translate(160px, -50%) rotate(-160deg);
    opacity: 0;
  }
  30% {
    opacity: 0.55;
  }
  100% {
    transform: translate(0, -50%) rotate(0deg);
    opacity: 1;
  }
}

@keyframes vinyl-spin {
  from { transform: translate(0, -50%) rotate(0deg); }
  to { transform: translate(0, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .song-vinyl { animation: none !important; transform: translate(0, -50%) !important; }
}

/* Анимация волны теперь по умолчанию — см. .audio-wave rect */

/* Молочная клетка-тетрадка - единый фон для всех страниц */
.page {
  background-color: #FBF6EE;
  background-image:
    linear-gradient(rgba(217, 196, 168, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 196, 168, 0.16) 1px, transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 245, 230, 0.7) 0%, transparent 70%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, center top;
}

/* На главной клетка чуть более выражена (тёплый беж) */
#home {
  background-color: #FBF6EE;
  background-image:
    linear-gradient(rgba(217, 196, 168, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 196, 168, 0.18) 1px, transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 245, 230, 0.7) 0%, transparent 70%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, center top;
}

/* Тёмная тема: убираем клетку — пусть видны звёзды (body::after) и северное сияние */
.dark .page,
.dark #home {
  background-color: transparent !important;
  background-image: none !important;
}

.page.active {
  display: block;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ===== BENTO-СЕТКА на главной ===== */
.bento-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}
.bento-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 20px 42px rgba(45, 41, 38, 0.12) !important;
}
.dark .bento-card:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(226, 184, 110, 0.08) !important;
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
  }
  .bento-grid > .bento-card {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  .bento-grid > .bento-card:nth-child(1) {
    grid-row: span 2 !important;
  }
}
@media (max-width: 540px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-grid > .bento-card {
    grid-column: span 1 !important;
  }
}

/* ===== HOME NAVIGATOR — взрослый маршрут по сайту ===== */
.home-nav-section {
  padding: clamp(54px, 7vw, 82px) 20px clamp(74px, 9vw, 104px);
}

.home-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.home-nav-header {
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.home-nav-header .section-title {
  margin-bottom: 14px;
}

.home-nav-subtitle {
  margin: 0 auto;
  max-width: 620px;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.74;
}

.home-nav-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.home-nav-card {
  --home-accent: 244, 167, 185;
  --home-accent-strong: #B0506E;
  display: grid;
  min-width: 0;
  min-height: 100%;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(var(--home-accent), 0.28);
  border-radius: var(--card-radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--home-accent), 0.08), rgba(var(--home-accent), 0.03)),
    rgba(255, 251, 247, 0.88);
  box-shadow: 0 12px 30px rgba(45, 41, 38, 0.06);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.home-nav-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -38% 46%;
  height: 72%;
  background: radial-gradient(circle, rgba(var(--home-accent), 0.16), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.home-nav-card:hover,
.home-nav-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--home-accent), 0.48);
  box-shadow: 0 18px 42px rgba(45, 41, 38, 0.10);
}

.home-nav-card:focus-visible {
  outline: 3px solid rgba(var(--home-accent), 0.26);
  outline-offset: 4px;
}

.home-nav-card--diletantki {
  --home-accent: 244, 167, 185;
  --home-accent-strong: var(--rose-deep);
}

.home-nav-card--inferin {
  --home-accent: 130, 190, 165;
  --home-accent-strong: #2F745E;
}

.home-nav-feature {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.48fr);
  gap: clamp(18px, 3vw, 30px);
  min-height: 330px;
  padding: clamp(28px, 4vw, 38px);
}

.home-nav-feature-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.home-nav-kicker,
.home-nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(var(--home-accent), 0.12);
  border: 1px solid rgba(var(--home-accent), 0.28);
  color: var(--home-accent-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-nav-kicker span:first-child,
.home-nav-badge span:first-child {
  font-size: 13px;
  letter-spacing: 0;
}

.home-nav-title {
  margin: 18px 0 12px;
  font-family: var(--font-display);
  font-size: 3.05rem;
  font-style: normal;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
  color: var(--ink);
}

.home-nav-card--inferin .home-nav-title {
  font-size: 2.35rem;
}

.home-nav-text {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.76;
}

.home-nav-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.home-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--home-accent-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-nav-link::after {
  content: '→';
  font-size: 15px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.24s ease;
}

.home-nav-card:hover .home-nav-link::after,
.home-nav-card:focus-visible .home-nav-link::after {
  transform: translateX(4px);
}

.home-nav-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.home-nav-covers {
  position: relative;
  width: min(100%, 238px);
  aspect-ratio: 0.72;
}

.home-nav-cover {
  position: absolute;
  width: 58%;
  aspect-ratio: 0.68;
  object-fit: cover;
  border-radius: 10px;
  border: 5px solid rgba(255, 251, 247, 0.95);
  box-shadow: 0 14px 30px rgba(45, 41, 38, 0.16);
  background: var(--card-bg);
  transform-origin: 50% 82%;
  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.46s ease,
    filter 0.46s ease;
  will-change: transform;
}

.home-nav-cover:nth-child(1) {
  left: 5%;
  top: 18%;
  transform: translate3d(0, 0, 0) rotate(-8deg);
  z-index: 1;
}

.home-nav-cover:nth-child(2) {
  left: 23%;
  top: 6%;
  transform: translate3d(0, 0, 0) rotate(2deg);
  z-index: 3;
}

.home-nav-cover:nth-child(3) {
  right: 5%;
  top: 22%;
  transform: translate3d(0, 0, 0) rotate(8deg);
  z-index: 2;
}

.home-nav-card:hover .home-nav-cover,
.home-nav-card:focus-visible .home-nav-cover {
  box-shadow: 0 18px 38px rgba(45, 41, 38, 0.20);
  filter: saturate(1.04) contrast(1.02);
}

.home-nav-card:hover .home-nav-cover:nth-child(1),
.home-nav-card:focus-visible .home-nav-cover:nth-child(1) {
  transform: translate3d(-10px, -4px, 0) rotate(-12deg);
}

.home-nav-card:hover .home-nav-cover:nth-child(2),
.home-nav-card:focus-visible .home-nav-cover:nth-child(2) {
  transform: translate3d(0, -12px, 0) rotate(1deg) scale(1.045);
}

.home-nav-card:hover .home-nav-cover:nth-child(3),
.home-nav-card:focus-visible .home-nav-cover:nth-child(3) {
  transform: translate3d(10px, -3px, 0) rotate(12deg);
}

.home-nav-card--inferin .home-nav-covers {
  width: min(100%, 218px);
  transform: translateY(-42px);
}

.home-nav-detective {
  position: absolute;
  right: -8px;
  bottom: -28px;
  width: 90%;
  max-width: 210px;
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 0.46s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-nav-detective--light {
  display: block;
  opacity: 0.52;
  mix-blend-mode: multiply;
}

.home-nav-detective--dark {
  display: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.dark .home-nav-detective--light {
  display: none;
  opacity: 0;
}

.dark .home-nav-detective--dark {
  display: block;
  opacity: 0.82;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(226, 184, 110, 0.32));
}

.home-nav-card:hover .home-nav-detective--light,
.home-nav-card:focus-visible .home-nav-detective--light {
  opacity: 0.75;
  transform: translate3d(5px, -5px, 0) scale(1.04);
}

.dark .home-nav-card:hover .home-nav-detective--dark,
.dark .home-nav-card:focus-visible .home-nav-detective--dark {
  opacity: 0.88;
  transform: translate3d(5px, -5px, 0) scale(1.04);
  filter: drop-shadow(0 0 24px rgba(226, 184, 110, 0.45));
}

.home-nav-volcano {
  position: absolute;
  right: 14px;
  bottom: -40px;
  width: 90%;
  max-width: 235px;
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 0.46s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-nav-volcano--light {
  display: block;
  opacity: 0.48;
  mix-blend-mode: multiply;
}

.home-nav-volcano--dark {
  display: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.dark .home-nav-volcano--light {
  display: none;
  opacity: 0;
}

.dark .home-nav-volcano--dark {
  display: block;
  opacity: 0.62;
  mix-blend-mode: normal;
}

.home-nav-card:hover .home-nav-volcano--light,
.home-nav-card:focus-visible .home-nav-volcano--light {
  opacity: 0.65;
  transform: translate3d(-3px, -5px, 0) scale(1.04);
}

.dark .home-nav-card:hover .home-nav-volcano--dark,
.dark .home-nav-card:focus-visible .home-nav-volcano--dark {
  opacity: 0.82;
  transform: translate3d(-3px, -5px, 0) scale(1.04);
}

.home-nav-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-nav-quick {
  min-height: 166px;
  padding: 22px;
  align-content: space-between;
}

.home-nav-quick--audio { --home-accent: 255, 170, 126; --home-accent-strong: #B85B33; }
.home-nav-quick--encyclopedia { --home-accent: 184, 161, 220; --home-accent-strong: #6B4FA0; }
.home-nav-quick--map { --home-accent: 126, 170, 218; --home-accent-strong: #2E6C9F; }
.home-nav-quick--quiz { --home-accent: 216, 138, 160; --home-accent-strong: var(--rose-deep); }

.home-nav-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--home-accent), 0.14);
  border: 1px solid rgba(var(--home-accent), 0.28);
  color: var(--home-accent-strong);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.home-nav-quick h3 {
  margin: 18px 0 7px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
}

.home-nav-quick p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.70;
}

.dark .home-nav-card {
  background:
    linear-gradient(135deg, rgba(var(--home-accent), 0.13), rgba(var(--home-accent), 0.05)),
    rgba(20, 20, 34, 0.84);
  border-color: rgba(var(--home-accent), 0.30);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.dark .home-nav-card:hover,
.dark .home-nav-card:focus-visible {
  border-color: rgba(var(--home-accent), 0.48);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.dark .home-nav-subtitle,
.dark .home-nav-text,
.dark .home-nav-quick p {
  color: #E8E6E3;
  opacity: 0.74;
}

.dark .home-nav-title,
.dark .home-nav-quick h3 {
  color: #F8F6F2;
}

.dark .home-nav-kicker,
.dark .home-nav-badge,
.dark .home-nav-link,
.dark .home-nav-quick-icon {
  color: rgb(var(--home-accent));
}

.dark .home-nav-cover {
  border-color: rgba(20, 20, 34, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .home-nav-cover,
  .home-nav-volcano,
.home-nav-detective {
    transition: none !important;
  }
}

@media (min-width: 1241px) {
  .home-nav-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-nav-feature {
    grid-template-columns: 1fr;
    min-height: 350px;
    padding: 34px 38px;
  }

  .home-nav-feature-copy {
    position: relative;
    z-index: 2;
    max-width: 315px;
  }

  .home-nav-title {
    max-width: 315px;
    font-size: 2.72rem;
    line-height: 1.02;
  }

  .home-nav-card--inferin .home-nav-title {
    max-width: 280px;
    font-size: 2.32rem;
  }

  .home-nav-text {
    max-width: 305px;
    font-size: 1rem;
    line-height: 1.56;
  }

  .home-nav-badges {
    max-width: 315px;
  }

  .home-nav-visual {
    position: absolute;
    z-index: 1;
    top: 84px;
    right: 30px;
    bottom: 68px;
    width: 178px;
    min-height: 0;
    pointer-events: none;
  }

  .home-nav-covers {
    width: min(100%, 178px);
  }

  .home-nav-card--inferin .home-nav-covers {
    width: min(100%, 170px);
    transform: translateY(-38px);
  }

  .home-nav-detective {
    right: 6px;
    bottom: -38px;
    max-width: 180px;
  }

  .home-nav-volcano {
    right: 10px;
    bottom: -42px;
    max-width: 195px;
  }
}

@media (max-width: 1240px) {
  .home-nav-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-nav-feature {
    min-height: 280px;
  }
}

@media (max-width: 980px) {
  .home-nav-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .home-nav-section {
    padding: 46px 16px 72px;
  }

  .home-nav-feature {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px 22px;
  }

  .home-nav-visual {
    min-height: 190px;
    order: -1;
  }

  .home-nav-covers {
    width: min(78vw, 220px);
  }

  .home-nav-title {
    font-size: 2.2rem;
  }

  .home-nav-card--inferin .home-nav-title {
    font-size: 1.95rem;
  }

  .home-nav-badges {
    gap: 7px;
  }

  .home-nav-badge {
    white-space: normal;
  }

  .home-nav-quick-grid {
    grid-template-columns: 1fr;
  }

  .home-nav-quick {
    min-height: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-nav-card,
  .home-nav-link::after {
    transition: none;
  }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Scroll animations trigger - плавный parallax эффект */
[data-animate] {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Первые элементы в любой сетке сразу видимы — чтобы при загрузке не казалось что сайт «завис» */
.grid > [data-animate]:nth-of-type(-n+3),
.grid > .character-card:nth-of-type(-n+3),
.grid > .book-card:nth-of-type(-n+3),
.grid > .article-card:nth-of-type(-n+3),
#characters-grid > .character-card:nth-of-type(-n+3),
.quiz-card-item:nth-of-type(-n+3),
[data-animate]:first-of-type {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Плавный fade-up для карточек */
.card[data-animate],
.book-card[data-animate],
.article-card[data-animate],
.character-card[data-animate] {
  animation: none;
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card[data-animate].animated,
.book-card[data-animate].animated,
.article-card[data-animate].animated,
.character-card[data-animate].animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Media Queries */
@media (max-width: 1200px) {
  .nav-link {
    padding: 6px 8px;
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-2 { grid-template-columns: 1fr; }
  .nav-link span { font-size: 11px; }
  .nav-link { padding: 6px 8px; gap: 3px; }
  .nav-link svg { width: 18px; height: 18px; }
  .nav-menu { gap: 2px; }
  .brand-name { font-size: 18px !important; }

  .footer-content {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer-section:first-child {
    grid-column: 1 / -1;
  }

  .footer-social a { width: 36px; height: 36px; }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: clamp(1.75rem, 4vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 3vw, 2rem);
    --fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  }

  .nav-menu { display: none; }
  .menu-toggle { display: flex; }

  /* Чистый молочный фон на мобильных - убираем клетку */
  body {
    background: linear-gradient(180deg,
      #FDF8F3 0%,
      #FFF5F8 50%,
      #FDF8F3 100%) !important;
  }

  .dark body {
    background: linear-gradient(180deg,
      #0D0B12 0%,
      #0f0f1c 50%,
      #0D0B12 100%) !important;
  }

  /* .page maintains cozy notebook grid on mobile */

  /* Фиксим хедер на мобильных */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    contain: none;
    transform: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(250, 248, 245, 0.95);
  }

  .dark .navbar {
    background: rgba(13, 13, 20, 0.95);
  }

  /* Отступ для контента под фиксированным хедером */
  .page {
    padding-top: 70px;
  }

  .navbar-container {
    padding: 12px 16px;
  }

  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }

  /* Mobile hero - transparent to let notebook grid show through */
  .hero {
    min-height: auto;
    padding: 20px var(--space-md);
    margin-top: -10px;
    background: transparent;
  }

  /* Photo background on mobile - lighter */
  .hero::before {
    opacity: 0.3;
  }

  /* Hero content на мобильных */
  .hero-content {
    max-width: 100%;
    width: 95%;
    padding: 40px 24px;
    border-radius: 20px;
  }

  .section { padding: var(--space-3xl) 0; }
  
  .footer-content { 
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .footer-section:first-child {
    margin-bottom: var(--space-xl);
  }
  
  /* Адаптивность страницы "Обо мне" */
  #about-content > div:first-child {
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
  }
  
  #about-content > div:first-child > div:first-child {
    margin: 0 auto !important;
  }
  
  /* Убираем декоративные элементы на мобильных */
  #about-content > div:first-child > div:first-child > div:nth-child(2),
  #about-content > div:first-child > div:first-child > div:nth-child(3) {
    display: none !important;
  }

  /* Упрощенные эффекты для карточек на планшетах */
  .card:hover,
  .book-card:hover,
  .article-card:hover,
  .character-card:hover {
    transform: translateY(-4px) !important;
  }

  /* Галерея на планшетах - вертикальная компоновка */
  .hero-content > div[style*="max-width: 1000px"] {
    flex-direction: column !important;
    gap: 30px !important;
    padding: 0 !important;
  }

  .hero-content > div[style*="max-width: 1000px"] > div:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  .hero-content > div[style*="max-width: 1000px"] > div:nth-child(2) {
    display: none !important; /* Скрываем вертикальную линию */
  }

  .hero-content > div[style*="max-width: 1000px"] > div:last-child {
    text-align: left !important;
  }

  .hero-content > div[style*="max-width: 1000px"] > div:last-child h3 {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: 1fr; }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  .btn { width: 100%; }

  /* Галерея на мобильных - уменьшенная */
  .hero-content > div[style*="max-width: 1000px"] > div:first-child {
    max-width: 300px !important;
  }

  #hero-gallery {
    height: auto !important;
  }
  
  .book-card {
    margin: 0 auto;
    max-width: 320px;
  }

  /* Отключаем 3D эффекты и сложные анимации на мобильных */
  .card,
  .book-card,
  .article-card,
  .character-card {
    transform-style: flat !important;
  }

  .card:hover,
  .book-card:hover,
  .article-card:hover,
  .character-card:hover {
    transform: translateY(-3px) !important;
  }

  /* Упрощаем backdrop-filter для лучшей производительности */
  .card,
  .book-card,
  .article-card,
  .character-card {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  /* Мобильный timeline */
  .timeline::before { 
    left: 20px; 
  }
  .timeline-item { 
    padding-left: 50px !important; 
    padding-right: 0 !important;
    text-align: left !important;
  }
  .timeline-dot { 
    left: 20px; 
  }
  
  /* Адаптивность для "Обо мне" на очень маленьких экранах */
  #about-content .card {
    padding: 25px 20px !important;
    border-radius: 20px !important;
  }
  
  #about-content > div:first-child > div:last-child {
    max-width: 100% !important;
  }
  
  /* Адаптивность для карточек "Ещё немного обо мне" - 2 колонки на десктопе, 1 на мобильных */
  #about-content div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Карточки фактов - уменьшаем padding на мобильных */
  #about-content div[style*="grid-template-columns: repeat(2, 1fr)"] .card {
    padding: 25px 20px !important;
  }
  
  /* Адаптивность для секции "Давайте дружить!" на мобильных */
  #about-content div[style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Уменьшаем размер социальных кнопок на мобильных */
  #about-content .social-link[style*="flex-direction: column"] {
    padding: 20px 16px !important;
    font-size: 14px !important;
    min-height: 100px !important;
  }
  
  #about-content .social-link svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Уменьшаем отступы секции "Давайте дружить!" на мобильных */
  #about-content div[style*="margin-top: 80px"] {
    margin-top: 60px !important;
    padding: 40px 20px !important;
  }

  /* ===== ТЁМНАЯ ТЕМА НА МОБИЛЬНЫХ ===== */
  /* Мобильный hero в тёмной теме */
  .dark .hero {
    background: linear-gradient(135deg,
      rgba(13, 13, 20, 0.98) 0%,
      rgba(21, 21, 32, 0.95) 50%,
      rgba(13, 13, 20, 0.98) 100%);
  }

  /* Звёзды менее интенсивные на мобильных для экономии батареи */
  .dark body::after {
    animation: none;
    opacity: 0.6;
  }

  /* Карточки на мобильных - убираем лишние эффекты */
  .dark .card:hover,
  .dark .book-card:hover,
  .dark .article-card:hover {
    box-shadow: var(--shadow-md);
  }
}

/* Additional Components for better UX */

/* Back Button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 100px;
  background: rgba(var(--section-accent), 0.1);
  border: 1px solid rgba(var(--section-accent), 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 30px;
  min-height: 40px;
}

.back-btn:hover {
  background: rgba(var(--section-accent), 0.18);
  border-color: rgba(var(--section-accent), 0.5);
  color: var(--ink);
  transform: translateX(-4px);
}

/* Characters Scroll Container - grid на десктопе */
.characters-scroll-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Character Card Component */
.character-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, var(--bg-1));
  border-radius: 20px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  animation: fadeInUp 0.6s ease both;
  border: 1px solid rgba(var(--section-accent), 0.16);
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

.character-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(var(--section-accent), 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(var(--section-accent), 0.45);
}

.character-avatar {
  width: 104px;
  height: 104px;
  background: linear-gradient(135deg, rgba(var(--section-accent), 0.25), rgba(var(--section-accent), 0.10));
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--card-bg, #fff);
  box-shadow: 0 0 0 1.5px rgba(var(--section-accent), 0.25), 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.character-card:hover .character-avatar {
  transform: scale(1.06) rotate(-2deg);
}

.character-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}

.character-role {
  display: block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none !important;
  color: rgb(var(--section-accent));
  margin: 0 0 10px;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

.character-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}

.char-meta-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 2.5px 8px;
  border-radius: 6px;
  background: rgba(var(--section-accent), 0.08);
  color: var(--ink);
  opacity: 0.85;
}

.char-meta-series {
  font-weight: 600;
  color: rgb(var(--section-accent));
  background: rgba(var(--section-accent), 0.12);
  opacity: 1;
}

.character-description {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 14px;
  opacity: 0.82;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.character-skills {
  display: flex;
  gap: 6px;
  row-gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 8px 0 14px;
  max-width: 100%;
}

.char-skill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  text-transform: lowercase !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, rgb(var(--section-accent)) 8%, var(--bg-1)) !important;
  border: 1px solid color-mix(in srgb, rgb(var(--section-accent)) 22%, transparent) !important;
  border-radius: 999px !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  transition: all var(--transition-fast, 0.2s ease);
}

.char-skill-chip:hover {
  background: color-mix(in srgb, rgb(var(--section-accent)) 16%, var(--bg-1)) !important;
  border-color: color-mix(in srgb, rgb(var(--section-accent)) 35%, transparent) !important;
}

.char-skill-chip::before,
.char-skill-chip::after,
.character-skills .tag-pill::before,
.character-skills .tag-pill::after {
  content: none !important;
  display: none !important;
}

.character-skills .tag-pill {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: lowercase !important;
  line-height: 1.35 !important;
  min-height: auto !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100% !important;
  background: color-mix(in srgb, rgb(var(--section-accent)) 8%, var(--bg-1)) !important;
  border: 1px solid color-mix(in srgb, rgb(var(--section-accent)) 22%, transparent) !important;
  color: var(--ink) !important;
}

/* Audio Player Component */
.audio-player {
  background: var(--bg-1);
  border-radius: 20px;
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  transition: var(--transition-base);
}

.audio-player:hover {
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(var(--section-accent), 0.18);
}

.audio-cover {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, rgba(var(--section-accent), 0.45), rgba(var(--section-accent), 0.2));
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--section-accent), 0.18);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-player:hover .audio-cover {
  transform: scale(1.18);
  box-shadow: 0 14px 36px rgba(var(--section-accent), 0.4);
  z-index: 2;
}

.audio-info {
  flex: 1;
  min-width: 0;
}

.audio-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  overflow-wrap: break-word;
}

.audio-author {
  font-size: var(--fs-small);
  color: var(--cocoa);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.audio-progress {
  width: 100%;
  height: 6px;
  background: var(--blush);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.audio-progress-bar {
  height: 100%;
  background: var(--rose);
  width: 35%;
  transition: width 0.3s ease;
}

.audio-time {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-tiny);
  color: var(--cocoa);
  opacity: 0.6;
}

.play-btn {
  width: 56px;
  height: 56px;
  background: var(--rose-grad);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.audio-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgb(var(--section-accent));
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(var(--section-accent), 0.3);
}

.audio-listen-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 5px 16px rgba(var(--section-accent), 0.4);
  color: white;
}

.audio-listen-btn svg {
  flex-shrink: 0;
}

/* === Обводка аватаров блогеров в отзывах (круг с двойной обводкой) === */
.review-avatar {
  box-shadow:
    0 0 0 3px #FFFBF7,
    0 0 0 5px rgba(244, 167, 185, 0.55),
    0 0 12px rgba(244, 167, 185, 0.3);
}

.dark .review-avatar {
  box-shadow:
    0 0 0 3px #14141f,
    0 0 0 5px rgba(244, 167, 185, 0.65),
    0 0 14px rgba(244, 167, 185, 0.4);
}

/* === Плавная анимация пастельных карточек на «Обо мне» === */
.about-card {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* === Тёмная тема для раздела «Обо мне» === */
/* Подложка тетрадки в dark → переопределяем inline #FBF6EE */
.dark #about-content [style*="#FBF6EE"],
.dark #about-content [style*="#fbf6ee"] {
  background: #1A1A2E !important;
}
/* Линии «клетки» внутри тетрадки в dark — делаем светлее чтобы были видны */
.dark #about-content [style*="rgba(217, 196, 168"] {
  background-image: linear-gradient(rgba(168, 160, 208, 0.15) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(168, 160, 208, 0.15) 1px, transparent 1px) !important;
}
/* Pastel card underlays removed: entire about-record container is colored */
.about-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(45, 41, 38, 0.08), 0 4px 12px rgba(45, 41, 38, 0.04);
}

/* Появление карточки целиком — одно плавное движение, без поэтапного мерцания */
.about-card[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-card[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .about-card,
  .about-card[data-animate] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Стилизованные номера в списке «7 причин прочитать» */
.dil-reasons-list .reason-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: rgba(var(--section-accent), 1);
  line-height: 1;
  padding-top: 4px;
  text-align: center;
  display: inline-block;
}

/* Пастельные маркер-выделения для ключевых слов (мягкая розовая палитра) */
.hl-rose,
.hl-peach,
.hl-cream,
.hl-mint {
  background-image: linear-gradient(180deg, transparent 55%, var(--hl-color, rgba(244, 167, 185, 0.32)) 55%, var(--hl-color, rgba(244, 167, 185, 0.32)) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 3px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 2px;
}

.hl-rose { --hl-color: rgba(244, 167, 185, 0.35); }   /* пыльная роза */
.hl-peach { --hl-color: rgba(255, 195, 165, 0.4); }   /* пастельный персик */
.hl-cream { --hl-color: rgba(255, 232, 152, 0.65); }  /* медово-жёлтый */
.hl-mint { --hl-color: rgba(200, 220, 200, 0.5); }    /* пыльная мята */

.dark .hl-rose,
.dark .hl-peach,
.dark .hl-cream,
.dark .hl-mint {
  background-image: linear-gradient(180deg, transparent 72%, rgba(226, 184, 110, 0.22) 72%, rgba(212, 114, 140, 0.18) 100%) !important;
  border-bottom: 2.5px solid #E2B86E !important;
  color: #FFF8F0 !important;
  padding: 0 4px 1px !important;
  border-radius: 2px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.dark .hl-rose { border-bottom-color: #E2B86E !important; }
.dark .hl-peach { border-bottom-color: #E8A87C !important; }
.dark .hl-cream { border-bottom-color: #F0CF8D !important; }
.dark .hl-mint { border-bottom-color: #92C9B1 !important; }

/* Hero блок песни: нейтрализация текстового хайлайтера на крупном заголовке */
.song-hero h2 .hl-mint {
  background: none !important;
  background-image: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  color: inherit !important;
}

.dark .song-hero h2 {
  color: #FFF8F0 !important;
}


/* Звуковая волна - горизонтальный таймлайн */
.audio-wave {
  width: 100%;
  height: 28px;
  display: block;
  margin: 14px 0 8px;
  color: rgba(var(--section-accent), 0.55);
  transition: color 0.3s ease;
}

.audio-player:hover .audio-wave {
  color: rgba(var(--section-accent), 0.85);
}

.audio-wave rect {
  transition: opacity 0.4s ease;
  transform-origin: center;
  transform-box: fill-box;
  animation: wave-bar 1.6s ease-in-out infinite;
  will-change: transform;
}

.audio-player:hover .audio-wave rect {
  animation-duration: 0.8s;
}

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .audio-wave rect { animation: none; }
}

.dark .audio-wave {
  color: rgba(226, 143, 168, 0.5);
}

.dark .audio-player:hover .audio-wave {
  color: rgba(226, 143, 168, 0.8);
}

.play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(237,106,167,0.3);
}

.play-btn:active {
  transform: scale(0.9);
}

/* Article Card Component */
.article-card {
  display: block;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm), 0 8px 32px rgba(var(--section-accent), 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(var(--section-accent), 0.18);
  position: relative;
  padding: 0;
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(237, 106, 167, 0.05) 0%, rgba(255, 182, 193, 0.1) 50%, rgba(var(--section-accent), 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.article-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 16px 48px rgba(237, 106, 167, 0.25), 0 4px 16px rgba(237, 106, 167, 0.15);
  border-color: rgb(var(--section-accent));
}

/* Pill «читать» — мини-капсула в правом-нижнем углу карточки */
.article-read-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgb(var(--section-accent));
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--section-accent), 0.10);
  border: 1px solid rgba(var(--section-accent), 0.4);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.article-read-pill::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 12px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.article-card:hover .article-read-pill {
  background: rgb(var(--section-accent));
  color: #fff;
  border-color: rgb(var(--section-accent));
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(var(--section-accent), 0.35);
}
.article-card:hover .article-read-pill::after {
  transform: translateX(3px);
  opacity: 1;
}

.article-card:hover::before {
  opacity: 1;
}

.article-cover {
  width: 100%;
  height: 260px;
  background: linear-gradient(135deg, rgba(255, 184, 209, 0.25), rgba(255, 207, 229, 0.15));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--section-accent), 0.12);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}

.article-card:hover .article-cover img {
  transform: scale(1.04);
}

.dark .article-cover {
  background: linear-gradient(135deg, #2A1220, #180B14);
  border-bottom-color: rgba(226, 184, 110, 0.15);
}

.dark .article-cover img {
  filter: brightness(0.92) contrast(1.05);
}

.dark .article-card:hover .article-cover img {
  filter: brightness(1) contrast(1.05);
}

.article-detail-cover {
  width: 100%;
  max-height: 480px;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-md), 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-3xl);
  background: linear-gradient(135deg, rgba(255, 184, 209, 0.25), rgba(255, 207, 229, 0.15));
  border: 1px solid rgba(var(--section-accent), 0.15);
}

.dark .article-detail-cover {
  background: linear-gradient(135deg, #2A1220, #180B14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border-color: rgba(226, 184, 110, 0.2);
}

.article-detail-cover img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.dark .article-detail-cover img {
  filter: brightness(0.94) contrast(1.05);
}

.article-info {
  padding: 28px 34px 32px;
}

@media (max-width: 640px) {
  .article-cover {
    height: 190px;
  }
  .article-info {
    padding: 20px 20px 24px;
  }
  .article-detail-cover {
    max-height: 240px;
    margin-bottom: var(--space-xl);
  }
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-cool-3);                              /* холодный серо-фиолет вместо коричневого */
  opacity: 0.85;
}

/* Автор в карточке статьи */
.article-card-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-cool, inherit);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 2;
  position: relative;
}

.article-card-author:hover {
  color: rgb(var(--section-accent));
  transform: translateY(-1px);
}

.article-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1.5px solid rgba(var(--section-accent), 0.45);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.dark .article-card-avatar {
  border-color: rgba(226, 184, 110, 0.55);
}

.article-meta > span:not(.article-category) {
  font-weight: 500;
}

.article-category {
  color: rgb(var(--section-accent));
  font-weight: 400;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  background: rgba(var(--section-accent), 0.14);
  border-radius: 4px;
  font-family: var(--font-mono);
}

.article-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--ink-cool);                              /* холодный graphite вместо коричневого */
  background: linear-gradient(135deg, var(--ink-cool) 0%, var(--ink-cool-grad) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.28;
  letter-spacing: -0.01em;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card:hover .article-title {
  background: linear-gradient(135deg, rgb(var(--section-accent)) 0%, var(--ink-cool-grad) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}

/* Маркеры на strong - только под текстом, не на пустых пробелах между строк */
.article-content p strong {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.article-excerpt {
  font-size: 16px;
  color: var(--ink-cool-2);                              /* холодный сине-серый вместо коричневого */
  opacity: 0.92;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article Detail Styles */
.article-detail {
  animation: fadeIn 0.5s ease;
}

.article-detail-header {
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.article-detail-category {
  display: inline-block;
  padding: 8px 16px;
  background: var(--rose);
  color: white;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-md);
}

.article-detail-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cocoa);
  margin-bottom: var(--space-lg);
}

.article-detail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--cocoa);
  opacity: 0.8;
}

.article-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose-grad);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
}

.article-author-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.article-author-inline-link {
  color: rgb(var(--section-accent));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--section-accent), 0.5);
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.article-author-inline-link:hover {
  border-bottom-style: solid;
  border-bottom-color: rgb(var(--section-accent));
}

.article-author-link:hover {
  color: var(--rose, #F4A7B9);
  border-bottom-color: var(--rose, #F4A7B9);
}

.dark .article-author-link:hover {
  color: var(--gold, #E2B86E);
  border-bottom-color: var(--gold, #E2B86E);
}

.article-content {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Магазинная буквица в первом абзаце */
.article-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.12em 0 0;
  color: rgba(var(--section-accent), 1);
}

.article-content h1,
.article-content h2,
.article-content h3 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.article-content h1 {
  font-size: 36px;
  border-bottom: none;
  padding-bottom: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.article-content h1 span.hl-rose,
.article-content h2 span.hl-rose {
  display: inline-block;
}

.article-content h2 {
  font-size: 30px;
  position: relative;
}

.article-content h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: rgba(var(--section-accent), 0.6);
  margin-bottom: 16px;
}

.article-content h3 {
  font-size: 24px;
  font-style: italic;
}

.article-content p {
  margin-bottom: var(--space-lg);
}

.article-content p strong {
  background-image: linear-gradient(135deg,
    var(--mark-c1, rgba(244, 167, 185, 0.42)) 0%,
    var(--mark-c2, rgba(255, 210, 225, 0.55)) 35%,
    var(--mark-c3, rgba(244, 167, 185, 0.40)) 70%,
    var(--mark-c4, rgba(244, 167, 185, 0.45)) 100%);
  background-repeat: no-repeat;
  background-size: 100% 70%;
  background-position: 0 95%;
  padding: 0 4px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 4px 6px 5px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Циклическое чередование 4 пастелей с глянцевыми переливами (как у section-title) */
.article-content p:nth-of-type(4n+1) {
  --mark-c1: rgba(244, 167, 185, 0.42);
  --mark-c2: rgba(255, 210, 225, 0.55);
  --mark-c3: rgba(244, 167, 185, 0.40);
  --mark-c4: rgba(244, 167, 185, 0.45);
}
.article-content p:nth-of-type(4n+2) {
  --mark-c1: rgba(255, 195, 165, 0.45);
  --mark-c2: rgba(255, 220, 195, 0.55);
  --mark-c3: rgba(255, 195, 165, 0.40);
  --mark-c4: rgba(255, 195, 165, 0.48);
}
.article-content p:nth-of-type(4n+3) {
  --mark-c1: rgba(167, 209, 195, 0.50);
  --mark-c2: rgba(195, 225, 210, 0.60);
  --mark-c3: rgba(167, 209, 195, 0.45);
  --mark-c4: rgba(167, 209, 195, 0.50);
}
.article-content p:nth-of-type(4n+4) {
  --mark-c1: rgba(239, 213, 132, 0.50);
  --mark-c2: rgba(250, 230, 175, 0.60);
  --mark-c3: rgba(239, 213, 132, 0.45);
  --mark-c4: rgba(239, 213, 132, 0.55);
}

/* Плашки-callouts для важных кусков статьи */
.article-content .callout {
  margin: var(--space-2xl) 0;
  padding: 24px 28px 22px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.65;
  position: relative;
  border-left-width: 3px;
  border-left-style: solid;
}

.article-content .callout::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.85;
}

.article-content .callout p {
  margin: 0 0 12px;
}

.article-content .callout p:last-child {
  margin-bottom: 0;
}

.article-content .callout-rose {
  background: rgba(244, 167, 185, 0.12);
  border-left-color: rgba(244, 167, 185, 0.65);
}
.article-content .callout-rose::before { color: #B0506E; }

.article-content .callout-peach {
  background: rgba(255, 195, 165, 0.14);
  border-left-color: rgba(255, 145, 100, 0.6);
}
.article-content .callout-peach::before { color: #C66A30; }

.article-content .callout-mint {
  background: rgba(167, 209, 195, 0.18);
  border-left-color: rgba(110, 175, 155, 0.65);
}
.article-content .callout-mint::before { color: #4F8A75; }

.article-content .callout-cream {
  background: rgba(var(--section-accent), 0.2);
  border-left-color: rgba(220, 180, 80, 0.65);
}
.article-content .callout-cream::before { color: #95731F; }

/* Моно-метки внутри статьи (даты, главы, нумерация) */
.article-content .mono-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(var(--section-accent), 0.14);
  color: rgb(var(--section-accent));
  border-radius: 4px;
  vertical-align: middle;
}

/* Дроп-кап только если первый абзац не начинается с emoji или цифры */
.article-content > p:first-of-type:not(:has(em:first-child))::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.12em 0 0;
  color: rgba(var(--section-accent), 1);
}

.article-content em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-lg);
  padding-left: 0;
  list-style: none;
}

.article-content ul li,
.article-content ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.article-content ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  background: rgba(var(--section-accent), 0.7);
  border-radius: 50%;
}

.article-content ol {
  counter-reset: article-list;
}

.article-content ol li {
  counter-increment: article-list;
  padding-left: 52px;
  margin-bottom: 18px;
  min-height: 28px;
}

.article-content ol li::before {
  content: counter(article-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: rgba(var(--section-accent), 1);
  letter-spacing: -0.02em;
  padding-top: 4px;
}

.article-content blockquote {
  margin: var(--space-2xl) 0;
  padding: 28px 36px 28px 56px;
  background: rgba(var(--section-accent), 0.06);
  border-left: 3px solid rgba(var(--section-accent), 0.7);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
}

.article-content blockquote::before {
  content: '«';
  position: absolute;
  left: 18px;
  top: 14px;
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1;
  color: rgba(var(--section-accent), 0.7);
  font-style: normal;
}

.article-content blockquote p {
  margin: 0;
}

.article-content hr {
  border: none;
  margin: var(--space-3xl) auto;
  width: 80px;
  height: 1px;
  background: rgba(var(--section-accent), 0.4);
  position: relative;
}

.article-content hr::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-0);
  color: rgba(var(--section-accent), 0.7);
  padding: 0 12px;
  font-size: 14px;
}

.article-content img {
  border-radius: 12px;
  margin: var(--space-xl) 0;
  box-shadow: 0 8px 24px rgba(45, 41, 38, 0.1);
  max-width: 100%;
  height: auto;
}

.article-content code {
  background: var(--bg-1);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--rose);
}

.article-content pre {
  background: var(--bg-1);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

.article-content pre code {
  background: none;
  padding: 0;
  color: var(--cocoa);
}

.article-content hr {
  border: none;
  border-top: 2px solid var(--blush);
  margin: var(--space-2xl) 0;
}

.article-content a {
  color: var(--rose);
  text-decoration: underline;
  transition: var(--transition-fast);
}

.article-content a:hover {
  color: rgb(var(--section-accent));
}

.article-content strong {
  font-weight: 700;
  color: var(--cocoa);
}

.article-content em {
  font-style: italic;
}

/* Quiz Styles */
.quiz-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--bg-1);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  font-size: 15px;
}

.quiz-progress {
  width: 100%;
  height: 8px;
  background: var(--blush);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.quiz-progress-bar {
  height: 100%;
  background: var(--rose-grad);
  transition: width 0.5s ease;
}

.quiz-question {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  color: var(--cocoa);
  line-height: 1.4;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz-option {
  padding: var(--space-lg);
  background: var(--bg-1);
  border: 2px solid var(--blush);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  color: var(--cocoa);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: left;
  min-height: 52px;
}

.quiz-option:hover {
  border-color: var(--rose);
  background: var(--blush);
  transform: translateX(4px);
}

.quiz-option.selected {
  background: var(--rose);
  color: white;
  border-color: var(--rose);
}

/* Map Styles */
.map-container {
  max-width: 1000px;
  margin: 0 auto;
}

.map-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFE8F1, #FFF8FB);
  border-radius: var(--radius-xl);
  opacity: 0.3;
}

.map-content {
  position: relative;
  z-index: 1;
}

.map-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.map-viewport {
  position: relative;
  height: 500px;
  background: var(--bg-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map-location {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--rose);
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  animation: float 3s ease-in-out infinite;
}

.map-location:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow-lg);
  z-index: 10;
}

.map-location-1 {
  animation-delay: 0s;
}

.map-location-2 {
  animation-delay: 0.5s;
}

.map-location-3 {
  animation-delay: 1s;
}

.location-info {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--bg-1);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.location-info.active {
  opacity: 1;
  transform: translateY(0);
}

.location-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--rose);
}

.location-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cocoa);
}

/* Improved error handling */
.error-boundary {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl);
  color: var(--cocoa);
}

.error-boundary h2 {
  font-size: 24px;
  margin-bottom: var(--space-md);
  color: var(--rose);
}

.error-boundary p {
  margin-bottom: var(--space-lg);
  opacity: 0.8;
}

/* Loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--blush);
  border-top: 4px solid var(--rose);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--rose);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: var(--z-tooltip);
}

.toast.show {
  transform: translateX(0);
}

.toast.error {
  background: #DC2626;
}

.toast.success {
  background: #10B981;
}

.toast.warning {
  background: #F59E0B;
}

/* Print styles */
@media print {
  .navbar,
  .footer,
  .nav-mobile,
  .nav-overlay,
  .reading-progress,
  .theme-toggle,
  .menu-toggle {
    display: none !important;
  }
  
  .page {
    display: block !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* ===== УЛУЧШЕННЫЙ TIMELINE С ПЛАВНОЙ АНИМАЦИЕЙ ПРИ СКРОЛЛЕ ===== */
.timeline {
  position: relative;
  padding: var(--space-2xl) 0;
  max-width: 900px;
  margin: 0 auto;
}

/* Основная золотая линия timeline */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  background: linear-gradient(180deg, rgb(var(--section-accent)) 0%, rgba(var(--section-accent), 0.3) 100%);
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 1;
  
  /* Начинаем с нулевой высоты и анимируем */
  height: 0%;
  transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Класс для активации анимации линии */
.timeline.animate-line::before {
  height: 100%;
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-3xl);

  /* Начальное состояние для анимации (быстрое, без долгих задержек) */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Стили для четных и нечетных элементов */
.timeline-item:nth-child(odd) {
  padding-right: calc(50% + var(--space-2xl));
  text-align: right;
  transform: translateY(24px) translateX(-12px);
}

.timeline-item:nth-child(even) {
  padding-left: calc(50% + var(--space-2xl));
  text-align: left;
  transform: translateY(24px) translateX(12px);
}

/* Анимированное состояние элементов timeline */
.timeline-item.animate {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Золотые точки на линии */
.timeline-dot {
  position: absolute;
  top: 20px;
  left: calc(50% - 14px);
  width: 28px;
  height: 28px;
  background: rgb(var(--section-accent));
  border: 6px solid var(--bg-0);
  border-radius: 50%;
  z-index: 3;
  
  /* Начальное состояние */
  transform: scale(0);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Анимация появления точек — без пульсации */
.timeline-item.animate .timeline-dot {
  transform: scale(1);
}

/* Разноцветные точки и облачка по нашей пастельной палитре */
.timeline-item:nth-child(5n+1) {
  --item-accent: 244, 167, 185;  /* rose */
}
.timeline-item:nth-child(5n+2) {
  --item-accent: 255, 195, 165;  /* peach */
}
.timeline-item:nth-child(5n+3) {
  --item-accent: 167, 209, 195;  /* mint */
}
.timeline-item:nth-child(5n+4) {
  --item-accent: 217, 197, 234;  /* lavender */
}
.timeline-item:nth-child(5n+5) {
  --item-accent: 226, 143, 168;  /* sky blue */
}
.timeline-item .timeline-dot {
  background: rgb(var(--item-accent, var(--section-accent)));
}
.timeline-item .timeline-date {
  color: rgb(var(--item-accent, var(--section-accent)));
  background: rgba(var(--item-accent, var(--section-accent)), 0.14);
}
.timeline-item .timeline-content::after {
  border-left-color: rgba(var(--item-accent), 0.10);
  border-right-color: rgba(var(--item-accent), 0.10);
}

/* Карточки содержимого timeline */
.timeline-content {
  background: var(--bg-1);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid transparent;
  overflow: hidden;
}

/* Анимация при наведении */
.timeline-item.animate .timeline-content:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgb(var(--section-accent));
}

/* Стрелочки указывающие на центральную линию с улучшенной анимацией */
.timeline-item:nth-child(odd) .timeline-content::after {
  content: '';
  position: absolute;
  top: 20px;
  right: -14px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid var(--bg-1);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateX(-10px);
}

.timeline-item:nth-child(even) .timeline-content::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -14px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 14px solid var(--bg-1);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateX(10px);
}

/* Показываем стрелочки при анимации */
.timeline-item.animate .timeline-content::after {
  opacity: 1;
  transform: translateX(0);
}

/* Стили для содержимого */
.timeline-date {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  padding: 4px 12px;
  background: rgba(var(--section-accent), 0.12);
  border-radius: 999px;
  margin-bottom: var(--space-sm);
}

.timeline-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  color: var(--ink);
}

.timeline-description {
  font-size: 15.5px;
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.65;
}

.timeline-description a {
  color: var(--rose-deep);
  text-decoration: underline;
  text-decoration-color: rgba(var(--rose-deep-rgb), 0.45);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.timeline-description a:hover {
  color: var(--rose-ink);
  text-decoration-color: var(--rose-deep);
}

.dark .timeline-description a {
  color: #E8AAB8;
  text-decoration-color: rgba(232, 170, 184, 0.45);
}

.dark .timeline-description a:hover {
  color: #FFF;
  text-decoration-color: #FFF;
}

/* Декоративные облачка — видны сразу, не ждут анимацию */
.timeline-item::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(var(--item-accent, var(--section-accent)), 0.10) 0%, transparent 70%);
  border-radius: 50%;
  top: -10px;
  opacity: 1;
  pointer-events: none;
}

.timeline-item:nth-child(odd)::before {
  right: -50px;
}

.timeline-item:nth-child(even)::before {
  left: -50px;
}

.timeline-item.animate::before {
  opacity: 1;
}

/* About Me Cards - новый компонент */
.about-me-card {
  background: var(--bg-1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.about-me-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(237, 106, 167, 0.15);
}

.about-me-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(237, 106, 167, 0.06) 0%, rgba(255, 182, 193, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-me-card:hover::before {
  opacity: 1;
}

.about-me-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}

.about-me-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--cocoa);
  position: relative;
  z-index: 1;
}

.about-me-description {
  font-size: 15px;
  color: var(--cocoa);
  opacity: 0.8;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Timeline адаптивность */
@media (max-width: 1024px) {
  .timeline::before { 
    left: 30px; 
    transform: none;
    margin-left: 0;
  }
  .timeline-item { 
    padding-left: 70px !important; 
    padding-right: 0 !important; 
    text-align: left !important; 
    transform: translateY(50px) translateX(0) scale(0.9) !important;
  }
  .timeline-dot { 
    left: 18px; /* 30px - 12px для центровки */
  }
  .timeline-item .timeline-content::after {
    display: none;
  }
  .timeline-item:nth-child(odd) .timeline-date {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .timeline::before { 
    left: 20px; 
  }
  .timeline-item { 
    padding-left: 50px !important; 
    padding-right: 0 !important;
    text-align: left !important;
  }
  .timeline-dot { 
    left: 20px; 
  }
}

/* Адаптивность для карточек "Обо мне" */
@media (max-width: 1024px) {
  .about-me-card {
    padding: 30px 35px !important;
  }
  
  #about-content div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 768px) {
  #about-content .card {
    padding: 25px 20px !important;
    border-radius: 20px !important;
  }
  
  #about-content div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  #about-content div[style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Уменьшаем размер социальных кнопок на мобильных */
  #about-content .social-link[style*="flex-direction: column"] {
    padding: 20px 16px !important;
    font-size: 14px !important;
    min-height: 100px !important;
  }
  
  #about-content .social-link svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Уменьшаем отступы секции "Давайте дружить!" на мобильных */
  #about-content div[style*="margin-top: 80px"] {
    margin-top: 60px !important;
    padding: 40px 20px !important;
  }

  /* Стили для дневника на мобильных */
  #about-content div[style*="display: flex"][style*="gap: 40px"] {
    gap: 25px !important;
    margin-bottom: 50px !important;
  }

  #about-content div[style*="flex: 0 0 280px"],
  #about-content div[style*="flex: 0 0 260px"],
  #about-content div[style*="flex: 0 0 250px"],
  #about-content div[style*="flex: 0 0 240px"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  #about-content div[style*="max-width: 900px"][style*="padding: 50px 40px"] {
    padding: 30px 20px !important;
  }

  #about-content div[style*="width: 260px"],
  #about-content div[style*="width: 240px"],
  #about-content div[style*="width: 230px"],
  #about-content div[style*="width: 220px"] {
    width: 100% !important;
  }

  #about-content div[style*="font-size: 52px"] {
    font-size: 36px !important;
  }

  /* === BOOK DETAIL MOBILE — теперь стили в .book-detail-* (см. отдельный media-блок) === */
  #book-detail-content .buy-buttons {
    justify-content: flex-start !important;
  }

  /* Characters horizontal scroll на mobile */
  .characters-scroll-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 10px 0 20px !important;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .characters-scroll-container::-webkit-scrollbar {
    display: none !important;
  }

  .characters-scroll-container .character-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 200px !important;
  }

  /* Gallery horizontal scroll на mobile */
  .gallery-grid,
  .encyclopedia-gallery-grid,
  .character-gallery-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 10px 0 20px !important;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .gallery-grid::-webkit-scrollbar,
  .encyclopedia-gallery-grid::-webkit-scrollbar,
  .character-gallery-grid::-webkit-scrollbar {
    display: none !important;
  }

  .gallery-grid .gallery-item,
  .encyclopedia-gallery-grid .gallery-item,
  .character-gallery-grid .gallery-item {
    flex: 0 0 280px !important;
    scroll-snap-align: start !important;
    min-width: 280px !important;
    height: auto !important;
  }

  .gallery-grid .gallery-item.horizontal,
  .encyclopedia-gallery-grid .gallery-item.horizontal,
  .character-gallery-grid .gallery-item.horizontal {
    flex: 0 0 320px !important;
    min-width: 320px !important;
  }

  .gallery-grid .gallery-item img,
  .encyclopedia-gallery-grid .gallery-item img,
  .character-gallery-grid .gallery-item img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }

  /* Trailer на mobile */
  #book-detail-content .trailer-container {
    max-width: 100% !important;
  }

  /* === AUDIO PAGE MOBILE === */
  .audio-player {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
    gap: 15px !important;
  }

  .audio-player .audio-cover {
    margin: 0 auto !important;
  }

  .audio-player .audio-info {
    width: 100% !important;
  }

  .audio-player .play-btn {
    margin: 0 auto !important;
  }

  /* Song cards на mobile */
  .song-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
    gap: 15px !important;
  }

  .song-card > div:nth-child(2) {
    text-align: center !important;
  }

  .song-card > div:nth-child(2) > div {
    justify-content: center !important;
  }

  /* === ENCYCLOPEDIA MOBILE === */
  .encyclopedia-nav {
    gap: 8px !important;
  }

  .encyclopedia-nav .tag-pill {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* === CHARACTER DETAIL MOBILE === */
  #character-detail-content > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  #character-detail-content .character-avatar {
    margin: 0 auto !important;
  }

  /* === REVIEWS MOBILE === */
  /* Персонажи: один над другим на мобилке/планшете в портрете */
  #characters-grid.grid-cols-3,
  #characters-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 460px;
    margin: 0 auto;
  }

  #reviews-content.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* === ARTICLES MOBILE === */
  .article-card {
    padding: 20px !important;
  }

  /* === BACKDROP-FILTER OFF NA MOBILE === */
  /* blur() дорог для GPU на телефонах. На мобиле отрубаем везде. */
  .navbar,
  .card,
  .book-card,
  .article-card,
  .review-card,
  .review-card-modern,
  .character-card,
  .podcast-card,
  .bento-card,
  .friend-card,
  .modal,
  .modal-content,
  .nav-mobile,
  .toast,
  .lightbox,
  .lightbox-content,
  [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* === FOOTER MOBILE === */
  .footer-content {
    text-align: center !important;
  }

  .footer-section {
    text-align: center !important;
  }

  .footer-section > div:first-child {
    justify-content: center !important;
  }

  .footer-social {
    justify-content: center !important;
  }

  .footer-links {
    justify-content: center !important;
  }
}

/* === PRELOADER === */
#preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(250, 248, 245, 1) 0%,
    rgba(255, 239, 245, 0.98) 25%,
    rgba(250, 248, 245, 1) 50%,
    rgba(255, 239, 245, 0.98) 75%,
    rgba(250, 248, 245, 1) 100%);
  background-size: 400% 400%;
  animation: gradient-breathe 8s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Веер случайных обложек на лоадере — со skeleton-плейсхолдером */
.loader-covers {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 580px;
  margin: 32px auto 0;
  height: 220px;
  position: relative;
  pointer-events: none;
}
.loader-cover-slot {
  width: 110px;
  height: 165px;
  border-radius: 7px;
  overflow: hidden;
  margin: 0 -6px;
  position: relative;
  background: linear-gradient(135deg,
    rgba(244, 167, 185, 0.35) 0%,
    rgba(255, 200, 176, 0.30) 50%,
    rgba(217, 197, 234, 0.30) 100%);
  background-size: 200% 200%;
  animation: loader-cover-float 4s ease-in-out infinite var(--delay, 0s),
             loader-skeleton-shift 3s ease infinite;
  transform: rotate(var(--rot, 0deg)) translateY(var(--y, 0px));
  box-shadow: 0 12px 26px rgba(45, 41, 38, 0.20), 0 3px 8px rgba(244, 167, 185, 0.22);
}
.loader-cover-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.loader-cover-slot img.loaded {
  opacity: 0.55;
}
@keyframes loader-cover-float {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(var(--y, 0px)); }
  50%      { transform: rotate(var(--rot, 0deg)) translateY(calc(var(--y, 0px) - 8px)); }
}
@keyframes loader-skeleton-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.dark .loader-cover-slot img.loaded {
  opacity: 0.45;
  filter: brightness(0.9);
}
@media (prefers-reduced-motion: reduce) {
  .loader-cover-slot { animation: none; }
}

.loader-text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
  z-index: 1;
  animation: fadeInUp 0.8s ease both;
}

.loader-text::after {
  display: block;
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 4px;
  height: 14px;
  background: linear-gradient(135deg,
    rgba(244, 167, 185, 0.42) 0%,
    rgba(255, 210, 225, 0.55) 35%,
    rgba(244, 167, 185, 0.4) 70%,
    rgba(244, 167, 185, 0.45) 100%);
  z-index: -1;
  border-radius: 6px 8px 5px 7px;
  transform-origin: left center;
  transform: rotate(-0.8deg) skewX(-2deg) scaleX(0);
  pointer-events: none;
  animation: marker-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}

.dark .loader-text::after {
  left: 0.05em !important;
  right: 0.05em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}

.loader-subtitle {
  font-family: var(--font-script);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--rose);
  letter-spacing: 0.5px;
  opacity: 0.85;
  animation: fadeInUp 1s ease 0.5s both;
  margin-top: 6px;
}

.dark .loader-subtitle {
  color: #E28FA8;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Dark theme preloader */
.dark #preloader {
  background: linear-gradient(135deg,
    rgba(27, 27, 36, 1) 0%,
    rgba(38, 40, 55, 0.98) 25%,
    rgba(27, 27, 36, 1) 50%,
    rgba(38, 40, 55, 0.98) 75%,
    rgba(27, 27, 36, 1) 100%);
}

/* ===== ЭЛЕГАНТНАЯ БАРХАТНАЯ ПАЛИТРА ДЛЯ ТЁМНОЙ ТЕМЫ (КНИГИ, ЗОЛОТО, РОЗА) ===== */

/* Все ссылки при ховере */
.dark a:hover {
  color: var(--rose);
}

/* Navbar в тёмной теме: бархатное стекло */
.dark .navbar {
  background: rgba(13, 11, 18, 0.86) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Чередование секций: мягкий бархатный перелив */
.dark .section:nth-child(even) {
  background: rgba(22, 18, 29, 0.55) !important;
}

/* Footer в тёмной теме */
.dark .footer {
  background: #0B090F !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Карточки секций на главной (World, Books, Articles etc.) */
.dark .section-card {
  background: #181422 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.dark .section-card:hover {
  background: #1E192B !important;
  border-color: rgba(var(--section-accent), 0.55) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--section-accent), 0.25) !important;
  transform: translateY(-4px) !important;
}

.dark .section-card h3 {
  color: #F5EFE6 !important;
}

.dark .section-card p {
  color: #B8ADA1 !important;
}

.dark .section-card:hover h3 {
  color: #FFFFFF !important;
}

.dark .section-card:hover p {
  color: #D6CEC4 !important;
}

/* Timeline элементы */
.dark [style*="border-left: 4px solid var(--rose)"] {
  border-left-color: var(--rose) !important;
}

/* Интерактивная карта (Leaflet) */
.encyclopedia-map {
  width: 100%;
  height: 600px;
  border-radius: 20px;
  border: 1px solid rgba(244, 167, 185, 0.25);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.leaflet-attribution-flag {
  display: none !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  font-family: var(--font-body);
}
.leaflet-popup-content {
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 18px;
}
.leaflet-popup-content strong { color: var(--ink); }
.map-pin {
  background: rgb(244, 167, 185);
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.map-pin span {
  transform: rotate(45deg);
  font-size: 14px;
  color: white;
  font-weight: 700;
}
.map-legend {
  background: var(--card-bg);
  border: 1px solid rgba(var(--section-accent), 0.25);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.2s;
}
.map-legend-item:hover { background: rgba(var(--section-accent), 0.1); }
.map-legend-item.active { background: rgba(var(--section-accent), 0.18); }
.map-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* === REVIEWS — журнальный редизайн === */
.reviews-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
}
/* (.tag-pill наследует базовые стили от объединённого правила выше) */
.tag-pill-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  color: inherit;
  opacity: 0.8;
}
.tag-pill.active .tag-pill-count {
  background: rgba(255,255,255,0.25);
}

.review-hero {
  position: relative;
  max-width: 960px;
  margin: 0 auto 56px;
  padding: 56px 64px 44px;
  background: linear-gradient(135deg, rgba(244, 167, 185, 0.08) 0%, rgba(217, 197, 234, 0.10) 100%);
  border: 1px solid rgba(244, 167, 185, 0.22);
  border-radius: 28px;
  text-align: center;
  animation: fadeInUp 0.6s ease both;
}
.review-hero-mark {
  position: absolute;
  top: -12px;
  left: 36px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 140px;
  line-height: 1;
  color: var(--rose);
  opacity: 0.32;
  pointer-events: none;
}
.review-hero-text {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 28px;
  quotes: none;
}
.review-hero-text::before,
.review-hero-text::after { content: none; }
.review-hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--ink);
}
.review-hero-name {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.review-hero-handle {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(244, 167, 185, 0.14);
  border-radius: 999px;
  color: var(--rose);
}
.review-hero-date {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  opacity: 0.55;
}
.review-hero-link {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px dashed var(--rose);
  padding-bottom: 1px;
}
.review-hero-link:hover { opacity: 0.75; }

/* Отзывы: настоящая сетка, чтобы фильтры заполняли колонки слева направо */
.reviews-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .reviews-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .reviews-masonry { grid-template-columns: 1fr; }
  .review-hero { padding: 44px 28px 32px; border-radius: 20px; }
  .review-hero-mark { font-size: 100px; left: 18px; }
}

.review-card-modern {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding: 32px 28px 24px;
  background: rgba(244, 167, 185, 0.10);
  border: 1px solid rgba(244, 167, 185, 0.28);
  border-radius: var(--card-radius-lg);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.5s ease both;
  --accent: var(--rose);
}
.review-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}
.review-card-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.review-card-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(244, 167, 185, 0.45), rgba(217, 197, 234, 0.45));
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px rgba(255,255,255,0.7),
    0 6px 18px rgba(0,0,0,0.12);
  position: relative;
  animation: reviewAvatarFloat 4.5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.review-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  transition: transform 0.5s ease;
}
.review-card-modern:hover .review-card-avatar {
  transform: scale(1.08) rotate(-3deg);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 6px rgba(255,255,255,0.85),
    0 10px 26px rgba(0,0,0,0.18);
}
.review-card-modern:hover .review-card-avatar img {
  transform: scale(1.05);
}
@keyframes reviewAvatarFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-4px) rotate(1.5deg); }
  66%      { transform: translateY(-2px) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .review-card-avatar { animation: none; }
}
/* Цитатная кавычка — на самой цитате, слева */
.review-card-text {
  position: relative;
  padding-left: 22px;
}
.review-card-mark {
  position: absolute;
  top: -22px;
  left: -10px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 90px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.32;
  pointer-events: none;
  font-weight: 600;
  text-shadow: 0 2px 0 rgba(255,255,255,0.4);
}
.review-card-author-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.review-card-name {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.review-card-handle {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  color: var(--accent);
  align-self: flex-start;
}
.review-card-text {
  font-family: var(--font-body, 'Lora', serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
  quotes: none;
}
.review-card-text::before,
.review-card-text::after { content: none; }
.review-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.review-card-date {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  opacity: 0.5;
}
.review-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  transition: background 0.2s, color 0.2s;
  margin-left: auto;
}
.review-card-link:hover {
  background: var(--accent);
  color: #fff;
}

/* === Подъём контраста для WCAG AA === */
/* Mono-label и section-eyebrow на opacity 0.65 не проходят 4.5:1 — поднимаем до 0.8 */
.mono-label,
.audio-section-eyebrow,
.about-intro-eyebrow,
.about-cta-eyebrow,
.about-bento-eyebrow,
.bento-eyebrow,
.friends-eyebrow { opacity: 0.82 !important; }

/* Footer-bottom 11px на opacity 0.6 был fail AA */
.footer-bottom,
.footer-bottom * { opacity: 1; color: var(--ink); }

/* === HERO GENRE CHIPS — лента жанров под именем === */
.hero-genre-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 22px;
  max-width: 720px;
}
.hero-genre-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.hero-genre-chip--rose {
  background: rgba(244, 167, 185, 0.14);
  border-color: rgba(244, 167, 185, 0.45);
  color: #B0506E;
}
.hero-genre-chip--mint {
  background: rgba(168, 216, 197, 0.18);
  border-color: rgba(168, 216, 197, 0.50);
  color: #4F8A75;
}
.hero-genre-chip--peach {
  background: rgba(255, 183, 147, 0.18);
  border-color: rgba(255, 183, 147, 0.50);
  color: #C66A30;
}
.dark .hero-genre-chip--rose { background: rgba(226, 143, 168, 0.10); border-color: rgba(226, 143, 168, 0.35); color: #F0C878; }
.dark .hero-genre-chip--mint { background: rgba(168, 216, 197, 0.10); border-color: rgba(168, 216, 197, 0.30); color: #A8D8C5; }
.dark .hero-genre-chip--peach { background: rgba(255, 183, 147, 0.10); border-color: rgba(255, 183, 147, 0.30); color: #FFB793; }

/* === HERO GRANDMA QUOTE — фирменная цитата про бабушку === */
.hero-grandma {
  max-width: 680px;
  margin: 22px auto 16px;
  padding: 18px 26px;
  background: linear-gradient(135deg, rgba(255, 232, 152, 0.18) 0%, rgba(244, 167, 185, 0.10) 100%);
  border-left: 3px solid rgb(var(--section-accent));
  border-radius: 14px;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
}
.hero-grandma p {
  margin: 0 0 10px;
  font-size: clamp(0.98rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-cool);
}
.hero-grandma cite {
  font-family: 'Marck Script', cursive;
  font-style: normal;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: rgb(var(--section-accent));
  display: block;
  text-align: right;
}
.dark .hero-grandma {
  background: linear-gradient(135deg, rgba(226, 143, 168, 0.10) 0%, rgba(226, 143, 168, 0.04) 100%);
  border-left-color: #E28FA8;
}
.dark .hero-grandma p { color: #E8E6E3; }
.dark .hero-grandma cite { color: #F0C878; }
@media (max-width: 600px) {
  .hero-grandma { padding: 14px 18px; margin: 18px auto 14px; }
  .hero-grandma p { font-size: 0.96rem; }
}

/* === ФИНАЛЬНЫЙ АДАПТИВ HERO/НАГРАД/БЕЙДЖЕЙ под мобилу и планшет === */
@media (max-width: 768px) {
  /* Hero: убираем избыточный отступ под h1 на узких экранах */
  .hero-modern .hero-title { margin-bottom: 18px !important; }
  .hero-modern .hero-content {
    width: min(100%, 94vw);
    padding: 42px 24px 38px;
  }
  .hero-modern .hero-intro-copy {
    margin-bottom: 28px;
    font-size: 1rem;
    line-height: 1.62;
  }
  .hero-modern .hero-title-prefix { font-size: 1rem; }

  /* Hero CTA на мобиле — стек кнопок */
  .hero-modern .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-modern .hero-cta .btn { width: 100%; justify-content: center; text-align: center; }

  /* Лента наград — карточки чуть тоньше */
  .hero-awards-strip { padding: 24px 14px 36px; }
  .hero-awards-strip-grid { gap: 12px; }
  .hero-award-medal { padding: 16px 12px; }
  .hero-award-medal-icon { width: 48px; height: 48px; font-size: 19px; }
  .hero-award-medal-title { font-size: 14.5px; }
  .hero-award-medal-sub { font-size: 9.5px; }

  /* Бейджи Новинка/Бестселлер/Любовь — меньше на мобиле */
  .book-card .sticker-round {
    width: 70px;
    height: 70px;
    top: -10px;
    right: -10px;
    font-size: 8.5px;
  }
  .book-card .sticker-round::before { font-size: 13px; margin-bottom: 3px; }

  /* Спойлер-плашка — не торчит за края */
  .spoiler-warning {
    max-width: calc(100vw - 32px);
    font-size: 12px;
    padding: 9px 14px 9px 10px;
  }
  .spoiler-warning .sw-icon { width: 22px; height: 22px; font-size: 12px; }
}

@media (max-width: 480px) {
  /* Очень узкие — мини-карточки персонажей в 2 столбца, флагман-CTA в одну строку */
  .characters-mini-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .character-mini-avatar { width: 64px; height: 64px; }
  .character-mini-name { font-size: 15px; }

  /* Лента наград — 1 столбец на самых узких */
  .hero-awards-strip-grid { grid-template-columns: 1fr; }

  /* Флагман-CTA — компактнее */
  .btn-flagship { padding: 11px 14px !important; gap: 8px; }
  .btn-flagship-line1 { font-size: 13px; }
  .btn-flagship-line2 { font-size: 9px; }
}

/* === FLAGSHIP CTA — главная кнопка без промо-стикера === */
.btn-flagship {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 56px;
  padding: 14px 26px !important;
  background: #C88298 !important;
  background: color-mix(in srgb, rgb(var(--section-accent)) 78%, #6E4B58) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-decoration: none;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid color-mix(in srgb, rgb(var(--section-accent)) 60%, #6E4B58) !important;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  animation: none;
}
.btn-flagship:hover {
  transform: translateY(-1px);
  background: #B9758A !important;
  background: color-mix(in srgb, rgb(var(--section-accent)) 68%, #5A3F49) !important;
  box-shadow: none;
}
.btn-flagship-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.btn-flagship-line1 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn-flagship-line2 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: none;
  margin-top: 5px;
}
.hero-modern .hero-cta {
  gap: 14px;
}

.hero-modern .hero-cta .btn::before {
  display: none;
}

.hero-modern .btn-flagship {
  animation: none;
  min-width: 238px;
  padding: 15px 28px !important;
  box-shadow: none;
}

.hero-modern .btn-flagship:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.hero-modern .btn-flagship-line1 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-modern .btn-flagship-line2 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: none;
}

.hero-modern .hero-secondary-cta {
  background: transparent !important;
  border: 1.5px solid rgba(var(--section-accent), 0.62) !important;
  border-radius: 10px !important;
  color: rgb(var(--section-accent)) !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  min-height: 56px;
  padding: 15px 26px !important;
  text-transform: uppercase !important;
}

.hero-modern .hero-secondary-cta:hover {
  background: rgba(var(--section-accent), 0.08) !important;
  color: rgb(var(--section-accent)) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}

.dark .hero-modern .hero-secondary-cta {
  border-color: rgba(226, 184, 110, 0.45) !important;
  color: var(--rose) !important;
}

.dark .hero-modern .hero-secondary-cta:hover {
  background: rgba(226, 184, 110, 0.10) !important;
  color: #ffffff !important;
}

.dark .hero-modern .btn-flagship {
  background: var(--rose-grad) !important;
  color: var(--bg-0) !important;
  border-color: rgba(226, 184, 110, 0.5) !important;
}

.dark .hero-modern .btn-flagship:hover {
  background: var(--gold) !important;
}

.dark .hero-modern .btn-flagship-line2 {
  color: rgba(var(--bg-0), 0.72);
}
@media (max-width: 600px) {
  .btn-flagship { padding: 12px 18px !important; gap: 10px; }
  .btn-flagship-line1 { font-size: 13.5px; }
  .btn-flagship-line2 { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-flagship { animation: none; }
}

/* === HERO AWARDS STRIP — лента наград после счётчиков === */
.hero-awards-strip {
  padding: 32px 20px 48px;
  background: linear-gradient(180deg, transparent 0%, rgba(244, 197, 64, 0.04) 50%, transparent 100%);
}
.hero-awards-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero-awards-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C5A1A;
  opacity: 0.85;
  margin-bottom: 22px;
  display: block;
}
.dark .hero-awards-strip-label { color: #FFE898; }
.hero-awards-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.hero-award-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.40);
  border-radius: var(--card-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-award-medal:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.20);
  background: rgba(255, 255, 255, 0.85);
}
.hero-award-medal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 22px;
  font-family: Georgia, serif;
  background: radial-gradient(circle at 30% 30%, #FFF4B0, #F4C540 60%, #C9962A);
  color: #5D3A1F;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(212, 175, 55, 0.30);
}
.hero-award-medal-icon.pink {
  background: radial-gradient(circle at 30% 30%, #FFDFE6, #F4A7B9 60%, #C77085);
  color: #fff;
}
.hero-award-medal-title {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 0 !important;
  margin: 6px 0 0;
  color: var(--ink-cool);
  text-align: center;
}
.hero-award-medal-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-cool-3);
  text-align: center;
}
.dark .hero-award-medal {
  background: rgba(21, 21, 32, 0.6);
  border-color: rgba(244, 197, 64, 0.30);
}
.dark .hero-award-medal-title { color: #E8E6E3; }
.dark .hero-award-medal-sub { color: #B0B7C8; }

/* === CHARACTER MINI — мини-карточки персонажей в карточке книги (БЕЗ спойлеров) === */
.book-detail-section-hint {
  max-width: 680px;
  margin: 10px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 16px);
  line-height: 1.62;
  color: var(--ink);
  font-style: normal;
  opacity: 0.72;
}
.book-detail-section-hint a {
  color: rgb(var(--section-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.characters-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.character-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: var(--card-bg);
  border: 1px solid rgba(var(--section-accent), 0.18);
  border-radius: var(--card-radius-md);
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.character-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--section-accent), 0.45);
  box-shadow: 0 8px 20px rgba(var(--section-accent), 0.16);
}
.character-mini:focus-visible {
  outline: 2px solid rgb(var(--section-accent));
  outline-offset: 2px;
}
.character-mini-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--section-accent), 0.16), rgba(var(--section-accent), 0.06));
  border: 2px solid rgba(var(--section-accent), 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.character-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-mini-emoji {
  font-size: 32px;
  line-height: 1;
}
.character-mini-name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink-cool);
}
.character-mini-role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-cool-3);
  opacity: 0.85;
}
.dark .character-mini {
  background: rgba(21, 21, 32, 0.6);
  border-color: rgba(226, 143, 168, 0.2);
}
.dark .character-mini-name { color: #E8E6E3; }
.dark .character-mini-role { color: #B0B7C8; }

/* === SPOILER WARNING — гармоничная плашка по кругу Хармона === */
.spoiler-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: fit-content;
  margin: 0 auto 28px;
  padding: 10px 22px 10px 16px;
  background: rgba(226, 184, 110, 0.08);
  border: 1px solid rgba(226, 184, 110, 0.28);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.spoiler-warning-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
}
.spoiler-warning .sw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(226, 184, 110, 0.22);
  border: 1px solid rgba(226, 184, 110, 0.45);
  color: #8A4F2A;
  font-size: 13px;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  flex-shrink: 0;
}
.spoiler-warning strong { color: #8A4F2A; font-weight: 700; }

.dark .spoiler-warning {
  background: rgba(46, 16, 30, 0.88) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  color: #EDE5D8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(178, 43, 88, 0.20) !important;
}
.dark .spoiler-warning .sw-icon {
  background: rgba(226, 184, 110, 0.20) !important;
  border: 1.5px solid #E2B86E !important;
  color: #E2B86E !important;
  box-shadow: 0 0 8px rgba(226, 184, 110, 0.30) !important;
}
.dark .spoiler-warning strong {
  color: #E2B86E !important;
}
@media (max-width: 600px) {
  .spoiler-warning {
    border-radius: 16px;
    padding: 10px 14px;
    font-size: 12.5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* === AUDIO AWARD — премиальная плашка на карточках аудиокниг === */
.audio-award {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #6b4a18;
  box-shadow:
    0 4px 12px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.audio-award:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.audio-award .aa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-family: Georgia, serif;
  background: radial-gradient(circle at 30% 30%, #FFF4B0, #F4C540 60%, #C9962A);
  color: #5D3A1F;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.audio-award .aa-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9.5px;
  opacity: 0.85;
  padding-right: 8px;
  border-right: 1px solid rgba(212, 175, 55, 0.4);
  flex: 0 0 auto;
}
.audio-award .aa-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  max-width: none;
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}

/* Gold tier — шорт-лист / победа */
.audio-award--gold {
  background:
    linear-gradient(135deg, rgba(255, 244, 176, 0.5) 0%, rgba(244, 197, 64, 0.18) 100%);
  border-color: rgba(212, 175, 55, 0.6);
  color: #5D3A1F;
}
.audio-award--gold .aa-icon {
  background: radial-gradient(circle at 30% 30%, #FFF4B0, #F4C540 60%, #C9962A);
  color: #5D3A1F;
}

/* Silver tier (на будущее) */
.audio-award--silver .aa-icon {
  background: radial-gradient(circle at 30% 30%, #F5F7FA, #C9D2DA 60%, #8E9AA8);
  color: #2C3540;
}

/* Short tier — лонг-лист (бронза/розовая бронза) */
.audio-award--short,
.audio-award--long {
  background:
    linear-gradient(135deg, rgba(244, 167, 185, 0.18) 0%, rgba(244, 167, 185, 0.06) 100%);
  border-color: rgba(244, 167, 185, 0.55);
  color: #7a3f4d;
}
.audio-award--short .aa-icon,
.audio-award--long .aa-icon {
  background: radial-gradient(circle at 30% 30%, #FFDFE6, #F4A7B9 60%, #C77085);
  color: #fff;
}
.audio-award--short .aa-label,
.audio-award--long .aa-label {
  border-right-color: rgba(244, 167, 185, 0.5);
}

/* Dark theme */
.dark .audio-award {
  background: rgba(21, 21, 32, 0.7);
  border-color: rgba(244, 197, 64, 0.4);
  color: #E8E0C0;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dark .audio-award--short,
.dark .audio-award--long {
  border-color: rgba(244, 167, 185, 0.4);
  color: #F4A7B9;
}

@media (max-width: 600px) {
  .audio-award { flex-wrap: wrap; }
  .audio-award .aa-text {
    max-width: none;
    white-space: normal;
    flex-basis: 100%;
    margin-left: 30px;
  }
  .audio-award .aa-label { border-right: none; padding-right: 0; }
}

/* === CHAR DROPDOWN — кастомная плавная выпадашка фильтра по книгам === */
.char-dropdown {
  position: relative;
  display: inline-block;
  min-width: 300px;
  font-family: var(--font-body);
}
.char-dropdown-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px 11px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(var(--section-accent), 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}
.char-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(var(--section-accent), 0.6);
  box-shadow: 0 6px 18px rgba(var(--section-accent), 0.15);
  transform: translateY(-1px);
}
.char-dropdown-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 167, 185, 0.55);
}
.char-dropdown-arrow {
  display: inline-flex;
  color: rgb(var(--section-accent));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.char-dropdown[data-open="true"] .char-dropdown-arrow { transform: rotate(180deg); }
.char-dropdown[data-open="true"] .char-dropdown-trigger {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--section-accent), 0.7);
  box-shadow: 0 8px 24px rgba(var(--section-accent), 0.22);
}

/* Меню */
.char-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 200;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(var(--section-accent), 0.20);
  border-radius: 18px;
  box-shadow:
    0 24px 48px -12px rgba(45, 41, 38, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  max-height: 340px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.char-dropdown[data-open="true"] .char-dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Кастомный тонкий скролл */
.char-dropdown-menu::-webkit-scrollbar { width: 6px; }
.char-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.char-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(var(--section-accent), 0.35);
  border-radius: 3px;
}
.char-dropdown-menu::-webkit-scrollbar-thumb:hover { background: rgba(var(--section-accent), 0.55); }
.char-dropdown-menu { scrollbar-width: thin; scrollbar-color: rgba(var(--section-accent), 0.35) transparent; }

/* Пункты */
.char-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.char-dropdown-item:hover {
  background: rgba(var(--section-accent), 0.10);
  transform: translateX(2px);
}
.cdi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(var(--section-accent), 0.4);
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.char-dropdown-item.is-active {
  background: rgba(var(--section-accent), 0.14);
  color: rgb(var(--section-accent));
  font-weight: 600;
}
.char-dropdown-item.is-active .cdi-dot {
  background: rgb(var(--section-accent));
  border-color: rgb(var(--section-accent));
  box-shadow: 0 0 0 3px rgba(var(--section-accent), 0.18);
}
.char-dropdown-item:focus-visible {
  outline: none;
  background: rgba(var(--section-accent), 0.18);
}

/* Появление пунктов по очереди (stagger) */
.char-dropdown[data-open="true"] .char-dropdown-item {
  animation: cdi-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(1) { animation-delay: 0.04s; }
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(2) { animation-delay: 0.06s; }
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(3) { animation-delay: 0.08s; }
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(4) { animation-delay: 0.10s; }
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(5) { animation-delay: 0.12s; }
.char-dropdown[data-open="true"] .char-dropdown-item:nth-child(n+6) { animation-delay: 0.14s; }
@keyframes cdi-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark theme */
.dark .char-dropdown-trigger {
  background: rgba(21, 21, 32, 0.85);
  border-color: rgba(226, 143, 168, 0.35);
  color: #E8E6E3;
}
.dark .char-dropdown-trigger:hover {
  background: rgba(21, 21, 32, 0.95);
  border-color: rgba(226, 143, 168, 0.6);
}
.dark .char-dropdown-menu {
  background: rgba(15, 15, 24, 0.96);
  border-color: rgba(226, 143, 168, 0.2);
}
.dark .char-dropdown-item { color: #D8DAE4; }
.dark .char-dropdown-item:hover { background: rgba(226, 143, 168, 0.12); }
.dark .char-dropdown-item.is-active {
  background: rgba(226, 143, 168, 0.16);
  color: #F0C878;
}
.dark .cdi-dot { border-color: rgba(226, 143, 168, 0.4); }
.dark .char-dropdown-item.is-active .cdi-dot {
  background: #F0C878;
  border-color: #F0C878;
}

@media (max-width: 480px) {
  .char-dropdown { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .char-dropdown-menu, .char-dropdown-item, .char-dropdown-trigger, .char-dropdown-arrow {
    transition: none !important;
    animation: none !important;
  }
}

/* === STAT CARDS на главной — кликабельные ссылки на разделы === */
.stat-card {
  display: block;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.stat-card:hover { background: rgba(244, 167, 185, 0.08); transform: translateY(-2px); }
.stat-card:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  background: rgba(244, 167, 185, 0.06);
}
.stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-top: 4px;
  display: block;
  color: var(--ink);
}

.counter-num.is-loading {
  opacity: 0.62;
}

@supports (content-visibility: auto) {
  #home > section:not(.hero-modern) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
  }
}

/* === HERO AUTHOR ROW — контейнер аватарки и плеера-медальона === */
.hero-author-row {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 22px;
}

/* === HERO AUTHOR AVATAR — круглая аватарка === */
.hero-author-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  z-index: 5;
  background: #fff;
  padding: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px var(--rose),
    0 0 0 5px rgba(244, 167, 185, 0.18),
    0 10px 22px rgba(45, 41, 38, 0.16);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-author-avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  filter: none;
  transform: none;
  vertical-align: middle;
}
.hero-author-avatar:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.025);
  box-shadow:
    0 0 0 2px var(--rose),
    0 0 0 8px rgba(244, 167, 185, 0.32),
    0 16px 36px rgba(45, 41, 38, 0.24);
}
@keyframes hero-avatar-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -4px, 0); }
}
@keyframes hero-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--rose), 0 0 0 6px rgba(244, 167, 185, 0.20), 0 12px 28px rgba(45, 41, 38, 0.18); }
  50%      { box-shadow: 0 0 0 2px var(--rose), 0 0 0 10px rgba(244, 167, 185, 0.10), 0 12px 28px rgba(45, 41, 38, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-author-avatar,
  .hero-audio-cta { animation: none !important; }
}
/* Планшет (769-1199): аватарка побольше, всё та же конструкция «медальон» */
@media (min-width: 769px) and (max-width: 1199px) {
  .hero-author-row {
    width: 172px;
    height: 172px;
    margin: 0 auto 28px;
  }
  .hero-author-avatar {
    box-shadow:
      0 0 0 2px var(--rose),
      0 0 0 6px rgba(244, 167, 185, 0.20),
      0 12px 26px rgba(45, 41, 38, 0.18);
    animation: none;
  }
}
/* Десктоп ≥1200: row выходит за верхний-левый угол листочка, как «приклеенная» фотография */
@media (min-width: 1200px) {
  .hero-author-row {
    position: absolute;
    top: -93px;
    left: -90px;
    width: 170px;
    height: 170px;
    margin: 0;
    z-index: 5;
  }
  .hero-author-avatar {
    box-shadow:
      0 0 0 2px var(--rose),
      0 0 0 6px rgba(244, 167, 185, 0.20),
      0 14px 32px rgba(45, 41, 38, 0.20);
    animation: hero-avatar-float 6s ease-in-out infinite, hero-avatar-pulse 3s ease-in-out infinite;
  }
}
@media (hover: none), (pointer: coarse) {
  .hero-author-avatar {
    animation: none !important;
  }
  .hero-author-avatar:hover {
    transform: none;
  }
}
/* На узких устройствах укорачиваем хвост-плашку */
@media (max-width: 380px) {
  .hero-audio-cta.is-expanded .cta-content { width: 180px; }
}

/* Блок «Об авторе» — фикс на мобилке/планшете */
/* Home author-photo teaser: align with the site's soft card geometry */
.home-about-teaser-panel {
  border-radius: var(--card-radius-lg) !important;
  transform: none !important;
  border: 1px solid rgba(45, 41, 38, 0.08) !important;
  box-shadow: 0 12px 30px rgba(45, 41, 38, 0.06) !important;
}

.home-about-teaser-panel::before,
.home-about-teaser-panel::after {
  display: none !important;
  content: none !important;
}

#home-about-teaser-anchor #hero-gallery {
  border-radius: var(--card-radius-lg) !important;
}

#home-about-teaser-anchor #hero-gallery .gallery-slide,
#home-about-teaser-anchor #hero-gallery .gallery-slide img {
  border-radius: inherit !important;
}

@media (max-width: 900px) {
  #home-about-teaser-anchor > div {
    flex-direction: column !important;
    gap: 24px !important;
    margin: 16px auto !important;
    align-items: stretch !important;
  }
  #home-about-teaser-anchor > div > div:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  #home-about-teaser-anchor #hero-gallery {
    height: auto !important;
  }
  #home-about-teaser-anchor > div > div:nth-child(2) {
    width: 60% !important;
    max-width: 220px !important;
    height: 2px !important;
    margin: 0 auto !important;
    background: linear-gradient(to right, transparent, rgb(var(--section-accent)), transparent) !important;
  }
  #home-about-teaser-anchor > div > div:last-child {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  #home-about-teaser-anchor h3 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
}

/* На мобилке уменьшаем имя — чтобы не вылезало */
@media (max-width: 500px) {
  .hero-modern .hero-title {
    font-size: 1.7rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
  }
  .hero-modern .hero-title-sticker {
    padding: 0.02em 0.14em 0.08em !important;
    display: inline-block;
  }
  .hero-modern .hero-subtitle {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }
}
.dark .hero-author-avatar {
  background: #1a1a2e;
  box-shadow:
    0 0 0 2px rgba(226, 143, 168, 0.7),
    0 0 0 6px rgba(226, 143, 168, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

/* === HERO AUDIO CTA — круглая кнопка-медальон в правом-нижнем углу аватарки === */
.hero-audio-cta {
  position: absolute;
  right: -4px;
  bottom: 8px;
  margin: 0;
  z-index: 6;                                   /* поверх аватарки (z=5) */

  width: 56px;
  height: 56px;
  border-radius: 999px;
  padding: 0;
  isolation: isolate;

  background: linear-gradient(135deg, #FFB793, #E89770);
  border: 3px solid #fff;

  display: inline-flex;
  align-items: center;
  cursor: pointer;
  overflow: visible;

  box-shadow:
    0 10px 26px rgba(255, 183, 147, 0.55),
    0 0 0 0 rgba(255, 183, 147, 0.6);

  transition:
    width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-left 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;

  animation: cta-pulse 2.1s ease-in-out infinite;
}

.hero-audio-cta::before,
.hero-audio-cta::after {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 183, 147, 0.36) 46%,
      rgba(255, 183, 147, 0) 72%);
  opacity: 0;
  transform: scale(0.76);
  pointer-events: none;
  animation: cta-attention-ring 3s cubic-bezier(0.18, 0.82, 0.28, 1) infinite;
}

.hero-audio-cta::after {
  animation-delay: 1.5s;
}

@keyframes cta-pulse {
  0%, 100% {
    box-shadow:
      0 10px 26px rgba(255, 183, 147, 0.55),
      0 0 0 0 rgba(255, 183, 147, 0.44),
      0 0 18px rgba(255, 183, 147, 0.24);
  }
  48% {
    box-shadow:
      0 14px 34px rgba(255, 183, 147, 0.66),
      0 0 0 14px rgba(255, 183, 147, 0),
      0 0 30px rgba(255, 183, 147, 0.42);
  }
}

@keyframes cta-attention-ring {
  0% {
    opacity: 0;
    transform: scale(0.76);
  }
  12% {
    opacity: 0.78;
  }
  72%, 100% {
    opacity: 0;
    transform: scale(1.58);
  }
}

.hero-audio-cta:hover {
  animation-play-state: paused;
  transform: scale(1.06);
  box-shadow:
    0 14px 32px rgba(255, 183, 147, 0.65),
    0 0 0 6px rgba(255, 183, 147, 0.22);
}

/* Кнопка остаётся круглой в любом состоянии — плашка выпадает отдельно вниз */
.hero-audio-cta.is-expanded {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  animation: none;
}

.hero-audio-cta .cta-circle {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #fff5ec 55%, #ffe6d2 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 5px rgba(224, 128, 90, 0.14);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* декоративное пунктирное кольцо вокруг play */
.hero-audio-cta .cta-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 183, 147, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: cta-ring-rotate 9s linear infinite;
  pointer-events: none;
}

.hero-audio-cta .cta-circle::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 68%);
  opacity: 0.58;
  pointer-events: none;
  animation: cta-play-glint 2.6s ease-in-out infinite;
}

.hero-audio-cta:hover .cta-circle::before,
.hero-audio-cta.is-expanded .cta-circle::before { opacity: 1; }
@keyframes cta-ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cta-play-glint {
  0%, 100% {
    opacity: 0.38;
    transform: translate3d(0, 0, 0) scale(0.82);
  }
  45% {
    opacity: 0.95;
    transform: translate3d(3px, -2px, 0) scale(1.18);
  }
}
.hero-audio-cta:hover .cta-circle {
  transform: scale(1.05);
}
.hero-audio-cta .cta-circle svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1.5px 2.5px rgba(224, 128, 90, 0.4));
  transition: transform 0.3s ease;
}
.hero-audio-cta:hover .cta-icon-play { transform: scale(1.08); }
.hero-audio-cta .cta-icon-play {
  margin-left: 2px;
  animation: cta-play-icon-glow 2.1s ease-in-out infinite;
}

@keyframes cta-play-icon-glow {
  0%, 100% {
    filter: drop-shadow(0 1.5px 2.5px rgba(224, 128, 90, 0.38));
  }
  50% {
    filter:
      drop-shadow(0 1.5px 2.5px rgba(224, 128, 90, 0.42))
      drop-shadow(0 0 10px rgba(255, 151, 99, 0.55));
  }
}

.hero-audio-cta.is-expanded::before,
.hero-audio-cta.is-expanded::after,
.hero-audio-cta.is-playing::before,
.hero-audio-cta.is-playing::after {
  animation: none;
  opacity: 0;
}

.hero-audio-cta.is-expanded .cta-icon-play,
.hero-audio-cta.is-playing .cta-icon-play {
  animation: none;
}

/* Плашка-«хвост» выпадает ВНИЗ из-под кнопки — как лента-подпись */
.hero-audio-cta .cta-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 0;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFB793, #E89770);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow:
    0 6px 16px rgba(255, 183, 147, 0.45),
    0 0 0 2px #fff;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease,
    transform 0.4s ease,
    padding 0.4s ease;
}
.hero-audio-cta.is-expanded .cta-content {
  width: 236px;
  padding: 0 16px;
  opacity: 1;
  transform: translateY(0);
}

.hero-audio-cta .cta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.hero-audio-cta .cta-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  flex: 0 0 34px;
}
.hero-audio-cta .cta-wave span {
  display: block;
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transform-origin: center;
  animation: cta-wave-bar 1.1s ease-in-out infinite;
  animation-play-state: paused;
}
.hero-audio-cta .cta-wave span:nth-child(1) { height: 8px;  animation-delay: -1.05s; animation-duration: 1.05s; }
.hero-audio-cta .cta-wave span:nth-child(2) { height: 14px; animation-delay: -0.85s; animation-duration: 0.85s; }
.hero-audio-cta .cta-wave span:nth-child(3) { height: 22px; animation-delay: -0.65s; animation-duration: 1.20s; }
.hero-audio-cta .cta-wave span:nth-child(4) { height: 18px; animation-delay: -0.50s; animation-duration: 0.95s; }
.hero-audio-cta .cta-wave span:nth-child(5) { height: 24px; animation-delay: -0.35s; animation-duration: 1.10s; }
.hero-audio-cta .cta-wave span:nth-child(6) { height: 16px; animation-delay: -0.20s; animation-duration: 0.80s; }
.hero-audio-cta .cta-wave span:nth-child(7) { height: 20px; animation-delay: -0.10s; animation-duration: 1.30s; }
.hero-audio-cta .cta-wave span:nth-child(8) { height: 10px; animation-delay: 0s;     animation-duration: 0.90s; }
/* волна оживает как только плашка открылась */
.hero-audio-cta.is-expanded .cta-wave span { animation-play-state: running; }
/* во время mp3 — амплитуда выше и быстрее */
.hero-audio-cta.is-playing .cta-wave span {
  animation-duration: 0.6s;
  background: rgba(255, 255, 255, 1);
}

.hero-audio-cta .cta-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  min-width: 28px;
  text-align: right;
}

.hero-audio-cta .cta-progress {
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 0.3s ease 0.25s;
}
.hero-audio-cta.is-expanded .cta-progress { opacity: 1; }
.hero-audio-cta .cta-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--p, 0%);
  background: rgba(255, 255, 255, 0.95);
  transition: width 0.15s linear;
}

.hero-audio-cta .cta-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 28px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #2d2926;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hero-audio-cta .cta-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2d2926;
}
.hero-audio-cta:hover .cta-tooltip,
.hero-audio-cta:focus-visible .cta-tooltip { opacity: 1; }
.hero-audio-cta.is-expanded .cta-tooltip { opacity: 0 !important; }

@keyframes cta-wave-bar {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-audio-cta,
  .hero-audio-cta::before,
  .hero-audio-cta::after,
  .hero-audio-cta .cta-circle::before,
  .hero-audio-cta .cta-circle::after,
  .hero-audio-cta .cta-icon-play {
    animation: none !important;
  }
}

.dark .hero-audio-cta {
  background: linear-gradient(135deg, #E28FA8, #5BA8C7);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 26px rgba(226, 143, 168, 0.5);
}
.dark .hero-audio-cta::before,
.dark .hero-audio-cta::after {
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(226, 143, 168, 0.34) 46%,
      rgba(226, 143, 168, 0) 72%);
}
.dark .hero-audio-cta .cta-circle svg { fill: #5BA8C7; }
.dark .hero-audio-cta .cta-content {
  background: linear-gradient(135deg, #E28FA8, #5BA8C7);
  box-shadow:
    0 6px 16px rgba(226, 143, 168, 0.34),
    0 0 0 2px rgba(18, 18, 28, 0.88);
}

@media (max-width: 768px) {
  .hero-author-row {
    transition: padding-bottom 0.35s ease, margin-bottom 0.35s ease;
  }

  .hero-author-row.is-audio-expanded {
    padding-bottom: 56px;
  }

  .hero-author-row.is-audio-expanded .hero-audio-cta.is-expanded .cta-content {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    box-sizing: border-box;
    width: min(236px, calc(100vw - 56px));
    height: 38px;
    transform: translate(calc(-50% - 56px), 0);
  }
}

@media (max-width: 380px) {
  .hero-author-row.is-audio-expanded .hero-audio-cta.is-expanded .cta-content {
    width: min(226px, calc(100vw - 48px));
  }
}

/* === AUDIO PAGE — журнальные хедеры секций === */
.audio-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.audio-section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  margin-bottom: 14px;
}
.audio-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.18;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.audio-section-title::after {
  display: block;
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 3px;
  height: 12px;
  background: linear-gradient(135deg,
    rgba(var(--section-accent), 0.40) 0%,
    rgba(var(--section-accent), 0.52) 35%,
    rgba(var(--section-accent), 0.36) 70%,
    rgba(var(--section-accent), 0.42) 100%);
  box-shadow: 0 1px 2px rgba(var(--section-accent), 0.12) inset;
  z-index: -1;
  border-radius: 6px 8px 5px 7px;
  transform-origin: left center;
  transform: rotate(-0.8deg) skewX(-2deg) scaleX(0);
  pointer-events: none;
  animation: marker-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.dark .audio-section-title::after {
  left: 0.05em !important;
  right: 0.05em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 2px rgba(226, 184, 110, 0.9) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}
.audio-section-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
}

/* Подкасты: номер выпуска в кружочке */
.podcast-num {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(var(--section-accent), 0.18), rgba(var(--section-accent), 0.08));
  border: 1px solid rgba(var(--section-accent), 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: rgb(var(--section-accent));
  letter-spacing: -0.02em;
}

/* === PODCAST CARD — карточка с плеером и транскриптом === */
.podcast-card {
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--section-accent), 0.18);
  border-radius: var(--card-radius-md);
  padding: 22px;
  box-shadow: 0 6px 20px rgba(var(--section-accent), 0.08);
  transition: all 0.35s ease;
}
.podcast-card:hover {
  border-color: rgba(var(--section-accent), 0.35);
  box-shadow: 0 10px 28px rgba(var(--section-accent), 0.15);
}
.podcast-card.is-playing {
  border-color: rgb(var(--section-accent));
  background: rgba(255, 255, 255, 0.95);
}
.podcast-card-head {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.podcast-info { flex: 1; min-width: 0; }
.podcast-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--ink-cool);
  background: linear-gradient(135deg, var(--ink-cool) 0%, var(--ink-cool-grad) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.podcast-desc {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--ink-cool-2);
  opacity: 0.92;
}
.podcast-meta {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-cool-3);
  opacity: 0.7;
  margin: 0;
}

/* Плеер */
.podcast-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(var(--section-accent), 0.06);
  border-radius: 999px;
  border: 1px solid rgba(var(--section-accent), 0.15);
}
.podcast-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, rgb(var(--section-accent)), rgba(var(--section-accent), 0.85));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--section-accent), 0.35);
  transition: transform 0.25s ease;
}
.podcast-play-btn:hover { transform: scale(1.08); }
.podcast-play-btn .pp-play { margin-left: 2px; }
.podcast-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.podcast-time-current,
.podcast-time-total {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-cool-3);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 32px;
}
.podcast-time-total { text-align: right; }
.podcast-progress {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(var(--section-accent), 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.podcast-progress-bar {
  height: 100%;
  width: 0%;
  background: rgb(var(--section-accent));
  border-radius: 2px;
  transition: width 0.15s linear;
}
.podcast-transcript-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(var(--section-accent), 0.4);
  color: rgb(var(--section-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.podcast-transcript-btn:hover,
.podcast-transcript-btn[aria-expanded="true"] {
  background: rgb(var(--section-accent));
  color: #fff;
}
.podcast-transcript {
  position: relative;
  margin-top: 16px;
  padding: 22px 22px 16px;
  background: rgba(var(--section-accent), 0.04);
  border-left: 3px solid rgb(var(--section-accent));
  border-radius: 8px;
  animation: fadeInUp 0.3s ease;
}
.podcast-transcript-close {
  position: sticky;
  top: 12px;
  float: right;
  margin-left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(var(--section-accent), 0.3);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgb(var(--section-accent));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.podcast-transcript-close:hover {
  background: rgb(var(--section-accent));
  color: #fff;
  transform: scale(1.1);
}
.podcast-transcript-close-bottom {
  display: block;
  margin: 18px auto 0;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--section-accent), 0.4);
  background: transparent;
  color: rgb(var(--section-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.podcast-transcript-close-bottom:hover {
  background: rgb(var(--section-accent));
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--section-accent), 0.3);
}
/* Подкастный транскрипт наследует разметку статей (.article-content),
   а здесь только базовая ширина/отступ */
.podcast-transcript .article-content {
  font-size: 15.5px;
}
.podcast-transcript .article-content > *:last-child { margin-bottom: 0; }
.podcast-transcript .article-content blockquote {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 600px) {
  .podcast-card { padding: 18px 16px; }
  .podcast-card-head { gap: 14px; }
  .podcast-num { width: 52px; height: 52px; font-size: 18px; }
  .podcast-title { font-size: 18px; }
  .podcast-player {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 12px;
  }
  .podcast-progress-wrap { order: 3; width: 100%; }
  .podcast-transcript-btn .ptr-label { display: none; }
  .podcast-transcript-btn { padding: 7px 10px; }
}

/* === BOOK DETAIL — журнальный стиль === */
.book-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8px;
}
.book-detail-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  margin-bottom: 70px;
  align-items: start;
}
.book-detail-aside {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}
.book-detail-cover {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  transform: rotate(-0.4deg);
  transition: transform 0.4s ease;
}
.book-detail-cover:hover { transform: rotate(0); }
.book-detail-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* === BOOK ARTIFACT / СИМВОЛ КНИГИ (АКВАРЕЛЬНАЯ ВИНЬЕТКА) === */
.book-detail-artifact {
  position: relative;
  width: 100%;
  max-width: 290px;
  margin: 18px auto 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book-detail-artifact-eyebrow {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8B4058;
  margin-bottom: 8px;
  opacity: 0.9;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  user-select: none;
}
.dark .book-detail-artifact-eyebrow {
  color: var(--gold, #E2B86E);
  opacity: 0.95;
}
.book-detail-artifact:hover .book-detail-artifact-eyebrow,
.book-detail-artifact:focus-visible .book-detail-artifact-eyebrow {
  color: #B22B58;
}
.dark .book-detail-artifact:hover .book-detail-artifact-eyebrow,
.dark .book-detail-artifact:focus-visible .book-detail-artifact-eyebrow {
  color: #F0CF8D;
  text-shadow: 0 0 8px rgba(226, 184, 110, 0.45);
}
.book-detail-artifact-img-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}
.book-detail-artifact:hover .book-detail-artifact-img-wrap,
.book-detail-artifact:focus-visible .book-detail-artifact-img-wrap {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0 12px 24px rgba(150, 61, 82, 0.18));
}
.dark .book-detail-artifact:hover .book-detail-artifact-img-wrap,
.dark .book-detail-artifact:focus-visible .book-detail-artifact-img-wrap {
  filter: drop-shadow(0 0 28px rgba(226, 184, 110, 0.35));
}
.book-artifact-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.book-artifact-img--light {
  display: block;
  mix-blend-mode: multiply;
}
.book-artifact-img--dark {
  display: none;
}
.dark .book-artifact-img--light {
  display: none;
}
.dark .book-artifact-img--dark {
  display: block;
  filter: drop-shadow(0 0 16px rgba(226, 184, 110, 0.15));
}
.book-detail-artifact .book-cover-zoom-hint {
  opacity: 0;
  bottom: 10px;
  right: 10px;
  transform: scale(0.9);
}
.book-detail-artifact:hover .book-cover-zoom-hint,
.book-detail-artifact:focus-visible .book-cover-zoom-hint {
  opacity: 1;
  transform: scale(1.12);
}
.book-detail-artifact-caption {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.book-detail-artifact-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  opacity: 0.85;
}
.book-detail-artifact-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink);
  opacity: 0.92;
}
.book-detail-info { min-width: 0; }
.book-detail-series {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  padding: 4px 12px;
  background: rgba(var(--section-accent), 0.12);
  border-radius: 999px;
  margin-bottom: 16px;
}
.book-meta-line .book-detail-series {
  margin-bottom: 0;
}
.book-detail-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.book-detail-coauthor {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6B4FA0;
  background: rgba(201, 180, 232, 0.20);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 22px;
}
.book-detail-coauthor a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(107, 79, 160, 0.5);
  transition: all 0.2s ease;
}
.book-detail-coauthor a:hover {
  color: #4A3578;
  border-bottom-color: #4A3578;
}
.dark .book-detail-coauthor {
  color: #C9B4E8;
  background: rgba(201, 180, 232, 0.14);
}
.book-detail-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 32px;
  padding-left: 18px;
  border-left: 3px solid rgba(var(--section-accent), 0.40);
}
.book-detail-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--section-accent));
  margin-bottom: 14px;
}
.book-detail-full {
  margin: 36px 0;
}
.book-detail-full-text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
  opacity: 0.86;
}
.book-detail-full-text p {
  margin: 0 0 14px;
}
.book-detail-full-text p:last-child {
  margin-bottom: 0;
}
.book-detail-buy {
  margin-top: 36px;
}
.book-detail-buy .buy-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.book-detail-section {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.book-detail-section-header {
  text-align: center;
  margin-bottom: 36px;
}
.book-detail-section-header .book-detail-eyebrow {
  margin-bottom: 12px;
}
.book-detail-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 768px) {
  .book-detail-aside {
    position: static !important;
    top: auto !important;
  }
  .book-detail-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .book-detail-cover {
    max-width: 240px;
    margin: 0 auto;
    position: static;
  }
  .book-detail-info {
    text-align: left;
  }
  .book-detail-lead {
    font-size: 17px;
    padding-left: 14px;
  }
}

.dark .book-detail-cover { box-shadow: 0 18px 44px rgba(0,0,0,0.5); }
.dark .book-detail-section { border-top-color: rgba(255,255,255,0.08); }
.dark .book-detail-lead { border-left-color: rgba(226, 143, 168, 0.4); }

/* === ОБО МНЕ — введение и записи (журнальный стиль вместо notebook) === */
.about-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 20px;
}
.about-intro-flank-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto 56px;
}
.about-intro-header {
  text-align: center;
  margin-bottom: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.about-flank {
  position: absolute;
  top: 18%;
  transform: translateY(-50%);
  width: clamp(210px, 22vw, 270px);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.about-flank--left {
  right: calc(100% + 24px);
}
.about-flank--right {
  left: calc(100% + 24px);
}
.about-flank img {
  width: 100%;
  height: auto;
  display: block;
}

/* Light theme: watercolor multiply bleed with soft vignette edge */
:not(.dark) .about-flank {
  mix-blend-mode: multiply;
  opacity: 0.82;
  filter: contrast(1.02);
}

/* Dark theme: delicate glowing translucent blend */
.dark .about-flank {
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: brightness(1.06) contrast(1.1);
}

@media (max-width: 1060px) {
  .about-flank {
    display: none;
  }
}
.about-intro-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
.about-intro-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 48px);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.about-intro-name {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--rose);
  letter-spacing: 0;
  display: inline-block;
  vertical-align: -0.05em;
}
.about-intro-title--script {
  font-family: var(--font-script) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.about-intro-title--script .about-intro-name {
  font-family: inherit !important;
  font-size: 1.05em;
}
.about-intro-subtitle {
  font-size: 16.5px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0;
}
.about-intro-motto {
  display: inline-block;
  margin: 20px auto 0;
  padding: 8px 18px;
  border-top: 1px solid rgba(168, 160, 208, 0.34);
  border-bottom: 1px solid rgba(168, 160, 208, 0.34);
  color: rgba(45, 41, 38, 0.68);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dark .about-intro-motto {
  border-color: rgba(226, 143, 168, 0.28);
  color: rgba(248, 246, 242, 0.68);
}
.about-records {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.about-record {
  display: block !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: clamp(26px, 3.2vw, 36px) clamp(28px, 4vw, 46px) !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease, box-shadow 0.32s ease !important;
}

.about-record:hover {
  transform: translateY(-3px) !important;
}

/* === ЦВЕТОВЫЕ ТЕМЫ ПЛАШЕК (Светлая тема: благородная акварель) === */
.about-record-tone-peach {
  background: linear-gradient(135deg, rgba(255, 246, 238, 0.94) 0%, rgba(255, 238, 225, 0.88) 55%, rgba(255, 228, 210, 0.94) 100%) !important;
  border: 1.5px solid rgba(226, 145, 100, 0.38) !important;
  box-shadow: 0 12px 36px rgba(198, 106, 48, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  --about-record-accent: #C66A30;
}

.about-record-tone-peach:hover {
  border-color: rgba(198, 106, 48, 0.65) !important;
  box-shadow: 0 18px 48px rgba(198, 106, 48, 0.15), inset 0 1px 0 #FFFFFF !important;
}

.about-record-tone-mint {
  background: linear-gradient(135deg, rgba(240, 252, 248, 0.94) 0%, rgba(226, 248, 240, 0.88) 55%, rgba(212, 242, 232, 0.94) 100%) !important;
  border: 1.5px solid rgba(110, 175, 155, 0.40) !important;
  box-shadow: 0 12px 36px rgba(79, 138, 117, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  --about-record-accent: #3F7E68;
}

.about-record-tone-mint:hover {
  border-color: rgba(79, 138, 117, 0.65) !important;
  box-shadow: 0 18px 48px rgba(79, 138, 117, 0.15), inset 0 1px 0 #FFFFFF !important;
}

.about-record-tone-cream {
  background: linear-gradient(135deg, rgba(255, 252, 242, 0.94) 0%, rgba(253, 247, 228, 0.88) 55%, rgba(250, 238, 202, 0.94) 100%) !important;
  border: 1.5px solid rgba(220, 180, 85, 0.40) !important;
  box-shadow: 0 12px 36px rgba(149, 115, 31, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  --about-record-accent: #95731F;
}

.about-record-tone-cream:hover {
  border-color: rgba(180, 140, 50, 0.65) !important;
  box-shadow: 0 18px 48px rgba(149, 115, 31, 0.15), inset 0 1px 0 #FFFFFF !important;
}

.about-record-tone-rose {
  background: linear-gradient(135deg, rgba(255, 245, 248, 0.94) 0%, rgba(250, 230, 238, 0.88) 55%, rgba(245, 218, 228, 0.94) 100%) !important;
  border: 1.5px solid rgba(214, 137, 160, 0.40) !important;
  box-shadow: 0 12px 36px rgba(176, 80, 110, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  --about-record-accent: #B0506E;
}

.about-record-tone-rose:hover {
  border-color: rgba(176, 80, 110, 0.65) !important;
  box-shadow: 0 18px 48px rgba(176, 80, 110, 0.15), inset 0 1px 0 #FFFFFF !important;
}

.about-record-text {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.about-record-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--about-record-accent, #B0506E);
  margin-bottom: 12px;
}

.dark .about-record-eyebrow {
  color: #E2B86E !important;
}

.about-record-title {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.6vw, 27px) !important;
  line-height: 1.25 !important;
  margin: 0 0 14px !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}

.about-record-title em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

.about-record-body {
  font-size: 16px !important;
  line-height: 1.72 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  opacity: 0.9;
}

.dark .about-record-body {
  color: #CDC5BA !important;
}

.about-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.about-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* CTA «Связаться» — pull-quote блок */
.about-cta {
  position: relative;
  max-width: 720px;
  margin: 80px auto 40px;
  padding: 56px 56px 48px;
  background: linear-gradient(135deg, rgba(244, 167, 185, 0.08) 0%, rgba(217, 197, 234, 0.10) 100%);
  border: 1px solid rgba(244, 167, 185, 0.22);
  border-radius: 28px;
  text-align: center;
  box-sizing: border-box;
}

.about-cta-mark {
  position: absolute;
  top: -8px;
  left: 32px;
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 1;
  color: var(--rose);
  opacity: 0.30;
  pointer-events: none;
  font-weight: 600;
}

.about-cta-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.about-cta-text {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}

.about-cta-text em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

.about-cta-btn {
  position: relative;
  z-index: 1;
}

@media (max-width: 540px) {
  .about-cta {
    padding: 44px 28px 36px;
    border-radius: 22px;
  }
  .about-cta-mark {
    font-size: 100px;
    left: 18px;
  }
}

/* === ОБО МНЕ — bento «Любопытные цифры» === */
.about-bento-section {
  margin-top: 80px;
  padding: 0 20px;
}
.about-bento-header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.about-bento-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
}
.about-bento-title {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.18;
}
.about-bento-subtitle {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0;
}
.about-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .about-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .about-bento { grid-template-columns: 1fr; gap: 16px; }
}
.bento-card {
  position: relative;
  padding: 32px 28px 30px;
  background: var(--bento-bg);
  border: 1px solid var(--bento-border);
  border-radius: var(--card-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  --bento-accent: var(--rose);
}
.bento-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--bento-accent);
  opacity: 0.08;
  pointer-events: none;
  transition: transform 0.5s ease;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}
.bento-card:hover::after {
  transform: scale(1.18) rotate(8deg);
}
.bento-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bento-accent);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.bento-number {
  font-family: var(--font-display);
  font-size: clamp(56px, 6.5vw, 84px);
  font-weight: 800;
  line-height: 0.95;
  color: var(--bento-accent);
  letter-spacing: -0.04em;
  margin: 8px 0 6px;
  position: relative;
  z-index: 1;
}
.bento-number .bento-arrow {
  font-size: 0.5em;
  vertical-align: 0.3em;
  margin: 0 0.05em;
  opacity: 0.7;
}
.bento-title {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 700;
  font-size: 21px;
  margin: 4px 0 0;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.bento-body {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 10px 0 0;
  opacity: 0.78;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

/* Тёмная тема для bento */
.dark .bento-card {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(226, 143, 168, 0.18) !important;
}
.dark .bento-card::after { opacity: 0.14; }

/* Тёмная тема для отзывов */
.dark .tag-pill {
  background: rgba(226, 184, 110, 0.08);
  border-color: rgba(226, 184, 110, 0.25);
  color: var(--soft-white);
}
.dark .tag-pill:hover {
  background: rgba(226, 184, 110, 0.15);
  border-color: rgba(226, 184, 110, 0.4);
}
.dark .tag-pill.active {
  background: var(--rose-grad);
  border-color: transparent;
  color: var(--bg-0);
  box-shadow: none;
}
.dark .tag-pill-count { background: rgba(255,255,255,0.10); }
.dark .review-hero {
  background: linear-gradient(135deg, rgba(226, 184, 110, 0.04) 0%, rgba(229, 169, 59, 0.06) 100%);
  border-color: rgba(226, 184, 110, 0.2);
}
.dark .review-hero-mark { color: rgba(226, 184, 110, 0.4); }
.dark .review-hero-handle {
  background: rgba(226, 184, 110, 0.12);
  color: var(--rose);
}
.dark .review-hero-link {
  color: var(--rose);
  border-bottom-color: rgba(226, 184, 110, 0.6);
}
.dark .review-card-modern {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(226, 184, 110, 0.18) !important;
}
.dark .review-card-modern:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.dark .review-card-mark { opacity: 0.5; }
.dark .review-card-meta { border-top-color: rgba(255,255,255,0.08); }
.dark .review-card-handle { background: rgba(255,255,255,0.06); }
.dark .review-card-link { background: rgba(255,255,255,0.06); }

/* === ОБО МНЕ — соцсети «Давайте дружить» (журнальный стиль) === */
.friends-section {
  margin-top: 80px;
  padding: 0 20px;
}
.friends-header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.friends-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
}
.friends-title {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.18;
}
.friends-subtitle {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0;
}

.friends-hero {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 880px;
  margin: 0 auto 22px;
  padding: 26px 32px;
  background: linear-gradient(135deg, rgba(76,117,163,0.08), rgba(91,135,199,0.16));
  border: 1px solid rgba(76,117,163,0.28);
  border-radius: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.friends-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(76,117,163,0.20);
  background: linear-gradient(135deg, rgba(76,117,163,0.13), rgba(91,135,199,0.22));
}
.friends-hero-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(76, 117, 163, 0.12);
  border: 1px solid rgba(76, 117, 163, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(76, 117, 163, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.friends-hero:hover .friends-hero-icon {
  transform: scale(1.06) rotate(-2deg);
}
.friends-hero-text {
  flex: 1;
  min-width: 0;
}
.friends-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: rgba(76,117,163,0.20);
  color: #36588B;
  border-radius: 999px;
  margin-bottom: 8px;
}
.friends-hero-name {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--ink);
}
.friends-hero-desc {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 8px;
  opacity: 0.78;
}
.friends-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}
.friends-arrow {
  flex-shrink: 0;
  font-size: 28px;
  color: #4C75A3;
  transition: transform 0.3s ease;
  line-height: 1;
}
.friends-hero:hover .friends-arrow { transform: translateX(6px); }

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 880px;
  margin: 0 auto 22px;
}
.friend-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--accent-bg, rgba(244, 167, 185, 0.10));
  border: 1px solid var(--accent-border, rgba(244, 167, 185, 0.28));
  border-radius: var(--card-radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.friend-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.friend-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-icon-bg, rgba(244, 167, 185, 0.30));
  border: 1px solid var(--accent-border, rgba(244, 167, 185, 0.28));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.friend-card:hover .friend-icon {
  transform: scale(1.10) rotate(-2deg);
}
.friend-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.friend-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.2;
}
.friend-desc {
  font-size: 12.5px;
  opacity: 0.65;
  line-height: 1.4;
  margin-top: 3px;
}
.friend-handle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.55;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.friends-litres {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 32px;
  background: linear-gradient(135deg, rgba(255,122,26,0.08), rgba(232,90,12,0.14));
  border: 1px solid rgba(255,122,26,0.30);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.friends-litres:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,122,26,0.22);
}
.friends-litres-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 122, 26, 0.12);
  border: 1px solid rgba(255, 122, 26, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 122, 26, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.friends-litres:hover .friends-litres-icon {
  transform: scale(1.06) rotate(-2deg);
}
.friends-litres-text { flex: 1; min-width: 0; }
.friends-litres-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: rgba(255,122,26,0.18);
  color: #C04A0A;
  border-radius: 999px;
  margin-bottom: 6px;
}
.friends-litres-name {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--ink);
}
.friends-litres-desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.75;
}
.friends-litres-arrow {
  flex-shrink: 0;
  font-size: 24px;
  color: #E85A0C;
  transition: transform 0.3s ease;
  line-height: 1;
}
.friends-litres:hover .friends-litres-arrow { transform: translateX(6px); }

.friends-litmarket {
  margin-top: 16px !important;
  background: linear-gradient(135deg, rgba(128, 192, 142, 0.12), rgba(90, 161, 121, 0.18)) !important;
  border-color: rgba(90, 161, 121, 0.32) !important;
}
.friends-litmarket:hover {
  box-shadow: 0 12px 28px rgba(90, 161, 121, 0.18) !important;
}
.friends-litmarket .friends-litres-icon {
  background: rgba(90, 161, 121, 0.14) !important;
  border: 1px solid rgba(90, 161, 121, 0.28) !important;
  box-shadow: 0 4px 14px rgba(90, 161, 121, 0.12) !important;
}
.friends-litmarket .friends-litres-tag {
  background: rgba(90, 161, 121, 0.16);
  color: #3F7F58;
}
.friends-litmarket .friends-litres-arrow {
  color: #3F9668;
}

@media (max-width: 540px) {
  .friends-hero { flex-direction: column; align-items: flex-start; padding: 24px; }
  .friends-hero-icon { width: 56px; height: 56px; }
  .friends-litres { flex-direction: column; align-items: flex-start; padding: 22px 24px; }
}

/* Тёмная тема — Раздел «Давайте дружить» */
.dark .friends-header {
  text-align: center;
  margin-bottom: 36px;
}
.dark .friends-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}
.dark .friends-title {
  color: #EFE9DF !important;
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.5vw, 38px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.dark .friends-title em {
  color: #E2B86E !important;
  font-style: italic !important;
}
.dark .friends-subtitle {
  color: #CDC5BA !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  margin: 14px auto 0 !important;
}




.about-record .about-card[data-animate] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.about-record .about-card h3 {
  font-size: clamp(21px, 2.4vw, 25px) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.about-record .about-card p {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

/* === ЦВЕТОВЫЕ ТЕМЫ ПЛАШЕК (Тёмная тема) === */
.dark .about-record-tone-peach {
  background: linear-gradient(135deg, rgba(42, 20, 26, 0.92) 0%, rgba(30, 14, 18, 0.96) 100%) !important;
  border: 1.5px solid rgba(226, 145, 100, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(198, 106, 48, 0.16) !important;
}

.dark .about-record-tone-peach:hover {
  border-color: rgba(226, 145, 100, 0.70) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.60), 0 0 32px rgba(198, 106, 48, 0.28) !important;
}

.dark .about-record-tone-mint {
  background: linear-gradient(135deg, rgba(16, 36, 30, 0.92) 0%, rgba(10, 24, 20, 0.96) 100%) !important;
  border: 1.5px solid rgba(110, 175, 155, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(79, 138, 117, 0.16) !important;
}

.dark .about-record-tone-mint:hover {
  border-color: rgba(110, 175, 155, 0.70) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.60), 0 0 32px rgba(79, 138, 117, 0.28) !important;
}

.dark .about-record-tone-cream {
  background: linear-gradient(135deg, rgba(38, 30, 16, 0.92) 0%, rgba(26, 20, 10, 0.96) 100%) !important;
  border: 1.5px solid rgba(220, 180, 85, 0.50) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(220, 180, 85, 0.16) !important;
}

.dark .about-record-tone-cream:hover {
  border-color: rgba(220, 180, 85, 0.75) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.60), 0 0 32px rgba(220, 180, 85, 0.28) !important;
}

.dark .about-record-tone-rose {
  background: linear-gradient(135deg, rgba(38, 16, 24, 0.92) 0%, rgba(26, 10, 16, 0.96) 100%) !important;
  border: 1.5px solid rgba(214, 137, 160, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(176, 80, 110, 0.16) !important;
}

.dark .about-record-tone-rose:hover {
  border-color: rgba(214, 137, 160, 0.70) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.60), 0 0 32px rgba(176, 80, 110, 0.28) !important;
}

.dark .about-record-frame {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(226, 184, 110, 0.30) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 680px) {
  .about-record,
  .about-record--reverse {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 22px 18px !important;
    gap: 20px !important;
  }

  .about-record .about-record-photo,
  .about-record--reverse .about-record-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 250px) !important;
    margin: 0 auto !important;
  }

  .about-record .about-record-text,
  .about-record--reverse .about-record-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
    text-align: left !important;
  }
}

/* === PINTEREST MASONRY FLOW: отзывы === */
.reviews-masonry {
  display: block !important;
  column-count: 3 !important;
  column-gap: 24px !important;
  gap: 0 !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.review-card-modern {
  display: inline-block;
  width: 100% !important;
  margin: 0 0 24px !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
}

@media (max-width: 1024px) {
  .reviews-masonry {
    column-count: 2 !important;
  }
}

@media (max-width: 640px) {
  .reviews-masonry {
    column-count: 1 !important;
  }
}

/* === SECTION HEADER CENTERING GUARD: все шапки разделов строго по центру === */
:where(
  .section-header,
  .audio-section-header,
  .book-detail-section-header,
  .about-intro-header,
  .about-bento-header,
  .friends-header,
  .encyclopedia-header
) {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

:where(
  .section-title,
  .audio-section-title,
  .book-detail-section-title,
  .about-intro-title,
  .about-bento-title,
  .friends-title
) {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(
  .section-subtitle,
  .audio-section-subtitle,
  .about-intro-subtitle,
  .about-bento-subtitle,
  .friends-subtitle
) {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* === SECTION EYEBROW FLOW GUARD: метки шапок всегда отдельной строкой === */
:where(
  .section-header > .section-eyebrow,
  .audio-section-header > .audio-section-eyebrow,
  .book-detail-section-header > .book-detail-eyebrow,
  .book-detail-full > .book-detail-eyebrow,
  .book-detail-buy > .book-detail-eyebrow,
  .about-intro-header > .about-intro-eyebrow,
  .about-cta > .about-cta-eyebrow,
  .about-bento-header > .about-bento-eyebrow,
  .friends-header > .friends-eyebrow
) {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  white-space: normal !important;
}

/* === REVIEWS MASONRY GUARD: фильтры и карточки с нормальными полями === */
#reviews-content {
  margin-top: clamp(20px, 3vw, 36px) !important;
}

#reviews .reviews-filter {
  max-width: 1040px !important;
  margin: 0 auto clamp(34px, 4.5vw, 54px) !important;
  padding-top: clamp(10px, 2vw, 18px) !important;
}

#reviews .reviews-masonry {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-count: initial !important;
  column-gap: clamp(24px, 3vw, 32px) !important;
  row-gap: 0 !important;
  gap: clamp(24px, 3vw, 32px) !important;
  align-items: start !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#reviews .reviews-masonry.is-2-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#reviews .reviews-masonry.is-1-col {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 620px !important;
}

#reviews .reviews-column {
  display: grid !important;
  align-content: start !important;
  gap: clamp(24px, 3vw, 32px) !important;
  min-width: 0 !important;
}

#reviews .review-card-modern {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  #reviews .reviews-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #reviews .reviews-filter {
    margin-bottom: 28px !important;
  }

  #reviews .reviews-masonry {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 620px !important;
  }
}

/* === ARTICLES FILTER HIERARCHY: главное сверху, категории ниже === */
#articles .articles-filter {
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;
  max-width: 900px !important;
  margin: 0 auto clamp(36px, 4.8vw, 54px) !important;
}

#articles .articles-filter-primary,
#articles .articles-filter-secondary {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  row-gap: 12px !important;
  width: 100% !important;
}

#articles .articles-filter-primary .tag-pill {
  min-width: min(100%, 220px) !important;
  min-height: 46px !important;
  padding-inline: 24px !important;
  border-width: 1.5px !important;
}

#articles .articles-filter-secondary {
  max-width: 780px !important;
}

#articles .articles-filter-secondary .tag-pill {
  min-height: 42px !important;
}

@media (max-width: 640px) {
  #articles .articles-filter {
    gap: 12px !important;
    margin-bottom: 30px !important;
  }

  #articles .articles-filter-primary .tag-pill {
    width: 100% !important;
    max-width: 260px !important;
  }
}

/* === ENCYCLOPEDIA QUOTES: без второго декоративного курсива === */
.enc-quote-slide .enc-quote-text {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.enc-quote-slide .enc-quote-author {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* === BOOK CARDS: descriptions use regular prose, not italic === */
#books .book-card .book-description,
#books .book-card .book-description *,
#books .book-card .book-description em {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

#books .book-card .book-description--coming,
#books .book-card .book-description--coming * {
  font-weight: 500 !important;
}

/* === HOME HERO COMPOSITION: author medallion === */
#home.page {
  padding-top: 0 !important;
}

#home .hero-modern {
  padding-top: clamp(36px, 4vw, 56px) !important;
  padding-bottom: clamp(34px, 4.5vw, 54px) !important;
}

#home .hero-modern .hero-content {
  max-width: min(960px, calc(100vw - 44px)) !important;
  padding: clamp(52px, 6vw, 68px) clamp(30px, 6.5vw, 76px) clamp(42px, 5vw, 58px) !important;
  border-radius: 16px !important;
  overflow: visible !important;
  isolation: isolate;
  box-sizing: border-box !important;
  text-align: left !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(244, 167, 185, 0.09), transparent 31%),
    radial-gradient(circle at 93% 15%, rgba(255, 183, 147, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(255, 253, 250, 0.97), rgba(255, 249, 246, 0.90)) !important;
  border-color: rgba(45, 41, 38, 0.085) !important;
}

#home .hero-modern .hero-chapter {
  margin: 0 0 16px !important;
  justify-content: center !important;
  color: #B96F86 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.35 !important;
}

#home .hero-modern .hero-chapter span {
  max-width: min(100%, 620px);
}

#home .hero-modern .hero-chapter::before,
#home .hero-modern .hero-chapter::after {
  content: '' !important;
  display: block !important;
  width: clamp(28px, 5vw, 54px) !important;
  height: 1px !important;
  opacity: 0.46 !important;
}

#home .hero-modern .hero-chapter::before {
  background: linear-gradient(90deg, transparent, var(--emerald)) !important;
}

#home .hero-modern .hero-chapter::after {
  background: linear-gradient(90deg, var(--emerald), transparent) !important;
}

#home .hero-modern .hero-title {
  margin-bottom: 20px !important;
  font-size: clamp(2.55rem, 5.5vw, 4.1rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.006em !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#home .hero-modern .hero-title-prefix {
  margin-bottom: 6px !important;
  color: rgba(45, 41, 38, 0.62) !important;
  font-size: clamp(1rem, 1.6vw, 1.22rem) !important;
  letter-spacing: 0.01em !important;
}

#home .hero-modern .hero-title-sticker {
  padding: 0.01em 0.12em 0.05em !important;
  border-radius: 6px !important;
  background: transparent !important;
}

#home .hero-modern .hero-title-sticker::after {
  left: 0.03em !important;
  right: 0.03em !important;
  bottom: -0.035em !important;
  height: 0.11em !important;
  opacity: 0.78;
  border-radius: 999px !important;
}

#home .hero-modern .hero-intro-copy {
  max-width: 670px !important;
  margin: 0 0 30px !important;
  color: rgba(45, 41, 38, 0.76) !important;
  font-size: clamp(1.02rem, 1.42vw, 1.15rem) !important;
  line-height: 1.64 !important;
  text-align: left !important;
}

#home .hero-modern .hero-cta {
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

#home .hero-modern .btn-flagship,
#home .hero-modern .hero-secondary-cta {
  min-height: 58px !important;
  border-radius: 999px !important;
}

#home .hero-modern .btn-flagship {
  min-width: min(100%, 270px) !important;
  padding: 14px 28px !important;
}

#home .hero-modern .hero-secondary-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 148px !important;
  padding: 14px 24px !important;
  color: var(--rose-deep) !important;
  border-color: rgba(var(--rose-deep-rgb), 0.78) !important;
}

#home .hero-modern .hero-secondary-cta:hover,
#home .hero-modern .hero-secondary-cta:focus-visible {
  background: var(--rose-deep) !important;
  border-color: var(--rose-deep) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--rose-deep-rgb), 0.20) !important;
}



@media (min-width: 900px) {
  #home .hero-modern .hero-content {
    display: grid !important;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    column-gap: clamp(26px, 3.8vw, 46px);
    align-items: center;
    text-align: left !important;
    padding-left: clamp(30px, 4vw, 54px) !important;
    padding-right: clamp(42px, 6vw, 76px) !important;
  }

  #home .hero-author-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1;
    grid-row: 1 / span 4;
    justify-self: center;
    align-self: center;
    width: 162px !important;
    height: 162px !important;
    margin: 0 !important;
    z-index: 4 !important;
    transition: padding-bottom 0.35s ease;
  }

  #home .hero-author-avatar {
    width: 162px !important;
    height: 162px !important;
    box-shadow:
      0 0 0 2px var(--rose),
      0 0 0 6px rgba(244, 167, 185, 0.17),
      0 12px 28px rgba(45, 41, 38, 0.16) !important;
    animation: none !important;
  }

  #home .hero-modern .hero-chapter,
  #home .hero-modern .hero-title,
  #home .hero-modern .hero-intro-copy {
    grid-column: 2;
    min-width: 0;
    justify-self: start;
  }

  #home .hero-modern .hero-cta {
    grid-column: 2;
    min-width: 0;
    justify-self: stretch;
  }

  #home .hero-audio-cta {
    width: 58px !important;
    height: 58px !important;
    right: -10px !important;
    bottom: 8px !important;
  }

  #home .hero-audio-cta.is-expanded {
    width: 58px !important;
    height: 58px !important;
  }

  #home .hero-audio-cta .cta-circle {
    width: 52px !important;
    height: 52px !important;
  }

  #home .hero-author-row.is-audio-expanded {
    padding-bottom: 50px !important;
  }

  #home .hero-author-row .hero-audio-cta.is-expanded .cta-content {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    right: -4px !important;
    left: auto !important;
    width: 204px !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 899px) {
  #home .hero-modern {
    padding-top: clamp(64px, 8vw, 80px) !important;
  }

  #home .hero-modern .hero-content {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 38px 26px 34px !important;
  }

  #home .hero-author-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 142px !important;
    height: auto !important;
    min-height: 142px !important;
    margin: 0 auto 20px !important;
  }

  #home .hero-author-avatar {
    width: 142px !important;
    height: 142px !important;
    animation: none !important;
  }

  #home .hero-author-row.is-audio-expanded {
    padding-bottom: 108px !important;
    margin-bottom: 8px !important;
  }

  #home .hero-author-row.is-audio-expanded .hero-audio-cta.is-expanded {
    bottom: 58px !important;
  }

  #home .hero-author-row.is-audio-expanded .hero-audio-cta.is-expanded .cta-content {
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(220px, calc(100vw - 56px)) !important;
    height: 38px !important;
    transform: translate(calc(-50% - 56px), 0) !important;
  }

  #home .hero-modern .hero-title {
    font-size: clamp(2rem, 7vw, 2.9rem) !important;
  }
}

@media (max-width: 540px) {
  #home .hero-modern {
    padding-top: 64px !important;
    padding-bottom: 30px !important;
  }

  #home .hero-modern .hero-content {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 30px 18px 28px !important;
    border-radius: 14px !important;
  }

  #home .hero-author-row {
    width: 132px !important;
    min-height: 132px !important;
    margin-bottom: 18px !important;
  }

  #home .hero-author-avatar {
    width: 132px !important;
    height: 132px !important;
  }

  #home .hero-modern .hero-chapter {
    margin-bottom: 14px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
  }

  #home .hero-modern .hero-title {
    margin-bottom: 14px !important;
    font-size: clamp(1.95rem, 9vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  #home .hero-modern .hero-title-sticker {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 0.02em !important;
  }

  #home .hero-modern .hero-title-name,
  #home .hero-modern .hero-title-surname {
    display: block !important;
  }

  #home .hero-modern .hero-title-prefix {
    font-size: 14.5px !important;
  }

  #home .hero-modern .hero-intro-copy {
    max-width: 31ch !important;
    margin-bottom: 24px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  #home .hero-modern .btn-flagship,
  #home .hero-modern .hero-secondary-cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
  }
}

.dark #home .hero-modern .hero-content {
  background:
    radial-gradient(circle at 13% 0%, rgba(226, 143, 168, 0.12), transparent 32%),
    radial-gradient(circle at 92% 15%, rgba(201, 180, 232, 0.10), transparent 31%),
    linear-gradient(135deg, rgba(17, 18, 28, 0.96), rgba(23, 23, 36, 0.90)) !important;
  border-color: rgba(226, 143, 168, 0.18) !important;
}

.dark #home .hero-modern .hero-chapter {
  color: var(--rose) !important;
}

.dark #home .hero-modern .hero-title-prefix,
.dark #home .hero-modern .hero-intro-copy {
  color: rgba(248, 246, 242, 0.76) !important;
}

/* === SITEWIDE ADAPTIVE POLISH: phones and tablets === */
html,
body {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

:where(
  .page,
  .section,
  .container,
  .grid,
  .book-card,
  .book-info,
  .book-detail,
  .book-detail-info,
  .book-detail-full-text,
  .audio-player,
  .audio-info,
  .article-card,
  .article-info,
  .review-card-modern,
  .review-card-author-text,
  .about-record,
  .about-record-text,
  .bento-card,
  .character-card
) {
  min-width: 0 !important;
}

:where(
  .section-title,
  .audio-section-title,
  .book-detail-title,
  .book-detail-section-title,
  .article-detail-title,
  .about-intro-title,
  .about-bento-title,
  .friends-title,
  .book-title,
  .audio-title,
  .article-title,
  .review-card-name,
  .character-name
) {
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

:where(
  .section-subtitle,
  .audio-section-subtitle,
  .about-intro-subtitle,
  .about-bento-subtitle,
  .friends-subtitle,
  .book-description,
  .book-detail-lead,
  .article-excerpt,
  .review-card-text
) {
  text-wrap: pretty;
}

:where(.book-meta-line, .article-meta, .filter-tags, .reviews-filter, .encyclopedia-nav, .buy-buttons, .book-actions) {
  min-width: 0 !important;
}

@media (min-width: 641px) and (max-width: 899px) {
  #home .hero-modern .hero-cta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #home .hero-modern .btn-flagship {
    width: auto !important;
    min-width: min(100%, 340px) !important;
  }

  #home .hero-modern .hero-secondary-cta {
    width: auto !important;
    min-width: 158px !important;
  }
}

@media (max-width: 768px) {
  :where(#books, #audio, #world, #articles, #reviews, #about, #book-detail) .container,
  :where(.about-intro, .about-bento-section, .friends-section) {
    width: 100% !important;
    max-width: 100% !important;
  }

  :where(.section-header, .audio-section-header, .book-detail-section-header, .about-intro-header, .about-bento-header, .friends-header, .encyclopedia-header) {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin-bottom: clamp(24px, 6vw, 34px) !important;
  }

  #home .hero-awards-strip-grid,
  #books-grid,
  #articles-content,
  #audio-content > div,
  #world-content,
  #encyclopedia-content,
  .reviews-masonry,
  .about-records,
  .bento-grid {
    gap: clamp(18px, 4vw, 26px) !important;
  }

  :where(.filter-tags, .reviews-filter, .encyclopedia-nav, .characters-filter, .buy-buttons, .book-actions) {
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    row-gap: 10px !important;
  }

  :where(.tag-pill, .enc-genre-pill, .buy-btn, .store-link, .expand-btn) {
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  #books .book-meta-line {
    align-items: center !important;
    gap: 6px !important;
    row-gap: 7px !important;
    line-height: 1 !important;
  }

  #books .book-series,
  #books .book-status-badge {
    align-items: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  #articles .article-meta {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px 10px !important;
    line-height: 1.25 !important;
  }

  #articles .article-meta > span {
    white-space: nowrap !important;
  }

  #articles .article-title {
    font-size: 16.5px !important;
    line-height: 1.34 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    max-width: 100% !important;
  }

  #articles .article-excerpt {
    font-size: 14px !important;
    line-height: 1.52 !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    color: var(--ink-cool) !important;
    opacity: 0.95 !important;
  }

  /* Внутри открытой статьи на мобильном */
  #article-detail .article-detail-title {
    font-size: clamp(22px, 6vw, 26px) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  #article-detail .article-content h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  #article-detail .article-content h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-top: 28px !important;
    margin-bottom: 10px !important;
  }

  #article-detail .article-content h3 {
    font-size: 17.5px !important;
    line-height: 1.35 !important;
  }

  #article-detail .article-content {
    font-size: 16.5px !important;
    line-height: 1.65 !important;
  }

  .book-detail-section {
    margin-top: clamp(42px, 9vw, 60px) !important;
    padding-top: clamp(30px, 7vw, 44px) !important;
  }

  .book-detail-full {
    margin: clamp(26px, 7vw, 34px) 0 !important;
  }

  .characters-mini-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
  }
}

@media (max-width: 540px) {
  :where(#books, #audio, #world, #articles, #reviews, #about, #book-detail) .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  :where(.section-title, .audio-section-title, .about-intro-title, .about-bento-title, .friends-title) {
    font-size: clamp(1.72rem, 8.4vw, 2.12rem) !important;
    line-height: 1.12 !important;
  }

  :where(.section-subtitle, .audio-section-subtitle, .about-intro-subtitle, .about-bento-subtitle, .friends-subtitle) {
    font-size: 15.5px !important;
    line-height: 1.58 !important;
  }

  #books-grid,
  #articles-content,
  #audio-content > div,
  #world-content,
  #encyclopedia-content {
    row-gap: 24px !important;
  }

  #books .book-info {
    padding: 16px 17px 18px !important;
    gap: 7px !important;
  }

  #books .book-title {
    font-size: clamp(18px, 5.8vw, 21px) !important;
    line-height: 1.18 !important;
  }

  #books .book-description {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }

  #books .book-series,
  #books .book-status-badge {
    max-width: 100% !important;
    padding-top: 5px !important;
    padding-bottom: 4px !important;
  }

  #articles .article-card {
    padding: 22px 20px 20px !important;
  }

  #articles .article-info {
    padding: 0 !important;
  }

  #articles .article-meta {
    margin-bottom: 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    gap: 4px 7px !important;
  }

  #articles .article-title {
    font-size: 15.5px !important;
    line-height: 1.32 !important;
    margin-bottom: 6px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    letter-spacing: -0.01em !important;
  }

  #articles .article-excerpt {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    margin-bottom: 10px !important;
    opacity: 0.92 !important;
  }

  #audio .audio-player {
    gap: 14px !important;
  }

  #audio .audio-wave {
    width: 100% !important;
    max-width: 100% !important;
  }

  #reviews .review-card-modern {
    padding: 22px 20px !important;
  }

  #reviews .review-card-author {
    align-items: flex-start !important;
  }

  #about .about-record,
  #about .about-record--reverse {
    padding: 18px !important;
  }

  #about .about-record .about-card h3 {
    font-size: clamp(20px, 6.2vw, 23px) !important;
  }
}

@media (max-width: 380px) {
  :where(#books, #audio, #world, #articles, #reviews, #about, #book-detail) .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  :where(.tag-pill, .enc-genre-pill, .buy-btn, .store-link, .expand-btn) {
    min-height: 37px !important;
    padding: 8px 10px !important;
    font-size: 10.6px !important;
    letter-spacing: 0.045em !important;
  }

  #books .book-info {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #books .book-series,
  #books .book-status-badge {
    font-size: 9px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #articles .article-info {
    padding: 13px 12px 12px !important;
  }

  #articles .article-meta {
    font-size: 10px !important;
    gap: 4px 6px !important;
    margin-bottom: 7px !important;
  }

  #articles .article-title {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #articles .article-excerpt {
    font-size: 12.8px !important;
    line-height: 1.46 !important;
    margin-bottom: 8px !important;
  }

  .book-detail-title {
    font-size: clamp(27px, 10vw, 32px) !important;
  }

  .book-detail-lead,
  .book-detail-full-text {
    font-size: 15.5px !important;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: 44px !important;
  }

  .footer-content,
  .footer-section,
  .footer-bio,
  .footer-bottom {
    text-align: left !important;
  }

  .footer-content {
    gap: 26px !important;
  }

  .footer-section:first-child {
    margin-bottom: 8px !important;
  }

  .footer-section > div:first-child,
  .footer-social,
  .footer-links {
    justify-content: flex-start !important;
  }

  .footer-section h3 {
    margin-bottom: 12px !important;
  }

  .footer-link {
    width: fit-content;
    max-width: 100%;
  }

  .footer-bottom {
    padding-top: 22px !important;
  }
}

/* === ABOUT MOBILE/TIMELINE/BENTO REFINEMENT: reversible visual layer === */
@media (max-width: 540px) {
  #home .hero-modern .hero-chapter {
    font-size: clamp(11.8px, 3.35vw, 13px) !important;
    letter-spacing: 0.075em !important;
    line-height: 1.42 !important;
    gap: 9px !important;
    margin-bottom: 16px !important;
  }

  #home .hero-modern .hero-chapter span {
    max-width: min(100%, 304px) !important;
  }

  #home .hero-modern .hero-chapter::before,
  #home .hero-modern .hero-chapter::after {
    width: clamp(18px, 8vw, 30px) !important;
  }
}

/* === ABOUT TIMELINE SEQUENCE: reversible animation layer === */
.timeline {
  --timeline-delay: 0s;
}

.timeline::before {
  height: 100% !important;
  transform: translateX(-50%) scaleY(0) !important;
  transform-origin: top center !important;
  transition:
    transform 1.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease !important;
}

.timeline.animate-line::before {
  transform: translateX(-50%) scaleY(1) !important;
}

.timeline-item,
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
  opacity: 0 !important;
  filter: blur(2px);
  transform: translate3d(0, 28px, 0) scale(0.985) !important;
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
  transition-delay: var(--timeline-delay, 0s) !important;
  will-change: opacity, transform, filter;
}

.timeline-item:nth-child(odd) {
  transform: translate3d(-18px, 28px, 0) scale(0.985) !important;
}

.timeline-item:nth-child(even) {
  transform: translate3d(18px, 28px, 0) scale(0.985) !important;
}

.timeline-item.animate,
.timeline-item:nth-child(odd).animate,
.timeline-item:nth-child(even).animate {
  opacity: 1 !important;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.timeline-dot {
  opacity: 0 !important;
  transform: scale(0.52) !important;
  transition:
    opacity 0.38s ease,
    transform 0.56s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.28s ease,
    box-shadow 0.28s ease !important;
  transition-delay: calc(var(--timeline-delay, 0s) + 0.12s) !important;
}

.timeline-item.animate .timeline-dot {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.timeline-item::before {
  opacity: 0 !important;
  transform: scale(0.72);
  transition:
    opacity 0.58s ease,
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition-delay: calc(var(--timeline-delay, 0s) + 0.04s) !important;
}

.timeline-item.animate::before {
  opacity: 1 !important;
  transform: scale(1);
}

.timeline-content::after {
  transition:
    opacity 0.32s ease,
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition-delay: calc(var(--timeline-delay, 0s) + 0.10s) !important;
}

.dark .timeline-item.animate .timeline-dot {
  animation-delay: calc(var(--timeline-delay, 0s) + 0.48s) !important;
}

@media (max-width: 1024px) {
  .timeline::before {
    transform: scaleY(0) !important;
    transform-origin: top center !important;
  }

  .timeline.animate-line::before {
    transform: scaleY(1) !important;
  }

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    transform: translate3d(0, 26px, 0) scale(0.985) !important;
  }

  .timeline-item.animate,
  .timeline-item:nth-child(odd).animate,
  .timeline-item:nth-child(even).animate {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::before,
  .timeline-item,
  .timeline-dot,
  .timeline-item::before,
  .timeline-content::after {
    transition: none !important;
    animation: none !important;
  }

  .timeline::before {
    transform: translateX(-50%) scaleY(1) !important;
  }

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even),
  .timeline-dot,
  .timeline-item::before {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
  .timeline::before {
    transform: scaleY(1) !important;
  }
}

#about .about-bento-section {
  max-width: 1100px !important;
}

.about-bento,
#about .about-bento {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.about-bento .bento-card,
#about .about-bento .bento-card {
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(118px, 13vw, 150px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  column-gap: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 247, 0.92), rgba(255, 251, 247, 0.72)),
    var(--bento-bg) !important;
  border: 1px solid color-mix(in srgb, var(--bento-accent) 28%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.about-bento .bento-card:hover,
#about .about-bento .bento-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09) !important;
}

#about .about-bento .bento-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--bento-accent);
  opacity: 0.72;
}

#about .about-bento .bento-card::after {
  top: auto !important;
  right: -34px !important;
  bottom: -46px !important;
  width: 118px !important;
  height: 118px !important;
  opacity: 0.07 !important;
}

#about .about-bento .bento-eyebrow {
  grid-column: 2 !important;
  align-self: end !important;
  margin: 22px 22px 0 22px !important;
  font-size: 10.2px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.35 !important;
}

#about .about-bento .bento-number {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 16px 10px !important;
  background: color-mix(in srgb, var(--bento-accent) 13%, transparent) !important;
  border-right: 1px solid color-mix(in srgb, var(--bento-accent) 18%, transparent);
  font-size: clamp(34px, 4.6vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

#about .about-bento .bento-title {
  grid-column: 2 !important;
  margin: 8px 22px 0 22px !important;
  font-size: clamp(19px, 2vw, 22px) !important;
  line-height: 1.16 !important;
}

#about .about-bento .bento-body {
  grid-column: 2 !important;
  margin: 9px 22px 22px 22px !important;
  font-size: 14.2px !important;
  line-height: 1.58 !important;
  opacity: 0.76 !important;
}

.dark #about .about-bento .bento-card {
  background:
    linear-gradient(135deg, rgba(18, 20, 32, 0.92), rgba(18, 20, 32, 0.72)),
    color-mix(in srgb, var(--bento-accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--bento-accent) 34%, transparent) !important;
}

.dark #about .about-bento .bento-number {
  background: color-mix(in srgb, var(--bento-accent) 18%, transparent) !important;
  border-right-color: color-mix(in srgb, var(--bento-accent) 24%, transparent) !important;
}

@media (max-width: 760px) {
  .about-bento,
  #about .about-bento {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px) {
  #about .about-bento .bento-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  #about .about-bento .bento-eyebrow {
    margin: 18px 18px 0 18px !important;
  }

  #about .about-bento .bento-number {
    padding-inline: 6px !important;
    font-size: clamp(25px, 8.2vw, 34px) !important;
    letter-spacing: 0 !important;
  }

  #about .about-bento .bento-number .bento-arrow {
    font-size: 0.42em !important;
    margin-inline: 0.02em !important;
    vertical-align: 0.18em !important;
  }

  #about .about-bento .bento-title {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  #about .about-bento .bento-body {
    margin: 8px 18px 18px 18px !important;
  }
}

/* === HOME HERO PORTRAIT AND NAME MARKER TUNE: reversible visual layer === */
#home .hero-modern .hero-title-sticker {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.18em;
  row-gap: 0;
  width: auto;
  max-width: 100%;
}

#home .hero-modern .hero-title-sticker::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#home .hero-modern .hero-title-name,
#home .hero-modern .hero-title-surname {
  display: inline-block;
  white-space: nowrap;
}

#home .hero-modern .hero-title-surname {
  position: relative;
  z-index: 1;
  padding: 0 0.035em 0.07em;
  isolation: isolate;
}

#home .hero-modern .hero-title-surname::before {
  content: none !important;
  display: none !important;
}

#home .hero-modern .hero-title-surname::after {
  content: "";
  position: absolute;
  left: 0.06em;
  right: 0.06em;
  bottom: -0.045em;
  height: 0.085em;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(var(--rose-deep-rgb), 0.34) 0%,
    rgba(255, 199, 214, 0.52) 38%,
    rgba(244, 167, 185, 0.34) 72%,
    rgba(255, 183, 147, 0.36) 100%);
  transform-origin: left center;
  transform: rotate(-0.8deg) skewX(-2deg) scaleX(0);
  animation: marker-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
  z-index: -1;
  pointer-events: none;
}

.dark #home .hero-modern .hero-title-surname::after {
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%);
}

@media (min-width: 1181px) {
  #home .hero-modern .hero-content {
    max-width: min(1060px, calc(100vw - 44px)) !important;
    grid-template-columns: minmax(220px, 246px) minmax(0, 1fr) !important;
    column-gap: clamp(28px, 3.2vw, 44px) !important;
  }

  #home .hero-author-row {
    width: 184px !important;
    height: 184px !important;
  }

  #home .hero-author-avatar {
    width: 184px !important;
    height: 184px !important;
  }

  #home .hero-audio-cta {
    right: -8px !important;
    bottom: 10px !important;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  #home .hero-modern .hero-content {
    grid-template-columns: minmax(214px, 244px) minmax(0, 1fr) !important;
    column-gap: clamp(22px, 3vw, 36px) !important;
  }

  #home .hero-author-row {
    width: 174px !important;
    height: 174px !important;
  }

  #home .hero-author-avatar {
    width: 174px !important;
    height: 174px !important;
  }

  #home .hero-modern .hero-title-sticker::after {
    content: none !important;
    display: none !important;
  }

  #home .hero-modern .hero-title-surname::after {
    left: 0.08em !important;
    right: 0.08em !important;
    bottom: -0.045em !important;
    height: 0.075em !important;
    opacity: 0.68 !important;
  }
}

@media (min-width: 541px) and (max-width: 899px) {
  #home .hero-author-row {
    width: 160px !important;
    min-height: 160px !important;
    margin-bottom: 22px !important;
  }

  #home .hero-author-avatar {
    width: 160px !important;
    height: 160px !important;
  }

  #home .hero-audio-cta {
    right: -8px !important;
    bottom: 9px !important;
  }

  #home .hero-modern .hero-title-sticker {
    padding-inline: 0.08em !important;
    padding-bottom: 0.04em !important;
  }

  #home .hero-modern .hero-title-sticker::after {
    content: none !important;
    display: none !important;
  }

  #home .hero-modern .hero-title-surname::after {
    left: 0.10em !important;
    right: 0.10em !important;
    bottom: -0.045em !important;
    height: 0.07em !important;
    opacity: 0.64 !important;
  }
}

@media (max-width: 540px) {
  #home .hero-author-row {
    width: 146px !important;
    min-height: 146px !important;
    margin-bottom: 20px !important;
  }

  #home .hero-author-avatar {
    width: 146px !important;
    height: 146px !important;
  }

  #home .hero-audio-cta {
    right: -8px !important;
    bottom: 9px !important;
  }

  #home .hero-modern .hero-title-sticker {
    padding-inline: 0.07em !important;
    padding-bottom: 0.035em !important;
  }

  #home .hero-modern .hero-title-sticker::after {
    content: none !important;
    display: none !important;
  }

  #home .hero-modern .hero-title-surname::after {
    left: 0.10em !important;
    right: 0.10em !important;
    bottom: -0.04em !important;
    height: 0.068em !important;
    opacity: 0.64 !important;
  }
}

@media (max-width: 360px) {
  #home .hero-author-row {
    width: 138px !important;
    min-height: 138px !important;
  }

  #home .hero-author-avatar {
    width: 138px !important;
    height: 138px !important;
  }
}

/* === BOOKS CATALOG CLEANUP: tabs, quiet metadata, cover badges === */
#books .book-type-tabs {
  gap: clamp(14px, 3vw, 28px) !important;
  margin-bottom: 18px !important;
}



#books .book-genre-pills {
  margin-bottom: 38px !important;
}

#books .book-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#books .book-card .book-cover {
  flex: 0 0 auto !important;
  isolation: isolate;
}

#books .book-cover-overlay {
  position: absolute;
  inset: 12px 12px auto 12px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

#books .book-cover-overlay--age-only {
  justify-content: flex-end;
}

#books .book-cover-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

#books .book-cover-badge.book-status-badge,
#books .book-cover-age.book-age-rating {
  min-height: 24px !important;
  padding: 5px 8px 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 251, 247, 0.88) !important;
  border: 1px solid rgba(45, 41, 38, 0.12) !important;
  color: rgba(45, 41, 38, 0.76) !important;
  box-shadow: 0 8px 18px rgba(45, 41, 38, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: default;
}

#books .book-cover-age.book-age-rating:hover {
  background: linear-gradient(135deg, #963D52 0%, #B22B58 100%) !important;
  border-color: #D4AF37 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(150, 61, 82, 0.42), 0 0 10px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-1px) scale(1.08);
}

#books .book-cover-badge.book-status-badge {
  max-width: min(100%, 164px) !important;
  justify-content: flex-start !important;
  color: var(--book-status-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

#books .book-cover-age.book-age-rating--adult {
  color: #8F3856 !important;
  border-color: rgba(180, 74, 104, 0.24) !important;
}

#books .book-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#books .book-meta-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 24px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

#books .book-meta-line--empty {
  opacity: 0;
  visibility: hidden;
}

#books .book-series {
  display: inline-block !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(136, 71, 92, 0.82) !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
  flex: 1 1 auto;
}

.dark #books .book-series {
  color: rgba(155, 220, 243, 0.82) !important;
}

#books .book-meta-line .book-age-rating {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  padding: 3px 8px 2px !important;
  min-height: 22px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
  border-radius: 999px !important;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#books .book-card:hover .book-meta-line .book-age-rating {
  border-color: rgba(212, 175, 55, 0.50) !important;
}

.dark #books .book-card:hover .book-meta-line .book-age-rating {
  border-color: rgba(226, 184, 110, 0.50) !important;
}

#books .book-meta-line .book-age-rating:hover {
  background: linear-gradient(135deg, #963D52 0%, #B22B58 100%) !important;
  border-color: #D4AF37 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(150, 61, 82, 0.42), 0 0 10px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-1px) scale(1.10) !important;
}

.dark #books .book-meta-line .book-age-rating:hover {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.5) !important;
  transform: translateY(-1px) scale(1.10) !important;
}

#books .book-coauthor {
  display: block !important;
  align-self: flex-start !important;
  padding: 0 !important;
  margin: -1px 0 5px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(107, 79, 160, 0.76) !important;
  line-height: 1.35 !important;
}

#books .book-coauthor a:hover {
  background: transparent !important;
}

#books .book-title {
  margin-bottom: 7px !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}

#books .book-description {
  flex: 1 1 auto !important;
  min-height: 3.2em !important;
  margin-bottom: 0 !important;
}

#books .book-actions--single {
  margin-top: auto !important;
  padding-top: 16px !important;
  min-height: 40px !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
}

#books .book-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--section-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 0.22s ease, transform 0.22s ease;
}

#books .book-more-link::after {
  content: '→';
  font-size: 14px;
  line-height: 1;
  transition: transform 0.22s ease;
}

html:not(.dark) #books .book-card:hover .book-more-link {
  color: #8B4058;
}

.dark #books .book-card:hover .book-more-link {
  color: #E2B86E !important;
}

#books .book-card:hover .book-more-link::after {
  transform: translateX(3px);
}



.dark #books .book-cover-badge.book-status-badge,
.dark #books .book-cover-age.book-age-rating {
  background: rgba(12, 12, 22, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

.dark #books .book-cover-age.book-age-rating:hover {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.5) !important;
  transform: translateY(-1px) scale(1.08);
}

.dark #books .book-cover-badge.book-status-badge {
  color: var(--book-status-text) !important;
}

.dark #books .book-series {
  color: rgba(155, 220, 243, 0.78) !important;
}



.dark #books .book-more-link {
  color: #9BDCF3;
}

@media (max-width: 768px) {
  #books .book-type-tabs,
  #books .book-genre-pills {
    justify-content: flex-start !important;
  }

  #books .book-type-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  #books .book-type-tabs::-webkit-scrollbar {
    display: none;
  }



  #books .book-genre-pills {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 540px) {
  #books .book-cover-overlay {
    inset: 10px 10px auto 10px;
  }

  #books .book-cover-badge.book-status-badge,
  #books .book-cover-age.book-age-rating {
    min-height: 22px !important;
    padding: 4px 7px 3px !important;
    font-size: 9px !important;
  }

  #books .book-description {
    min-height: 0 !important;
  }
}

@media (max-width: 540px) {
  #about .section-header,
  #about .about-intro-header {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
  }

  #about .section-subtitle,
  #about .about-card p,
  #about .timeline-description {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #about .section-subtitle em {
    white-space: normal !important;
  }

  #about .about-records {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-count: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  #about .about-record,
  #about .about-record--reverse {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #about .about-record-photo,
  #about .about-record-text,
  #about .about-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #about .about-record-photo {
    width: min(100%, 248px) !important;
  }

#about .about-card {
    padding: 0 !important;
  }
}

/* === SECTION FILTER BUTTONS: mono typography everywhere === */
:where(
  .filter-tags,
  .reviews-filter,
  .encyclopedia-nav,
  .characters-filter,
  .articles-filter,
  .book-type-tabs,
  .book-genre-pills
) :where(button, a),
:where(.tag-pill, .enc-genre-pill) {
  font-family: var(--font-mono) !important;
  font-size: clamp(10.5px, 0.82vw, 12px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

:where(.tag-pill, .enc-genre-pill)::before,
:where(.tag-pill, .enc-genre-pill) > span:first-child {
  letter-spacing: 0 !important;
}

/* === SECTION-TINTED FOCUS RINGS: no global pink outline on tabs === */
:where(
  .filter-tags,
  .reviews-filter,
  .encyclopedia-nav,
  .characters-filter,
  .articles-filter,
  .book-type-tabs,
  .book-genre-pills
) :where(button, a):focus,
:where(
  .filter-tags,
  .reviews-filter,
  .encyclopedia-nav,
  .characters-filter,
  .articles-filter,
  .book-type-tabs,
  .book-genre-pills
) :where(button, a):focus-visible,
:where(.tag-pill, .enc-genre-pill, .char-dropdown-trigger):focus,
:where(.tag-pill, .enc-genre-pill, .char-dropdown-trigger):focus-visible {
  outline: none !important;
  border-color: rgba(var(--section-accent), 0.52) !important;
  box-shadow: 0 0 0 3px rgba(var(--section-accent), 0.22), 0 8px 18px rgba(var(--section-accent), 0.14) !important;
}

:where(
  .filter-tags,
  .reviews-filter,
  .encyclopedia-nav,
  .characters-filter,
  .articles-filter,
  .book-type-tabs,
  .book-genre-pills
) :where(button, a).active:focus,
:where(
  .filter-tags,
  .reviews-filter,
  .encyclopedia-nav,
  .characters-filter,
  .articles-filter,
  .book-type-tabs,
  .book-genre-pills
) :where(button, a).active:focus-visible,
:where(.tag-pill, .enc-genre-pill).active:focus,
:where(.tag-pill, .enc-genre-pill).active:focus-visible {
  border-color: transparent !important;
  box-shadow: 0 0 0 4px rgba(var(--section-accent), 0.24), 0 9px 20px rgba(var(--section-accent), 0.18) !important;
}

/* === PRELOADER SAFETY: never block the page forever === */
#preloader:not(.fade-out) {
  animation:
    gradient-breathe 8s ease infinite,
    preloader-auto-release 0.45s ease 4s forwards !important;
}

@keyframes preloader-auto-release {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* === FINAL POLISH PASS: faster start, denser contrast, calmer CTAs === */
#preloader {
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#preloader .loader-covers,
#loaderCovers {
  display: none !important;
}

#preloader:not(.fade-out) {
  animation:
    gradient-breathe 8s ease infinite,
    preloader-auto-release 0.35s ease 1.65s forwards !important;
}

:where(
  .section-subtitle,
  .audio-section-subtitle,
  .about-intro-subtitle,
  .about-bento-subtitle,
  .friends-subtitle,
  .hero-intro-copy,
  .book-description,
  .book-detail-lead,
  .audio-author,
  .audio-time,
  .podcast-desc,
  .article-excerpt,
  .review-card-text,
  .character-description
) {
  color: rgba(45, 41, 38, 0.78) !important;
  opacity: 1 !important;
}

:where(.section-eyebrow, .hero-modern .hero-chapter, .book-series, .book-coauthor, .article-category, .review-card-handle) {
  color: color-mix(in srgb, rgb(var(--section-accent)) 72%, #5B3D47) !important;
}

:where(.tag-pill, .enc-genre-pill) {
  background: rgba(var(--section-accent), 0.065) !important;
  border-color: rgba(var(--section-accent), 0.30) !important;
  color: rgba(31, 27, 24, 0.88) !important;
}

:where(.tag-pill, .enc-genre-pill):hover {
  background: rgba(var(--section-accent), 0.12) !important;
  border-color: rgba(var(--section-accent), 0.48) !important;
  box-shadow: 0 8px 18px rgba(var(--section-accent), 0.11) !important;
}

:where(.tag-pill, .enc-genre-pill).active {
  background: color-mix(in srgb, rgb(var(--section-accent)) 62%, #55404A) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(var(--section-accent), 0.18) !important;
}

#books .book-type-tabs { margin-bottom: 20px !important; }
#books .book-genre-pills { margin-bottom: 40px !important; }
#audio .filter-tags { margin-bottom: 48px !important; }
#encyclopedia .encyclopedia-nav { margin-bottom: 40px !important; }
#world .filter-tags { gap: var(--ui-radius-md) !important; margin-bottom: 40px !important; }

#books .book-type-tabs .tag-pill:not(.active),
#audio .filter-tags .tag-pill:not(.active),
#world .filter-tags .tag-pill:not(.active) {
  background: rgba(255, 255, 255, 0.36) !important;
}

:where(.btn:not(.btn-flagship), .buy-btn, .audio-listen-btn, .podcast-transcript-btn, .store-link, .expand-btn, .encyclopedia-book-btn, .enc-q-next) {
  min-height: 44px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

:where(.btn:not(.btn-flagship):not(.btn-outline), .buy-btn, .audio-listen-btn, .encyclopedia-book-btn, .enc-q-next) {
  background: color-mix(in srgb, rgb(var(--section-accent)) 64%, #563D48) !important;
  border: 1px solid color-mix(in srgb, rgb(var(--section-accent)) 56%, #563D48) !important;
  color: #fff !important;
}

:where(.btn-outline, .hero-secondary-cta, .podcast-transcript-btn, .store-link, .expand-btn) {
  background: rgba(255, 255, 255, 0.24) !important;
  border: 1px solid rgba(var(--section-accent), 0.45) !important;
  color: color-mix(in srgb, rgb(var(--section-accent)) 72%, #5B3D47) !important;
}

:where(.btn:not(.btn-flagship), .buy-btn, .audio-listen-btn, .podcast-transcript-btn, .store-link, .expand-btn, .encyclopedia-book-btn, .enc-q-next):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 9px 18px rgba(var(--section-accent), 0.13) !important;
}

#books .book-card {
  background: linear-gradient(180deg, rgba(255, 251, 247, 0.84), rgba(255, 251, 247, 0.68)) !important;
  border-color: rgba(var(--section-accent), 0.18) !important;
}

#books .book-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

#books .book-title {
  min-height: 2.45em;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

#books .book-description {
  min-height: 4.85em !important;
}

#books .book-actions--single,
#books .book-actions {
  margin-top: auto !important;
  padding-top: 16px !important;
}

#books .book-cover-badge.book-status-badge,
#books .book-cover-age.book-age-rating {
  font-size: 9.5px !important;
  letter-spacing: 0.07em !important;
  background: rgba(255, 251, 247, 0.82) !important;
}

.dark :where(
  .section-subtitle,
  .audio-section-subtitle,
  .about-intro-subtitle,
  .about-bento-subtitle,
  .friends-subtitle,
  .hero-intro-copy,
  .book-description,
  .book-detail-lead,
  .audio-author,
  .audio-time,
  .podcast-desc,
  .article-excerpt,
  .review-card-text,
  .character-description
) {
  color: rgba(232, 230, 226, 0.78) !important;
}

.dark :where(.tag-pill, .enc-genre-pill) {
  background: rgba(226, 184, 110, 0.08) !important;
  border-color: rgba(226, 184, 110, 0.28) !important;
  color: rgba(248, 245, 239, 0.86) !important;
}

.dark :where(.tag-pill, .enc-genre-pill).active {
  background: color-mix(in srgb, var(--rose) 70%, #322A32) !important;
  color: var(--bg-0) !important;
}

.dark #books .book-card {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(226, 143, 168, 0.16) !important;
}

@media (max-width: 760px) {
  :where(.container, .navbar-container) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  :where(.filter-tags, .reviews-filter, .encyclopedia-nav, .characters-filter, .articles-filter, .book-type-tabs, .book-genre-pills) {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    padding: 2px 2px 8px !important;
    margin-left: -2px !important;
    margin-right: -2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :where(.filter-tags, .reviews-filter, .encyclopedia-nav, .characters-filter, .articles-filter, .book-type-tabs, .book-genre-pills)::-webkit-scrollbar {
    display: none;
  }

  :where(.tag-pill, .enc-genre-pill, .buy-btn, .store-link, .expand-btn) {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
  }

  #books .book-card {
    max-width: min(100%, 348px) !important;
  }

  #books .book-title {
    min-height: 0 !important;
    font-size: clamp(19px, 5.6vw, 22px) !important;
    line-height: 1.15 !important;
  }

  #books .book-description {
    min-height: 0 !important;
  }

  :where(.section-subtitle, .audio-section-subtitle, .about-intro-subtitle, .about-bento-subtitle, .friends-subtitle) em {
    white-space: normal !important;
  }

  #home .hero-modern .hero-content {
    padding: 28px 18px !important;
  }
}

@media (max-width: 760px) {
  :where(.section-header, .audio-section-header, .book-detail-section-header, .about-intro-header, .about-bento-header, .friends-header, .encyclopedia-header) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  :where(.section-subtitle, .audio-section-subtitle, .about-intro-subtitle, .about-bento-subtitle, .friends-subtitle) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  :where(.section-subtitle, .audio-section-subtitle, .about-intro-subtitle, .about-bento-subtitle, .friends-subtitle) em {
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 760px) {
  :where(.page, .section, .container) {
    max-width: 100vw !important;
  }

  :where(.section-subtitle, .audio-section-subtitle, .about-intro-subtitle, .about-bento-subtitle, .friends-subtitle) {
    display: block !important;
    box-sizing: border-box !important;
    max-width: min(100%, 340px) !important;
    font-size: 15.5px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  :where(.filter-tags, .reviews-filter, .encyclopedia-nav, .characters-filter, .articles-filter, .book-type-tabs, .book-genre-pills) {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === UNIVERSAL BUTTON TYPOGRAPHY: one mono voice across all sections === */
:where(
  .btn,
  .btn-flagship,
  .btn-flagship *,
  .tag-pill,
  .tag-pill *,
  .enc-genre-pill,
  .enc-genre-pill *,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close,
  .podcast-transcript-close-bottom,
  .char-dropdown-trigger,
  .char-dropdown-item,
  .character-detail-btn,
  .quiz-card-go,
  .map-legend-item,
  .encyclopedia-book-btn,
  .encyclopedia-book-btn *,
  .enc-q-opt,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close,
  .footer-social-link,
  .social-link
) {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
}

:where(
  .btn,
  .btn-flagship,
  .btn-flagship *,
  .tag-pill,
  .enc-genre-pill,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close,
  .podcast-transcript-close-bottom,
  .char-dropdown-trigger,
  .char-dropdown-item,
  .character-detail-btn,
  .quiz-card-go,
  .map-legend-item,
  .encyclopedia-book-btn,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close
) {
  text-transform: uppercase !important;
}

.btn-flagship-line2 {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.enc-q-opt {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* Clickable book tiles use button semantics, but should keep book typography. */
:where(
  .enc-series-card,
  .enc-series-card *,
  .char-book-link,
  .char-book-link *
) {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   ВАРИАНТ 2: АКВАРЕЛЬНЫЕ КАПЛИ ПЫЛЬНОЙ РОЗЫ (ВЕРТИКАЛЬНЫЕ И ГОРИЗОНТАЛЬНЫЕ СТРЕЛКИ)
   ========================================================================== */

/* Общие стили для всех кнопок-стрелок (быстрая прокрутка + слайдеры + галереи) */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
) {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
  text-decoration: none !important;
  overflow: visible !important;
  isolation: isolate;
  border: 1px solid rgba(212, 130, 149, 0.28) !important;
  background: radial-gradient(circle at 35% 35%, rgba(255, 230, 238, 0.95), rgba(212, 130, 149, 0.65)) !important;
  color: #4A1B28 !important;
  box-shadow: 0 4px 14px rgba(212, 130, 149, 0.22) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease,
              background 0.28s ease,
              opacity 0.24s ease,
              visibility 0.24s ease !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0 !important;
}

/* Разрешаем отображение внутренних svg и span */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
) > :where(svg, span) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  pointer-events: none !important;
}

/* Отключаем устаревшие псевдоэлементы ::before и ::after */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
)::before,
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* SVG иконки стрелок */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
) svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

/* ТЁМНАЯ ТЕМА: Бархатные ягодные капли с золотом */
.dark :where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn,
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav,
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
) {
  background: radial-gradient(circle at 35% 35%, rgba(168, 64, 92, 0.70), rgba(74, 27, 40, 0.85)) !important;
  border-color: rgba(226, 184, 110, 0.40) !important;
  color: #F0CF8D !important;
  box-shadow: 0 0 16px rgba(168, 64, 92, 0.35) !important;
}

/* Ховер в светлой теме */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn
):hover {
  transform: translateY(-2px) scale(1.12) rotate(-2deg) !important;
  box-shadow: 0 6px 18px rgba(212, 130, 149, 0.28) !important;
}
:where(
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav
):hover {
  transform: translateY(-50%) scale(1.12) rotate(-2deg) !important;
  box-shadow: 0 6px 18px rgba(212, 130, 149, 0.28) !important;
}
:where(
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
):hover {
  transform: scale(1.12) rotate(-2deg) !important;
  box-shadow: 0 6px 18px rgba(212, 130, 149, 0.28) !important;
}

/* Ховер в тёмной теме */
.dark :where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn
):hover {
  border-color: rgba(226, 184, 110, 0.75) !important;
  box-shadow: 0 0 22px rgba(226, 184, 110, 0.45) !important;
}
.dark :where(
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav
):hover {
  border-color: rgba(226, 184, 110, 0.75) !important;
  box-shadow: 0 0 22px rgba(226, 184, 110, 0.45) !important;
}
.dark :where(
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
):hover {
  border-color: rgba(226, 184, 110, 0.75) !important;
  box-shadow: 0 0 22px rgba(226, 184, 110, 0.45) !important;
}

/* Нажатие (Active) */
:where(
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn,
  .scroll-step-btn
):active {
  transform: translateY(-2px) scale(0.95) !important;
}
:where(
  .gallery-nav,
  #gallery-prev,
  #gallery-next,
  .polaroid-nav,
  .lightbox-prev,
  .lightbox-next,
  .lightbox-nav,
  .ceremony-nav
):active {
  transform: translateY(-50%) scale(0.95) !important;
}
:where(
  .char-quote-prev,
  .char-quote-next,
  .enc-quote-prev,
  .enc-quote-next
):active {
  transform: scale(0.95) !important;
}

/* Позиционирование вертикальных кнопок быстрой прокрутки */
.scroll-step-btn,
#scrollAllTopBtn,
#scrollTopBtn,
#scrollDownBtn,
#scrollAllDownBtn {
  position: fixed !important;
  right: 30px !important;
  z-index: 2147483647 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(0.96) !important;
}
#scrollAllTopBtn { bottom: 216px !important; }
#scrollTopBtn { bottom: 154px !important; }
#scrollDownBtn { bottom: 92px !important; }
#scrollAllDownBtn { bottom: 30px !important; }

.scroll-step-btn.visible,
#scrollAllTopBtn.visible,
#scrollTopBtn.visible,
#scrollDownBtn.visible,
#scrollAllDownBtn.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Позиционирование горизонтальных стрелок галереи и слайдеров */
:where(.gallery-nav, #gallery-prev, #gallery-next) {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}
:where(#gallery-prev, .gallery-nav.prev) { left: 16px !important; }
:where(#gallery-next, .gallery-nav.next) { right: 16px !important; }
:where(.ceremony-nav) {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}
:where(.ceremony-nav.prev) { left: 18px !important; }
:where(.ceremony-nav.next) { right: 18px !important; }
@media (max-width: 760px) {
  :where(.ceremony-nav) {
    width: 40px !important;
    height: 40px !important;
  }
  :where(.ceremony-nav.prev) { left: 8px !important; }
  :where(.ceremony-nav.next) { right: 8px !important; }
}


:where(.polaroid-nav) {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 40px !important;
  height: 40px !important;
}
:where(.polaroid-nav.prev) { left: 8px !important; }
:where(.polaroid-nav.next) { right: 8px !important; }
:where(.polaroid-nav) svg { width: 16px !important; height: 16px !important; }

:where(.lightbox-prev, .lightbox-next, .lightbox-nav) {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10001 !important;
}
:where(.lightbox-prev, .lightbox-nav.lightbox-prev) { left: 24px !important; }
:where(.lightbox-next, .lightbox-nav.lightbox-next) { right: 24px !important; }

:where(.char-quote-prev, .char-quote-next, .enc-quote-prev, .enc-quote-next) {
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
}
:where(.char-quote-prev, .char-quote-next, .enc-quote-prev, .enc-quote-next) svg {
  width: 16px !important;
  height: 16px !important;
}

/* Двойные стрелки вверх/вниз */
.scroll-chevron--double {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.scroll-chevron--double svg {
  margin: -4px 0 !important;
}
.scroll-chevron--down svg {
  transform: rotate(180deg) !important;
}

@media (max-width: 768px) {
  .scroll-step-btn,
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  :where(.gallery-nav, #gallery-prev, #gallery-next) {
    width: 40px !important;
    height: 40px !important;
  }
  :where(#gallery-prev, .gallery-nav.prev) { left: 8px !important; }
  :where(#gallery-next, .gallery-nav.next) { right: 8px !important; }
}


/* === PREMIUM BOOK CARD HOVER: calm depth instead of a moving shine === */
.book-card {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease,
    background-color 0.32s ease,
    box-shadow 0.32s ease !important;
}

.book-card .book-cover img {
  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.46s ease !important;
}

.book-card .book-cover::after {
  content: '' !important;
  inset: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.20), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(45, 35, 40, 0.10) 100%) !important;
  opacity: 0.42 !important;
  transform: none !important;
  transition: opacity 0.32s ease !important;
}

.book-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(var(--section-accent), 0.32) !important;
  box-shadow:
    0 20px 42px rgba(55, 42, 47, 0.10),
    0 8px 22px rgba(var(--section-accent), 0.10) !important;
}

.book-card:hover .book-cover::after {
  left: 0 !important;
  opacity: 0.56 !important;
  transition: opacity 0.32s ease !important;
}

.book-card:hover .book-cover img {
  transform: scale(1.018) !important;
  filter: saturate(1.025) contrast(1.015) !important;
}

html:not(.dark) #books .book-card:hover {
  background: linear-gradient(180deg, rgba(255, 251, 247, 0.93), rgba(255, 251, 247, 0.78)) !important;
}

.dark #books .book-card:hover {
  background: linear-gradient(180deg, rgba(46, 16, 30, 0.90) 0%, rgba(26, 10, 18, 0.96) 100%) !important;
  border-color: rgba(226, 184, 110, 0.50) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(178, 43, 88, 0.25) !important;
}

.dark #books .book-card:hover .book-title {
  color: #FFFFFF !important;
}

.dark #books .book-card:hover .book-description {
  color: #EDE5D8 !important;
}

.dark #books .book-card:hover .book-series {
  color: #E2B86E !important;
}

.dark #books .book-card:hover .book-coauthor a {
  color: #F0CF8D !important;
}

@media (prefers-reduced-motion: reduce) {
  .book-card,
  .book-card .book-cover img,
  .book-card .book-cover::after {
    transition: none !important;
  }

  .book-card:hover,
  .book-card:hover .book-cover img {
    transform: none !important;
  }
}

/* === FINAL MONO FILTER BUTTONS: keep section pills in the interface voice === */
:where(
  #books,
  #audio,
  #world,
  #reviews,
  #articles,
  #encyclopedia
) :where(
  .filter-tags button.tag-pill,
  .book-type-tabs button.tag-pill,
  .book-genre-pills button.tag-pill,
  .reviews-filter button.tag-pill,
  .characters-filter button.tag-pill,
  .characters-filter button.enc-genre-pill,
  .encyclopedia-nav button.tag-pill,
  .encyclopedia-nav button.enc-genre-pill
),
:where(
  #books,
  #audio,
  #world,
  #reviews,
  #articles,
  #encyclopedia
) :where(
  .filter-tags button.tag-pill,
  .book-type-tabs button.tag-pill,
  .book-genre-pills button.tag-pill,
  .reviews-filter button.tag-pill,
  .characters-filter button.tag-pill,
  .characters-filter button.enc-genre-pill,
  .encyclopedia-nav button.tag-pill,
  .encyclopedia-nav button.enc-genre-pill
) :where(span, strong, em) {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

:where(
  #books,
  #audio,
  #world,
  #reviews,
  #articles,
  #encyclopedia
) :where(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .characters-filter, .encyclopedia-nav) .tag-pill-count {
  font-family: var(--font-mono) !important;
  letter-spacing: 0 !important;
}


/* Final button typography: all text controls use the same mono voice. */
:where(
  button:not(:where(
    .gallery-nav,
    .polaroid-nav,
    .lightbox-nav,
    .lightbox-close,
    .scroll-step-btn,
    .theme-toggle,
    .menu-toggle,
    .nav-close,
    .play-btn,
    .podcast-play-btn,
    .polaroid-video-play,
    .char-quote-prev,
    .char-quote-next,
    .enc-quote-prev,
    .enc-quote-next,
    .char-book-link,
    .char-neighbor-link
  )),
  .btn,
  .btn *,
  .hero-secondary-cta,
  .hero-audio-cta .cta-label,
  .hero-audio-cta .cta-time,
  .hero-audio-cta .cta-tooltip,
  .hero-award-medal-sub,
  .home-nav-link,
  .tag-pill,
  .tag-pill *,
  .enc-genre-pill,
  .enc-genre-pill *,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close-bottom,
  .char-dropdown-trigger,
  .char-dropdown-item,
  .character-detail-btn,
  .quiz-card-go,
  .encyclopedia-book-btn,
  .encyclopedia-book-btn *,
  .enc-q-opt,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close,
  .footer-social-link,
  .social-link,
  .nav-mobile-link .nml-text,
  .nav-mobile-link .nml-pill
) {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
}

/* Unified navigation arrows — one visual system across the entire site. */
:root {
  --arrow-control-size: 48px;
  --arrow-glyph-size: 18px;
  --arrow-glyph-stroke: 2.15px;
  --arrow-bg: linear-gradient(145deg, rgba(205, 147, 165, 0.94), rgba(181, 116, 139, 0.96));
  --arrow-bg-hover: linear-gradient(145deg, #c98299, #a85f78);
  --arrow-border: rgba(255, 255, 255, 0.5);
  --arrow-shadow: 0 8px 22px rgba(105, 65, 80, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --arrow-shadow-hover: 0 10px 26px rgba(105, 65, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

:where(
  button:not(:where(
    .gallery-nav,
    .polaroid-nav,
    .lightbox-nav,
    .lightbox-close,
    .scroll-step-btn,
    .theme-toggle,
    .menu-toggle,
    .nav-close,
    .play-btn,
    .podcast-play-btn,
    .polaroid-video-play,
    .char-quote-prev,
    .char-quote-next,
    .enc-quote-prev,
    .enc-quote-next,
    .char-book-link,
    .char-neighbor-link
  )),
  .btn,
  .hero-secondary-cta,
  .tag-pill,
  .enc-genre-pill,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close-bottom,
  .char-dropdown-trigger,
  .char-dropdown-item,
  .character-detail-btn,
  .quiz-card-go,
  .encyclopedia-book-btn,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close,
  .footer-social-link,
  .social-link,
  .home-nav-link
) {
  text-transform: uppercase !important;
}

:where(.enc-q-opt) {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* Books filters: explicit specificity beats older pill typography. */
#books .book-type-tabs .tag-pill,
#books .book-type-tabs .tag-pill *,
#books .book-genre-pills .tag-pill,
#books .book-genre-pills .tag-pill * {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

/* Encyclopedia filters: keep navigation pills/dropdowns in mono too. */
#encyclopedia .encyclopedia-nav .tag-pill,
#encyclopedia .encyclopedia-nav .tag-pill *,
#encyclopedia .encyclopedia-nav .enc-genre-pill,
#encyclopedia .encyclopedia-nav .enc-genre-pill *,
#encyclopedia .characters-filter .tag-pill,
#encyclopedia .characters-filter .tag-pill *,
#encyclopedia .characters-filter .enc-genre-pill,
#encyclopedia .characters-filter .enc-genre-pill *,
#encyclopedia .char-dropdown-trigger,
#encyclopedia .char-dropdown-trigger *,
#encyclopedia .char-dropdown-item,
#encyclopedia .char-dropdown-item * {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

/* World, articles and reviews filters: same explicit mono treatment. */
#world .filter-tags button.tag-pill,
#world .filter-tags button.tag-pill *,
#world .characters-filter button.tag-pill,
#world .characters-filter button.tag-pill *,
#world .characters-filter button.enc-genre-pill,
#world .characters-filter button.enc-genre-pill *,
#world .char-dropdown-trigger,
#world .char-dropdown-trigger *,
#world .char-dropdown-item,
#world .char-dropdown-item *,
#articles button.tag-pill,
#articles button.tag-pill *,
#articles .articles-filter button,
#articles .articles-filter button *,
#articles .btn,
#articles .btn *,
#reviews .reviews-filter button.tag-pill,
#reviews .reviews-filter button.tag-pill *,
#reviews .tag-pill-count {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

/* Designer pass: one polished pill language for every section control (Harmon Harmonized). */
#books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill,
#audio .filter-tags .tag-pill,
#world .filter-tags .tag-pill,
#world .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger),
#articles .articles-filter .tag-pill,
#articles #articles-cards-root :is(.tag-pill[data-page], .btn),
#reviews .reviews-filter .tag-pill,
#encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill),
#encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger) {
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(var(--section-accent), 0.28) !important;
  background: rgba(255, 255, 255, 0.70) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(11px, 0.76vw, 13px) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.065em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill:hover,
#audio .filter-tags .tag-pill:hover,
#world .filter-tags .tag-pill:hover,
#world .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger):hover,
#articles .articles-filter .tag-pill:hover,
#articles #articles-cards-root :is(.tag-pill[data-page], .btn):hover,
#reviews .reviews-filter .tag-pill:hover,
#encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill):hover,
#encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger):hover {
  transform: translateY(-1px) !important;
  border-color: rgba(var(--section-accent), 0.65) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 18px rgba(var(--section-accent), 0.15) !important;
}

#books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill.active,
#audio .filter-tags .tag-pill.active,
#world .filter-tags .tag-pill.active,
#world .characters-filter :is(.tag-pill, .enc-genre-pill).active,
#articles .articles-filter .tag-pill.active,
#articles #articles-cards-root .tag-pill.active[data-page],
#reviews .reviews-filter .tag-pill.active,
#encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill).active,
#encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill).active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #E2B86E 0%, #D4728C 100%) !important;
  color: #120E16 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(226, 184, 110, 0.40) !important;
}

#books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill :is(span, strong, em),
#audio .filter-tags .tag-pill :is(span, strong, em),
#world .filter-tags .tag-pill :is(span, strong, em),
#world .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger) :is(span, strong, em),
#articles .articles-filter .tag-pill :is(span, strong, em),
#articles #articles-cards-root :is(.tag-pill[data-page], .btn) :is(span, strong, em),
#reviews .reviews-filter .tag-pill :is(span, strong, em),
#encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill) :is(span, strong, em),
#encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger) :is(span, strong, em) {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

#books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill > span:first-child,
#audio .filter-tags .tag-pill > span:first-child,
#world .filter-tags .tag-pill > span:first-child,
#world .characters-filter :is(.tag-pill, .enc-genre-pill) > span:first-child,
#articles .articles-filter .tag-pill > span:first-child,
#reviews .reviews-filter .tag-pill > span:first-child,
#encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill) > span:first-child,
#encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill) > span:first-child {
  letter-spacing: 0 !important;
}

#world .char-dropdown-item,
#world .char-dropdown-item *,
#encyclopedia .char-dropdown-item,
#encyclopedia .char-dropdown-item * {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

:is(#books, #audio, #world, #articles, #reviews, #encyclopedia) .tag-pill-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.9em !important;
  height: 1.72em !important;
  padding: 0 0.55em !important;
  margin-left: 0.35em !important;
  border-radius: 999px !important;
  background: rgba(226, 184, 110, 0.16) !important;
  color: inherit !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82em !important;
  letter-spacing: 0 !important;
}

/* === SIGNATURE VELVET BERRY & GOLD TRIM FOR ALL PILLS & CONTROLS ACROSS ALL SECTIONS === */
/* Inactive: Глубокий бархатно-ягодный тон с благородным золотым кантом */
.dark :is(
  #books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill,
  #audio .filter-tags .tag-pill,
  #world .filter-tags .tag-pill,
  #world .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger),
  #articles .articles-filter .tag-pill,
  #articles #articles-cards-root :is(.tag-pill[data-page], .btn),
  #reviews .reviews-filter .tag-pill,
  #encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill),
  #encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger),
  .tag-pill,
  .enc-genre-pill
):not(.active) {
  background: rgba(46, 16, 30, 0.82) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.40) !important;
  color: #EDE5D8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Inactive Hover: Утеплённый ягодный бархат с сияющим золотым кантом */
.dark :is(
  #books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill,
  #audio .filter-tags .tag-pill,
  #world .filter-tags .tag-pill,
  #world .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger),
  #articles .articles-filter .tag-pill,
  #articles #articles-cards-root :is(.tag-pill[data-page], .btn),
  #reviews .reviews-filter .tag-pill,
  #encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill),
  #encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger),
  .tag-pill,
  .enc-genre-pill
):not(.active):hover {
  transform: translateY(-1px) !important;
  background: rgba(68, 24, 46, 0.94) !important;
  border-color: rgba(226, 184, 110, 0.85) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(226, 184, 110, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Active Pill: Роскошный насыщенный бархатно-ягодный градиент с золотым кантом */
.dark :is(
  #books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill,
  #audio .filter-tags .tag-pill,
  #world .filter-tags .tag-pill,
  #world .characters-filter :is(.tag-pill, .enc-genre-pill),
  #articles .articles-filter .tag-pill,
  #articles #articles-cards-root .tag-pill[data-page],
  #reviews .reviews-filter .tag-pill,
  #encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill),
  #encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill),
  .tag-pill,
  .enc-genre-pill
).active {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border: 1.5px solid #E2B86E !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.dark :is(
  #books :is(.book-type-tabs, .book-genre-pills, .filter-tags) .tag-pill,
  #audio .filter-tags .tag-pill,
  #world .filter-tags .tag-pill,
  #world .characters-filter :is(.tag-pill, .enc-genre-pill),
  #articles .articles-filter .tag-pill,
  #articles #articles-cards-root .tag-pill[data-page],
  #reviews .reviews-filter .tag-pill,
  #encyclopedia .encyclopedia-nav :is(.tag-pill, .enc-genre-pill),
  #encyclopedia .characters-filter :is(.tag-pill, .enc-genre-pill),
  .tag-pill,
  .enc-genre-pill
).active :is(span, strong, em) {
  color: #FFFFFF !important;
}

.dark :is(#books, #audio, #world, #articles, #reviews, #encyclopedia) .tag-pill-count,
.dark .tag-pill-count {
  background: rgba(226, 184, 110, 0.20) !important;
  color: #E2B86E !important;
  font-weight: 700 !important;
}

.dark :is(#books, #audio, #world, #articles, #reviews, #encyclopedia) .tag-pill.active .tag-pill-count,
.dark .tag-pill.active .tag-pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Dark hero title: warm white instead of blue. */
.dark #home .hero-modern .hero-title,
.dark #home .hero-modern .hero-title-name,
.dark #home .hero-modern .hero-title-surname {
  color: #f8f3ec !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.dark #home .hero-modern .hero-title-surname::after {
  background: linear-gradient(
    135deg,
    rgba(248, 243, 236, 0.34) 0%,
    rgba(255, 255, 255, 0.50) 45%,
    rgba(201, 180, 232, 0.32) 100%
  ) !important;
}

/* Dark audio cards: harmonious moon-blue/lavender palette, no warm gold clash. */
.dark #audio {
  --section-accent: 181, 137, 201;
  --audio-moon: #d4b2e8;
  --audio-lavender: #c75a7c;
  --audio-ink: #ffffff;
}

.dark #audio .audio-wave {
  color: rgba(181, 137, 201, 0.75) !important;
  filter: drop-shadow(0 0 10px rgba(181, 137, 201, 0.20));
}

.dark #audio .audio-player:hover .audio-wave {
  color: rgba(212, 108, 142, 0.95) !important;
}

.dark #audio .audio-time,
.dark #audio .audio-time span {
  color: #DDD4C8 !important;
}

.dark #audio .audio-listen-btn {
  background:
    linear-gradient(135deg, #c75a7c 0%, #8e3250 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 22px rgba(199, 90, 124, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.dark #audio .audio-listen-btn:hover,
.dark #audio .audio-listen-btn:focus-visible {
  background:
    linear-gradient(135deg, #d96a8d 0%, #a43859 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(199, 90, 124, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px) !important;
}

.dark #audio .audio-listen-btn svg {
  color: currentColor !important;
}

/* Dark article reading pass: calmer, book-like longform. */
.dark #article-detail-content .article-detail {
  --article-reader-text: rgba(244, 238, 229, 0.86);
  --article-reader-soft: rgba(244, 238, 229, 0.68);
  --article-reader-title: #f8f3ec;
  --article-reader-accent: #d39caf;
}

.dark #article-detail-content .article-detail-header {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(36px, 5vw, 58px) !important;
}

.dark #article-detail-content .article-detail-title {
  color: var(--article-reader-title) !important;
  text-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.dark #article-detail-content .article-detail-meta {
  color: var(--article-reader-soft) !important;
  opacity: 1 !important;
}

.dark #article-detail-content .article-content {
  max-width: min(760px, calc(100vw - 40px)) !important;
  font-size: clamp(17px, 1.08vw, 19px) !important;
  line-height: 1.84 !important;
  color: var(--article-reader-text) !important;
  text-rendering: optimizeLegibility;
}

.dark #article-detail-content .article-content p,
.dark #article-detail-content .article-content li {
  color: var(--article-reader-text) !important;
}

.dark #article-detail-content .article-content p {
  margin-bottom: 1.35em !important;
}

.dark #article-detail-content .article-content > p:first-of-type::first-letter,
.dark #article-detail-content .article-content > p:first-of-type:not(:has(em:first-child))::first-letter {
  float: none !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.dark #article-detail-content .article-content strong,
.dark #article-detail-content .article-content p strong {
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-decoration-break: initial !important;
  -webkit-box-decoration-break: initial !important;
  color: #f4e6dc !important;
  font-weight: 650 !important;
  padding: 0 0.03em !important;
  text-decoration: underline;
  text-decoration-color: rgba(211, 156, 175, 0.42);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.dark #article-detail-content .article-content em {
  color: rgba(244, 238, 229, 0.78) !important;
}

.dark #article-detail-content .article-content h1,
.dark #article-detail-content .article-content h2,
.dark #article-detail-content .article-content h3 {
  color: var(--article-reader-title) !important;
  line-height: 1.18 !important;
  margin-top: clamp(34px, 4.2vw, 52px) !important;
  margin-bottom: 0.55em !important;
  text-shadow: none !important;
}

.dark #article-detail-content .article-content h2 {
  font-size: clamp(25px, 2.5vw, 34px) !important;
}

.dark #article-detail-content .article-content h3 {
  font-size: clamp(21px, 2vw, 27px) !important;
}

.dark #article-detail-content .article-content h2::before {
  width: 46px !important;
  height: 2px !important;
  margin-bottom: 14px !important;
  background: rgba(211, 156, 175, 0.52) !important;
}

.dark #article-detail-content .article-content blockquote {
  background: rgba(255, 255, 255, 0.035) !important;
  border-left-color: rgba(211, 156, 175, 0.45) !important;
  color: rgba(244, 238, 229, 0.84) !important;
}

.dark #article-detail-content .article-content hr {
  border-top-color: rgba(211, 156, 175, 0.28) !important;
  background: rgba(211, 156, 175, 0.28) !important;
  margin: clamp(34px, 4vw, 48px) 0 !important;
}

.dark #article-detail-content .article-content hr::after {
  background: var(--bg-0) !important;
  color: rgba(211, 156, 175, 0.62) !important;
}

@media (max-width: 700px) {
  .dark #article-detail-content .article-content {
    max-width: min(100%, calc(100vw - 28px)) !important;
    font-size: 16.5px !important;
    line-height: 1.78 !important;
  }

  .dark #article-detail-content .article-content h2::before {
    margin-bottom: 12px !important;
  }
}

/* ========================================================================== 
   COMPONENT SYSTEM — canonical tokens and shared component behaviour
   ========================================================================== */
:root {
  --ui-radius-sm: 10px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 22px;
  --ui-radius-pill: 999px;
  --ui-control-height: 46px;
  --ui-control-pad-x: 22px;
  --ui-gap-xs: 8px;
  --ui-gap-sm: 12px;
  --ui-gap-md: 20px;
  --ui-gap-lg: 32px;
  --ui-border: color-mix(in srgb, rgb(var(--section-accent, 200 135 155)) 26%, #d9cbd2);
  --ui-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 251, 247, 0.5));
  --ui-shadow-sm: 0 8px 20px rgba(79, 53, 63, 0.07);
  --ui-shadow-md: 0 16px 40px rgba(79, 53, 63, 0.11);
  --ui-shadow-hover: 0 20px 48px rgba(79, 53, 63, 0.16);
  --ui-focus: rgba(168, 95, 120, 0.78);
  --ui-transition: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root.dark,
.dark {
  --ui-surface: rgba(32, 14, 24, 0.85) !important;
  --ui-surface-strong: rgba(46, 16, 30, 0.95) !important;
  --ui-surface-tint: rgba(178, 43, 88, 0.12) !important;
  --ui-border: rgba(226, 184, 110, 0.28) !important;
  --ui-border-accent: rgba(226, 184, 110, 0.45) !important;
}

/* Primary and secondary actions. */
:where(
  .btn,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close-bottom,
  .character-detail-btn,
  .quiz-card-go,
  .encyclopedia-book-btn,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-height) !important;
  padding: 0 var(--ui-control-pad-x) !important;
  border-radius: var(--ui-radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ui-gap-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(11px, 0.76vw, 13px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.065em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: transform var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), color var(--ui-transition) !important;
}

:where(
  .btn,
  .buy-btn,
  .store-link,
  .expand-btn,
  .audio-listen-btn,
  .podcast-transcript-btn,
  .podcast-transcript-close-bottom,
  .character-detail-btn,
  .quiz-card-go,
  .encyclopedia-book-btn,
  .enc-q-next,
  .enc-q-buy,
  .enc-q-restart,
  .fortune-cookie-close
):hover {
  transform: translateY(-1px) !important;
}

/* Articles: Dark Mode Polish */
:is(html.dark, :root.dark, body.dark, .dark) #articles .articles-filter .tag-pill:not(.active) {
  background: rgba(28, 22, 36, 0.75) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.22) !important;
  color: #DDD5C9 !important;
}

/* Filter controls share one geometry and spacing rhythm. */
:where(
  .filter-tags,
  .book-type-tabs,
  .book-genre-pills,
  .reviews-filter,
  .articles-filter,
  .characters-filter
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ui-gap-sm) !important;
}

:where(.tag-pill, .enc-genre-pill, .char-dropdown-trigger) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-height) !important;
  padding: 0 var(--ui-control-pad-x) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), color var(--ui-transition) !important;
}

:where(.tag-pill, .enc-genre-pill, .char-dropdown-trigger):hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, rgb(var(--section-accent, 200 135 155)) 54%, #bdaab2) !important;
  box-shadow: 0 11px 26px rgba(79, 53, 63, 0.11) !important;
}

:where(.tag-pill, .enc-genre-pill).active {
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(var(--section-accent, 200 135 155), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* Cards: consistent surface, radius, border and lift. */
:where(.book-card, .audio-player, .podcast-card, .review-card-modern, .article-card, .character-card) {
  box-sizing: border-box !important;
  border-radius: var(--ui-radius-lg) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-md) !important;
  overflow: clip;
  transition: transform var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition) !important;
}

:where(.book-card, .audio-player, .podcast-card, .review-card-modern, .article-card, .character-card):hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, rgb(var(--section-accent, 200 135 155)) 42%, #c8b6be) !important;
  box-shadow: var(--ui-shadow-hover) !important;
}

/* Dialogs and lightboxes use the same overlay and panel language. */
:where(.lightbox, .fortune-cookie-overlay, #video-lightbox) {
  background: rgba(24, 18, 22, 0.78) !important;
  backdrop-filter: blur(10px) saturate(0.9) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.9) !important;
}

:where(.lightbox-content, .fortune-cookie-card, #video-lightbox > div) {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: 0 26px 80px rgba(12, 8, 10, 0.34) !important;
  overflow: hidden !important;
}

/* One accessible focus treatment for every interactive component. */
:where(
  button,
  a,
  [role="button"],
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}

:where(button, a, [role="button"]):active {
  transition-duration: 70ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, [role="button"], .book-card, .audio-player, .podcast-card, .review-card-modern, .article-card, .character-card) {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Encyclopedia series selector: full-width horizontal responsive grid. */
#encyclopedia .encyclopedia-nav {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 32px !important;
}

#encyclopedia #enc-series-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 14px !important;
}

/* Accessibility: WCAG AA contrast for small hero labels and the primary CTA. */
#home .hero-modern .btn-flagship {
  background: linear-gradient(135deg, #a45d72, #914b62) !important;
  border-color: rgba(116, 49, 72, 0.42) !important;
}

#home .hero-modern .btn-flagship:hover {
  background: linear-gradient(135deg, #934e65, #803e55) !important;
}

#home .hero-modern .btn-flagship-line1,
#home .hero-modern .btn-flagship-line2 {
  color: #fff !important;
  opacity: 1 !important;
}

#home-about-teaser-anchor .mono-label {
  color: #855066 !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   PERFECT QUOTE SLIDER ARROWS & DOTS (Characters & Encyclopedia)
   ========================================================================== */
/* Smooth dots */
.char-quote-dots,
.enc-quote-dots {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

.char-quote-dot,
.enc-quote-dot {
  display: inline-block !important;
  height: 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.char-quote-dot:hover,
.enc-quote-dot:hover {
  transform: scale(1.2) !important;
}

/* Dark mode */


/* ==========================================================================
   ARTICLES SECTION: ELEGANT VELVET ROSE (No muddy brick/terracotta)
   ========================================================================== */
#articles {
  --section-accent: 212, 108, 142 !important;
}

#articles .articles-filter .tag-pill.active,
#articles #articles-cards-root .tag-pill.active[data-page] {
  border-color: transparent !important;
  background: linear-gradient(135deg, #c75a7c 0%, #a43e60 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(199, 90, 124, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

:root:not(.dark) #articles .articles-filter .tag-pill:not(.active) {
  background: color-mix(in srgb, #d46c8e 7%, #ffffff) !important;
  border: 1.5px solid color-mix(in srgb, #d46c8e 26%, #dfd2d7) !important;
  color: #57293a !important;
}

:root:not(.dark) #articles .articles-filter .tag-pill:not(.active):hover {
  background: color-mix(in srgb, #d46c8e 16%, #ffffff) !important;
  border-color: color-mix(in srgb, #d46c8e 50%, transparent) !important;
  color: #381221 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(212, 108, 142, 0.16) !important;
}

#articles .article-category {
  color: #b5456b !important;
  background: rgba(212, 108, 142, 0.12) !important;
}

#articles .article-read-pill {
  color: #b5456b !important;
  background: rgba(212, 108, 142, 0.10) !important;
  border: 1px solid rgba(212, 108, 142, 0.35) !important;
}

#articles .article-card:hover .article-read-pill {
  background: linear-gradient(135deg, #c75a7c 0%, #a43e60 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(199, 90, 124, 0.35) !important;
}

#articles .article-card:hover {
  border-color: rgba(212, 108, 142, 0.45) !important;
  box-shadow: 0 16px 36px rgba(212, 108, 142, 0.15) !important;
}

/* Articles: Dark Mode Polish */
/* 4. Filter Pills in Dark Mode across all sections (Signature Velvet Berry & Gold Trim) */
.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill):not(.active) {
  background: rgba(46, 16, 30, 0.82) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.40) !important;
  color: #EDE5D8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill):not(.active):hover {
  background: rgba(68, 24, 46, 0.94) !important;
  border-color: rgba(226, 184, 110, 0.85) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(226, 184, 110, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill).active {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 1.5px solid #E2B86E !important;
  box-shadow: 0 4px 20px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill).active * {
  color: #FFFFFF !important;
}

.dark .tag-pill-count {
  background: rgba(226, 184, 110, 0.20) !important;
  color: #E2B86E !important;
}

.dark .tag-pill.active .tag-pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* 5. Encyclopedia Cards in Dark Mode */
.dark .enc-section-card {
  background: #181422 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.dark .enc-section-card:hover {
  border-color: rgba(var(--section-accent), 0.5) !important;
  background: #1E192B !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

:is(html.dark, :root.dark, body.dark, .dark) #articles .article-category {
  color: #fca5bc !important;
  background: rgba(212, 108, 142, 0.2) !important;
}

:is(html.dark, :root.dark, body.dark, .dark) #articles .article-read-pill {
  color: #fca5bc !important;
  background: rgba(212, 108, 142, 0.16) !important;
  border-color: rgba(212, 108, 142, 0.45) !important;
}

/* ==========================================================================
   ABOUT SECTION: DEDICATED VIDEO CONTAINER UNDER POLAROID
   ========================================================================== */
.about-video-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--card-bg, #ffffff) !important;
  border: 1.5px solid color-mix(in srgb, var(--rose-deep, #c8879b) 32%, var(--border, #e5d8dc)) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  box-shadow: 0 8px 24px rgba(96, 58, 72, 0.10) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.24s ease,
              border-color 0.24s ease !important;
  overflow: hidden !important;
}

.about-video-container:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: var(--rose-deep, #c8879b) !important;
  box-shadow: 0 12px 28px rgba(96, 58, 72, 0.20) !important;
}

.about-video-preview {
  position: relative !important;
  width: 100% !important;
  height: 110px !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.about-video-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(20, 10, 15, 0.25) 0%, rgba(20, 10, 15, 0.65) 100%) !important;
  transition: background 0.2s ease !important;
}

.about-video-container:hover .about-video-scrim {
  background: linear-gradient(180deg, rgba(20, 10, 15, 0.15) 0%, rgba(20, 10, 15, 0.50) 100%) !important;
}

.about-video-play-button {
  position: relative !important;
  z-index: 2 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e87b99 0%, #c45377 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 18px rgba(196, 83, 119, 0.45) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.about-video-container:hover .about-video-play-button {
  transform: scale(1.12) !important;
}

.about-video-play-wave {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(232, 123, 153, 0.6) !important;
  animation: about-video-wave 2s infinite ease-out !important;
}

@keyframes about-video-wave {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.about-video-badge {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  padding: 3px 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 6px !important;
}

.about-video-meta {
  padding: 2px 4px 4px !important;
  text-align: left !important;
}

.about-video-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
}

.about-video-desc {
  font-size: 11.5px !important;
  color: var(--ink) !important;
  opacity: 0.68 !important;
  line-height: 1.35 !important;
}

.dark .about-video-container {
  background: rgba(30, 25, 35, 0.85) !important;
  border-color: rgba(232, 123, 153, 0.25) !important;
}

/* ==========================================================================
   QUIZ ENGINE REFINEMENTS: MODE TOGGLES, CONFETTI & SHARING
   ========================================================================== */
.enc-quiz-mode-pill {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.enc-quiz-mode-pill:hover:not(.active) {
  opacity: 1 !important;
  background: rgba(var(--section-accent), 0.16) !important;
}

.enc-quiz-mode-pill.active {
  box-shadow: 0 4px 14px rgba(var(--section-accent), 0.35) !important;
}

.enc-q-opt {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

.enc-q-opt:hover:not(:disabled) {
  transform: translateX(4px) !important;
  box-shadow: 0 4px 14px rgba(var(--section-accent), 0.12) !important;
}




/* ==========================================================================
   FINAL DARK THEME HARMONY & POLISH (LUXURY LITERARY AESTHETICS)
   Cozy candlelit velvet palette — zero harsh eye-gouging cyan or glare
   ========================================================================== */

/* 1. Universal Dark Body & Section Backgrounds */
:root.dark,
html.dark,
body.dark {
  background-color: #0D0B12 !important;
  color: #F5EFE6 !important;
}

.dark :where(#home, #books, #audio, #world, #encyclopedia, #articles, #reviews, #about) {
  background-color: transparent !important;
}

/* 2. Character & Book Detail Pages in Dark Mode */
.dark #character-detail-content,
.dark #book-detail-content {
  color: #F5EFE6;
}

.dark #character-detail-content .card,
.dark #book-detail-content .card,
.dark .char-quotes-track {
  background: #181422 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.dark .char-quotes-track {
  background: linear-gradient(135deg, rgba(var(--section-accent), 0.12), rgba(var(--section-accent), 0.05)) !important;
  border-color: rgba(var(--section-accent), 0.28) !important;
}

/* Trait Tags in Character Detail: Soft Pastel Legible Colors */
.dark #character-detail-content span[style*="border-radius: 999px"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F5EFE6 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.dark #character-detail-content div[style*="border-left: 3px solid rgba(0,0,0"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-left-color: rgba(255, 255, 255, 0.25) !important;
}

/* 3. Book Mini Characters on Book Detail Page */
.dark .character-mini {
  background: #181422 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.dark .character-mini:hover {
  border-color: rgba(var(--section-accent), 0.5) !important;
  background: #1F192B !important;
}

.dark .character-mini-name {
  color: #F5EFE6 !important;
}

.dark .character-mini-role {
  color: #B8ADA1 !important;
}

/* 4. Filter Pills in Dark Mode across all sections (Harmon Color Wheel) */
.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill):not(.active) {
  background: rgba(28, 22, 36, 0.75) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.22) !important;
  color: #DDD5C9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill):not(.active):hover {
  background: rgba(45, 34, 56, 0.90) !important;
  border-color: rgba(226, 184, 110, 0.60) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(226, 184, 110, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill).active {
  background: linear-gradient(135deg, #E2B86E 0%, #D4728C 100%) !important;
  color: #120E16 !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(240, 207, 141, 0.95) !important;
  box-shadow: 0 4px 18px rgba(226, 184, 110, 0.45), 0 2px 6px rgba(212, 114, 140, 0.30) !important;
}

.dark :is(.filter-tags, .book-type-tabs, .book-genre-pills, .reviews-filter, .articles-filter, .encyclopedia-nav, .characters-filter) :is(.tag-pill, .enc-genre-pill).active * {
  color: #120E16 !important;
}

.dark .tag-pill-count {
  background: rgba(226, 184, 110, 0.16) !important;
  color: #E2B86E !important;
}

.dark .tag-pill.active .tag-pill-count {
  background: rgba(18, 14, 22, 0.25) !important;
  color: #120E16 !important;
}

/* 5. Encyclopedia Cards in Dark Mode */
.dark .enc-section-card {
  background: #181422 !important;
  border: 1px solid rgba(226, 184, 110, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.dark .enc-section-card:hover {
  border-color: rgba(226, 184, 110, 0.55) !important;
  background: #1E192B !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

/* 6. Quiz Modal & Blitz in Dark Mode */
.dark .enc-quiz-wrap,
.dark .enc-quiz-card {
  background: #181422 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

.dark .enc-q-opt {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.10) !important;
  color: #E2DBD2 !important;
}

.dark .enc-q-opt:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(var(--section-accent), 0.5) !important;
  color: #FFFFFF !important;
}

.dark .enc-q-opt.enc-q-correct {
  background: rgba(78, 175, 124, 0.18) !important;
  border-color: rgba(78, 175, 124, 0.6) !important;
  color: #A3E4C1 !important;
}

.dark .enc-q-opt.enc-q-wrong {
  background: rgba(235, 87, 87, 0.18) !important;
  border-color: rgba(235, 87, 87, 0.6) !important;
  color: #FFA3A3 !important;
}

.dark .enc-q-feedback {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F5EFE6 !important;
}

/* 7. Toast & Dialogues */
.dark .toast {
  background: #1F192B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F5EFE6 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}


/* Universal Dark Form Inputs & Textareas */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  background-color: #181422 !important;
  color: #F5EFE6 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus,
.dark textarea:focus,
.dark select:focus {
  border-color: rgba(var(--section-accent), 0.65) !important;
  box-shadow: 0 0 0 3px rgba(var(--section-accent), 0.25) !important;
  outline: none !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #8C8278 !important;
  opacity: 0.8 !important;
}

/* Scrolled Navbar in Dark Mode */
.dark .navbar.scrolled {
  background: rgba(13, 11, 18, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Reviews in Dark Mode: Rich Literary Cards */
.dark .review-card-modern {
  background: #181422 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}

.dark .review-card-modern:hover {
  border-color: rgba(226, 143, 168, 0.45) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(226, 143, 168, 0.2) !important;
  transform: translateY(-3px) !important;
}

.dark .review-card-text {
  color: #DDD4C8 !important;
}

.dark .review-card-name {
  color: #F5EFE6 !important;
}

.dark .review-card-handle {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #E2B86E !important;
}

.dark .review-card-date {
  color: #8C8278 !important;
}


/* ==========================================================================
   HARMON'S COLOR WHEEL: LUXURY MASTER HARMONY (ANTI-AI & NO-GLARE)
   Obsidian Velvet (#0D0B12) + Champagne Gold (#E2B86E) + Velvet Rose (#D4728C)
   ========================================================================== */

/* --- 1. Anti-Glare Warm Typography (Eliminates blinding white in dark mode) --- */
:root.dark, html.dark, body.dark {
  background-color: #0D0B12 !important;
  color: #CDC5BA !important;
}

.dark h1, .dark h2, .dark h3, .dark h4,
.dark .hero-title,
.dark .section-title,
.dark .book-title,
.dark .article-title,
.dark .review-hero-name {
  color: #EFE9DF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}

.dark p, .dark .hero-intro-copy, .dark .footer-bio {
  color: #CDC5BA !important;
}

.dark strong, .dark b {
  color: #EFE9DF !important;
  font-weight: 700 !important;
}

/* --- 2. Hero Section: Exquisite Underline & Crystal Lettering (No Muddy Boxes!) --- */
.dark #home .hero-modern .hero-title-sticker {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dark #home .hero-modern .hero-title-sticker::after {
  display: none !important;
  content: none !important;
}

.dark #home .hero-modern .hero-title-name {
  color: #EFE9DF !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

.dark #home .hero-modern .hero-title-surname {
  color: #EFE9DF !important;
  position: relative !important;
  background: transparent !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

.dark #home .hero-modern .hero-title-surname::after {
  content: "" !important;
  position: absolute !important;
  left: 0.04em !important;
  right: 0.04em !important;
  bottom: -0.05em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  opacity: 0.95 !important;
  box-shadow: 0 0 12px rgba(226, 184, 110, 0.55) !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}

.dark #home .hero-modern .hero-chapter {
  color: #E2B86E !important;
  letter-spacing: 0.12em !important;
}

.dark #home .hero-modern .hero-chapter::before {
  background: linear-gradient(90deg, transparent, #E2B86E) !important;
}

.dark #home .hero-modern .hero-chapter::after {
  background: linear-gradient(90deg, #E2B86E, transparent) !important;
}

.dark #home .hero-modern .hero-content {
  background:
    radial-gradient(circle at 15% 0%, rgba(226, 184, 110, 0.08), transparent 35%),
    radial-gradient(circle at 88% 15%, rgba(212, 114, 140, 0.08), transparent 35%),
    linear-gradient(135deg, rgba(22, 18, 30, 0.96), rgba(18, 14, 24, 0.92)) !important;
  border: 1px solid rgba(226, 184, 110, 0.20) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

/* --- 3. Hero CTA Buttons: Velvet Berry & Champagne Gold (No Muddy Mauve) --- */
.dark #home .hero-modern .btn-flagship {
  background: linear-gradient(135deg, #A8435C 0%, #7E283E 100%) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.4) !important;
  color: #FFF8F2 !important;
  box-shadow: 0 8px 24px rgba(126, 40, 62, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark #home .hero-modern .btn-flagship:hover {
  background: linear-gradient(135deg, #BD4F6A 0%, #913148 100%) !important;
  border-color: rgba(226, 184, 110, 0.75) !important;
  box-shadow: 0 12px 32px rgba(126, 40, 62, 0.6), 0 0 18px rgba(226, 184, 110, 0.35) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.dark #home .hero-modern .hero-secondary-cta {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.4) !important;
  color: #EFE9DF !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark #home .hero-modern .hero-secondary-cta:hover {
  background: rgba(226, 184, 110, 0.12) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(226, 184, 110, 0.3) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* --- 4. Stats Counter: Unified Champagne-Gold Harmony (No Clashing Candies!) --- */
.dark section:has(#stats-counter),
.dark #stats-counter {
  background: transparent !important;
}

.dark #stats-counter .counter-num,
.dark #visitors-counter,
.dark #cnt-books,
.dark #cnt-articles,
.dark #cnt-reviews {
  background: linear-gradient(135deg, #F0CF8D 0%, #E2B86E 50%, #D4728C 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 12px rgba(226, 184, 110, 0.3)) !important;
}

.dark #stats-counter .stat-label,
.dark #stats-counter span[style*="font-family: var(--font-mono)"] {
  color: #A39B90 !important;
  opacity: 0.88 !important;
  letter-spacing: 0.08em !important;
}

.dark #stats-counter .stat-card {
  transition: transform 0.25s ease !important;
}

.dark #stats-counter .stat-card:hover {
  transform: translateY(-2px) !important;
}

.dark #stats-counter .stat-card:hover .counter-num {
  filter: drop-shadow(0 4px 18px rgba(226, 184, 110, 0.55)) !important;
}

/* --- 5. Awards Strip: Harmonious Badges & Cards --- */
.dark .hero-awards-strip {
  background: transparent !important;
}

.dark .hero-awards-strip-label {
  color: #E2B86E !important;
  letter-spacing: 0.15em !important;
  opacity: 0.9 !important;
}

.dark .hero-award-medal {
  background: #161220 !important;
  border: 1.5px solid rgba(226, 184, 110, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark .hero-award-medal:hover {
  background: #1E182A !important;
  border-color: rgba(226, 184, 110, 0.55) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 16px rgba(226, 184, 110, 0.2) !important;
}

.dark .hero-award-medal-title {
  color: #EFE9DF !important;
}

.dark .hero-award-medal-sub {
  color: #A39B90 !important;
  border-top-color: rgba(226, 184, 110, 0.18) !important;
}

.dark .hero-award-medal--gold .hero-award-medal-icon {
  background: rgba(226, 184, 110, 0.18) !important;
  color: #E2B86E !important;
  border: 1px solid rgba(226, 184, 110, 0.45) !important;
}

.dark .hero-award-medal--rose .hero-award-medal-icon {
  background: rgba(212, 114, 140, 0.18) !important;
  color: #D4728C !important;
  border: 1px solid rgba(212, 114, 140, 0.45) !important;
}

.dark .hero-award-medal--sage .hero-award-medal-icon {
  background: rgba(146, 201, 177, 0.18) !important;
  color: #92C9B1 !important;
  border: 1px solid rgba(146, 201, 177, 0.45) !important;
}

.dark .hero-award-medal--violet .hero-award-medal-icon {
  background: rgba(168, 140, 204, 0.18) !important;
  color: #B296D8 !important;
  border: 1px solid rgba(168, 140, 204, 0.45) !important;
}

/* --- 6. Author Section (Screenshot 2): Glowing Golden Underline & Bullets --- */
.dark #home-about-teaser-anchor h2,
.dark .home-about-teaser-section h2,
.dark #home h2[style*="От путешествий"] {
  color: #EFE9DF !important;
}

.dark .mono-label {
  color: #E2B86E !important;
  letter-spacing: 0.15em !important;
}

/* Bullets: Champagne gold glowing dots instead of random purple */
.dark div[style*="flex: 1; text-align: left"] span[style*="border-radius: 50%"] {
  background: #E2B86E !important;
  box-shadow: 0 0 10px rgba(226, 184, 110, 0.6) !important;
}

.dark div[style*="flex: 1; text-align: left"] p {
  color: #CDC5BA !important;
}

.dark div[style*="flex: 1; text-align: left"] p strong {
  color: #EFE9DF !important;
}

/* Vertical divider beside author photo */
.dark div[style*="height: 400px"][style*="linear-gradient"] {
  background: linear-gradient(to bottom, transparent, rgba(226, 184, 110, 0.5), transparent) !important;
}

/* Rainbow divider: subtle royal gold-rose-plum shimmer in dark mode */
.dark div[style*="gradient-shift"] {
  background: linear-gradient(90deg, #E2B86E, #D4728C, #8A72A6, #E2B86E) !important;
  opacity: 0.35 !important;
}

/* --- 7. Footer (Screenshot 3): Luxury Anti-Glare Dark Mode --- */
.dark .footer {
  background: #0A080F !important;
  border-top: 1px solid rgba(226, 184, 110, 0.16) !important;
  color: #CDC5BA !important;
  box-shadow: none !important;
}

.dark .footer-bio {
  color: #B8AFA3 !important;
  line-height: 1.75 !important;
}

.dark .footer-section h3 {
  color: #E2B86E !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
}

.dark .footer-link {
  color: #CDC5BA !important;
}

.dark .footer-link:hover {
  color: #E2B86E !important;
  text-shadow: 0 0 10px rgba(226, 184, 110, 0.4) !important;
  transform: translateX(4px) !important;
}

.dark .footer-brand-title {
  color: #E2B86E !important;
}

.dark .footer-brand-sub {
  color: #A39B90 !important;
}

.dark .footer-social-link,
.dark .social-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(226, 184, 110, 0.22) !important;
  color: #EFE9DF !important;
  transition: all 0.25s ease !important;
}

.dark .footer-social-link:hover,
.dark .social-link:hover {
  background: rgba(226, 184, 110, 0.18) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.35) !important;
  transform: translateY(-2px) !important;
}


/* --- Unified Master Title Underlines: Glowing Champagne Gold to Velvet Rose --- */
.dark :is(.section-title, .audio-section-title, .about-intro-title, .friends-title, .loader-text)::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0.04em !important;
  right: 0.04em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 42%, #B22B58 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 8px rgba(178, 43, 88, 0.40) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}


/* --- Brand Identity Protection: Author Heart Logo is ALWAYS Signature Dusty Rose --- */
.logo-circle,
.dark .logo-circle {
  background: linear-gradient(135deg, #D48295 0%, #E8AAB8 100%) !important;
  box-shadow: 0 4px 16px rgba(212, 130, 149, 0.45) !important;
}

.logo-circle svg path[fill="var(--rose)"],
.dark .logo-circle svg path[fill="var(--rose)"],
.logo-circle svg path:nth-of-type(2),
.dark .logo-circle svg path:nth-of-type(2) {
  fill: #B85570 !important;
}


/* ==========================================================================
   ENCYCLOPEDIA CHARACTER MINI CARDS: HARMON'S COLOR HARMONY
   Unified luxury slate velvet background + gold badge & interactive CTA
   No muddy olive, swamp khaki, or clash of discordant pastel washes!
   ========================================================================== */
.dark .encyclopedia-characters {
  background: #130F1C !important;
  border: 1px solid rgba(226, 184, 110, 0.16) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5) !important;
}

.dark .enc-char-mini-card,
.dark .encyclopedia-characters ul li {
  background: #181424 !important;
  border: 1.5px solid rgba(226, 184, 110, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  color: #CDC5BA !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark .enc-char-mini-card:not(.enc-char-mini-card--static):hover,
.dark .encyclopedia-characters ul li:not(.enc-char-mini-card--static):hover {
  background: #211B30 !important;
  border-color: rgba(226, 184, 110, 0.6) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(226, 184, 110, 0.22) !important;
  transform: translateY(-2px) !important;
}

.enc-char-mini-card--static {
  cursor: default !important;
}

.enc-char-mini-card--static:hover {
  transform: none !important;
  box-shadow: none !important;
}

.dark .enc-char-mini-card--static,
.dark .encyclopedia-characters ul li.enc-char-mini-card--static {
  cursor: default !important;
}

.dark .enc-char-mini-card--static:hover,
.dark .encyclopedia-characters ul li.enc-char-mini-card--static:hover {
  background: #181424 !important;
  border-color: rgba(226, 184, 110, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  transform: none !important;
}

.dark .enc-char-mini-card strong,
.dark .encyclopedia-characters ul li strong {
  color: #EFE9DF !important;
  font-size: 15.5px !important;
  letter-spacing: -0.01em !important;
}

.dark .enc-char-mini-card span[style*="opacity: 0.75"],
.dark .encyclopedia-characters ul li span[style*="opacity: 0.75"] {
  color: #B8AFA3 !important;
  opacity: 0.92 !important;
}

.dark .enc-char-mini-card .enc-char-more,
.dark .encyclopedia-characters ul li span[style*="text-transform: uppercase"] {
  color: #E2B86E !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  display: inline-block !important;
  margin-top: 6px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.dark .enc-char-mini-card:hover .enc-char-more,
.dark .encyclopedia-characters ul li:hover span[style*="text-transform: uppercase"] {
  color: #F0CF8D !important;
  transform: translateX(3px) !important;
}

.dark .enc-char-emoji,
.dark .encyclopedia-characters ul li > span:first-child {
  background: rgba(226, 184, 110, 0.10) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(226, 184, 110, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}


/* === ENCYCLOPEDIA HARMON ACCENTS & SERIES CARDS === */
.dark #encyclopedia {
  --section-accent: 226, 184, 110;
}

.enc-series-card {
  border-radius: 14px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
}
.enc-series-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--section-accent), 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.enc-series-card.active {
  background: rgba(var(--section-accent), 0.12);
  border-color: rgba(var(--section-accent), 0.65);
}

.dark .enc-series-card {
  background: rgba(28, 22, 36, 0.65) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.20) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.dark .enc-series-card:hover {
  background: rgba(45, 34, 56, 0.85) !important;
  border-color: rgba(226, 184, 110, 0.60) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(226, 184, 110, 0.18), 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}
.dark .enc-series-card.active {
  background: rgba(226, 184, 110, 0.14) !important;
  border-color: rgba(226, 184, 110, 0.85) !important;
  box-shadow: 0 0 20px rgba(226, 184, 110, 0.35), 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}
.dark .enc-series-card span {
  color: #EFE9DF !important;
  font-weight: 600 !important;
}

/* Encyclopedia Section Header Elements */
.dark #encyclopedia .section-header .section-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
}
.dark #encyclopedia .section-header .section-subtitle {
  color: #A8A096 !important;
}
.dark #encyclopedia .section-header .section-subtitle em {
  color: #E2B86E !important;
  font-style: italic !important;
}

/* Master guarantee for section-title::after in dark mode */
.dark #encyclopedia .section-title::after,
.dark .section-title::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0.04em !important;
  right: 0.04em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 2px rgba(226, 184, 110, 0.90) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}


/* === WORLD (МИР КНИГ) HARMON COLOR HARMONY === */
.dark #world {
  --section-accent: 226, 184, 110;
}

.dark #world .section-header .section-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}

.dark #world .section-title::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0.04em !important;
  right: 0.04em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 50%, #D4728C 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 2px rgba(226, 184, 110, 0.90) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}

.dark #world .section-subtitle {
  color: #A8A096 !important;
}

.dark #world .section-subtitle em {
  color: #E2B86E !important;
  font-style: italic !important;
}

/* Primary tabs in World: Персонажи, Квизы, Карта */
.dark #world .filter-tags .tag-pill.active {
  background: linear-gradient(135deg, #E2B86E 0%, #D4728C 100%) !important;
  border: 1.5px solid rgba(240, 207, 141, 0.95) !important;
  color: #120E16 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(226, 184, 110, 0.45), 0 2px 6px rgba(212, 114, 140, 0.30) !important;
}

.dark #world .filter-tags .tag-pill.active * {
  color: #120E16 !important;
}

.dark #world .filter-tags .tag-pill:not(.active) {
  background: rgba(28, 22, 36, 0.75) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.22) !important;
  color: #DDD5C9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.dark #world .filter-tags .tag-pill:not(.active):hover {
  transform: translateY(-1px) !important;
  background: rgba(45, 34, 56, 0.90) !important;
  border-color: rgba(226, 184, 110, 0.60) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(226, 184, 110, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Secondary genre pills in World characters filter */
.dark #world .characters-filter .enc-genre-pill.active {
  background: linear-gradient(135deg, #E2B86E 0%, #D4728C 100%) !important;
  border: 1.5px solid rgba(240, 207, 141, 0.95) !important;
  color: #120E16 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(226, 184, 110, 0.45), 0 2px 6px rgba(212, 114, 140, 0.30) !important;
}

.dark #world .characters-filter .enc-genre-pill.active * {
  color: #120E16 !important;
}

.dark #world .characters-filter .enc-genre-pill:not(.active) {
  background: rgba(28, 22, 36, 0.75) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.22) !important;
  color: #DDD5C9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.dark #world .characters-filter .enc-genre-pill:not(.active):hover {
  transform: translateY(-1px) !important;
  background: rgba(45, 34, 56, 0.90) !important;
  border-color: rgba(226, 184, 110, 0.60) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(226, 184, 110, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.dark #world .mono-label {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
}


/* =============================================================================
   MASTER VELVET BERRY & GOLD TRIM FOR NIGHT THEME ACROSS ALL SECTIONS
   ============================================================================= */
.dark #home,
.dark #books,
.dark #audio,
.dark #encyclopedia,
.dark #world,
.dark #articles,
.dark #reviews,
.dark #about {
  --section-accent: 199, 58, 100;
  --velvet-berry: #2E101E;
  --velvet-berry-hover: #44182E;
  --velvet-berry-active: #B22B58;
  --gold-trim: #E2B86E;
  --gold-trim-subtle: rgba(226, 184, 110, 0.40);
  --gold-trim-glow: rgba(226, 184, 110, 0.75);
}

/* Master Title Underline for every section */
.dark .section-title::after,
.dark #home .section-title::after,
.dark #books .section-title::after,
.dark #audio .section-title::after,
.dark #encyclopedia .section-title::after,
.dark #world .section-title::after,
.dark #articles .section-title::after,
.dark #reviews .section-title::after,
.dark #about .section-title::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0.04em !important;
  right: 0.04em !important;
  bottom: -0.08em !important;
  height: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #E2B86E 0%, #F0CF8D 42%, #B22B58 100%) !important;
  box-shadow: 0 0 14px rgba(226, 184, 110, 0.55), 0 0 8px rgba(178, 43, 88, 0.40) !important;
  opacity: 0.95 !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
}

/* Master Eyebrow for every section */
.dark .section-eyebrow,
.dark .section-header .section-eyebrow,
.dark #home .section-eyebrow,
.dark #books .section-eyebrow,
.dark #audio .section-eyebrow,
.dark #encyclopedia .section-eyebrow,
.dark #world .section-eyebrow,
.dark #articles .section-eyebrow,
.dark #reviews .section-eyebrow,
.dark #about .section-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}

/* Master Subtitle emphasis */
.dark .section-subtitle em,
.dark #home .section-subtitle em,
.dark #books .section-subtitle em,
.dark #audio .section-subtitle em,
.dark #encyclopedia .section-subtitle em,
.dark #world .section-subtitle em,
.dark #articles .section-subtitle em,
.dark #reviews .section-subtitle em,
.dark #about .section-subtitle em {
  color: #E2B86E !important;
  font-style: italic !important;
}

/* Master Inactive Pills, Tabs and Buttons across all sections */
.dark :is(
  #home, #books, #audio, #encyclopedia, #world, #articles, #reviews, #about
) :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger, .encyclopedia-book-btn):not(.active) {
  background: rgba(46, 16, 30, 0.82) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.40) !important;
  color: #EDE5D8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Master Hover */
.dark :is(
  #home, #books, #audio, #encyclopedia, #world, #articles, #reviews, #about
) :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger, .encyclopedia-book-btn):not(.active):hover {
  transform: translateY(-1px) !important;
  background: rgba(68, 24, 46, 0.94) !important;
  border-color: rgba(226, 184, 110, 0.85) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(226, 184, 110, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Master Active Pill / Tab across all sections */
.dark :is(
  #home, #books, #audio, #encyclopedia, #world, #articles, #reviews, #about
) :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger, .encyclopedia-book-btn).active {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border: 1.5px solid #E2B86E !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(178, 43, 88, 0.55), 0 0 12px rgba(226, 184, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.dark :is(
  #home, #books, #audio, #encyclopedia, #world, #articles, #reviews, #about
) :is(.tag-pill, .enc-genre-pill, .char-dropdown-trigger, .encyclopedia-book-btn).active * {
  color: #FFFFFF !important;
}

/* Master Dropdowns in Night Theme */
.dark .char-dropdown-trigger {
  background: rgba(46, 16, 30, 0.88) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  color: #EDE5D8 !important;
}

.dark .char-dropdown-trigger:hover,
.dark .char-dropdown[data-open="true"] .char-dropdown-trigger {
  background: rgba(68, 24, 46, 0.96) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(226, 184, 110, 0.25) !important;
}

.dark .char-dropdown-menu {
  background: #240E1B !important;
  border: 1.5px solid rgba(226, 184, 110, 0.40) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
}

.dark .char-dropdown-item {
  color: #EDE5D8 !important;
}

.dark .char-dropdown-item:hover {
  background: rgba(226, 184, 110, 0.15) !important;
  color: #FFFFFF !important;
}

.dark .char-dropdown-item.is-active {
  background: rgba(178, 43, 88, 0.30) !important;
  color: #E2B86E !important;
  font-weight: 700 !important;
}

.dark .cdi-dot {
  border-color: rgba(226, 184, 110, 0.45) !important;
}

.dark .char-dropdown-item.is-active .cdi-dot {
  background: #E2B86E !important;
  border-color: #E2B86E !important;
}

/* Master Spoiler Banner across all sections */
.dark .spoiler-warning {
  background: rgba(46, 16, 30, 0.88) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  color: #EDE5D8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(178, 43, 88, 0.20) !important;
}

.dark .spoiler-warning .sw-icon {
  background: rgba(226, 184, 110, 0.20) !important;
  border: 1.5px solid #E2B86E !important;
  color: #E2B86E !important;
  box-shadow: 0 0 8px rgba(226, 184, 110, 0.30) !important;
}

.dark .spoiler-warning strong {
  color: #E2B86E !important;
}

/* Master Series Cards in Encyclopedia */
.dark .enc-series-card {
  background: rgba(46, 16, 30, 0.70) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.28) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important;
}

.dark .enc-series-card:hover {
  background: rgba(68, 24, 46, 0.88) !important;
  border-color: rgba(226, 184, 110, 0.75) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(226, 184, 110, 0.20), 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}

.dark .enc-series-card.active {
  background: rgba(178, 43, 88, 0.25) !important;
  border: 1.5px solid #E2B86E !important;
  box-shadow: 0 0 20px rgba(226, 184, 110, 0.40), 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}

.dark .enc-series-card span {
  color: #EDE5D8 !important;
  font-weight: 600 !important;
}

/* Master Mono Labels */
.dark .mono-label {
  color: #E2B86E !important;
  letter-spacing: 0.14em !important;
}


/* =============================================================================
   ABOUT CTA & HERO CARDS — SIGNATURE VELVET BERRY & GOLD TRIM
   ============================================================================= */
.dark .about-cta,
.dark #about .about-cta {
  background: linear-gradient(135deg, rgba(46, 16, 30, 0.94) 0%, rgba(26, 10, 18, 0.96) 100%) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(178, 43, 88, 0.20) !important;
  color: #EDE5D8 !important;
  padding: 56px 56px 48px !important;
  position: relative !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 80px auto 40px !important;
}

.dark .about-cta-mark {
  color: rgba(226, 184, 110, 0.16) !important;
  opacity: 1 !important;
  font-size: 130px !important;
  line-height: 1 !important;
  top: -12px !important;
  left: 32px !important;
  position: absolute !important;
  pointer-events: none !important;
}

.dark .about-cta-eyebrow {
  color: #E2B86E !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}

.dark .about-cta-text {
  color: #EDE5D8 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  margin: 0 0 28px !important;
  position: relative !important;
  z-index: 1 !important;
}

.dark .about-cta-text em {
  color: #E2B86E !important;
  font-style: italic !important;
}

.dark .about-cta-btn,
.dark .about-cta .btn {
  background: linear-gradient(135deg, #B22B58 0%, #721434 100%) !important;
  border: 1.5px solid #E2B86E !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 22px rgba(178, 43, 88, 0.55), 0 0 14px rgba(226, 184, 110, 0.35) !important;
  padding: 14px 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark .about-cta-btn:hover,
.dark .about-cta .btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #C83566 0%, #88193E 100%) !important;
  border-color: #F0CF8D !important;
  box-shadow: 0 10px 28px rgba(178, 43, 88, 0.70), 0 0 20px rgba(226, 184, 110, 0.50) !important;
  color: #FFFFFF !important;
}

/* Review Hero, Friends Hero in Dark Mode */
.dark .review-hero,
.dark .friends-hero,
.dark .friends-litres {
  background: linear-gradient(135deg, rgba(46, 16, 30, 0.90) 0%, rgba(26, 10, 18, 0.94) 100%) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.40) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(178, 43, 88, 0.15) !important;
  color: #EDE5D8 !important;
}

.dark .review-hero-mark {
  color: rgba(226, 184, 110, 0.16) !important;
}

.dark .review-hero-text {
  color: #EDE5D8 !important;
}

.dark .review-hero-name {
  color: #E2B86E !important;
}

.dark .review-hero-handle {
  background: rgba(178, 43, 88, 0.30) !important;
  border: 1px solid rgba(226, 184, 110, 0.35) !important;
  color: #E2B86E !important;
}


/* =============================================================================
   FRIENDS SECTION — SIGNATURE VELVET BERRY & GOLD TRIM
   ============================================================================= */
.dark .friends-hero,
.dark .friends-litres,
.dark .friends-litmarket {
  background: linear-gradient(135deg, rgba(46, 16, 30, 0.94) 0%, rgba(26, 10, 18, 0.96) 100%) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.42) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.60), 0 0 24px rgba(178, 43, 88, 0.18) !important;
  color: #EDE5D8 !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark .friends-hero:hover,
.dark .friends-litres:hover,
.dark .friends-litmarket:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, rgba(58, 20, 38, 0.96) 0%, rgba(32, 12, 22, 0.98) 100%) !important;
  border-color: #F0CF8D !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.70), 0 0 32px rgba(178, 43, 88, 0.35) !important;
}

.dark .friends-hero::before,
.dark .friends-litres::before,
.dark .friends-litmarket::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(240, 207, 141, 0.45), transparent) !important;
  pointer-events: none !important;
}

/* Icon jewels */
.dark .friends-hero-icon {
  background: rgba(76, 117, 163, 0.20) !important;
  border: 1px solid rgba(76, 117, 163, 0.38) !important;
  box-shadow: 0 0 16px rgba(76, 117, 163, 0.22) !important;
  border-radius: 18px !important;
}

.dark .friends-litres-icon {
  background: rgba(255, 122, 26, 0.20) !important;
  border: 1px solid rgba(255, 122, 26, 0.38) !important;
  box-shadow: 0 0 16px rgba(255, 122, 26, 0.22) !important;
  border-radius: 18px !important;
}

.dark .friends-litmarket .friends-litres-icon {
  background: rgba(90, 161, 121, 0.20) !important;
  border: 1px solid rgba(90, 161, 121, 0.38) !important;
  box-shadow: 0 0 16px rgba(90, 161, 121, 0.22) !important;
  border-radius: 18px !important;
}

/* Pill Tags */
.dark .friends-tag,
.dark .friends-litres-tag,
.dark .friends-litmarket .friends-litres-tag {
  background: rgba(178, 43, 88, 0.35) !important;
  border: 1px solid rgba(226, 184, 110, 0.40) !important;
  color: #E2B86E !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

/* Titles */
.dark .friends-hero-name,
.dark .friends-litres-name {
  color: #EDE5D8 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 2.2vw, 24px) !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.01em !important;
}

/* Descriptions */
.dark .friends-hero-desc,
.dark .friends-litres-desc {
  color: #CDC5BA !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 0 8px !important;
  opacity: 0.92 !important;
}

/* Handles */
.dark .friends-handle {
  color: #E2B86E !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  opacity: 0.85 !important;
}

/* Arrows */
.dark .friends-arrow,
.dark .friends-litres-arrow,
.dark .friends-litmarket .friends-litres-arrow {
  color: #E2B86E !important;
  font-size: 28px !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.dark .friends-hero:hover .friends-arrow,
.dark .friends-litres:hover .friends-litres-arrow,
.dark .friends-litmarket:hover .friends-litres-arrow {
  color: #F0CF8D !important;
  transform: translateX(6px) !important;
}

/* --- Social Media Grid (6 cards) --- */
.dark .friends-grid {
  gap: 16px !important;
}

.dark .friend-card {
  background: rgba(32, 14, 24, 0.88) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.30) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark .friend-card:hover {
  transform: translateY(-3px) !important;
  background: rgba(46, 16, 30, 0.95) !important;
  border-color: #F0CF8D !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.60), 0 0 20px rgba(178, 43, 88, 0.28) !important;
}

.dark .friend-icon {
  background: rgba(46, 16, 30, 0.70) !important;
  border: 1px solid rgba(226, 184, 110, 0.32) !important;
  border-radius: 14px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.dark .friend-card:hover .friend-icon {
  background: rgba(70, 20, 42, 0.90) !important;
  border-color: #F0CF8D !important;
  box-shadow: 0 6px 18px rgba(178, 43, 88, 0.35), 0 0 10px rgba(226, 184, 110, 0.25) !important;
}

.dark .friend-name {
  color: #EDE5D8 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16.5px !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease !important;
}

.dark .friend-card:hover .friend-name {
  color: #FFFFFF !important;
}

.dark .friend-desc {
  color: #CDC5BA !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-top: 3px !important;
  opacity: 0.90 !important;
}

.dark .friend-handle {
  color: #E2B86E !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  letter-spacing: 0.03em !important;
  opacity: 0.85 !important;
}


/* =============================================================================
   POLAROID GALLERY NAVIGATION (ARROWS & DOTS FOR ALL 5-SLIDE CONTAINERS)
   ============================================================================= */
.about-record-frame .polaroid-slider {
  position: relative !important;
  overflow: hidden !important;
}

/* Positioning for polaroid carousel arrows */
.about-record-frame .polaroid-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}
.about-record-frame .polaroid-nav.prev {
  left: 8px !important;
}
.about-record-frame .polaroid-nav.next {
  right: 8px !important;
}

.about-record-frame .polaroid-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 10 !important;
  padding: 4px 8px !important;
  background: rgba(18, 8, 14, 0.70) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226, 184, 110, 0.35) !important;
}

.about-record-frame .polaroid-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  border: none !important;
  padding: 0 !important;
}

.about-record-frame .polaroid-dot:hover {
  background: #E2B86E !important;
  transform: scale(1.25) !important;
}

.about-record-frame .polaroid-dot.active {
  background: #E2B86E !important;
  width: 18px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(226, 184, 110, 0.70) !important;
}


/* =============================================================================
   HERO AWARDS STRIP: UNIFIED VECTOR MEDALLION ICONS (TROPHY, HEART, BOOK, LOUPE)
   ============================================================================= */
.hero-award-medal-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.hero-award-medal:hover .hero-award-medal-icon {
  transform: scale(1.14) translateY(-2px) !important;
}

.hero-award-medal-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  pointer-events: none !important;
  transition: transform 0.28s ease !important;
}

.hero-award-medal:hover .hero-award-medal-icon svg {
  transform: scale(1.05) !important;
}

/* Light mode icon coloring */
.hero-award-medal--gold .hero-award-medal-icon {
  background: rgba(220, 154, 54, 0.14) !important;
  color: #B87A1E !important;
  border: 1.5px solid rgba(220, 154, 54, 0.38) !important;
}

.hero-award-medal--rose .hero-award-medal-icon {
  background: rgba(202, 130, 152, 0.14) !important;
  color: #A84C68 !important;
  border: 1.5px solid rgba(202, 130, 152, 0.38) !important;
}

.hero-award-medal--sage .hero-award-medal-icon {
  background: rgba(133, 184, 162, 0.14) !important;
  color: #3F7E66 !important;
  border: 1.5px solid rgba(133, 184, 162, 0.38) !important;
}

.hero-award-medal--violet .hero-award-medal-icon {
  background: rgba(166, 136, 204, 0.14) !important;
  color: #6E499B !important;
  border: 1.5px solid rgba(166, 136, 204, 0.38) !important;
}

/* Dark mode icon coloring with luxury glow */
.dark .hero-award-medal--gold .hero-award-medal-icon {
  background: rgba(226, 184, 110, 0.16) !important;
  color: #E2B86E !important;
  border: 1.5px solid rgba(226, 184, 110, 0.45) !important;
  box-shadow: 0 0 16px rgba(226, 184, 110, 0.25) !important;
}

.dark .hero-award-medal--rose .hero-award-medal-icon {
  background: rgba(212, 114, 140, 0.16) !important;
  color: #E87B99 !important;
  border: 1.5px solid rgba(212, 114, 140, 0.45) !important;
  box-shadow: 0 0 16px rgba(212, 114, 140, 0.25) !important;
}

.dark .hero-award-medal--sage .hero-award-medal-icon {
  background: rgba(146, 201, 177, 0.16) !important;
  color: #92C9B1 !important;
  border: 1.5px solid rgba(146, 201, 177, 0.45) !important;
  box-shadow: 0 0 16px rgba(146, 201, 177, 0.25) !important;
}

.dark .hero-award-medal--violet .hero-award-medal-icon {
  background: rgba(168, 140, 204, 0.16) !important;
  color: #B296D8 !important;
  border: 1.5px solid rgba(168, 140, 204, 0.45) !important;
  box-shadow: 0 0 16px rgba(168, 140, 204, 0.25) !important;
}



/* ==========================================================================
   HERO CTA BUTTONS: PERFECT HEIGHT ALIGNMENT & BALANCED TYPOGRAPHY
   ========================================================================== */
#home .hero-modern .hero-cta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

#home .hero-modern .btn-flagship,
#home .hero-modern .hero-secondary-cta {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

#home .hero-modern .btn-flagship {
  min-width: 256px !important;
  padding: 0 30px !important;
  background: linear-gradient(135deg, #a45d72, #914b62) !important;
  border: 1.5px solid rgba(116, 49, 72, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(145, 75, 98, 0.25) !important;
}

#home .hero-modern .btn-flagship:hover {
  background: linear-gradient(135deg, #934e65, #803e55) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(145, 75, 98, 0.35) !important;
}

#home .hero-modern .btn-flagship-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#home .hero-modern .btn-flagship-line1 {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  opacity: 0.90 !important;
  line-height: 1.2 !important;
}

#home .hero-modern .btn-flagship-line2 {
  font-family: var(--font-body, system-ui) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

#home .hero-modern .hero-secondary-cta {
  min-width: 154px !important;
  padding: 0 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #914b62 !important;
  border: 1.5px solid rgba(145, 75, 98, 0.5) !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

#home .hero-modern .hero-secondary-cta:hover {
  background: #914b62 !important;
  border-color: #914b62 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(145, 75, 98, 0.25) !important;
}

.dark #home .hero-modern .btn-flagship {
  background: linear-gradient(135deg, #A8435C 0%, #7E283E 100%) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.4) !important;
  color: #FFF8F2 !important;
  box-shadow: 0 8px 24px rgba(126, 40, 62, 0.45) !important;
}

.dark #home .hero-modern .btn-flagship:hover {
  background: linear-gradient(135deg, #BD4F6A 0%, #913148 100%) !important;
  border-color: rgba(226, 184, 110, 0.75) !important;
  box-shadow: 0 12px 32px rgba(126, 40, 62, 0.6), 0 0 18px rgba(226, 184, 110, 0.35) !important;
  transform: translateY(-2px) !important;
}

.dark #home .hero-modern .hero-secondary-cta {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(226, 184, 110, 0.4) !important;
  color: #EFE9DF !important;
}

.dark #home .hero-modern .hero-secondary-cta:hover {
  background: rgba(226, 184, 110, 0.15) !important;
  border-color: #E2B86E !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(226, 184, 110, 0.3) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 640px) {
  #home .hero-modern .hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  #home .hero-modern .btn-flagship,
  #home .hero-modern .hero-secondary-cta {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =============================================================================
   CUSTOM WATERCOLOR BOOK ICONS & AWARDS MEDALLIONS
   ============================================================================= */
.hero-award-medal-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-award-medal-img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.hero-award-medal:hover .hero-award-medal-img {
  transform: scale(1.14) rotate(-2deg);
}

.home-nav-quick-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(var(--home-accent), 0.14) !important;
  border: 1px solid rgba(var(--home-accent), 0.32) !important;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.home-nav-quick-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.home-nav-quick:hover .home-nav-quick-icon {
  transform: scale(1.08) translateY(-2px) !important;
  border-color: rgba(var(--home-accent), 0.6) !important;
}

.home-nav-quick:hover .home-nav-quick-img {
  transform: scale(1.12) rotate(3deg);
}

.dark .home-nav-quick-icon {
  background: rgba(var(--home-accent), 0.16) !important;
  border: 1.5px solid rgba(var(--home-accent), 0.42) !important;
  box-shadow: 0 0 14px rgba(var(--home-accent), 0.22) !important;
}

.dark .home-nav-quick:hover .home-nav-quick-icon {
  border-color: rgba(var(--home-accent), 0.8) !important;
  box-shadow: 0 0 20px rgba(var(--home-accent), 0.42) !important;
}

/* Bento cards watercolor icons */
.bento-icon-img {
  display: block;
  width: 96px;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.13));
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.32s ease, filter 0.32s ease;
  pointer-events: none;
}

.bento-card:hover .bento-icon-img {
  transform: scale(1.10) rotate(-2deg);
}

.dark .bento-icon-img {
  opacity: 0.84;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bento-accent, #E2B86E) 45%, transparent));
}

.dark .bento-card:hover .bento-icon-img {
  opacity: 1;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--bento-accent, #E2B86E) 70%, transparent));
}

@media (max-width: 480px) {
  .bento-icon-img {
    width: 68px;
    height: 68px;
  }
}

/* Watercolor social media & literary icons */
.friends-icon-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.friends-hero-icon .friends-icon-img {
  width: 50px;
  height: 50px;
}
.friend-icon .friends-icon-img {
  width: 32px;
  height: 32px;
}
.friends-litres-icon .friends-icon-img {
  width: 44px;
  height: 44px;
}
@media (max-width: 540px) {
  .friends-hero-icon .friends-icon-img {
    width: 44px;
    height: 44px;
  }
  .friends-litres-icon .friends-icon-img {
    width: 40px;
    height: 40px;
  }
}

/* Акварельная виньетка: три британские шиншиллы на книгах («Обо мне») */
.about-cats-vignette {
  position: absolute;
  top: -40px;
  right: -45px;
  width: clamp(220px, 23vw, 310px);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0.94;
  -webkit-mask-image: radial-gradient(ellipse at 52% 50%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 98%);
  mask-image: radial-gradient(ellipse at 52% 50%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 98%);
  filter: drop-shadow(0 10px 24px rgba(176, 80, 110, 0.10));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.about-cats-vignette img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .about-cats-vignette {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto 20px;
    width: 260px;
    display: block;
  }
}
@media (max-width: 480px) {
  .about-cats-vignette {
    width: 220px;
  }
}
.dark .about-cats-vignette {
  opacity: 0.85;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   QUIZ HERO CARD: WATERCOLOR BLEED VIGNETTES
   ========================================================================== */
.quiz-hero-card {
  position: relative;
  text-align: center;
  margin: 0 0 40px;
  padding: 50px 24px 36px;
  background: linear-gradient(135deg, rgba(244, 167, 185, 0.08) 0%, rgba(168, 160, 208, 0.16) 100%);
  border: 1px solid rgba(244, 167, 185, 0.25);
  border-radius: 28px;
  overflow: hidden;
}

.dark .quiz-hero-card {
  background: linear-gradient(135deg, rgba(46, 20, 36, 0.85) 0%, rgba(28, 22, 44, 0.90) 100%);
  border: 1px solid rgba(226, 184, 110, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.quiz-bleed-vignette {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 250px;
  height: 250px;
  opacity: 0.45;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 78%);
}

.quiz-bleed-vignette-left {
  left: -20px;
}

.quiz-bleed-vignette-right {
  right: -20px;
}

.quiz-bleed-vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dark .quiz-bleed-vignette {
  opacity: 0.36;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 22px rgba(226, 184, 110, 0.28)) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
}

.quiz-hero-card-content {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .quiz-bleed-vignette {
    display: none;
  }
}


/* =============================================================================
   ABOUT CEREMONY SHOWCASE (КОНТЕЙНЕР ЦЕРЕМОНИИ В ГУМЕ - 2 КОЛОНКИ: СЛЕВА ФОТО, СПРАВА ТЕКСТ)
   ============================================================================= */
.about-ceremony-showcase {
  max-width: 1140px;
  margin: 56px auto 64px;
  padding: 40px 44px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 248, 250, 0.95), rgba(253, 236, 242, 0.85));
  border: 1px solid rgba(212, 130, 149, 0.32);
  box-shadow: 0 16px 40px rgba(212, 130, 149, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dark .about-ceremony-showcase {
  background: linear-gradient(135deg, rgba(26, 12, 19, 0.94), rgba(16, 7, 12, 0.98));
  border: 1px solid rgba(226, 184, 110, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(168, 64, 92, 0.2);
}

/* Tabs for switching between events (ГУМ / Достоевский / Библио-Глобус) */
.about-ceremony-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 34px;
  padding: 4px 4px 18px;
  border-bottom: 1px solid rgba(212, 130, 149, 0.16);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.about-ceremony-tabs::-webkit-scrollbar {
  display: none;
}

.dark .about-ceremony-tabs {
  border-bottom-color: rgba(226, 184, 110, 0.2);
}

.about-ceremony-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: #5A2E3D;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(212, 130, 149, 0.35);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(212, 130, 149, 0.08);
  user-select: none;
}

.about-ceremony-tab-icon {
  font-size: 16px;
  line-height: 1;
}

.about-ceremony-tab:hover {
  background: rgba(255, 240, 245, 0.95);
  border-color: #B0506E;
  color: #7A2840;
  transform: translateY(-1px);
}

.about-ceremony-tab.active {
  background: linear-gradient(135deg, #B0506E, #7A2840);
  color: #FFFFFF;
  border-color: #B0506E;
  box-shadow: 0 4px 16px rgba(176, 80, 110, 0.35);
  transform: translateY(-1px);
}

.about-ceremony-tab:focus-visible {
  outline: 2px solid #B0506E;
  outline-offset: 2px;
}

/* Dark mode for tabs */
.dark .about-ceremony-tab {
  background: rgba(26, 12, 19, 0.75);
  border: 1px solid rgba(226, 184, 110, 0.28);
  color: rgba(245, 235, 240, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .about-ceremony-tab:hover {
  background: rgba(45, 20, 32, 0.9);
  border-color: rgba(226, 184, 110, 0.6);
  color: #F0CF8D;
  transform: translateY(-1px);
}

.dark .about-ceremony-tab.active {
  background: linear-gradient(135deg, #8B304C, #4A1B28);
  color: #F0CF8D;
  border-color: rgba(226, 184, 110, 0.75);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(226, 184, 110, 0.25);
  transform: translateY(-1px);
}

/* Body container with smooth tab transition */
.about-ceremony-body {
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-ceremony-body.is-switching {
  opacity: 0;
  transform: translateY(6px);
}

/* 2-column Grid: left vertical photos, right text */
.about-ceremony-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.about-ceremony-media-col {
  min-width: 0;
  width: 100%;
}

.about-ceremony-content-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Slider frame (вертикальный формат 9:13, лица не режутся!) */
.about-ceremony-slider-wrap {
  position: relative;
  width: 100%;
}

.about-ceremony-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(212, 130, 149, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #180c13;
  cursor: zoom-in;
}

.dark .about-ceremony-slider {
  border-color: rgba(226, 184, 110, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 24px rgba(168, 64, 92, 0.25);
  background: #0f070c;
}

.about-ceremony-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.about-ceremony-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  cursor: zoom-in;
}

.about-ceremony-slide.active {
  opacity: 1;
  visibility: visible;
}

.about-ceremony-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.about-ceremony-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 18px 14px;
  background: linear-gradient(to top, rgba(14, 6, 10, 0.92) 0%, rgba(14, 6, 10, 0.65) 60%, transparent 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.about-ceremony-zoom-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(14, 6, 10, 0.62);
  color: rgba(255, 255, 255, 0.95);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Thumbnails row (сетка из 6 аккуратных миниатюр) */
.about-ceremony-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 2px;
}

.about-ceremony-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.55;
  transition: opacity 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.about-ceremony-thumb:hover {
  opacity: 0.95;
  transform: translateY(-2px);
}

.about-ceremony-thumb.active {
  opacity: 1;
  border-color: #D48295;
  box-shadow: 0 4px 12px rgba(212, 130, 149, 0.38);
  transform: translateY(-2px);
}

.dark .about-ceremony-thumb.active {
  border-color: #E2B86E;
  box-shadow: 0 4px 14px rgba(226, 184, 110, 0.45);
}

.about-ceremony-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Placeholder for upcoming photo archives */
.about-ceremony-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(255, 242, 246, 0.95), rgba(248, 226, 234, 0.85));
  border: 1.5px dashed rgba(212, 130, 149, 0.45);
  box-shadow: 0 8px 24px rgba(212, 130, 149, 0.12);
}

.dark .about-ceremony-placeholder {
  background: linear-gradient(135deg, rgba(32, 14, 23, 0.92), rgba(18, 8, 14, 0.96));
  border-color: rgba(226, 184, 110, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.about-ceremony-placeholder-icon {
  font-size: 44px;
  margin-bottom: 14px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(212, 130, 149, 0.3));
}

.dark .about-ceremony-placeholder-icon {
  filter: drop-shadow(0 4px 14px rgba(226, 184, 110, 0.35));
}

.about-ceremony-placeholder-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--text-color, #2D1A22);
  margin: 0 0 10px;
}

.dark .about-ceremony-placeholder-title {
  color: #F0CF8D;
}

.about-ceremony-placeholder-desc {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-color, #4A3A42);
  max-width: 320px;
  margin: 0;
  opacity: 0.92;
}

.dark .about-ceremony-placeholder-desc {
  color: rgba(245, 235, 240, 0.88);
}

/* Text column styling */
.about-ceremony-header {
  margin-bottom: 20px;
}

.about-ceremony-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #B0506E;
  margin-bottom: 12px;
}

.dark .about-ceremony-eyebrow {
  color: #E2B86E;
}

.about-ceremony-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.25;
  color: var(--text-color, #2D1A22);
  margin: 0 0 16px;
}

.about-ceremony-title em {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  color: inherit !important;
}

.dark .about-ceremony-title em {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  color: inherit !important;
}

.about-ceremony-desc {
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--text-color, #4A3A42);
  margin: 0;
}

.dark .about-ceremony-desc {
  color: rgba(245, 235, 240, 0.88);
}

.about-ceremony-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 10px;
  margin: 22px 0;
}

.about-ceremony-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.7);
  color: #6A2D40;
  border: 1px solid rgba(176, 80, 110, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(176, 80, 110, 0.06);
  line-height: 1.35;
}

.dark .about-ceremony-badge {
  background: rgba(36, 16, 26, 0.75);
  color: rgba(240, 207, 141, 0.92);
  border-color: rgba(226, 184, 110, 0.25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Video & action buttons */
.about-ceremony-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.about-ceremony-video-btn,
.about-ceremony-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #B0506E, #7A2840);
  box-shadow: 0 6px 18px rgba(176, 80, 110, 0.28);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.about-ceremony-video-btn:hover,
.about-ceremony-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(176, 80, 110, 0.4);
  filter: brightness(1.06);
}

.dark .about-ceremony-video-btn,
.dark .about-ceremony-action-btn {
  background: linear-gradient(135deg, #8B304C, #4A1B28);
  border: 1px solid rgba(226, 184, 110, 0.45);
  color: #F0CF8D;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.dark .about-ceremony-video-btn:hover,
.dark .about-ceremony-action-btn:hover {
  border-color: rgba(226, 184, 110, 0.8);
  box-shadow: 0 8px 24px rgba(226, 184, 110, 0.25);
}

/* Responsive */
@media (max-width: 900px) {
  .about-ceremony-showcase {
    padding: 30px 22px;
    margin: 40px auto 48px;
    border-radius: 22px;
  }
  .about-ceremony-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-ceremony-media-col {
    max-width: 440px;
    margin: 0 auto;
  }
  .about-ceremony-title {
    font-size: 23px;
  }
  .about-ceremony-desc {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .about-ceremony-showcase {
    padding: 24px 16px;
    border-radius: 18px;
  }
  .about-ceremony-tabs {
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .about-ceremony-tab {
    padding: 8px 16px;
    font-size: 13.5px;
  }
  .about-ceremony-slider {
    aspect-ratio: 9 / 13;
  }
  .about-ceremony-badge-row {
    gap: 6px 8px;
    margin: 18px 0;
  }
  .about-ceremony-badge {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  .about-ceremony-video-btn,
  .about-ceremony-action-btn {
    width: 100%;
    justify-content: center;
    font-size: 13.5px;
    padding: 11px 18px;
  }
}

/* ==========================================================================
   Full-screen Lightbox Triggers for Book Covers & Character Portraits
   ========================================================================== */

/* 1. Book detail cover zoom */
.book-detail-cover--zoomable {
  cursor: zoom-in !important;
  position: relative;
}
.book-detail-cover--zoomable:hover {
  transform: rotate(0) translateY(-4px) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28), 0 0 28px rgba(226, 184, 110, 0.35) !important;
}
.dark .book-detail-cover--zoomable:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 32px rgba(226, 184, 110, 0.4) !important;
}
.book-cover-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(26, 10, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 184, 110, 0.45);
  color: #F7E7D0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.92;
  z-index: 5;
}
.book-detail-cover--zoomable:hover .book-cover-zoom-hint {
  opacity: 1;
  background: rgba(178, 43, 88, 0.94);
  border-color: #F0CF8D;
  color: #FFFFFF;
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(178, 43, 88, 0.5), 0 0 12px rgba(226, 184, 110, 0.4);
}

/* 2. Book catalog card zoom button */
.book-cover-zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(26, 10, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 184, 110, 0.45);
  color: #F7E7D0;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: scale(0.9);
}
.book-cover-zoom-btn svg {
  flex-shrink: 0;
}
.book-cover-zoom-btn-label {
  display: none;
}
.book-card:hover .book-cover-zoom-btn,
.book-card:focus-within .book-cover-zoom-btn {
  opacity: 1;
  transform: scale(1);
}
.book-cover-zoom-btn:hover {
  background: rgba(178, 43, 88, 0.94);
  border-color: #F0CF8D;
  color: #FFFFFF;
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(178, 43, 88, 0.5), 0 0 12px rgba(226, 184, 110, 0.4);
}
@media (hover: none), (max-width: 768px) {
  .book-cover-zoom-btn {
    opacity: 0.88;
    transform: scale(0.95);
  }
}

/* 3. Character Avatar Zooming */
.character-avatar--zoomable {
  cursor: zoom-in !important;
  position: relative;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease !important;
}
.character-avatar--zoomable:hover {
  transform: scale(1.08) rotate(-1deg) !important;
  box-shadow: 0 0 0 3px var(--card-bg, #fff), 0 0 0 6px rgba(var(--section-accent), 0.75), 0 12px 28px rgba(var(--section-accent), 0.3) !important;
}
.dark .character-avatar--zoomable:hover {
  box-shadow: 0 0 0 3px var(--card-bg, #1a0f16), 0 0 0 6px rgba(var(--section-accent), 0.85), 0 14px 32px rgba(var(--section-accent), 0.4) !important;
}

.char-avatar-zoom-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 10, 18, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 184, 110, 0.5);
  color: #F7E7D0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 5;
}
.character-avatar--zoomable:hover .char-avatar-zoom-badge,
.character-detail-avatar--zoomable:hover .char-avatar-zoom-badge,
.character-mini-avatar--zoomable:hover .char-avatar-zoom-badge {
  background: rgba(178, 43, 88, 0.92);
  border-color: #F0CF8D;
  color: #FFFFFF;
  transform: scale(1.15);
}

.character-detail-avatar--zoomable {
  cursor: zoom-in !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}
.character-detail-avatar--zoomable:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 8px rgba(var(--section-accent), 0.85), 0 18px 50px rgba(var(--section-accent), 0.38) !important;
}
.dark .character-detail-avatar--zoomable:hover {
  box-shadow: 0 0 0 4px var(--card-bg, #1a0f16), 0 0 0 8px rgba(var(--section-accent), 0.9), 0 20px 55px rgba(var(--section-accent), 0.45) !important;
}
.character-detail-avatar--zoomable .char-avatar-zoom-badge {
  width: 38px;
  height: 38px;
  bottom: 8px;
  right: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.character-mini-avatar--zoomable {
  cursor: zoom-in !important;
  position: relative;
  transition: transform 0.25s ease !important;
}
.character-mini-avatar--zoomable:hover {
  transform: scale(1.08) !important;
}
.character-mini-avatar--zoomable .char-avatar-zoom-badge {
  width: 18px;
  height: 18px;
  bottom: -2px;
  right: -2px;
}

/* Адаптивные таблицы в статьях (GEO + UX) */
.article-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 28px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(220, 205, 195, 0.45);
  box-shadow: 0 4px 20px rgba(45, 30, 25, 0.04);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.article-table th {
  background: rgba(245, 238, 230, 0.95);
  font-weight: 700;
  color: var(--ink);
  padding: 12px 16px;
  border-bottom: 2px solid rgba(220, 200, 190, 0.6);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.article-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(230, 220, 210, 0.4);
  color: var(--ink);
  vertical-align: top;
}
.article-table tr:last-child td {
  border-bottom: none;
}
.article-table tr:hover td {
  background: rgba(255, 248, 242, 0.7);
}

/* ==========================================================================
   MOBILE BOOK CARD & DETAIL FIX: ZERO OVERLAP, CLEAN SCROLL
   ========================================================================== */
@media (max-width: 899px) {
  .book-detail-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .book-detail-aside {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
  .book-detail-cover {
    max-width: 250px !important;
    margin: 0 auto !important;
    position: static !important;
    transform: none !important;
  }
  .book-detail-artifact {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    max-width: 260px !important;
  }
  .scroll-step-btn,
  #scrollAllTopBtn,
  #scrollTopBtn,
  #scrollDownBtn,
  #scrollAllDownBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}




/* Dark mode article card typography fixes */
.dark .article-title {
  -webkit-text-fill-color: #FAF8F5 !important;
  color: #FAF8F5 !important;
  background: none !important;
}

.dark .article-card:hover .article-title {
  -webkit-text-fill-color: var(--gold, #E2B86E) !important;
  color: var(--gold, #E2B86E) !important;
  background: none !important;
}

.dark .article-excerpt {
  color: rgba(250, 248, 245, 0.78) !important;
}

.dark .article-read-pill {
  color: var(--gold, #E2B86E) !important;
  border-color: rgba(226, 184, 110, 0.4) !important;
  background: rgba(226, 184, 110, 0.1) !important;
}

.dark .article-card:hover .article-read-pill {
  color: #12050D !important;
  background: var(--gold, #E2B86E) !important;
  border-color: var(--gold, #E2B86E) !important;
}