:root {
    --light-background-color: #fdfcf3;
    --light-background-color: #f9f6ef; /* Seashell - Soft warmth, still feels like sunlight on paper. */
    --light-background-color: #fdfdfc; /* Snow Drift - Near-white with the tiniest touch of warmth. */
    --light-background-color: #fdf5e6; /* Old Lace - A classic — slightly more yellow but elegant. */
    --light-background-color: #fefdf9; /* Ivory - Very subtle warmth, almost white — keeps it clean. */
    --light-foreground-color: black;

    --dark-background-color: #231e16;
    --dark-foreground-color: hsl(34, 50%, 80%);

    --background-secondary-color: color-mix(in srgb, var(--foreground-color) 2%, var(--background-color));
    --border-color: color-mix(in srgb, var(--foreground-color) 7%, var(--background-color));

    --font-ratio: 1.4;
    --font-size: 1em;
    --font-density: 1.6;
    --font-text: Fern;
    --font-ui: Fern;
    --font-header: Fern;
    --font-header-weight: 300;
    --font-header-letter-spacing: 0em;
    --font-header-line-height: 1em;

    --font-weight: 450;

    --font-feature: "liga", "onum", "kern";
    --font-variation: "opsz" 8;
    --font-header-feature: "liga", "onum", "kern";
    --font-header-variation: "opsz" 12;

    --accent-color: var(--color-red);
    --italic-color: var(--foreground-color);
    --bold-color: color-mix(in srgb, var(--foreground-color) 85%, var(--background-color));
    /*--bold-weight: 300;*/

    --light-color-red: #b5483c; /* like aged brick or red clay */
    --light-color-red: #a12314;
    --light-color-orange: #c86a3d; /* terra cotta */
    --light-color-yellow: #c2a84a; /* mustard parchment */
    --light-color-green: #5e9d80; /* sage green */
    --light-color-cyan: #6ba4b6; /* antique blue-grey */
    --light-color-blue: #4f81a4; /* faded denim */
    --light-color-purple: #7a6c91; /* dusk lavender */
    --light-color-pink: #b97aa0; /* soft mauve rose */

    /* Dark Mode Accent Colors */
    --dark-color-red: #e57368; /* warm ember glow */
    --dark-color-orange: #e88e5a; /* baked clay at dusk */
    --dark-color-yellow: #e0c168; /* candlelight gold */
    --dark-color-green: #7eb79c; /* moonlit sage */
    --dark-color-cyan: #84c3d6; /* cool teal mist */
    --dark-color-blue: #6da2c7; /* twilight lake */
    --dark-color-purple: #a58fc0; /* smoky lilac */
    --dark-color-pink: #e6a3d1; /* fading rose light */
}

article p {
    font-weight: var(--font-weight);
}

article hr,
article hr:not(:first-child) {
    font-size: var(--scale);
    line-height: var(--space);
    padding: 0;
    border: 0;
    background: transparent;
}
article hr::after {
    content: "\2619 \2015 \2767";
    text-align: center;
    display: block;
    font-family: "Fern";
    position: relative;
    top: calc(var(--space) * -0.4);
    color: var(--border-color);
}

article > h1:first-child {
    text-align: center;
    grid-column: feature;
    margin: var(--space-l) 0 calc(var(--space) * 6) 0;
    font-size: calc(var(--font-size) * pow(var(--font-ratio), 3));
}

article h1 {
    text-align: center;
    margin: 0 0 var(--space-xxl) 0;
    letter-spacing: 0.15em;
    /* /*text-transform: uppercase;* */
    font-feature-settings: "liga", "onum", "kern", "smcp";
}

/*
article p {
    text-align: justify;
}

article p:not(:has(img), blockquote, .callout, pre, h1, h2, h3, h4, h5, h6, table, hr, ul, ol) + p:not(:has(img)) {
    text-indent: var(--space);
}
*/

@font-face {
    font-family: "Fern";
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    src: url("https://cdn.ffp.co/FernVariable-Roman-VF.woff2") format("woff2");
}