/* Base layer: resets, element defaults, typography. No component- or section-specific rules belong here. */ /* Font face declarations are loaded via in partials/head-meta.php (preconnect + stylesheet), not @import, to avoid a render-blocking request chain. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); color: var(--color-ink); letter-spacing: -0.02em; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); font-weight: 600; } p { color: var(--color-ink-muted); max-width: 65ch; } a { color: var(--color-primary); text-decoration: none; cursor: pointer; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* Visible, high-contrast focus ring everywhere — never remove without replacing */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } [data-theme='dark'] :focus-visible { outline-color: var(--color-primary-light); } ::selection { background-color: var(--color-primary); color: var(--color-on-primary); } .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-toast); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-weight: 600; transition: top var(--duration-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Set server-side on (see index.php) so scroll is locked from first paint, before any JS has run — removed by js/preloader.js once the page is actually ready. */ html.is-loading { overflow: hidden; height: 100%; }