*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-display); font-size: var(--size-body); line-height: var(--lh-body); letter-spacing: var(--track-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-weight: var(--weight-display); letter-spacing: var(--track-display); line-height: var(--lh-display); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-strong); text-decoration: none; border-bottom: 1px solid var(--border-hairline); transition: var(--transition-control); }
a:hover { color: var(--text-accent); border-bottom-color: var(--text-accent); }
::selection { background: var(--kf-bg-purple); color: var(--kf-black); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.kf-mono { font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; line-height: var(--lh-label); }