/* Lore page specific styles (lean; relies on base.css) */
.hero { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.25fr 1fr; } }
.hero__lead { color: var(--color-text-muted); max-width: 70ch; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.hero__media img { width: 100%; height: auto; object-fit: cover; box-shadow: var(--shadow-3); }

.search { margin-top: var(--space-4); }
.search__status { color: var(--color-text-muted); margin-top: var(--space-2); }

.toc { margin-top: var(--space-6); }
.toc__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.toc__list a { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-600); border-radius: var(--radius-round); background: var(--gray-800); }

.lore-grid { margin-block: var(--space-8); display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .lore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lore-grid { grid-template-columns: repeat(3, 1fr); } }

.lore-section p:last-child { margin-bottom: 0; }
.section-image { margin-block: var(--space-4); }

.cta-final { margin-block: var(--space-8) var(--space-12); text-align: center; }

/* Hidden utility for filtering (without layout shift issues) */
.lore-section[hidden] { display: none !important; }