@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 page is ALWAYS laid out at this one design width and then scaled as a whole to the window
       (see the zoom script in layout.php), so it looks identical on every screen (Michael, 2026-09-27). */
    --stage-width: 1840px;
    --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: var(--stage-width);
    --hero-image: url('../assets/backgrounds/hero-v3.jpg'); /* Horde champions at the gate of Orgrimmar (Codex, 2026-09-27) */
}