/* ========================================================================== base.css Global reset and bare-element defaults only. No component classes here. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; /* 1rem = 16px baseline; every rem value downstream is relative to this. */ font-size: 100%; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; font-family: var(--font-base); background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%); color: var(--color-text); line-height: var(--line-height-base); transition: background var(--duration-moderate) ease, color var(--duration-moderate) ease; min-height: 100vh; } img, picture, svg { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; color: inherit; } h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; text-wrap: balance; } p { text-wrap: pretty; } /* A locked ``/`` is used while the mobile nav is open so the page behind the flyout menu can't scroll. Toggled in navbar.js. */ html.nav-open, html.nav-open body { overflow: hidden; } /* Consistent, on-brand keyboard focus ring across every interactive element, instead of relying on inconsistent user-agent defaults. */ :focus-visible { outline: 0.1875rem solid var(--color-secondary); outline-offset: 0.1875rem; border-radius: var(--radius-sm); }