/* ============================================================
   Typography — geometric sans, oversized bold display headings,
   tight leading, spaced eyebrow labels, readable body copy.
   ============================================================ */

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background: var(--color-bg);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1, .h1 { font-size: var(--text-h1); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }

/* Oversized hero/display heading — the loudest voice on the page */
.display {
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

/* Small spaced uppercase label above headings */
.eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-muted);
}

.on-dark .eyebrow,
.hero .eyebrow {
    color: var(--color-sage);
}

/* Supporting copy — clearly quieter than headings */
.lead {
    font-size: calc(var(--text-body) * 1.12);
    color: var(--color-muted);
    max-width: 38rem;
}

p {
    max-width: 65ch;
}

.text-muted { color: var(--color-muted); }
.text-small { font-size: var(--text-small); }
.text-tiny  { font-size: var(--text-tiny); }

strong { font-weight: var(--weight-semibold); }

/* Inline prose links */
.prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-sage-deep);
    transition: color var(--duration-fast) ease;
}

.prose a:hover { color: var(--color-sage-deep); }