* {
    box-sizing: border-box;
}

.menu-wrapper {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
}

.menu__icon {
    width: 52px;
    height: 52px;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.menu__icon:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.25);
}

.menu__icon span {
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: all 0.3s ease;
}

.menu__icon.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu__icon.active span:nth-child(2) {
    opacity: 0;
}

.menu__icon.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 9998;
}

.nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    height: 100vh;
    background: #0b0b0b;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    padding-top: 90px;
    transition: right 0.35s ease;
    z-index: 9999;
}

.nav-menu.open {
    right: 0;
}

.nav-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 18px 28px;
    transition: all 0.25s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    padding-left: 38px;
}

.nav-title {
    position: absolute;
    top: 30px;
    left: 28px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .nav-menu {
        width: 100%;
        right: -100%;
    }
}

.nav-menu { gap: 0; flex-wrap: nowrap; overflow-y: auto; height: 100dvh; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.nav-menu form { padding: 20px 28px; }
.nav-title { text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .menu__icon, .menu__icon span, .nav-menu, .nav-menu a, .nav-overlay { transition: none; } }
.nav-account{margin-top:auto;padding:24px 24px 0;border-top:1px solid #ffffff14}.nav-profile{display:flex;align-items:center;gap:12px}.nav-profile img{width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid #a994ff55;flex-shrink:0}.nav-profile>div{min-width:0}.nav-profile strong,.nav-profile span{display:block;overflow-wrap:anywhere}.nav-profile strong{font-size:14px;color:#f7f7fb}.nav-profile span{font-size:11px;color:#bbb8cb;line-height:1.5;margin-top:5px}.nav-menu .nav-signout{padding:14px 24px 8px}.nav-signout .quiet{width:100%;text-align:center}
.nav-menu a.nav-profile{padding:10px 0;border:0;font-weight:400;border-radius:10px}.nav-menu a.nav-profile:hover{padding-left:0;background:#9380ff12}.nav-menu a.nav-profile strong{font-weight:700}

/* Keep the account picture and sign out visible while the links scroll. */
.nav-menu{overflow:hidden}
.nav-title{flex-shrink:0}
.nav-links{display:flex;flex-direction:column;overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
.nav-account-footer{flex-shrink:0;background:#0b0b0b}
.nav-account-footer .nav-account{margin-top:0;padding:12px 24px 0}
.nav-menu .nav-account-footer .nav-signout{padding-top:6px}
.nav-menu .nav-profile img{display:block;width:40px;height:40px;max-width:none;flex:0 0 40px}

/* Keep the hamburger within the same header row as the brand. */
body header.site-header{position:sticky;top:0;z-index:10000;display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;min-height:76px;padding:0 max(calc((100% - 1126px)/2),5%);background:#0b0c12f5;border-bottom:1px solid #ffffff12;backdrop-filter:blur(12px)}
body .site-header .brand{display:inline-flex;align-items:center;gap:10px;margin:0}
body .site-header .menu-wrapper{position:static;display:flex;align-items:center;flex-shrink:0}
body .site-header .menu__icon{width:42px;height:42px;border-radius:10px;background:#17141f;border-color:#b39aff30;gap:5px}
body .site-header .menu__icon span{width:20px;height:2px}
body .site-header .menu__icon:hover{transform:none;background:#231c32;border-color:#b39aff70}
body .site-header .menu__icon:focus-visible{outline:2px solid #b39aff;outline-offset:3px}
body .site-header .menu__icon.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body .site-header .menu__icon.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body .site-header~.nav-menu{top:76px;height:calc(100dvh - 76px);padding-top:72px}
@media(max-width:600px){body header.site-header{padding-inline:5%;height:68px;min-height:68px}body .site-header~.nav-menu{top:68px;height:calc(100dvh - 68px)}body .site-header .menu__icon{width:40px;height:40px}}


/* Expanded sections stay inside the scrollable link panel. */
.nav-links>*,.nav-embeds{flex-shrink:0}.nav-links{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#9670cf #15121d;scrollbar-gutter:stable;padding-bottom:12px}.nav-embeds>div{min-width:0}.nav-embeds a{white-space:normal;overflow-wrap:anywhere}.nav-links a,.nav-links summary{min-height:44px}.nav-links svg{flex-shrink:0}