@font-face {
    font-family: "Ionosphere Brand";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.logo.brand-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex-shrink: 0;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 5px;
}

.brand-symbol {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.brand-copy { display: grid; gap: .2rem; min-width: 0; }
.brand-name {
    color: var(--text-main);
    font: 750 1.2rem/1.1 "Ionosphere Brand", "Segoe UI", sans-serif;
    letter-spacing: -.05em;
    white-space: nowrap;
}
.brand-name span { font-weight: 540; }
.logo.brand-link .brand-caption {
    margin: 0;
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .12em;
}

.brand-symbol-dark { display: none; }
[data-theme="dark"] .brand-symbol-light { display: none; }
[data-theme="dark"] .brand-symbol-dark { display: block; }
.brand-link:hover .brand-name { color: var(--brand); }

@media (max-width: 900px) {
    .brand-symbol { width: 36px; height: 36px; flex-basis: 36px; }
    .brand-name { font-size: 1.13rem; }
}

@media (max-width: 1100px) {
    .logo.brand-link .brand-caption { display: none; }
    .home-page .nav ul { gap: .18rem; }
    .home-page .nav a { padding-inline: .4rem; font-size: .76rem; }
}

@media (max-width: 640px) {
    .logo.brand-link { gap: .4rem; }
    .brand-symbol { width: 32px; height: 32px; flex-basis: 32px; }
    .brand-name { font-size: clamp(1rem, 3.9vw, 1.13rem); }
    .logo.brand-link .brand-caption { display: none; }
}