/* Element defaults. Any page linking styles.css starts on-brand and dark. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text); font: var(--type-body); letter-spacing: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); text-wrap: balance; }
h1 { font-size: var(--size-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); }
h2 { font-size: var(--size-section); line-height: var(--lh-section); letter-spacing: var(--track-section); }
h3 { font-size: var(--size-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--weight-medium); }
p { margin: 0; }
a { color: var(--ink-1); text-decoration: none; transition: color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
a:hover { color: var(--moss-bright); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--moss-edge); color: var(--ink-1); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }