:root {
    --font-header: "Tiempos Headline", serif;
    --font-text: "Ivar Text", serif;
    --font-ui: "Ivar Text";
    --font-mono: "Sohne Mono";
    --font-ratio: 1.5;
    --font-size: 1.05rem;

    --font-density: 1.4;
    --font-letter-spacing: 0em;
    --font-header-letter-spacing: 0.01em;
    --font-header-line-height: 1.3em;
    --font-header-weight: 300;

    --light-background-color: #f4f1e9;
    --light-foreground-color: #1c1c1a;
    --light-accent-color: #4e7a58;
    --light-accent-color: #a14e3d;
    --light-bold-color: #a14e3d;
    --light-bold-color: #1c1c1a;
    --light-muted-color: #8a837a;
    --light-soft-color: #e7e1d1;

    --dark-background-color: #1b1a18;
    --dark-foreground-color: #eae6db;
    --dark-accent-color: #9ecaa3;
    --dark-accent-color: #de7260;
    --dark-bold-color: #de7260;
    --dark-bold-color: #eae6db;
    --dark-muted-color: #999387;
    --dark-soft-color: #2a2824;
    --dark-border-color: color-mix(in srgb, var(--foreground-color) 10%, var(--background-color));
}

article > h1:first-child {
    color: var(--foreground-color);
    text-align: center;
    grid-column: feature;
    margin: var(--space) 0 var(--space-xxl) 0;
}
article h1 + .metadata {
    position: relative;
    top: calc(var(--space) * 1.25);
    font-size: var(--scale-xs);
    margin-bottom: 0;
}
article h1 {
    text-align: center;
    grid-column: full;
}
article h2 {
    font-size: calc(var(--font-size) * pow(var(--font-ratio), 2.5));
}
article h3 {
    font-size: calc(var(--font-size) * pow(var(--font-ratio), 1.5));
}

article h4 {
    margin-bottom: var(--space);
}

.footer h2 {
    font-size: calc(var(--scale-xxl));
}

blockquote,
.callout-content,
.callout-title {
    color: var(--foreground-color);
}

.callout-content a,
.callout-title a {
    color: var(--accent-color);
}

.callout-content em {
    color: var(--italic-color);
}

.callout-content strong {
    color: var(--bold-color);
}

@media (max-width: 800px) {
    article h1 {
        font-size: var(--scale-xl);
        padding: 0;
        text-align: left;
    }
    article h2 {
        font-size: calc(var(--scale-l));
    }
}
@font-face {
    font-family: "Tiempos Headline";
    /* Add other properties here, as needed. For example: */
    font-weight: 300;
    font-style: normal;
    src: url("https://cdn.ffp.co/TiemposHeadline-Light.woff2");
}
@font-face {
    font-family: "Tiempos Headline";
    /* Add other properties here, as needed. For example: */
    font-weight: 400;
    font-style: normal;
    src: url("https://cdn.ffp.co/TiemposHeadline-Regular.woff2");
}
@font-face {
    font-family: "Tiempos Headline";
    /* Add other properties here, as needed. For example: */
    font-weight: 500;
    font-style: normal;
    src: url("https://cdn.ffp.co/TiemposHeadline-Medium.woff2");
}
@font-face {
    font-family: "Ivar Text";
    /* Add other properties here, as needed. For example: */
    font-weight: 400;
    font-style: normal;
    src: url("https://cdn.ffp.co/IvarText-Regular.woff2");
}
@font-face {
    font-family: "Ivar Text";
    /* Add other properties here, as needed. For example: */
    font-weight: 400;
    font-style: italic;
    src: url("https://cdn.ffp.co/IvarText-Italic.woff2");
}
@font-face {
    font-family: "Ivar Text";
    /* Add other properties here, as needed. For example: */
    font-weight: 600;
    font-style: normal;
    src: url("https://cdn.ffp.co/IvarText-SemiBold.woff2");
}