/* Desktop Styles - Only loaded on screens wider than 768px */

:root {
    --nav-bar: max(var(--nav-width), calc(44px + var(--safe-left)));
}

/* Desktop Navigation */
.nav-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--nav-bar);
    padding:
        max(var(--nav-pad-y), var(--safe-top))
        0
        max(var(--nav-pad-y), var(--safe-bottom))
        var(--safe-left);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    border-right: 1px solid var(--c-line);
    background: var(--nav-surface);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.logo-vert {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Desktop Hero */
.hero-sec {
    padding-left: calc(var(--nav-bar) + var(--pad) * 1.5);
}

.hero-main {
    padding-top: 7rem;
}

.headline .indent {
    margin-left: 12vw;
}

.headline__swap {
    --headline-word-indent: 5vw;
}

@media (max-width: 1366px) {
    .headline {
        font-size: clamp(7rem, 13.5vw, 10.35rem);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .nav-side {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--nav-surface);
    }
}