/* ============================================================ base.css — reset, page background, typography, focus. Load after theme.css. Fonts are linked from the HTML , not @imported here, so they resolve in parallel with this stylesheet. ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; font-family: var(--font); font-weight: var(--font-weight-body); background: linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 100%) 0 0 / var(--grid-size) var(--grid-size), linear-gradient(180deg, var(--bg-fade), transparent var(--bg-fade-height)), var(--bg); color: var(--ink); letter-spacing: var(--tracking); } button, input, select, textarea { font: inherit; } button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 0; box-shadow: var(--focus); } button:disabled { opacity: 0.62; cursor: wait; } ::selection { background: var(--accent-tint-strong); color: var(--ink); } h1, h2, h3, h4 { font-weight: var(--font-weight-medium); } a { color: var(--accent-strong); } /* Section heading: an uppercase micro-label with a 3px accent bar. */ .section-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3) 2px; color: var(--accent-strong); font-size: var(--text-label); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .section-label::before { content: ""; width: 3px; height: 16px; border-radius: 3px; background: var(--accent); } .section-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0 var(--space-4); } .section-head .section-label { margin: 0; } .hint { margin: -4px 0 var(--space-4) 2px; color: var(--quiet); font-size: var(--text-label); line-height: 1.45; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } @media (max-width: 980px) { .section-head { flex-wrap: wrap; } }