/* KTheme preset-based HTML logo system. */
.ktheme-html-logo {
    --ktheme-logo-size: 20px;
    --ktheme-logo-accent-1: #8a5f41;
    --ktheme-logo-accent-1-opacity: 1;
    --ktheme-logo-accent-2: #a77f60;
    --ktheme-logo-accent-2-opacity: 0.5;
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    max-width: 100%;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--ktheme-logo-size);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.ktheme-html-logo.logo-black {
    color: #333333;
}

.ktheme-html-logo.logo-white {
    color: #ffffff;
}

.ktheme-html-logo__text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ktheme-html-logo__symbol {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.ktheme-html-logo__shape {
    position: absolute;
    display: block;
}

.ktheme-html-logo--symbol-only {
    gap: 0;
}

/* Style 1: the original vertically stacked dot mark. */
.ktheme-html-logo--stacked-dots .ktheme-html-logo__symbol {
    width: 0.35em;
    height: 0.6em;
}

.ktheme-html-logo--stacked-dots .ktheme-html-logo__shape {
    left: 0;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
}

.ktheme-html-logo--stacked-dots .ktheme-html-logo__shape--1 {
    top: 0;
    background: var(--ktheme-logo-accent-1);
    opacity: var(--ktheme-logo-accent-1-opacity);
}

.ktheme-html-logo--stacked-dots .ktheme-html-logo__shape--2 {
    bottom: 0;
    background: var(--ktheme-logo-accent-2);
    opacity: var(--ktheme-logo-accent-2-opacity);
}

/* Style 2: a distinct pair of offset vertical bars. */
.ktheme-html-logo--double-bars .ktheme-html-logo__symbol {
    width: 0.52em;
    height: 0.72em;
}

.ktheme-html-logo--double-bars .ktheme-html-logo__shape {
    bottom: 0;
    width: 0.18em;
    border-radius: 999px;
}

.ktheme-html-logo--double-bars .ktheme-html-logo__shape--1 {
    left: 0;
    height: 0.72em;
    background: var(--ktheme-logo-accent-1);
    opacity: var(--ktheme-logo-accent-1-opacity);
}

.ktheme-html-logo--double-bars .ktheme-html-logo__shape--2 {
    right: 0;
    height: 0.48em;
    background: var(--ktheme-logo-accent-2);
    opacity: var(--ktheme-logo-accent-2-opacity);
}

@media (max-width: 767.98px) {
    .ktheme-html-logo {
        max-width: min(100%, 200px);
        font-size: min(var(--ktheme-logo-size), 40px);
    }
}