.site-header {
    background:
        radial-gradient(ellipse 45% 60% at 50% 100%, rgba(242, 204, 143, 0.85) 0%, rgba(240, 170, 130, 0.45) 40%, transparent 75%),
        linear-gradient(180deg, #223357 0%, #3D5A80 45%, #6486BC 75%, #C2BED6 100%);
    color: #FBFBF9;
}

.site-header .header-accent {
    color: #F2CC8F;
}

.site-header .header-skyline {
    width: auto;
    max-width: 100%;
    height: clamp(80px, 12vw, 150px);
    opacity: 0.85;
    animation: header-skyline-in 1.2s ease-out backwards;
}

@keyframes header-skyline-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 0.85; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .header-skyline {
        animation: none;
    }
}

/* Bootstrap's .container-xl grows to 1320px at 1400px+; cap the site at 1140px on all screens. */
@media (min-width: 1400px) {
    .container-xl {
        max-width: 1140px;
    }
}