: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 lch, var(--foreground-color) 2%, var(--background-color));
    --border-color: color-mix(in lch, var(--foreground-color) 7%, var(--background-color));

    --font-ratio: 1.4;
    --font-size: 1.1rem;
    --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-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(--color-red);
    --bold-color: color-mix(in lch, var(--color-red) 85%, var(--foreground-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 > h1:first-child {
    text-align: center;
    grid-column: full;
    margin: 1rlh 0rlh 0rlh 0rlh;
    font-size: calc(var(--font-size) * pow(var(--font-ratio), 3));
}

article h1 {
    text-align: center;
    padding: 0 0 3rlh 0;
    letter-spacing: 0.15em;
    /* /*text-transform: uppercase;* */
    font-feature-settings: "liga", "onum", "kern", "smcp";
}

article .callout {
    background: transparent;
    border: 0;
}
article .callout .callout-title {
    color: var(--color-muted);
    text-align: center;
    padding: calc(var(--space) / 8) calc(var(--space));
}
article .callout .callout-content {
    background: var(--background-secondary-color);
    padding: var(--space);
}

article a,
article a:active,
article a:visited {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
    text-decoration-color: color-mix(in lch, var(--accent-color) 100%, transparent);
}
/*
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");
}