.brand {
    display: flex;
    align-items: center;

    & .brand__mark {
        display: block;
        inline-size: 2.5rem;
        block-size: 2.5rem;
    }
}

.front {
    --front-size: clamp(5.5rem, 14vw, 11.5rem);

    display: grid;
    place-content: center;
    min-block-size: 80svh;

    & .front__name {
        display: flex;
        align-items: flex-end;
        gap: calc(var(--front-size) * 0.07);
        margin: 0;
    }

    & .front__wordmark {
        display: block;
        block-size: calc(var(--front-size) * 0.8047);
        inline-size: auto;
    }

    & .front__cursor {
        display: block;
        inline-size: calc(var(--front-size) * 0.075);
        block-size: calc(var(--front-size) * 0.74);
        margin-block-end: calc(var(--front-size) * 0.004);
        background-color: var(--tint);
        animation: front-blink 1.1s steps(1) infinite;
    }
}

@keyframes front-blink {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .front .front__cursor {
        animation: none;
    }
}