/* Lead Dev: content styles (uses tokens.css; page shell is in layout.css) */
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); }
h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-3); }
.lead { font-size: var(--text-lg); }
p, li { max-width: var(--measure); }
main a { color: var(--slate); }
main a:hover { color: var(--accent); }
main img { display: block; margin: var(--space-4) 0; }

.timeline { margin: var(--space-4) 0 0; padding: 0 0 0 var(--space-4); list-style: none; border-left: 3px solid var(--brass); }
.timeline li { position: relative; margin-bottom: var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 8px); top: 0.6rem; width: 13px; height: 13px; background: var(--accent); border: 2px solid var(--bg); border-radius: 50%; }
.timeline h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.timeline p { margin: 0; }

#quiz-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
main button { min-height: 44px; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--bg); border: 2px solid var(--ink); border-radius: var(--radius); font: inherit; font-family: var(--font-label); font-weight: 700; cursor: pointer; }
main button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
#quiz-result { min-height: 1.6em; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  main button:hover { background: var(--accent); border-color: var(--accent); }
}