:root {
    --site-header-height: 0px;
}

body.has-dynamic-header {
    padding-top: var(--site-header-height);
}

body.has-dynamic-header .nd-hero {
    margin-top: calc(var(--site-header-height) * -1);
}

body.has-dynamic-header .page-hero,
body.has-dynamic-header .story-detail__hero {
    scroll-margin-top: var(--site-header-height);
}

.brand {
    display: inline-grid;
    gap: 0.25rem;
    align-items: start;
}

.brand__logo {
    display: block;
    width: clamp(126px, 12vw, 178px);
    height: auto;
    transition: width 0.22s ease, transform 0.22s ease;
}

.brand__claim {
    margin-left: 0.12rem;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.site-header {
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.site-header__inner {
    transition: padding 0.22s ease, gap 0.22s ease;
}

body.is-scrolled .site-header {
    border-bottom-color: rgba(242, 239, 233, 0.14);
    background: rgba(7, 9, 13, 0.92);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

body.is-scrolled .site-header__inner {
    padding-block: 0.65rem;
}

body.is-scrolled .brand__logo {
    width: clamp(108px, 9vw, 138px);
}

body.is-scrolled .brand__claim {
    opacity: 0;
    transform: translateY(-4px);
    height: 0;
    overflow: hidden;
}

@media (max-width: 760px) {
    body.has-dynamic-header {
        padding-top: var(--site-header-height);
    }

    body.has-dynamic-header .nd-hero {
        margin-top: calc(var(--site-header-height) * -1);
    }

    .site-header {
        background: rgba(7, 9, 13, 0.94);
    }

    .site-header__inner {
        gap: 1.15rem;
        padding-block: 0.95rem;
    }

    .brand__logo {
        width: 132px;
    }

    .brand__claim {
        font-size: 0.72rem;
    }

    body.is-scrolled .site-header__inner {
        padding-block: 0.65rem;
        gap: 0.75rem;
    }

    body.is-scrolled .brand__logo {
        width: 108px;
    }

    body.is-scrolled .site-nav {
        gap: 0.55rem 0.85rem;
    }
}