/* ====================================================================
   Typography
   ==================================================================== */

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    src: url("../fonts/inter-var.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500 800;
    src: url("../fonts/playfair-display-var.woff2") format("woff2");
}

h1,
h2,
h3,
h4 {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--space-3);
}

h1 {
    font-size: var(--size-h1);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--size-h2);
    letter-spacing: -0.005em;
}

h3 {
    font-size: var(--size-h3);
}

h4 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

p {
    margin: 0 0 var(--space-3);
    max-width: 38em;
}

p.lede {
    color: var(--color-ink-soft);
    font-size: 1.1875rem;
    line-height: 1.55;
}

ul,
ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

li {
    margin-bottom: 0.4rem;
}

blockquote {
    border-left: 3px solid var(--color-bordeaux);
    color: var(--color-ink-soft);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    margin: var(--space-4) 0;
    padding: 0.25rem 0 0.25rem var(--space-3);
}

table {
    border-collapse: collapse;
    margin-block: var(--space-3);
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--color-line);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--color-forest-deep);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}