/* ===================== MOBILE ===================== */

@media (max-width: 1024px) {
  #reading-map .rm-core {
    min-height: 140px !important;
    order: -1 !important;
  }

  #reading-map .rm-core::after {
    width: 160px !important;
    height: 160px !important;
  }

  #reading-map .rm-core-ring {
    width: 152px !important;
    height: 152px !important;
  }

  #reading-map .rm-core::before {
    animation-duration: 6.6s !important;
  }

  @keyframes rmCoreRunnerOrbit {
    0% {
      transform: rotate(0deg) translateY(-84px) scale(0.78);
      opacity: 0.64;
    }
    12% {
      transform: rotate(43deg) translateY(-84px) scale(1.10);
      opacity: 1;
    }
    25% {
      transform: rotate(90deg) translateY(-84px) scale(0.86);
      opacity: 0.76;
    }
    37% {
      transform: rotate(133deg) translateY(-84px) scale(1.16);
      opacity: 1;
    }
    50% {
      transform: rotate(180deg) translateY(-84px) scale(0.82);
      opacity: 0.70;
    }
    62% {
      transform: rotate(223deg) translateY(-84px) scale(1.14);
      opacity: 1;
    }
    75% {
      transform: rotate(270deg) translateY(-84px) scale(0.86);
      opacity: 0.76;
    }
    87% {
      transform: rotate(313deg) translateY(-84px) scale(1.10);
      opacity: 1;
    }
    100% {
      transform: rotate(360deg) translateY(-84px) scale(0.78);
      opacity: 0.64;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core::before,
  #reading-map .rm-core::after,
  #reading-map .rm-core-ring,
  #reading-map .rm-core-ring::before,
  #reading-map .rm-core-ring::after,
  #reading-map .rm-core-text strong {
    animation: none !important;
  }
}

/* ===================== V199 HERO MARKER PLAQUE CLEANUP =====================
   Remove old inner marker effects and rebuild each marker with nav-style interior only.
   ======================================================================== */

#hero .hero-contract-markers span {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(212, 175, 55, 0.36) !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.034) 0px,
      rgba(255,255,255,0.034) 1px,
      rgba(255,255,255,0.010) 2px,
      rgba(0,0,0,0.00) 8px),
    linear-gradient(180deg,
      rgba(35,31,26,0.78) 0%,
      rgba(14,12,10,0.86) 56%,
      rgba(7,6,6,0.92) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,226,132,0.05),
    0 10px 24px rgba(0,0,0,0.22),
    0 0 22px rgba(212,175,55,0.07) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

/* Remove all old moving/overlay effects from inside the four markers. */
#hero .hero-contract-markers span::before,
#hero .hero-contract-markers span::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep text above the nav-style fill. */
#hero .hero-contract-markers span {
  color: rgba(248, 241, 227, 0.82) !important;
  text-shadow:
    0 0 8px rgba(212, 175, 55, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.38) !important;
}


/* ===================== V200 CHARACTER DOSSIER / SYSTEM ARCHIVE =====================
   Premium interactive character block:
   - one large full-height portrait panel;
   - one psychological dossier card;
   - seven character selector tabs;
   - nav-style dark glass, gold/ruby atmosphere.
   ================================================================================ */

#chr-section.system-archive {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(96px, 9vw, 150px) clamp(18px, 4vw, 56px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#chr-section.system-archive::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,175,55,0.10), transparent 30%),
    radial-gradient(circle at 84% 52%, rgba(156,47,47,0.12), transparent 34%),
    linear-gradient(180deg, rgba(5,4,4,0.58), rgba(5,4,4,0.36) 44%, rgba(5,4,4,0.66)) !important;
  opacity: 0.92 !important;
}

.archive-shell {
  position: relative !important;
  width: min(1460px, 100%) !important;
  margin: 0 auto !important;
}

.archive-header {
  width: min(940px, 100%) !important;
  margin: 0 auto clamp(44px, 5vw, 78px) !important;
  text-align: center !important;
}

.archive-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 9px 18px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,0.34) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.034) 0 1px, rgba(255,255,255,0.010) 2px, transparent 8px),
    linear-gradient(180deg, rgba(34,31,27,0.78), rgba(8,7,7,0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.10),
    0 0 24px rgba(212,175,55,0.07),
    0 12px 28px rgba(0,0,0,0.24) !important;
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(230,201,132,0.78) !important;
}

.archive-title {
  margin: 24px 0 18px !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(54px, 7.4vw, 126px) !important;
  line-height: 0.92 !important;
  font-weight: 300 !important;
  letter-spacing: -0.055em !important;
  color: rgba(248,241,227,0.96) !important;
  text-shadow: 0 18px 48px rgba(0,0,0,0.44), 0 0 32px rgba(212,175,55,0.08) !important;
}

.archive-title em {
  color: rgba(212,175,55,0.90) !important;
  font-style: italic !important;
}

.archive-desc {
  margin: 0 auto !important;
  width: min(760px, 100%) !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(21px, 2.2vw, 34px) !important;
  line-height: 1.35 !important;
  color: rgba(248,241,227,0.76) !important;
}

.archive-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 0.86fr) minmax(520px, 1.14fr) !important;
  gap: clamp(22px, 3.2vw, 50px) !important;
  align-items: stretch !important;
  min-height: 720px !important;
  padding: clamp(16px, 2vw, 26px) !important;
  border-radius: clamp(32px, 3vw, 48px) !important;
  border: 1px solid rgba(212,175,55,0.26) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(212,175,55,0.13), transparent 42%),
    radial-gradient(circle at 88% 28%, rgba(156,47,47,0.09), transparent 34%),
    linear-gradient(180deg, rgba(255,244,214,0.035), rgba(255,244,214,0.008)),
    rgba(7,6,6,0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.08),
    0 34px 90px rgba(0,0,0,0.42),
    0 0 46px rgba(212,175,55,0.04) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

.archive-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: calc(clamp(32px, 3vw, 48px) - 14px) !important;
  border: 1px solid rgba(230,201,132,0.09) !important;
  pointer-events: none !important;
}

.archive-portrait-panel,
.archive-dossier {
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease !important;
}

.archive-stage:not(.is-ready) .archive-portrait-panel,
.archive-stage:not(.is-ready) .archive-dossier {
  opacity: 0.40 !important;
  transform: translateY(8px) !important;
  filter: blur(2px) !important;
}

.archive-portrait-panel {
  position: relative !important;
  min-height: 680px !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(212,175,55,0.18), transparent 34%),
    linear-gradient(180deg, rgba(16,14,12,0.40), rgba(5,5,5,0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 24px 64px rgba(0,0,0,0.36) !important;
}

.archive-portrait-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 34%, rgba(0,0,0,0.42)),
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.74) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.archive-portrait-glow {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(212,175,55,0.18), transparent 36%),
    radial-gradient(circle at 48% 70%, rgba(156,47,47,0.14), transparent 42%) !important;
  opacity: 0.78 !important;
  z-index: 1 !important;
}

.archive-portrait {
  position: absolute !important;
  left: 50% !important;
  bottom: -2% !important;
  width: min(92%, 520px) !important;
  height: 96% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  filter:
    drop-shadow(0 26px 42px rgba(0,0,0,0.48))
    saturate(0.96)
    contrast(1.03) !important;
}

.archive-portrait-caption {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 14px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.030) 0 1px, rgba(255,255,255,0.010) 2px, transparent 8px),
    linear-gradient(180deg, rgba(16,14,12,0.78), rgba(5,5,5,0.86)) !important;
  backdrop-filter: blur(12px) !important;
}

.archive-portrait-caption span,
.archive-portrait-caption strong {
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
  color: rgba(230,201,132,0.84) !important;
}

.archive-dossier {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 36px !important;
  padding: clamp(28px, 3.2vw, 52px) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.030) 0 1px, rgba(255,255,255,0.010) 2px, transparent 9px),
    radial-gradient(circle at 78% 14%, rgba(212,175,55,0.14), transparent 34%),
    radial-gradient(circle at 8% 88%, rgba(156,47,47,0.10), transparent 34%),
    linear-gradient(180deg, rgba(25,22,18,0.84), rgba(7,6,6,0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.58),
    0 26px 72px rgba(0,0,0,0.34) !important;
}

.archive-dossier::before {
  content: "" !important;
  position: absolute !important;
  width: 230px !important;
  height: 230px !important;
  right: -76px !important;
  top: -92px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(230,201,132,0.12) !important;
  box-shadow: inset 0 0 32px rgba(212,175,55,0.05), 0 0 40px rgba(212,175,55,0.04) !important;
  pointer-events: none !important;
}

.archive-dossier-top {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: clamp(30px, 3vw, 46px) !important;
}

.archive-access,
.archive-identity span,
.archive-split span,
.archive-details span {
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.24em !important;
  font-size: 10px !important;
  color: rgba(230,201,132,0.68) !important;
}

.archive-signal {
  display: inline-flex !important;
  gap: 7px !important;
}

.archive-signal i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(212,175,55,0.72) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.42) !important;
  animation: archivePulse 1.8s ease-in-out infinite !important;
}

.archive-signal i:nth-child(2) { animation-delay: 0.22s !important; }
.archive-signal i:nth-child(3) { animation-delay: 0.44s !important; }

.archive-identity,
.archive-quote,
.archive-split,
.archive-matrix,
.archive-details {
  position: relative !important;
  z-index: 2 !important;
}

.archive-identity h3 {
  margin: 12px 0 8px !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(44px, 5vw, 78px) !important;
  line-height: 0.94 !important;
  font-weight: 300 !important;
  letter-spacing: -0.045em !important;
  color: rgba(248,241,227,0.96) !important;
  text-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 22px rgba(212,175,55,0.08) !important;
}

.archive-identity p {
  margin: 0 !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  font-style: italic !important;
  color: rgba(212,175,55,0.82) !important;
}

.archive-quote {
  margin: clamp(24px, 3vw, 42px) 0 !important;
  padding: 22px 0 24px 22px !important;
  border-left: 1px solid rgba(212,175,55,0.36) !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(24px, 2.4vw, 38px) !important;
  line-height: 1.22 !important;
  font-style: italic !important;
  color: rgba(248,241,227,0.86) !important;
}

.archive-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}

.archive-split > div,
.archive-details > div {
  border: 1px solid rgba(212,175,55,0.16) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,244,214,0.040), rgba(255,244,214,0.010)),
    rgba(7,6,6,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,0.045) !important;
}

.archive-split p,
.archive-details p {
  margin: 10px 0 0 !important;
  font-family: var(--ff-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.34 !important;
  color: rgba(248,241,227,0.82) !important;
}

.archive-matrix {
  display: grid !important;
  grid-template-columns: 164px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}

.archive-radar {
  position: relative !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212,175,55,0.34) !important;
  background:
    radial-gradient(circle, rgba(212,175,55,0.12) 0 2px, transparent 3px),
    radial-gradient(circle, transparent 0 32%, rgba(212,175,55,0.10) 33%, transparent 34%),
    radial-gradient(circle, transparent 0 61%, rgba(156,47,47,0.12) 62%, transparent 63%),
    rgba(4,4,4,0.30) !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.40), 0 0 24px rgba(212,175,55,0.06) !important;
}

.archive-radar span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1px !important;
  height: 100% !important;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.22), transparent) !important;
  transform-origin: center !important;
}

.archive-radar span:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) !important; }
.archive-radar span:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) !important; }
.archive-radar span:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) !important; }

.archive-radar-core {
  position: absolute !important;
  inset: 34px !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 220deg, rgba(212,175,55,0.10), rgba(212,175,55,0.48), rgba(156,47,47,0.22), rgba(212,175,55,0.10)) !important;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.22)) !important;
  animation: archiveRadar 8s linear infinite !important;
}

.archive-traits {
  display: grid !important;
  gap: 13px !important;
}

.archive-trait {
  display: grid !important;
  grid-template-columns: minmax(92px, 130px) 1fr 36px !important;
  gap: 12px !important;
  align-items: center !important;
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(248,241,227,0.72) !important;
}

.archive-trait i {
  height: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.07) !important;
}

.archive-trait b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(156,47,47,0.62), rgba(212,175,55,0.88), rgba(255,240,190,0.76)) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.28) !important;
}

.archive-trait em {
  font-style: normal !important;
  color: rgba(230,201,132,0.82) !important;
}

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

.archive-tabs {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.archive-tab {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(212,175,55,0.24) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.026) 0 1px, rgba(255,255,255,0.010) 2px, transparent 8px),
    linear-gradient(180deg, rgba(25,22,18,0.70), rgba(7,6,6,0.84)) !important;
  color: rgba(248,241,227,0.66) !important;
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease !important;
}

.archive-tab span {
  display: block !important;
  margin-bottom: 5px !important;
  color: rgba(212,175,55,0.70) !important;
}

.archive-tab:hover,
.archive-tab.is-active {
  transform: translateY(-2px) !important;
  border-color: rgba(230,201,132,0.52) !important;
  color: rgba(248,241,227,0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255,226,132,0.06),
    0 0 26px rgba(212,175,55,0.12),
    0 14px 30px rgba(0,0,0,0.28) !important;
}

@keyframes archivePulse {
  0%, 100% { opacity: 0.34; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes archiveRadar {
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .archive-stage {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .archive-portrait-panel {
    min-height: 560px !important;
  }

  .archive-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #chr-section.system-archive {
    padding-inline: 14px !important;
  }

  .archive-stage {
    padding: 12px !important;
    border-radius: 28px !important;
  }

  .archive-portrait-panel {
    min-height: 460px !important;
    border-radius: 24px !important;
  }

  .archive-dossier {
    border-radius: 24px !important;
    padding: 24px 18px !important;
  }

  .archive-split,
  .archive-matrix,
  .archive-details {
    grid-template-columns: 1fr !important;
  }

  .archive-radar {
    margin-inline: auto !important;
  }

  .archive-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-signal i,
  .archive-radar-core {
    animation: none !important;
  }

  .archive-portrait-panel,
  .archive-dossier,
  .archive-tab {
    transition: none !important;
  }
}


/* ===================== V201 SYSTEM ARCHIVE COMPACT FIT PASS =====================
   Goal: make the Character Dossier / System Archive fit better on one screen.
   Keeps the V200 structure and interaction, reduces inner scale/spacing.
   ============================================================================ */

#chr-section.system-archive {
  padding-top: clamp(72px, 6.4vw, 104px) !important;
  padding-bottom: clamp(72px, 6.4vw, 108px) !important;
}

.archive-header {
  margin-bottom: clamp(28px, 3.2vw, 44px) !important;
}

.archive-kicker {
  min-height: 30px !important;
  padding: 7px 15px 6px !important;
  font-size: 9px !important;
  letter-spacing: 0.26em !important;
}

.archive-title {
  margin: 18px 0 12px !important;
  font-size: clamp(44px, 5.8vw, 92px) !important;
  line-height: 0.92 !important;
}

.archive-desc {
  width: min(680px, 100%) !important;
  font-size: clamp(18px, 1.65vw, 26px) !important;
  line-height: 1.28 !important;
}

.archive-stage {
  grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr) !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  min-height: 560px !important;
  padding: clamp(12px, 1.4vw, 18px) !important;
  border-radius: clamp(26px, 2.4vw, 38px) !important;
}

.archive-stage::before {
  inset: 12px !important;
  border-radius: 24px !important;
}

.archive-portrait-panel {
  min-height: 520px !important;
  border-radius: 28px !important;
}

.archive-portrait {
  width: min(82%, 410px) !important;
  height: 92% !important;
  bottom: -4% !important;
}

.archive-portrait-caption {
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  padding: 11px 13px !important;
}

.archive-portrait-caption span,
.archive-portrait-caption strong {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
}

.archive-dossier {
  border-radius: 28px !important;
  padding: clamp(22px, 2.35vw, 34px) !important;
}

.archive-dossier-top {
  margin-bottom: clamp(18px, 2vw, 28px) !important;
}

.archive-access,
.archive-identity span,
.archive-split span,
.archive-details span {
  font-size: 9px !important;
  letter-spacing: 0.20em !important;
}

.archive-identity h3 {
  margin: 8px 0 5px !important;
  font-size: clamp(36px, 4vw, 58px) !important;
  line-height: 0.94 !important;
}

.archive-identity p {
  font-size: clamp(17px, 1.55vw, 23px) !important;
}

.archive-quote {
  margin: clamp(16px, 2vw, 26px) 0 !important;
  padding: 16px 0 16px 18px !important;
  font-size: clamp(20px, 1.85vw, 29px) !important;
  line-height: 1.16 !important;
}

.archive-split {
  gap: 10px !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.archive-split > div,
.archive-details > div {
  border-radius: 18px !important;
  padding: 13px 14px !important;
}

.archive-split p,
.archive-details p {
  margin-top: 7px !important;
  font-size: clamp(15px, 1.22vw, 19px) !important;
  line-height: 1.24 !important;
}

.archive-matrix {
  grid-template-columns: 122px minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.archive-radar {
  width: 116px !important;
  height: 116px !important;
}

.archive-radar-core {
  inset: 27px !important;
}

.archive-traits {
  gap: 9px !important;
}

.archive-trait {
  grid-template-columns: minmax(78px, 112px) 1fr 30px !important;
  gap: 9px !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
}

.archive-trait i {
  height: 4px !important;
}

.archive-details {
  gap: 10px !important;
}

.archive-tabs {
  gap: 8px !important;
  margin-top: 14px !important;
}

.archive-tab {
  min-height: 52px !important;
  padding: 8px 9px !important;
  border-radius: 15px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}

.archive-tab span {
  margin-bottom: 3px !important;
}

@media (min-width: 1200px) {
  .archive-shell {
    width: min(1320px, 100%) !important;
  }
}

@media (max-width: 1100px) {
  .archive-stage {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .archive-portrait-panel {
    min-height: 440px !important;
  }

  .archive-portrait {
    width: min(68%, 360px) !important;
  }
}

@media (max-width: 760px) {
  #chr-section.system-archive {
    padding-top: 64px !important;
    padding-bottom: 76px !important;
  }

  .archive-header {
    margin-bottom: 26px !important;
  }

  .archive-title {
    font-size: clamp(38px, 12vw, 58px) !important;
  }

  .archive-stage {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .archive-portrait-panel {
    min-height: 360px !important;
    border-radius: 22px !important;
  }

  .archive-portrait {
    width: min(74%, 320px) !important;
    height: 90% !important;
  }

  .archive-dossier {
    border-radius: 22px !important;
    padding: 20px 16px !important;
  }

  .archive-split,
  .archive-matrix,
  .archive-details {
    gap: 10px !important;
  }

  .archive-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===================== V202 READING MAP + ARCHIVE CLEANUP =====================
   1) Remove blinking decorative circles from Tropes/Warnings and Characters intro.
   2) Rebuild center plaque motion: remove orbiting dot, add radar-style sweeping light.
   ============================================================================ */

/* Kill old decorative blinking circles if any legacy markup/CSS still remains. */
#reading-map .reading-map-orbit,
#reading-map .reading-map-orbit span,
#chr-section .archive-signal,
#chr-section .archive-signal i {
  display: none !important;
  animation: none !important;
}

#chr-section .archive-dossier-top {
  justify-content: flex-start !important;
}

/* Center plaque: remove the orbiting golden dot completely. */
#reading-map .rm-core::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 184px !important;
  height: 184px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 247, 220, 0.16) 0%,
      rgba(255, 247, 220, 0.08) 6%,
      rgba(255, 247, 220, 0.00) 26%
    ),
    conic-gradient(
      from 232deg,
      rgba(255, 245, 212, 0.00) 0deg,
      rgba(255, 245, 212, 0.00) 300deg,
      rgba(255, 239, 199, 0.03) 308deg,
      rgba(240, 201, 104, 0.12) 316deg,
      rgba(255, 243, 203, 0.46) 323deg,
      rgba(240, 201, 104, 0.18) 330deg,
      rgba(156, 47, 47, 0.10) 338deg,
      rgba(255, 245, 212, 0.00) 348deg,
      rgba(255, 245, 212, 0.00) 360deg
    ) !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.92 !important;
  filter: blur(0.4px) !important;
  animation: rmCoreRadarSweep 6.8s linear infinite !important;
}

/* Outer ring locator light stays, but tuned to work with the new radar sweep. */
#reading-map .rm-core::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 194px !important;
  height: 194px !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    conic-gradient(
      from 222deg,
      rgba(255, 245, 212, 0) 0deg,
      rgba(255, 245, 212, 0) 282deg,
      rgba(255, 236, 186, 0.04) 294deg,
      rgba(240, 201, 104, 0.14) 306deg,
      rgba(240, 201, 104, 0.34) 316deg,
      rgba(255, 240, 196, 0.52) 322deg,
      rgba(240, 201, 104, 0.22) 330deg,
      rgba(156, 47, 47, 0.12) 336deg,
      rgba(255, 245, 212, 0) 350deg,
      rgba(255, 245, 212, 0) 360deg
    ) !important;
  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 20px),
      #000 calc(100% - 18px),
      #000 calc(100% - 6px),
      transparent calc(100% - 4px)
    ) !important;
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 20px),
      #000 calc(100% - 18px),
      #000 calc(100% - 6px),
      transparent calc(100% - 4px)
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.82 !important;
  animation: rmCoreRadarSweep 7.8s linear infinite !important;
}

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

@media (max-width: 1024px) {
  #reading-map .rm-core::before {
    width: 146px !important;
    height: 146px !important;
  }

  #reading-map .rm-core::after {
    width: 160px !important;
    height: 160px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core::before,
  #reading-map .rm-core::after {
    animation: none !important;
  }
}


/* ===================== V203 SYSTEM ARCHIVE ULTRA-COMPACT SCREEN FIT =====================
   Goal:
   - make the Character Dossier block fit inside the visible desktop screen;
   - reduce internal scale further than V201;
   - create more air;
   - place the full character image aesthetically inside the left window, not cut from below.
   ====================================================================================== */

#chr-section.system-archive {
  padding-top: clamp(46px, 4.2vw, 74px) !important;
  padding-bottom: clamp(54px, 4.8vw, 82px) !important;
  padding-left: clamp(18px, 3vw, 42px) !important;
  padding-right: clamp(18px, 3vw, 42px) !important;
}

.archive-shell {
  width: min(1260px, 100%) !important;
}

.archive-header {
  width: min(760px, 100%) !important;
  margin-bottom: clamp(22px, 2.4vw, 34px) !important;
}

.archive-kicker {
  min-height: 26px !important;
  padding: 6px 12px 5px !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
}

.archive-title {
  margin: 12px 0 8px !important;
  font-size: clamp(38px, 4.6vw, 72px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;
}

.archive-desc {
  width: min(620px, 100%) !important;
  font-size: clamp(15px, 1.25vw, 20px) !important;
  line-height: 1.32 !important;
  opacity: 0.78 !important;
}

.archive-stage {
  grid-template-columns: minmax(250px, 0.68fr) minmax(460px, 1.32fr) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  min-height: 460px !important;
  padding: clamp(10px, 1vw, 14px) !important;
  border-radius: 28px !important;
}

.archive-stage::before {
  inset: 9px !important;
  border-radius: 21px !important;
}

.archive-portrait-panel {
  min-height: 440px !important;
  max-height: 440px !important;
  border-radius: 24px !important;
  display: grid !important;
  place-items: center !important;
}

.archive-portrait-panel::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.22), transparent 42%, rgba(0,0,0,0.30)),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, rgba(0,0,0,0.46) 100%) !important;
}

.archive-portrait-glow {
  background:
    radial-gradient(circle at 50% 20%, rgba(212,175,55,0.14), transparent 34%),
    radial-gradient(circle at 50% 68%, rgba(156,47,47,0.10), transparent 40%) !important;
  opacity: 0.62 !important;
}

/* Full image sits inside the window. No bottom cut. */
.archive-portrait {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 82% !important;
  max-width: 360px !important;
  height: 82% !important;
  max-height: 370px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  z-index: 3 !important;
  margin: auto !important;
}

.archive-portrait-caption {
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  padding: 9px 11px !important;
}

.archive-portrait-caption span,
.archive-portrait-caption strong {
  font-size: 8px !important;
  letter-spacing: 0.15em !important;
}

.archive-dossier {
  border-radius: 24px !important;
  padding: clamp(18px, 1.8vw, 26px) !important;
}

.archive-dossier::before {
  width: 170px !important;
  height: 170px !important;
  right: -58px !important;
  top: -70px !important;
  opacity: 0.58 !important;
}

.archive-dossier-top {
  margin-bottom: 14px !important;
}

.archive-access,
.archive-identity span,
.archive-split span,
.archive-details span {
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
}

.archive-identity h3 {
  margin: 6px 0 4px !important;
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 0.96 !important;
}

.archive-identity p {
  font-size: clamp(15px, 1.24vw, 19px) !important;
}

.archive-quote {
  margin: 13px 0 16px !important;
  padding: 12px 0 12px 15px !important;
  font-size: clamp(17px, 1.45vw, 23px) !important;
  line-height: 1.16 !important;
}

.archive-split {
  gap: 9px !important;
  margin-bottom: 14px !important;
}

.archive-split > div,
.archive-details > div {
  border-radius: 15px !important;
  padding: 10px 11px !important;
}

.archive-split p,
.archive-details p {
  margin-top: 5px !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.22 !important;
}

.archive-matrix {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 13px !important;
  margin-bottom: 14px !important;
}

.archive-radar {
  width: 88px !important;
  height: 88px !important;
}

.archive-radar-core {
  inset: 22px !important;
}

.archive-traits {
  gap: 7px !important;
}

.archive-trait {
  grid-template-columns: minmax(72px, 96px) 1fr 26px !important;
  gap: 8px !important;
  font-size: 8px !important;
  letter-spacing: 0.10em !important;
}

.archive-trait i {
  height: 3px !important;
}

.archive-details {
  gap: 9px !important;
}

.archive-tabs {
  gap: 7px !important;
  margin-top: 10px !important;
}

.archive-tab {
  min-height: 44px !important;
  padding: 7px 7px !important;
  border-radius: 13px !important;
  font-size: 8px !important;
  letter-spacing: 0.11em !important;
}

.archive-tab span {
  margin-bottom: 2px !important;
}

@media (min-width: 1280px) {
  .archive-stage {
    max-height: 488px !important;
  }
}

/* On shorter laptop-height screens: even tighter. */
@media (min-width: 900px) and (max-height: 820px) {
  #chr-section.system-archive {
    padding-top: 34px !important;
    padding-bottom: 46px !important;
  }

  .archive-header {
    margin-bottom: 18px !important;
  }

  .archive-title {
    font-size: clamp(34px, 4vw, 62px) !important;
  }

  .archive-desc {
    font-size: clamp(14px, 1vw, 18px) !important;
  }

  .archive-stage {
    min-height: 420px !important;
  }

  .archive-portrait-panel {
    min-height: 400px !important;
    max-height: 400px !important;
  }

  .archive-portrait {
    max-height: 330px !important;
  }

  .archive-identity h3 {
    font-size: clamp(28px, 2.7vw, 40px) !important;
  }

  .archive-quote {
    font-size: clamp(16px, 1.25vw, 20px) !important;
    margin: 10px 0 12px !important;
  }

  .archive-split,
  .archive-matrix {
    margin-bottom: 10px !important;
  }

  .archive-tabs {
    margin-top: 8px !important;
  }
}

@media (max-width: 1100px) {
  .archive-stage {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .archive-portrait-panel {
    min-height: 360px !important;
    max-height: none !important;
  }

  .archive-portrait {
    width: min(70%, 320px) !important;
    height: 78% !important;
    max-height: 300px !important;
  }
}

@media (max-width: 760px) {
  #chr-section.system-archive {
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }

  .archive-header {
    margin-bottom: 20px !important;
  }

  .archive-title {
    font-size: clamp(34px, 10vw, 50px) !important;
  }

  .archive-stage {
    border-radius: 22px !important;
  }

  .archive-portrait-panel {
    min-height: 320px !important;
  }

  .archive-portrait {
    width: min(72%, 280px) !important;
    max-height: 260px !important;
  }

  .archive-dossier {
    padding: 18px 14px !important;
  }

  .archive-split,
  .archive-matrix,
  .archive-details {
    grid-template-columns: 1fr !important;
  }
}


/* ===================== V204 SYSTEM ARCHIVE TABS TOP + TRUE RADAR SWEEP =====================
   1) Character selector buttons moved above the character window in HTML.
   2) Buttons become smaller, more elegant, luxury/nav-style.
   3) Reading Map center plaque gets true living radar sweep.
   ======================================================================================= */

/* Character tabs now live above the archive-stage. */
#chr-section.system-archive .archive-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  width: min(880px, 100%) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  z-index: 4 !important;
}

#chr-section.system-archive .archive-tab {
  position: relative !important;
  min-height: 34px !important;
  min-width: auto !important;
  width: auto !important;
  padding: 7px 12px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.026) 0px,
      rgba(255,255,255,0.026) 1px,
      rgba(255,255,255,0.008) 2px,
      rgba(0,0,0,0.00) 8px),
    linear-gradient(180deg,
      rgba(30,27,23,0.76) 0%,
      rgba(12,10,9,0.88) 58%,
      rgba(6,5,5,0.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.54),
    0 0 0 1px rgba(255,226,132,0.035),
    0 8px 18px rgba(0,0,0,0.20),
    0 0 18px rgba(212,175,55,0.045) !important;
  color: rgba(248,241,227,0.66) !important;
  font-family: var(--ff-sans, Inter, Arial, sans-serif) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    background 220ms ease !important;
}

#chr-section.system-archive .archive-tab::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 36%,
      rgba(255,239,177,0.00) 44%,
      rgba(255,236,170,0.18) 49%,
      rgba(255,255,230,0.32) 51%,
      rgba(212,175,55,0.10) 56%,
      transparent 66%,
      transparent 100%) !important;
  transform: translateX(-120%) skewX(-16deg) !important;
  opacity: 0 !important;
  transition: transform 520ms ease, opacity 240ms ease !important;
  z-index: 1 !important;
}

#chr-section.system-archive .archive-tab span {
  display: inline !important;
  margin: 0 6px 0 0 !important;
  color: rgba(212,175,55,0.70) !important;
  font-size: 7px !important;
  letter-spacing: 0.12em !important;
  position: relative !important;
  z-index: 2 !important;
}

#chr-section.system-archive .archive-tab {
  position: relative !important;
  z-index: 1 !important;
}

#chr-section.system-archive .archive-tab:hover,
#chr-section.system-archive .archive-tab.is-active {
  transform: translateY(-1px) !important;
  border-color: rgba(230,201,132,0.52) !important;
  color: rgba(248,241,227,0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,226,132,0.06),
    0 0 20px rgba(212,175,55,0.12),
    0 10px 22px rgba(0,0,0,0.26) !important;
}

#chr-section.system-archive .archive-tab:hover::before,
#chr-section.system-archive .archive-tab.is-active::before {
  transform: translateX(120%) skewX(-16deg) !important;
  opacity: 1 !important;
}

#chr-section.system-archive .archive-stage {
  margin-top: 0 !important;
}

/* ===================== RM CORE — TRUE RADAR SWEEP ===================== */

/* Replace the old orbit dot with a true radar beam that rotates around the center. */
#reading-map .rm-core::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 184px !important;
  height: 184px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 3 !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 246, 214, 0.18) 0%,
      rgba(255, 233, 170, 0.10) 10%,
      rgba(255, 233, 170, 0.02) 20%,
      rgba(255, 233, 170, 0.00) 30%
    ),
    conic-gradient(
      from 0deg,
      rgba(255, 245, 212, 0.00) 0deg,
      rgba(255, 245, 212, 0.00) 312deg,
      rgba(255, 244, 214, 0.04) 320deg,
      rgba(255, 233, 170, 0.12) 328deg,
      rgba(255, 240, 196, 0.78) 336deg,
      rgba(240, 201, 104, 0.46) 343deg,
      rgba(156, 47, 47, 0.18) 349deg,
      rgba(255, 245, 212, 0.00) 360deg
    ) !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  filter: blur(0.6px) !important;
  opacity: 0.96 !important;
  animation:
    rmCoreRadarSweepV204 5.6s linear infinite,
    rmCoreRadarFlickerV204 2.8s ease-in-out infinite !important;
}

/* Outer ring / secondary locator sweep. */
#reading-map .rm-core::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 194px !important;
  height: 194px !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 245, 212, 0) 0deg,
      rgba(255, 245, 212, 0) 300deg,
      rgba(255, 236, 186, 0.03) 312deg,
      rgba(240, 201, 104, 0.10) 322deg,
      rgba(255, 240, 196, 0.34) 332deg,
      rgba(240, 201, 104, 0.16) 340deg,
      rgba(156, 47, 47, 0.10) 348deg,
      rgba(255, 245, 212, 0) 360deg
    ) !important;
  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 20px),
      #000 calc(100% - 18px),
      #000 calc(100% - 6px),
      transparent calc(100% - 4px)
    ) !important;
  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 20px),
      #000 calc(100% - 18px),
      #000 calc(100% - 6px),
      transparent calc(100% - 4px)
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.82 !important;
  filter: blur(0.3px) !important;
  animation:
    rmCoreRadarSweepV204 7.4s linear infinite,
    rmCoreRadarOuterPulseV204 4.2s ease-in-out infinite !important;
}

/* Inner radar light. */
#reading-map .rm-core-ring::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 14px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0) 0 54%,
      rgba(255, 231, 175, 0.035) 61%,
      rgba(255, 231, 175, 0) 74%
    ),
    conic-gradient(
      from 0deg,
      rgba(255, 243, 203, 0) 0deg,
      rgba(255, 243, 203, 0) 310deg,
      rgba(255, 242, 204, 0.04) 320deg,
      rgba(236, 193, 96, 0.12) 330deg,
      rgba(255, 240, 191, 0.22) 338deg,
      rgba(236, 193, 96, 0.08) 346deg,
      rgba(255, 243, 203, 0) 360deg
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.72 !important;
  animation:
    rmCoreRadarInnerSweepV204 6.1s linear infinite,
    rmCoreRadarFlickerV204 3.4s ease-in-out infinite !important;
}

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

@keyframes rmCoreRadarInnerSweepV204 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rmCoreRadarFlickerV204 {
  0%, 100% {
    opacity: 0.84;
    filter: blur(0.6px) brightness(0.96);
  }
  18% {
    opacity: 0.92;
    filter: blur(0.5px) brightness(1.02);
  }
  37% {
    opacity: 1;
    filter: blur(0.35px) brightness(1.08);
  }
  52% {
    opacity: 0.88;
    filter: blur(0.55px) brightness(0.98);
  }
  68% {
    opacity: 0.98;
    filter: blur(0.4px) brightness(1.06);
  }
  84% {
    opacity: 0.90;
    filter: blur(0.5px) brightness(1.00);
  }
}

@keyframes rmCoreRadarOuterPulseV204 {
  0%, 100% {
    opacity: 0.68;
    filter: blur(0.4px) brightness(0.94);
  }
  50% {
    opacity: 0.90;
    filter: blur(0.2px) brightness(1.08);
  }
}

@media (max-width: 1024px) {
  #chr-section.system-archive .archive-tabs {
    width: min(720px, 100%) !important;
    margin-bottom: 14px !important;
  }

  #chr-section.system-archive .archive-tab {
    min-height: 32px !important;
    padding: 6px 10px 5px !important;
    font-size: 7.5px !important;
  }

  #reading-map .rm-core::before {
    width: 146px !important;
    height: 146px !important;
  }

  #reading-map .rm-core::after {
    width: 160px !important;
    height: 160px !important;
  }
}

@media (max-width: 760px) {
  #chr-section.system-archive .archive-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  #chr-section.system-archive .archive-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #chr-section.system-archive .archive-tab {
    flex: 0 0 auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core::before,
  #reading-map .rm-core::after,
  #reading-map .rm-core-ring::before,
  #chr-section.system-archive .archive-tab::before {
    animation: none !important;
    transition: none !important;
  }
}


/* ===================== V205 MOBILE HERO BOOK DROP + RADAR SWEEP FIX =====================
   1) Mobile: push the hero book lower so it never touches the READ NOW nav CTA while levitating.
   2) Reading Map: fix the radar beam animation so the light actually rotates around the center.
   ================================================================================ */

/* MOBILE HERO BOOK — move the book lower under the Read Now bar. */
@media (max-width: 768px) {
  #hero .hero-right {
    margin-top: clamp(118px, 19vh, 190px) !important;
    transform: translate3d(0, clamp(58px, 9vh, 96px), 0) !important;
    z-index: 12 !important;
  }

  #hero .interactive-book,
  #hero .stage {
    transform: translate3d(0, clamp(46px, 7vh, 82px), 0) !important;
  }

  #hero .book-closed {
    transform-origin: center center !important;
  }
}

/* On very narrow screens, add a bit more safety space. */
@media (max-width: 480px) {
  #hero .hero-right {
    margin-top: clamp(140px, 22vh, 220px) !important;
    transform: translate3d(0, clamp(72px, 10vh, 110px), 0) !important;
  }

  #hero .interactive-book,
  #hero .stage {
    transform: translate3d(0, clamp(58px, 8vh, 96px), 0) !important;
  }
}

/* READING MAP RADAR FIX
   Problem: previous beam used transform animation on ::before/::after, but old rules/keyframes
   and inherited transform overrides can cancel the visible rotation.
   Fix: create a dedicated .rm-core-ring::before radar beam that rotates by itself inside the orb.
*/

/* Stop old/non-working pseudo animation layers from fighting the new beam. */
#reading-map .rm-core::before,
#reading-map .rm-core::after {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Keep the ring rotating slowly, but not required for the radar beam. */
#reading-map .rm-core-ring {
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Real radar beam: clipped inside the circular ring and rotates around its center. */
#reading-map .rm-core-ring::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  z-index: 3 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 246, 214, 0.16) 0%,
      rgba(255, 235, 174, 0.10) 9%,
      rgba(255, 235, 174, 0.035) 18%,
      rgba(255, 235, 174, 0.00) 31%
    ),
    conic-gradient(
      from -18deg,
      rgba(255, 245, 212, 0.00) 0deg,
      rgba(255, 245, 212, 0.00) 284deg,
      rgba(255, 238, 186, 0.025) 296deg,
      rgba(240, 201, 104, 0.10) 306deg,
      rgba(255, 241, 199, 0.42) 318deg,
      rgba(255, 255, 235, 0.76) 326deg,
      rgba(240, 201, 104, 0.32) 334deg,
      rgba(156, 47, 47, 0.14) 343deg,
      rgba(255, 245, 212, 0.00) 356deg,
      rgba(255, 245, 212, 0.00) 360deg
    ) !important;

  mix-blend-mode: screen !important;
  opacity: 0.92 !important;
  filter: blur(0.45px) brightness(1.04) !important;
  transform-origin: 50% 50% !important;
  animation:
    kaqV205RadarSweep 4.8s linear infinite,
    kaqV205RadarFlicker 2.7s ease-in-out infinite !important;
  will-change: transform, opacity, filter !important;
}

/* Secondary ring glint for the outer edge; this one rotates slower. */
#reading-map .rm-core-ring::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 19px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 242, 214, 0.08),
      rgba(255, 242, 214, 0) 28%
    ),
    linear-gradient(
      180deg,
      rgba(20, 17, 15, 0.90) 0%,
      rgba(9, 8, 8, 0.955) 56%,
      rgba(6, 5, 5, 0.965) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px rgba(212, 175, 55, 0.05),
    0 0 18px rgba(212, 175, 55, 0.05) !important;
}

/* Add a separate visible rotating ring sweep on top edge via a nested-like overlay.
   We use outline-style box-shadow pulse since ::after is used for readable center. */
#reading-map .rm-core-ring {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.14),
    0 0 30px rgba(212, 175, 55, 0.12),
    0 0 46px rgba(156, 47, 47, 0.08),
    inset 0 0 28px rgba(0, 0, 0, 0.42) !important;
}

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

@keyframes kaqV205RadarFlicker {
  0%, 100% {
    opacity: 0.78;
    filter: blur(0.55px) brightness(0.96);
  }
  18% {
    opacity: 0.90;
    filter: blur(0.46px) brightness(1.02);
  }
  38% {
    opacity: 1;
    filter: blur(0.28px) brightness(1.12);
  }
  56% {
    opacity: 0.84;
    filter: blur(0.52px) brightness(0.98);
  }
  74% {
    opacity: 0.96;
    filter: blur(0.36px) brightness(1.08);
  }
}

/* Mobile ring sizing stays aligned with the compact orb. */
@media (max-width: 1024px) {
  #reading-map .rm-core-ring::after {
    inset: 16px !important;
  }
}

/* Do not let old reduced-motion blocks accidentally leave the beam half-visible. */
@media (prefers-reduced-motion: reduce) {
  #reading-map .rm-core-ring::before {
    animation: none !important;
    opacity: 0.42 !important;
  }
}


/* ===================== V206 MOBILE HERO CTA REMOVAL + BOOK REALIGN =====================
   Mobile-only:
   - hide the large standalone READ NOW button under the nav;
   - keep the menu CTA intact;
   - lift and center the hero book;
   - reduce excessive empty vertical space between nav, book, and title.
   ================================================================================ */

@media (max-width: 768px) {
  /* Hide only the large standalone mobile CTA bar under the header. */
  .nav-cta.nav-cta-standalone,
  .site-header > .nav-cta,
  .nav-shell + .nav-cta,
  header > .nav-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Tighten the mobile hero vertical rhythm after removing the CTA. */
  #hero {
    padding-top: clamp(96px, 15vh, 128px) !important;
    gap: 14px !important;
  }

  /* Undo the previous mobile book drop and place the book higher/cleaner. */
  #hero .hero-right {
    order: 1 !important;
    margin-top: clamp(18px, 3.6vh, 38px) !important;
    margin-bottom: clamp(8px, 2vh, 20px) !important;
    transform: translate3d(0, 0, 0) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 12 !important;
  }

  #hero .interactive-book,
  #hero .stage {
    transform: translate3d(0, 0, 0) !important;
    margin: 0 auto !important;
  }

  /* Keep the book visually centered and slightly compact on mobile. */
  #hero .stage {
    width: min(76vw, 340px) !important;
    min-height: 0 !important;
  }

  #hero .book-closed {
    width: min(64vw, 270px) !important;
    max-width: 270px !important;
    transform-origin: center center !important;
  }

  /* Put title/copy below the book with small, controlled spacing. */
  #hero .hero-left,
  #hero .hero-left--editorial {
    order: 2 !important;
    margin-top: clamp(8px, 1.8vh, 18px) !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  #hero .hero-kicker,
  #hero .hero-title-kicker {
    margin-top: 0 !important;
  }

  #hero .hero-title {
    margin-top: clamp(8px, 1.4vh, 14px) !important;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: clamp(88px, 13vh, 116px) !important;
  }

  #hero .hero-right {
    margin-top: clamp(12px, 2.6vh, 28px) !important;
    margin-bottom: clamp(6px, 1.4vh, 14px) !important;
  }

  #hero .stage {
    width: min(78vw, 310px) !important;
  }

  #hero .book-closed {
    width: min(66vw, 250px) !important;
    max-width: 250px !important;
  }

  #hero .hero-left,
  #hero .hero-left--editorial {
    margin-top: 6px !important;
  }
}

/* If a separate mobile drawer contains its own CTA, keep it available. */
@media (max-width: 768px) {
  .mobile-menu .nav-cta,
  .mobile-menu-panel .nav-cta,
  .mobile-nav .nav-cta,
  [data-mobile-menu] .nav-cta {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* ===================== V207 MOBILE HERO BOOK MINI FIT =====================
   Goal:
   - reduce the mobile hero book size;
   - keep it cleanly between the nav and the title;
   - prevent touching/overlapping nav, title, quote, and audio.
   ======================================================================= */

@media (max-width: 768px) {
  #hero {
    padding-top: clamp(96px, 13vh, 118px) !important;
    gap: 8px !important;
  }

  #hero .hero-right {
    order: 1 !important;
    width: 100% !important;
    margin-top: clamp(10px, 2.2vh, 22px) !important;
    margin-bottom: clamp(18px, 3vh, 34px) !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #hero .interactive-book,
  #hero .stage,
  #hero .book-wrap,
  #hero .book-scene {
    transform: none !important;
    margin: 0 auto !important;
  }

  /* Main size control: compact book between nav and title. */
  #hero .stage {
    width: min(50vw, 230px) !important;
    max-width: 230px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #hero .interactive-book {
    width: min(50vw, 230px) !important;
    max-width: 230px !important;
  }

  #hero .book-closed {
    width: min(46vw, 210px) !important;
    max-width: 210px !important;
    height: auto !important;
    transform-origin: center center !important;
  }

  #hero .book-closed img,
  #hero .book-cover img,
  #hero .cover-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Title starts lower, with clean air under the book. */
  #hero .hero-left,
  #hero .hero-left--editorial {
    order: 2 !important;
    margin-top: clamp(12px, 2.4vh, 26px) !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  #hero .hero-title,
  #hero .hero-title--editorial,
  #hero h1 {
    margin-top: clamp(8px, 1.8vh, 16px) !important;
  }
}

/* Narrow mobile: even smaller and safer. */
@media (max-width: 480px) {
  #hero {
    padding-top: clamp(90px, 12vh, 108px) !important;
  }

  #hero .hero-right {
    margin-top: clamp(8px, 1.8vh, 18px) !important;
    margin-bottom: clamp(16px, 2.6vh, 28px) !important;
  }

  #hero .stage,
  #hero .interactive-book {
    width: min(48vw, 205px) !important;
    max-width: 205px !important;
  }

  #hero .book-closed {
    width: min(44vw, 188px) !important;
    max-width: 188px !important;
  }

  #hero .hero-left,
  #hero .hero-left--editorial {
    margin-top: clamp(10px, 2vh, 20px) !important;
  }
}

/* Very small / short mobile screens: keep the hero compact. */
@media (max-width: 420px), (max-height: 760px) and (max-width: 768px) {
  #hero .stage,
  #hero .interactive-book {
    width: min(44vw, 185px) !important;
    max-width: 185px !important;
  }

  #hero .book-closed {
    width: min(40vw, 168px) !important;
    max-width: 168px !important;
  }

  #hero .hero-right {
    margin-bottom: clamp(14px, 2.2vh, 24px) !important;
  }
}


/* ===================== V208 SYSTEM ARCHIVE LANGUAGE IMAGE FIT =====================
   EN uses full card images supplied separately.
   RU keeps the existing project character assets.
   This pass ensures both languages fit cleanly in the left archive window.
   ============================================================================== */

#chr-section.system-archive .archive-portrait {
  object-fit: contain !important;
  object-position: center center !important;
}

/* English dossier card images are vertical/card-like; let them breathe inside the frame. */
html[lang="en"] #chr-section.system-archive .archive-portrait,
body[data-lang="en"] #chr-section.system-archive .archive-portrait {
  width: min(92%, 390px) !important;
  max-width: 390px !important;
  height: 90% !important;
  max-height: 395px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 42px rgba(0,0,0,0.36),
    0 0 28px rgba(212,175,55,0.08) !important;
}

/* RU original portraits remain more portrait-object oriented. */
html[lang="ru"] #chr-section.system-archive .archive-portrait,
body[data-lang="ru"] #chr-section.system-archive .archive-portrait {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 768px) {
  html[lang="en"] #chr-section.system-archive .archive-portrait,
  body[data-lang="en"] #chr-section.system-archive .archive-portrait {
    width: min(88%, 310px) !important;
    max-height: 310px !important;
  }
}


/* ===================== V209 AUTHOR PLAQUE + SUBSCRIBE EMAIL FORM =====================
   1) Author block: replace heavy rectangular background with refined transparent glass plaque.
   2) Subscribe form: keep design after converting div to real form endpoint.
   ================================================================================ */

/* AUTHOR — refined background plate */
#author {
  position: relative !important;
  padding: clamp(86px, 8vw, 124px) clamp(24px, 5vw, 64px) !important;
  border-top: 1px solid rgba(212,175,55,0.14) !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#author::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 16% 36%, rgba(212,175,55,0.10), transparent 30%),
    radial-gradient(circle at 78% 48%, rgba(156,47,47,0.08), transparent 34%),
    linear-gradient(180deg, rgba(6,5,5,0.24), rgba(6,5,5,0.10) 42%, rgba(6,5,5,0.34)) !important;
}

#author .author-layout {
  position: relative !important;
  width: min(1220px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.78fr) !important;
  gap: clamp(34px, 5vw, 70px) !important;
  align-items: start !important;
}

/* The right text panel becomes the controlled glass plaque, not a flat block. */
#author .author-right {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 38px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.026) 0px,
      rgba(255,255,255,0.026) 1px,
      rgba(255,255,255,0.008) 2px,
      rgba(0,0,0,0) 9px),
    radial-gradient(circle at 18% 12%, rgba(255,244,214,0.075), transparent 34%),
    radial-gradient(circle at 92% 78%, rgba(156,47,47,0.065), transparent 36%),
    linear-gradient(180deg, rgba(17,15,13,0.64), rgba(6,5,5,0.70)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.075),
    inset 0 -1px 0 rgba(0,0,0,0.46),
    0 24px 68px rgba(0,0,0,0.26),
    0 0 36px rgba(212,175,55,0.035) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
}

#author .author-right::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 29px !important;
  border: 1px solid rgba(230,201,132,0.07) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#author .author-right::after {
  content: "" !important;
  position: absolute !important;
  right: -72px !important;
  top: -84px !important;
  width: 210px !important;
  height: 210px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212,175,55,0.10) !important;
  box-shadow:
    inset 0 0 30px rgba(212,175,55,0.035),
    0 0 38px rgba(212,175,55,0.025) !important;
  pointer-events: none !important;
}

#author .author-heading {
  font-size: clamp(42px, 4.4vw, 66px) !important;
}

#author .author-body {
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.72 !important;
}

#author .author-facts {
  margin-top: 28px !important;
  border-top-color: rgba(212,175,55,0.22) !important;
}

#author .author-fact {
  padding: 12px 0 !important;
  border-bottom-color: rgba(212,175,55,0.10) !important;
}

#author .author-social {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(255,255,255,0.006) 2px,
      rgba(0,0,0,0) 8px),
    rgba(8,7,6,0.38) !important;
  border-color: rgba(212,175,55,0.28) !important;
}

/* SUBSCRIBE form after converting div to form */
#subscribe .subscribe-form {
  display: flex !important;
  gap: 0 !important;
  border: 1px solid var(--gold-dark) !important;
  margin: 0 auto !important;
  width: min(760px, 100%) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      rgba(255,255,255,0.006) 2px,
      rgba(0,0,0,0) 9px),
    rgba(5,5,5,0.30) !important;
}

#subscribe .subscribe-input {
  min-width: 0 !important;
}

#subscribe .subscribe-submit {
  min-width: clamp(180px, 24vw, 260px) !important;
}

@media (max-width: 980px) {
  #author .author-layout {
    grid-template-columns: 1fr !important;
  }

  #author .author-right {
    padding: 28px 22px !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 640px) {
  #subscribe .subscribe-form {
    flex-direction: column !important;
    border-radius: 28px !important;
  }

  #subscribe .subscribe-input,
  #subscribe .subscribe-submit {
    width: 100% !important;
  }

  #subscribe .subscribe-submit {
    min-width: 0 !important;
  }
}


/* ===================== V210 MOBILE HERO BOOK NAV CLEARANCE =====================
   Mobile-only:
   lower the hero book slightly so it no longer touches the nav,
   while preserving the compact V207 book size.
   =========================================================================== */

@media (max-width: 768px) {
  #hero .hero-right {
    margin-top: clamp(32px, 5.2vh, 58px) !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-right {
    margin-top: clamp(38px, 5.8vh, 68px) !important;
  }
}

@media (max-width: 420px), (max-height: 760px) and (max-width: 768px) {
  #hero .hero-right {
    margin-top: clamp(42px, 6.4vh, 76px) !important;
  }
}


/* ===================== V222 CHARACTER TRAIT BAR FILL ANIMATION =====================
   Technical micro-interaction only.
   Trait bars fill automatically to their target value when a character becomes active.
   =============================================================================== */

#chr-section.system-archive .archive-trait i {
  position: relative !important;
  overflow: hidden !important;
}

#chr-section.system-archive .archive-trait b {
  width: 0% !important;
  transform-origin: left center !important;
  transition:
    width 1250ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 1250ms ease,
    box-shadow 1250ms ease !important;
  will-change: width !important;
}

#chr-section.system-archive .archive-stage.traits-armed .archive-trait b {
  width: var(--trait-target, 0%) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 10px rgba(212,175,55,0.24),
    0 0 18px rgba(156,47,47,0.10) !important;
}

#chr-section.system-archive .archive-trait i::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,244,214,0.00) 38%,
      rgba(255,244,214,0.26) 50%,
      rgba(212,175,55,0.10) 58%,
      transparent 72%
    ) !important;
  transform: translateX(-130%) skewX(-14deg) !important;
  opacity: 0 !important;
}

#chr-section.system-archive .archive-stage.traits-armed .archive-trait i::after {
  animation: kaqV222TraitSheen 1350ms cubic-bezier(0.19, 1, 0.22, 1) 120ms 1 both !important;
}

#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(2) b {
  transition-delay: 90ms !important;
}
#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(3) b {
  transition-delay: 180ms !important;
}
#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(4) b {
  transition-delay: 270ms !important;
}

#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(2) i::after {
  animation-delay: 210ms !important;
}
#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(3) i::after {
  animation-delay: 300ms !important;
}
#chr-section.system-archive .archive-stage.traits-armed .archive-trait:nth-child(4) i::after {
  animation-delay: 390ms !important;
}

@keyframes kaqV222TraitSheen {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-14deg);
  }
  18% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-14deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #chr-section.system-archive .archive-trait b {
    transition-duration: 1ms !important;
  }

  #chr-section.system-archive .archive-stage.traits-armed .archive-trait i::after {
    animation: none !important;
  }
}



/* ===================== V226 RESPONSIVE BACKGROUND PERFORMANCE =====================
   Uses lighter responsive background files on tablet/mobile. Visual composition is preserved.
   ============================================================================== */
@media (max-width: 1180px) {
  :root {
    --v95-master-bg: url("../assets/hero/master-background-selected-tablet.webp") !important;
    --v99-selected-bg: url("../assets/hero/master-background-selected-tablet.webp") !important;
    --v106-stable-bg: url("../assets/hero/master-background-selected-tablet.webp") !important;
  }
}





/* ===================== V241 GLOBAL TEXT TYPOGRAPHY UNIFICATION =====================
   Unify ordinary website copy with the Characters / System Archive text style.
   Scope: readable body copy, cards, descriptions, blurbs, paragraphs.
   Excluded: nav, buttons, labels, controls, audio UI, language switcher,
   book-page typography, and small uppercase metadata.
   ============================================================================== */

:root {
  --kaq-copy-serif: var(--ff-serif, "Cormorant Garamond", Georgia, serif);
  --kaq-copy-color: rgba(248, 241, 227, 0.82);
  --kaq-copy-muted: rgba(248, 241, 227, 0.72);
  --kaq-copy-gold-soft: rgba(230, 201, 132, 0.84);
}

/* Main prose / descriptive text */
body :where(
  .section-copy,
  .section-desc,
  .section-subtitle,
  .section-intro,
  .section-text,
  .hero-subtitle,
  .hero-copy,
  .book-copy,
  .book-description,
  .about-copy,
  .about-text,
  .about-book-copy,
  .author-copy,
  .author-bio,
  .reader-copy,
  .sample-copy,
  .format-copy,
  .where-copy,
  .faq-answer,
  .faq p,
  .card-copy,
  .card-text,
  .card-description,
  .panel-copy,
  .panel-text,
  .glass-copy,
  .glass-text,
  .copy,
  .text-block,
  article p,
  section p
):not(
  .nav-shell *
):not(
  .nav *
):not(
  .nav-cta *
):not(
  .hero-nav-cta *
):not(
  button *
):not(
  .btn *
):not(
  .cta *
):not(
  .audio-dock *
):not(
  .lang-switch *
):not(
  .archive-tab *
):not(
  .archive-kicker
):not(
  .archive-access
):not(
  .archive-trait *
):not(
  .spice-meter *
):not(
  .rm-core *
):not(
  .interactive-book *
):not(
  .pg-text *
):not(
  .pg-book-copy *
) {
  font-family: var(--kaq-copy-serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.004em !important;
  line-height: 1.38 !important;
  color: var(--kaq-copy-color) !important;
  text-wrap: pretty;
}

/* Paragraph rhythm closer to the Character Dossier cards */
body :where(
  article p,
  section p,
  .section-copy p,
  .section-desc p,
  .about-copy p,
  .author-copy p,
  .book-copy p,
  .card-copy p,
  .card-text p,
  .panel-copy p,
  .faq-answer p
):not(
  .nav-shell *
):not(
  .audio-dock *
):not(
  .interactive-book *
) {
  margin-top: 0 !important;
  margin-bottom: 0.72em !important;
}

/* Strong / highlighted copy in prose should inherit the premium gold-soft feel */
body :where(
  article p strong,
  section p strong,
  .section-copy strong,
  .section-desc strong,
  .about-copy strong,
  .author-copy strong,
  .book-copy strong,
  .card-copy strong,
  .panel-copy strong
):not(
  .nav-shell *
):not(
  .audio-dock *
):not(
  .interactive-book *
) {
  font-weight: 500 !important;
  color: var(--kaq-copy-gold-soft) !important;
}

/* Lists in content areas match the same prose voice */
body :where(
  section li,
  article li,
  .card-copy li,
  .panel-copy li,
  .about-copy li,
  .author-copy li
):not(
  .nav-shell *
):not(
  .audio-dock *
):not(
  .interactive-book *
) {
  font-family: var(--kaq-copy-serif) !important;
  font-weight: 300 !important;
  line-height: 1.34 !important;
  color: var(--kaq-copy-muted) !important;
}

/* Keep small technical UI labels in the existing sans style */
body :where(
  .section-label,
  .eyebrow,
  .kicker,
  .tag,
  .chip,
  .pill,
  .meta,
  .label,
  .nav-link,
  .footer-link,
  .footer-links-col-title,
  .archive-kicker,
  .archive-access,
  .archive-trait,
  .archive-tab,
  .where-badge,
  .format-badge,
  .audio-label,
  .audio-track-name
) {
  font-family: var(--ff-sans, Inter, Arial, sans-serif);
}

/* Slightly better mobile readability without changing layout */
@media (max-width: 760px) {
  body :where(
    .section-copy,
    .section-desc,
    .section-subtitle,
    .section-intro,
    .section-text,
    .hero-subtitle,
    .hero-copy,
    .book-copy,
    .book-description,
    .about-copy,
    .about-text,
    .author-copy,
    .author-bio,
    .faq-answer,
    .card-copy,
    .card-text,
    article p,
    section p
  ):not(
    .nav-shell *
  ):not(
    .audio-dock *
  ):not(
    .interactive-book *
  ) {
    line-height: 1.32 !important;
    letter-spacing: 0.002em !important;
  }
}


/* ===================== V242 LIGHTWEIGHT DENSE RUBY PETALS =====================
   Goal: more visible petals with less lag.
   Fix:
   - no expensive drop-shadow / blur filters
   - smaller petals
   - more far/mid petals instead of many heavy near petals
   - transform + opacity only
   - mobile gets denser but lighter petals
   ========================================================================== */

#kaqPetalsLayer.kaq-petals-layer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 108 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  contain: layout paint style !important;
  isolation: isolate !important;
}

#kaqPetalsLayer .kaq-falling-petal {
  position: absolute;
  top: -24vh;
  left: var(--kaq-petal-left, 50vw);
  width: var(--kaq-petal-size, 26px);
  height: auto;
  display: block;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  filter: none !important;
  animation-name: kaqV242PetalFall;
  animation-duration: var(--kaq-petal-duration, 30s);
  animation-delay: var(--kaq-petal-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: running;
}

#kaqPetalsLayer .kaq-falling-petal[data-depth="near"] {
  z-index: 3;
}

#kaqPetalsLayer .kaq-falling-petal[data-depth="mid"] {
  z-index: 2;
}

#kaqPetalsLayer .kaq-falling-petal[data-depth="far"] {
  z-index: 1;
}

@keyframes kaqV242PetalFall {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -24vh, 0)
      rotate(var(--kaq-petal-rotate-start, 0deg))
      rotateX(var(--kaq-petal-tilt-x, 10deg))
      rotateY(var(--kaq-petal-tilt-y, -8deg))
      scale(var(--kaq-petal-scale, 1));
  }

  9% {
    opacity: var(--kaq-petal-opacity, 0.48);
  }

  38% {
    opacity: var(--kaq-petal-opacity, 0.48);
    transform:
      translate3d(var(--kaq-petal-mid-x, 24px), 38vh, 0)
      rotate(var(--kaq-petal-rotate-mid, 160deg))
      rotateX(calc(var(--kaq-petal-tilt-x, 10deg) * -1))
      rotateY(var(--kaq-petal-tilt-y, -8deg))
      scale(var(--kaq-petal-scale, 1));
  }

  72% {
    opacity: var(--kaq-petal-opacity, 0.44);
    transform:
      translate3d(var(--kaq-petal-end-x, -30px), 82vh, 0)
      rotate(var(--kaq-petal-rotate-end, 340deg))
      rotateX(var(--kaq-petal-tilt-x, 10deg))
      rotateY(calc(var(--kaq-petal-tilt-y, -8deg) * -1))
      scale(var(--kaq-petal-scale, 1));
  }

  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--kaq-petal-end-x, -30px) * 1.14), 124vh, 0)
      rotate(calc(var(--kaq-petal-rotate-end, 340deg) + 54deg))
      rotateX(calc(var(--kaq-petal-tilt-x, 10deg) * -1))
      rotateY(var(--kaq-petal-tilt-y, -8deg))
      scale(var(--kaq-petal-scale, 1));
  }
}

/* Desktop: more petals, but lighter. */
@media (min-width: 761px) {
  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 22) {
    display: none;
  }
}

/* Mobile: denser visual field, smaller and cheaper. */
@media (max-width: 760px) {
  #kaqPetalsLayer.kaq-petals-layer {
    z-index: 106 !important;
    opacity: 0.92 !important;
  }

  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.56);
  }

  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 17) {
    display: none;
  }
}

/* Small mobile: still richer than before, but safer. */
@media (max-width: 420px) {
  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.50);
  }

  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 14) {
    display: none;
  }
}

@media (max-width: 360px) {
  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.46);
  }

  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 12) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #kaqPetalsLayer.kaq-petals-layer {
    opacity: 0.62 !important;
  }

  #kaqPetalsLayer .kaq-falling-petal {
    animation-duration: calc(var(--kaq-petal-duration, 30s) * 1.6);
  }
}


/* ===================== V243 ANIMATION STABILITY PATCH =====================
   No visual redesign.
   Petals can be paused safely by JS when the tab is hidden.
   ====================================================================== */
#kaqPetalsLayer .kaq-falling-petal {
  animation-play-state: var(--kaq-petals-play-state, running);
}


/* ===================== V244 ANIMATION PERFORMANCE TRIM =====================
   Goal: reduce animation/rendering cost without redesign.
   Strategy:
   - preserve hero/book/radar/petals visually;
   - remove expensive runtime filters from decorative non-critical layers;
   - reduce persistent will-change pressure;
   - simplify hover transitions on mobile and touch devices;
   - keep transform/opacity animation paths.
   ======================================================================= */

/* Petals: keep dense look, force cheap rendering path. */
#kaqPetalsLayer,
#kaqPetalsLayer .kaq-falling-petal {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#kaqPetalsLayer .kaq-falling-petal {
  will-change: transform, opacity !important;
  transform: translateZ(0);
}

/* Decorative atmosphere layers should not reserve GPU memory permanently. */
.bg-atmosphere,
.bg-atmosphere *,
.cinematic-atmosphere,
.cinematic-atmosphere *,
.hero-atmosphere,
.hero-atmosphere *,
.hero-particles,
.hero-particles *,
.gold-particles,
.gold-particles *,
.ambient-particles,
.ambient-particles *,
.fog-layer,
.fog-layer *,
.mist-layer,
.mist-layer *,
.rain-layer,
.rain-layer *,
.noise-layer,
.scanline-layer,
[class*="particle"],
[class*="mist"],
[class*="fog"] {
  will-change: auto !important;
}

/* Remove expensive filters from non-essential decorative overlays.
   Core glass cards keep their background tint; this only removes runtime filter cost. */
.bg-atmosphere,
.cinematic-atmosphere,
.hero-atmosphere,
.hero-particles,
.gold-particles,
.ambient-particles,
.fog-layer,
.mist-layer,
.rain-layer,
.noise-layer,
.scanline-layer,
[class*="particle"],
[class*="mist"],
[class*="fog"] {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep radar/book animations, but do not let every sub-element reserve GPU memory forever. */
.rm-core,
.rm-core-ring,
.rm-core-ring::before,
.rm-core-ring::after,
.archive-radar,
.archive-radar *,
.interactive-book,
.interactive-book * {
  will-change: auto;
}

.interactive-book .flip-page,
.interactive-book .book,
.interactive-book .book-cover,
.interactive-book .page,
.interactive-book .stage.is-turning .flip-wrapper {
  will-change: transform, opacity !important;
}

/* Buttons/hover: preserve premium interaction, reduce transition scope. */
.nav-cta,
.hero-nav-cta,
.where-btn,
.subscribe-submit,
button,
.btn,
.cta,
.archive-tab,
.lang-btn,
.footer-link {
  transition-property: transform, opacity, color, background-color, border-color, box-shadow !important;
  transition-duration: 220ms !important;
}

/* Touch devices: hover glow is expensive and often invisible/useless. */
@media (hover: none), (pointer: coarse) {
  .nav-cta:hover,
  .hero-nav-cta:hover,
  .where-btn:hover,
  .subscribe-submit:hover,
  button:hover,
  .btn:hover,
  .cta:hover,
  .archive-tab:hover,
  .lang-btn:hover,
  .footer-link:hover {
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .nav-cta,
  .hero-nav-cta,
  .where-btn,
  .subscribe-submit,
  button,
  .btn,
  .cta,
  .archive-tab,
  .lang-btn,
  .footer-link {
    will-change: auto !important;
  }
}

/* Mobile: reduce the most expensive glass blur costs on secondary panels only.
   Primary nav/audio/book/radar are preserved. */
@media (max-width: 760px) {
  .glass-panel,
  .glass-card,
  .panel-glass,
  .about-card,
  .where-card,
  .format-card,
  .faq-card,
  .reader-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .glass-panel,
  .glass-card,
  .panel-glass,
  .about-card,
  .where-card,
  .format-card,
  .faq-card,
  .reader-card {
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
  }

  #kaqPetalsLayer .kaq-falling-petal {
    will-change: transform, opacity !important;
  }
}

/* Reduced motion: still keeps site alive, but removes most decorative animation pressure. */
@media (prefers-reduced-motion: reduce) {
  .bg-atmosphere *,
  .hero-atmosphere *,
  .hero-particles *,
  .gold-particles *,
  .ambient-particles *,
  [class*="particle"],
  [class*="mist"],
  [class*="fog"] {
    animation: none !important;
    transition: none !important;
  }
}


/* ===================== V245 MOBILE PETALS DENSITY BOOST =====================
   Goal: increase visible petal count on mobile without removing V244 performance trim.
   Strategy:
   - desktop unchanged
   - more visible petals on mobile breakpoints
   - petals slightly smaller to keep the screen elegant
   ======================================================================== */

@media (max-width: 760px) {
  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.52) !important;
  }

  /* show 18 petals on mobile instead of 16 */
  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 19) {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.47) !important;
  }

  /* show 15 petals instead of 13 */
  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 16) {
    display: none !important;
  }
}

@media (max-width: 360px) {
  #kaqPetalsLayer .kaq-falling-petal {
    width: calc(var(--kaq-petal-size, 26px) * 0.43) !important;
  }

  /* show 13 petals instead of 11 */
  #kaqPetalsLayer .kaq-falling-petal:nth-child(n + 14) {
    display: none !important;
  }
}

/* Fixes for inline styles */
.author-heading-fix { margin-top: 8px; }
.where-heading-fix { font-size: 42px; font-weight: 300; margin-top: 8px; }
.where-heading-em-fix { font-style: italic; color: var(--gold); }
.where-card-best { border-color: var(--gold-dark); position: relative; }
.where-card-best-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: var(--bg); font-family: var(--ff-sans);
    font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
    padding: 4px 16px; white-space: nowrap;
}
.where-platform-litnet { color: #60a0d8; }
.svg-hidden-absolute { position: absolute; }