html.is-loading {
    background: #f3f1ed;
}

html.is-loading body {
    margin: 0;
}

html.is-loading body > :not(.page-loader) {
    visibility: hidden;
}

.page-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    color: #151515;
    background: #f3f1ed;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-loader strong {
    font-size: 28px;
    font-weight: 850;
    letter-spacing: -.04em;
}

.page-loader span {
    color: #6f6f6f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-loader::after {
    width: 34px;
    height: 3px;
    margin-top: 12px;
    content: "";
    background: #d5272f;
    border-radius: 999px;
    animation: sm-loading .8s ease-in-out infinite alternate;
}

@keyframes sm-loading {
    from {
        opacity: .35;
        transform: scaleX(.45);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}