html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

.hero-star-map :is(a, button):focus-visible,
.choose-star-map :is(a, button):focus-visible,
#main-content :is(a, button, summary):focus-visible {
    outline: 3px solid #9a6f25;
    outline-offset: 3px;
}

.hero-star-map,
.choose-star-map,
.occasions-star-map,
.what-star-map,
.accuracy-star-map,
.skyprint-advantages,
.live-customer-media,
.skyprint-reviews,
.faq-star-map,
.final-order-cta,
.other-personal-gifts {
    overflow: hidden;
    overflow: clip;
}

.hero-star-map,
.choose-star-map,
section[id] {
    scroll-margin-top: 96px;
}

/* Small uppercase section labels need AA contrast on the warm white canvas. */
.csm-kicker,
.csm-block-label,
.osm-kicker,
.wsm-kicker,
.asm-kicker,
.spa-kicker,
.lcm-kicker,
.spr-kicker,
.faq-kicker,
.opg-kicker {
    color: #8a6827;
}

/*
 * The homepage is intentionally rich and long. The browser can defer layout
 * and paint work for sections far below the fold while keeping their content
 * searchable, accessible and available to anchor navigation.
 */
@supports (content-visibility: auto) {
    .occasions-star-map,
    .what-star-map,
    .accuracy-star-map,
    .skyprint-advantages,
    .live-customer-media,
    .skyprint-reviews,
    .faq-star-map,
    .final-order-cta,
    .other-personal-gifts {
        content-visibility: auto;
        contain-intrinsic-size: auto 760px;
    }
}

@media (max-width: 767.98px) {
    html {
        scroll-padding-top: 76px;
    }

    .hero-star-map,
    .choose-star-map,
    section[id] {
        scroll-margin-top: 76px;
    }
}

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