/* Lore page specific styles (kept minimal, extending base theme) */
.lore-hero {
  position: relative;
  margin-top: var(--space-8);
}
.lore-hero .hero-media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.lore-hero .hero-content {
  position: relative;
  margin-top: -4rem;
  background: linear-gradient(180deg, rgba(13,10,8,0.0) 0%, rgba(13,10,8,0.85) 35%, rgba(13,10,8,1) 100%);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.lore-hero .hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

.toc { margin-top: var(--space-8); }
.toc-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
.toc-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-background-elevated);
  transition: all var(--transition-base);
}
.toc-list a:hover { background: var(--color-surface-hover); transform: translateY(-2px); }
.toc-list a.active, .toc-list a[aria-current="true"] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  color: var(--color-primary-light);
}

.lore-section { padding-top: var(--space-12); }
.lore-section + hr { margin-top: var(--space-12); }

#back-to-top { opacity: 0.85; }
#back-to-top:hover { opacity: 1; }

@media (max-width: 768px) {
  .lore-hero .hero-content { margin-top: -2rem; padding-top: var(--space-6); }
  .toc-list { grid-template-columns: 1fr; }
}