/* Horizon: inner pages share the homepage's sea (drawn by assets/horizon.js). */
@media (prefers-color-scheme: dark) {
    :root {
        /* the window's blue at night: dark enough to read on, still blue */
        --background-color: #101d36;
        --surface-color: #162849;
        --border-color: #2b406a;
        --muted-color: #a0acc6;
        --sea-color: #73a1df;
    }
}

.has-horizon body { position: relative; }
.horizon-band { position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: calc(var(--horizon-h, 120px) + 110px); pointer-events: none; }
.horizon-band canvas, .horizon-foot canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.has-horizon .site-header { position: relative; z-index: 2; }
.has-horizon .site-header + main,
.has-horizon .site-header + .site-main { position: relative; z-index: 1; margin-top: 110px !important; }
.horizon-foot { position: relative; height: 120px; margin-top: 40px; pointer-events: none; }
.has-horizon .site-footer { position: relative; z-index: 1; margin-top: -40px !important; border-top: 0; }

/* the top bar sits on the water, so it is written in light; the menus that open below keep their own colours */
.has-horizon .site-header > .site-brand,
.has-horizon .site-nav > .site-nav-link,
.has-horizon .writing-nav > .site-nav-link,
.has-horizon .writing-menu > summary,
.has-horizon .site-actions > .site-icon-button,
.has-horizon .site-actions > .site-icon-link,
.has-horizon .site-actions > .language-switch,
.has-horizon .mobile-menu > summary {
    color: #f3efe6;
    text-shadow: 0 1px 10px rgba(7, 11, 22, .35);
}
.has-horizon .site-actions > .language-switch span { color: rgba(243, 239, 230, .7); }
.site-brand i { color: #f2c46b; }