@layer ds.block {
    .block-main-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
    }

    .main-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding-block: var(--space-5);
    }

    .main-header__brand {
        font-family: var(--font-display);
        font-size: var(--text-h5);
        font-weight: var(--font-weight-bold);
        color: var(--color-heading);
        text-decoration: none;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .main-header__nav {
        display: flex;
        align-items: center;
        gap: var(--space-7);
    }

    .main-header__menu {
        display: flex;
        align-items: center;
        gap: var(--space-6);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-header__link {
        color: var(--color-heading);
        text-decoration: none;
        font-size: var(--text-small);
        font-weight: var(--font-weight-regular);
    }

    .main-header__link:hover { color: var(--color-primary); }

    .main-header__cta { font-size: var(--text-small); }

    .main-header__burger {
        display: none;
        background: none;
        border: none;
        padding: var(--space-2);
        cursor: pointer;
    }

    .main-header__backdrop { display: none; }

    @media (max-width: 64rem) {
        .main-header__burger { display: inline-flex; }

        .main-header__nav {
            position: fixed;
            inset: 0 0 0 auto;
            width: min(20rem, 84vw);
            height: 100vh;
            background: var(--color-bg);
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--space-7);
            padding: var(--space-9) var(--space-6);
            box-shadow: var(--shadow-lg);
            transform: translateX(100%);
            transition: transform var(--duration-base) var(--ease-out);
            z-index: var(--z-modal);
        }

        .main-header__menu { flex-direction: column; align-items: flex-start; gap: var(--space-5); }

        .block-main-header.is-open .main-header__nav { transform: translateX(0); }

        .block-main-header.is-open .main-header__backdrop {
            display: block;
            position: fixed;
            inset: 0;
            background: rgb(var(--shadow-color) / 0.45);
            z-index: var(--z-overlay);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .main-header__nav { transition: none; }
    }
}