*, *::before, *::after { box-sizing: border-box }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--body-family); font-size: var(--body-size); line-height: var(--body-leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: var(--h2-tracking) }
h1 { font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking) }
h2 { font-size: var(--h2-size); line-height: var(--h2-leading) }
h3 { font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking) }
p { margin: 0; max-width: var(--measure); text-wrap: pretty }
strong { font-weight: var(--weight-bold) }
em { font-style: italic }
a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--ember); padding-bottom: 1px; transition: color var(--dur-quick) var(--ease-calm), border-color var(--dur-quick) var(--ease-calm) }
a:hover { color: var(--ember); border-color: var(--ember) }
hr { border: 0; border-top: var(--border-line); margin: var(--space-6) 0 }
code, kbd { font-family: var(--font-label); font-size: 0.92em }
::selection { background: var(--ember-quiet) }