/* Mecha page styles – minimal, leveraging base.css */
.hero { padding-block: var(--space-40) var(--space-24); }
.hero-grid { display: grid; gap: var(--space-24); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.hero-copy p { color: var(--color-text-muted); }
.hero-ctas { display: flex; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-12); }
.hero-media img { border-radius: var(--radius-lg); }

.toc { margin-top: var(--space-24); border-top: 1px solid var(--color-border); padding-top: var(--space-16); }
.toc-list { display: flex; gap: var(--space-12); overflow-x: auto; padding-bottom: var(--space-8); }
.toc-list a { white-space: nowrap; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.toc-list a:hover { box-shadow: var(--shadow-glow-teal); }

.section { padding-block: var(--space-40); }
.role-grid .card h3 { color: var(--color-gold); }

.infographic img { box-shadow: var(--shadow-lg); }
.download-list { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
@media (min-width: 720px) { .download-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; } }

.lore-grid { align-items: start; }

/* Improve <details> usability */
details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-16); background: var(--color-surface); }
details + details { margin-top: var(--space-12); }
details[open] { box-shadow: var(--shadow-glow-gold); }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* Focus styles for in-page anchors */
:target { scroll-margin-top: 96px; }