/* ============================================================
   ADL — Base / Reset (Calm Interface, Content Is The Hero)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Headings — tight tracking, UI font */
h1, h2, h3, h4 {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0 0 var(--space-2); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity var(--motion-fast) var(--ease);
}
a:hover { opacity: 0.75; }

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

small { font-size: var(--text-caption); color: var(--color-text-2); }

/* Layout helpers */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.stack > * + * { margin-top: var(--space-3); }
.muted { color: var(--color-text-2); }

/* Reading surface — long-form article body uses the reading serif (CHAPTER 5) */
.prose {
    font-family: var(--font-reading);
    font-size: var(--text-body);
    line-height: 1.75;
    max-width: 68ch;
}
.prose p { margin-bottom: var(--space-3); }

/* Accessibility: visible focus (CHAPTER 13 — WCAG AA) */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}