/* Explain: Base reset and typography defaults, with site background adjustments. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    overflow-x: hidden;
    background-color: transparent;
}

/* Site-wide photo background (fixed layer behind all content).
   The artwork is purely decorative, so it lives in CSS and never enters the
   accessibility tree. A dark navy veil sits on top of the photo, keeping the
   playful numerals visible while pulling the whole backdrop down in brightness
   so headings and paragraphs never compete with the picture. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--navy-deep);
    background-image: var(--site-bg-veil), var(--site-bg-image);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* Content panels stay almost fully solid so every word sits on a calm, light
   surface. Text contrast is then the same as plain white paper regardless of
   what the artwork is doing behind it. */
section[class*="--background-color"] {
    background-color: color-mix(in srgb, var(--background-color) 90%, transparent);
}

section[class*="--surface-color"] {
    background-color: color-mix(in srgb, var(--surface-color) 87%, transparent);
}

/* Respect a request for stronger contrast: drop the photo behind the panels
   and make every section fully solid for maximum legibility. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
    body::before {
        background-image: none;
        background-color: var(--navy-deep);
    }

    section[class*="--background-color"] {
        background-color: var(--background-color);
    }

    section[class*="--surface-color"] {
        background-color: var(--surface-color);
    }
}