/* Lore page styles — focused, no duplication with base.css */
.hero__grid { display: grid; gap: var(--space-24); grid-template-columns: 1.2fr 1fr; align-items: center; }
.hero__actions { display: flex; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-16); }
.hero__figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--divider-color); }

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

/* TOC */
.toc__wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
.toc__toggle { width: max-content; }
.toc { background: var(--color-surface); border: 1px solid var(--divider-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.toc__list { margin: 0; padding: var(--space-16) var(--space-24); display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; }
.toc__list a { color: var(--color-text); border: 1px solid var(--divider-color); padding: 8px 12px; border-radius: var(--radius-md); display: block; transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard); }
.toc__list a:hover { background: color-mix(in oklab, var(--color-primary) 12%, transparent); border-color: color-mix(in oklab, var(--color-primary) 60%, var(--divider-color)); }
.toc__list a[aria-current="true"] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }

/* Lore content */
.lore-section { margin-block: var(--space-24); }
.lore-media__grid { display: grid; gap: var(--space-24); grid-template-columns: 1.2fr 1fr; align-items: center; }
.lore-media__figure { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--divider-color); box-shadow: var(--shadow-md); }

@media (max-width: 900px) { .lore-media__grid { grid-template-columns: 1fr; } }

/* CTA row */
.cta__row { display: grid; gap: var(--space-16); grid-template-columns: 1.2fr 1fr; align-items: center; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (max-width: 900px) { .cta__row { grid-template-columns: 1fr; } }

/* Mobile behavior for TOC */
@media (max-width: 700px) {
  #toc-list[hidden] { display: none !important; }
}