/*
 * SitePage — ported from core/presentation/page/SitePage.kt.
 *
 * The page-level reset and the band order. Everything here is layout for the
 * document as a whole; anything reusable lives in component/, anything specific
 * to one band lives in section/.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Native, compositor-driven scrolling — the whole point of leaving canvas. */
    scroll-behavior: smooth;
    /* The sticky header must not cover the band an anchor jumps to. */
    scroll-padding-top: calc(var(--header-height) + var(--header-float-inset) * 2 + 12px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text-primary);
    font-family: var(--font-sans);
    /* Matches the Compose build's rendering on dark backgrounds. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * The page background. Fixed rather than scrolling, so the floating surfaces
 * always have something to blur and the image reads as the room the page sits
 * in. Two layers: the photo, then a scrim that buys back the contrast the copy
 * needs. TEMPORARY — lunor_arena.png is a placeholder.
 */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}
body::before {
    /* background: url("/assets/img/lunor_arena.png") center / cover no-repeat; */
    background-color: #121212;
    z-index: -2;
}
body::after {
    background: var(--backdrop-scrim);
    z-index: -1;
}

img { max-width: 100%; }

/* A band is one full-width horizontal stripe; its content is centred by
   .content-band inside. Bands are transparent so the page background reads
   between the floating surfaces. */
.band {
    width: 100%;
    position: relative;
}

/* The header floats over the page, so the first band has to clear it itself. */
main {
    /* padding-top: calc(var(--header-height) + var(--header-float-inset) * 2); */
}