/* ========================================================================== Base - resets, elements, global defaults ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; /* Horizontal-scroll guard lives here, not on - an overflow value on body would make it the sticky containing block and break the header's position: sticky in Safari. */ overflow-x: hidden; } :root[data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text-primary); background-color: var(--color-bg); background-image: radial-gradient(circle at 12% -8%, rgba(var(--brand-charcoal-700-rgb), 0.35), transparent 40%), radial-gradient(circle at 88% 0%, rgba(var(--brand-teal-500-rgb), 0.16), transparent 38%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } img { font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; transition: var(--transition-colors); } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-text-primary); text-wrap: balance; } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-md); } p { color: var(--color-text-secondary); text-wrap: pretty; } small { font-size: var(--fs-sm); } strong, b { font-weight: var(--fw-semibold); color: var(--color-text-primary); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; } ::selection { background-color: var(--color-primary); color: var(--color-white); } /* Scrollbar (WebKit + Firefox) */ html { scrollbar-color: var(--color-border-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-border-strong); border-radius: var(--radius-full); border: 2px solid var(--color-bg); } /* --------------------------------------------------------------------- Focus & Accessibility --------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; border-radius: var(--radius-xs); } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: fixed; top: -100%; left: var(--space-4); z-index: var(--z-toast); background: var(--color-primary); color: var(--color-white); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* --------------------------------------------------------------------- Selection helpers --------------------------------------------------------------------- */ [hidden] { display: none !important; } /* Applied to , not - is the real scrolling element here (see the overflow-x note above), so locking body alone does nothing. */ .no-scroll { overflow: hidden; }