@font-face {
    font-family: Cinzel;
    src: url('../assets/fonts/cinzel-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: 'Crimson Pro';
    src: url('../assets/fonts/crimson-pro-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
}
@font-face {
    font-family: 'Crimson Pro';
    src: url('../assets/fonts/crimson-pro-variable-italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --background: #0b0908;
    --panel: #101110;
    --text: #e4ddd0;
    --muted: #b8b0a3;
    --gold: #eed0a0;
    --bronze: #8b7050;
    --border: #594736;
    --red: #780f0c;
    --red-bright: #f1856c;
    --heading-font: Cinzel, Georgia, serif;
    --body-font: 'Crimson Pro', Georgia, serif;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    /* Layout: the design is composed for up to 2560px (Michael, 2026-09-26) — never stretch beyond. */
    --stage-width: 2560px;
    --site-width: 1640px;
    --content-width: min(var(--site-width), calc(100% - 64px));
    /* Hero art spans a bit more than the content so the orc stays close to it (≈16:9 composition). */
    --hero-width: min(100vw, var(--stage-width), calc(var(--site-width) * 1.38));
    --hero-image: url('../assets/backgrounds/hero.jpg');
}