.site-header .brand-wordmark {
    display: block;
    width: fit-content;
    color: #dff8fc;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .site-header .brand-wordmark {
        background-image: linear-gradient(100deg, #20cfe7 0%, #6de4f6 27%, #f4fbff 46%, #fff5eb 58%, #ff8d4d 75%, #ff6a00 88%, #ff6a00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.site-header .brand-mark {
    border-color: #55d9ec;
    background: linear-gradient(135deg, #20cfe720, #ff6a001a);
    box-shadow: 0 0 18px #20cfe71f;
}

.site-header .brand-mark::after {
    background: linear-gradient(160deg, #67e2f5 0%, #f6f9fa 45%, #ff6a00 100%);
}

@media (forced-colors: active) {
    .site-header .brand-wordmark {
        background: none;
        color: LinkText;
        -webkit-text-fill-color: LinkText;
    }
}