/* Novastra - typographie */

html {
    font-size: 17px;
}

body {
    font-family: var(--f-sans);
    font-weight: 400;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-bg);
}

::selection {
    background: var(--c-accent-soft);
    color: var(--c-ink);
}

h1, .h1, .display {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 108;
}

h2, .h2 {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h4, .h4 {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
}

h5, h6 {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
}

.lead {
    font-size: 1.175rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    max-width: 62ch;
}

.mono,
.numeric {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.eyebrow {
    display: inline-block;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

small,
.small {
    font-size: 13px;
    line-height: 1.4;
}

a.underline-link {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    color: var(--c-ink);
    background-image: linear-gradient(var(--c-accent), var(--c-accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-micro) var(--ease-out-expo);
}

a.underline-link:hover {
    background-size: 100% 1px;
}