/* ===================================================================== BASE — reset, typography, layout primitives ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; padding: 0; } /* ---- Headings ---- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); overflow-wrap: break-word; word-break: normal; } /* Brand hierarchy: H1 Bold, H2/H3/H4 Semi-bold, body Regular */ h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-xl); font-weight: var(--fw-semi); } h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); } h4 { font-size: var(--fs-md); font-weight: var(--fw-semi); } p { text-wrap: pretty; } p + p { margin-top: var(--sp-4); } strong { font-weight: var(--fw-bold); } /*::selection { background: var(--maroon-100); color: var(--maroon-900); }*/ ::selection{background: #fff;} :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); } /* ---- Layout primitives ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--tint { background: var(--bg-tint); } .section--dark { background: var(--grad-green); color: var(--white); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); } /* Visually hidden but accessible */ .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; } /* Utility text helpers */ .text-center { text-align: center; } .text-soft { color: var(--text-soft); } .text-accent { color: var(--accent); } .lead { font-size: var(--fs-md); color: var(--text-soft); line-height: var(--lh-snug); } /* No-scroll lock when mobile drawer / a popup is open. `overflow:hidden` on body ALONE doesn't stop the page scrolling, because the viewport's actual scrolling box is , not — html needs the lock too, plus a fixed height so it can't grow to fit content. */ html.no-scroll, body.no-scroll { overflow: hidden; }