@layer components {
    /* critical */
    .staldia-site-header,
    .staldia-site-header-container,
    .staldia-brand-logo-link {
        display: flex;
        flex-wrap: wrap;
    }
    .staldia-site-header {
        position: fixed;
        justify-content: center;
        align-items: end;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--layout-site-header-height);
        z-index: 99;
    }
    .staldia-site-header-container {
        --container-half-height: calc(var(--layout-site-header-container-height) / 2);
        align-items: center;
        height: var(--layout-site-header-container-height);
        width: calc(100% - (2 * var(--layout-site-header-inset-x)));
    }
    .staldia-site-header-brands,
    .staldia-brand-logo-link {
        height: 100%;
    }
    .staldia-brand-logo-link {
        --base-size: 6px;
        --padding-horizontal: calc(var(--layout-site-header-container-height) / 3);
        align-items: center;
        padding: 0 var(--padding-horizontal);
        gap: .5rem;
    }
    .staldia-brand-logo-main {
        font-size: calc(var(--base-size) * 4.5);
    }
    .staldia-brand-logo-sub {
        line-height: 1.2;
        font-weight: 700;
    }
    .staldia-brand-logo-sub-line:before {
        display: block;
        content: attr(data-phrase);
        font-size: var(--base-size);
    }
    @media (min-width: 600px) {
        .staldia-brand-logo-link {
            --padding-horizontal: var(--container-half-height);
        }
    }
    /* async */
    .staldia-site-header-container {
        background: var(--color-bg-white);
        border-radius: var(--container-half-height);
        box-shadow: 0 0 10px 10px rgb(var(--color-shadow-sand-rgb) / .2);
    }
}