/* Lore page specific styles — keep minimal and leverage base.css */
.hero { padding: var(--space-16) 0 var(--space-12); background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 60%); }
.hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.hero__lead { font-size: var(--font-size-lg); max-width: var(--measure); }
.hero__ctas { display: inline-flex; gap: var(--space-3); margin-top: var(--space-3); }
.hero__art { max-width: 640px; justify-self: end; }

.section { padding: var(--space-12) 0; }
.list--eras { margin-top: var(--space-4); }

/* Palette swatches */
.palette { margin-top: var(--space-4); }
.swatch { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--gray-300); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); }
.swatch__color { width: 64px; height: 40px; border: 2px solid var(--gray-900); background: var(--color-warning); background: var(--sw, var(--color-warning)); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); }
.swatch__name { font-weight: 700; font-family: var(--font-display); }
.swatch__var { color: var(--gray-500); font-size: var(--font-size-sm); }

/* Gallery */
.gallery img { cursor: zoom-in; transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.gallery img[data-zoomed="true"] { transform: scale(1.08); box-shadow: var(--shadow-3); cursor: zoom-out; }

/* Forms spacing */
.archive-search, .newsletter-form { margin-top: var(--space-4); }

/* Responsive tweaks */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { justify-self: start; max-width: 100%; }
}