/* ========================================================================== Base — reset, canvas, typography defaults, a11y ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); /* solid. never a gradient. */ color: var(--ink); font-family: var(--font-display); font-weight: 400; font-style: normal; /* no italics, anywhere */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, p, figure { margin: 0; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } /* Visible focus ring, keyboard only ------------------------------------- */ :focus-visible { outline: 2px solid var(--icy); outline-offset: 3px; border-radius: 4px; } /* Screen-reader only ----------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The filter definitions carrier — occupies no space --------------------- */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Motion off ------------------------------------------------------------- */ /* JS mirrors state onto . CSS transitions are cosmetic UI feedback (hover/focus) and are cut too, so "off" is genuinely still. */ :root[data-motion='off'] *, :root[data-motion='off'] *::before, :root[data-motion='off'] *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } /* Safety net if JS never runs. The toggle is the source of truth once it does. */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion='on']) *, :root:not([data-motion='on']) *::before, :root:not([data-motion='on']) *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }