/* ========================================================================== Global base styles and shared utility classes. Section-specific styles live in their own files (header.css, hero.css, ...) and are appended to below this one as new sections are built. ========================================================================== */ body { background: var(--color-white); color: var(--color-ink); font-family: var(--font-body); font-weight: var(--fw-regular); line-height: 1.5; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Full-bleed variant: hugs the true viewport edge instead of centering inside --container-max. Used where content should stay pinned to the edge (header, hero) rather than floating inward on wide viewports. */ .edge-container { width: 100%; padding-inline: var(--edge-pad); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Consistent, visible focus ring for keyboard users across all components */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: var(--radius-sm); } /* Prevents scroll on the page while the mobile nav overlay is open */ body.nav-open { overflow: hidden; }