/* Lore page styles — scoped and minimal, extending base.css */
.lore-hero { position: relative; color: var(--text-on-dark, #f2f2f2); background: #0c0c0c; overflow: clip; }
.lore-hero__media { max-height: 62vh; display: grid; place-items: center; position: relative; }
.lore-hero__media::after { content: ""; position: absolute; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)); pointer-events: none; height: 100%; }
.lore-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(0) brightness(0.9); }
.lore-hero__content { position: relative; margin-inline: auto; padding: clamp(1rem, 3vw, 2rem); max-width: min(1100px, 92vw); transform: translateY(-12%); background: linear-gradient(180deg, rgba(12,12,12,0.0), rgba(12,12,12,0.65) 35%, rgba(12,12,12,1) 100%); border-radius: 0.5rem; }
.lore-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: 0.02em; margin: 0 0 .5rem; }
.lore-hero .lead { color: #d9d4c7; max-width: 65ch; }
.lore-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

.lore-toc { max-width: min(1100px, 92vw); margin: 0 auto; padding: 1rem 0 0.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.lore-toc__list { display: flex; flex-wrap: wrap; gap: .5rem .75rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.lore-toc__list a { display: inline-block; padding: .4rem .7rem; border-radius: 999px; background: rgba(255,255,255,.06); color: inherit; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: background .2s ease; }
.lore-toc__list a:hover { background: rgba(255,255,255,.12); }

.lore-search { display: grid; gap: .35rem; max-width: 520px; }
.lore-search input[type="search"] { padding: .6rem .8rem; background: rgba(0,0,0,.45); color: inherit; border: 1px solid rgba(255,255,255,.18); border-radius: .4rem; }

.lore-sections { max-width: min(1100px, 92vw); margin: 0 auto; padding: 1rem 0 4rem; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.lore-section { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border: 1px solid rgba(255,255,255,.06); border-radius: .6rem; padding: clamp(1rem, 2.5vw, 1.25rem); }
.lore-section h2 { margin-top: 0; font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

.lore-figure { margin: 1rem 0 0.5rem; }
.lore-figure img { width: 100%; height: auto; border-radius: .4rem; border: 1px solid rgba(255,255,255,.07); filter: saturate(0) contrast(1.05); }
.lore-figure figcaption { font-size: .9rem; color: #c7c3b8; margin-top: .4rem; }

.lore-detail { border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; padding: .6rem .8rem; background: rgba(0,0,0,.35); margin: .5rem 0; }
.lore-detail summary { cursor: pointer; }

.lore-list { padding-left: 1.1rem; }
.lore-list li + li { margin-top: .35rem; }

.lore-quiz fieldset { border: 1px solid rgba(255,255,255,.1); border-radius: .5rem; margin: .75rem 0; padding: .6rem .8rem; }
.lore-quiz legend { padding: 0 .35rem; opacity: .85; }
.lore-quiz label { display: grid; grid-template-columns: 1rem 1fr; align-items: start; gap: .5rem; padding: .2rem 0; }
.quiz-result { display: block; margin-top: .75rem; font-weight: 600; }

@media (max-width: 720px) {
  .lore-hero__content { transform: none; background: rgba(12,12,12,1); }
}