.page-home { --campaign-header-space: 97px; }

.page-home .site-header {
    margin-block-end: calc(-1 * var(--campaign-header-space));
    background-color: var(--paper);
    transition: background-color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.page-home .site-header::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 -24px;
    background: linear-gradient(180deg, #1b100dbb, #1b100da8 44%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease);
    content: "";
}

.page-home .site-header:has(.site-nav[data-open="true"]),
.page-home .site-header:has(.site-mega-menu:not([hidden]), .site-nav[data-open="true"])::before {
    transition: none;
}

.page-home .site-header[data-campaign-overlay]:not(:has(.site-mega-menu:not([hidden]), .site-nav[data-open="true"])) {
    background-color: transparent;
    border-bottom-color: #fff3db32;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.page-home .site-header[data-campaign-overlay]:not(:has(.site-mega-menu:not([hidden]), .site-nav[data-open="true"]))::before {
    opacity: 1;
}

.page-home .site-header[data-campaign-overlay]:not(:has(.site-mega-menu:not([hidden]), .site-nav[data-open="true"]))
    :is(.site-nav > a, .site-nav-heading > a, .site-nav-disclosure, .header-actions > :is(a, button), .selection-trigger > .icon) {
    color: #fff7e9;
}

.page-home .site-header[data-campaign-overlay]:not(:has(.site-mega-menu:not([hidden]), .site-nav[data-open="true"])) :focus-visible {
    outline-color: #f2d59e;
}

@media (min-width: 1180px) {
    .page-home .site-header .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: clamp(14px, 1.8vw, 28px);
    }
    .page-home .site-header .site-nav {
        grid-column: 1;
        grid-row: 1;
        gap: clamp(10px, 1.4vw, 22px);
        margin-inline-start: 0;
        min-width: 0;
    }
    .page-home .site-header .wordmark {
        grid-column: 2;
        grid-row: 1;
    }
    .page-home .site-header .header-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

@media (min-width: 781px) and (max-width: 1100px) {
    .page-home { --campaign-header-space: 87px; }
}

@media (max-width: 780px) {
    .page-home { --campaign-header-space: 83px; }
}

@media (max-width: 640px) {
    .page-home { --campaign-header-space: 79px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .site-header,
    .page-home .site-header::before { transition: none; }
}