/* Base look (Lead Developer lane) */
*, *::before, *::after { box-sizing: border-box; }
body { font-size: var(--text-base); margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.6; }
h1, h2 { font-family: var(--font-display); line-height: 1.15; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; z-index: 20; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Typography for the story (works without JS) */
.key-line{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;color:var(--accent);display:inline-block;padding-bottom:.25rem;margin-top:1.5rem}
.lede{font-family:var(--font-display);font-size:var(--text-lg)}
.era-years{color:var(--muted);text-transform:uppercase;font-size:var(--text-xl);font-family:var(--font-display)}
.hero{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 1rem;max-width:46rem;margin:0 auto}
.hero h1{font-size:clamp(3rem,13vw,7rem);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin:0}
.hero-tag{color:var(--muted)}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:30}

/* Repo QR block */
.repo { max-width: 46rem; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.repo .qr { width: 12rem; height: 12rem; background: #fff; border-radius: var(--radius, 4px); }
.repo-cap { color: var(--muted); }
.repo-link { overflow-wrap: anywhere; }