/* Shared Tune Dropper public navigation */
.site-menu-toggle{
    position:absolute;
    top:14px;
    right:14px;
    z-index:12;
    width:46px;
    height:46px;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(243,234,223,.18);
    background:rgba(11,15,15,.72);
    color:var(--cream,#f3eadf);
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.site-menu-toggle:hover{border-color:rgba(225,161,94,.62)}
.site-menu-icon,
.site-menu-icon::before,
.site-menu-icon::after{
    content:'';
    display:block;
    width:19px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform .18s ease,opacity .18s ease;
}
.site-menu-icon{position:relative}
.site-menu-icon::before{position:absolute;left:0;top:-6px}
.site-menu-icon::after{position:absolute;left:0;top:6px}

.site-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:1990;
    background:rgba(4,7,7,.52);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease,visibility .18s ease;
}
.site-nav-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:2000;
    width:min(320px,88vw);
    height:100dvh;
    padding:22px;
    transform:translateX(102%);
    transition:transform .22s ease;
    background:linear-gradient(180deg,#1a1f1d,#101413);
    border-left:1px solid rgba(225,161,94,.18);
    box-shadow:-22px 0 60px rgba(0,0,0,.34);
}
.site-nav-open .site-nav-backdrop{opacity:1;visibility:visible}
.site-nav-open .site-nav-drawer{transform:translateX(0)}
.site-nav-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.site-nav-brand{font-size:15px;font-weight:950;letter-spacing:.08em;color:#fff8ef}
.site-nav-close{
    width:40px;
    height:40px;
    padding:0;
    margin:0;
    border-radius:50%;
    border:1px solid rgba(243,234,223,.12);
    background:#292d2a;
    color:var(--cream,#f3eadf);
    font-size:26px;
    line-height:1;
}
.site-nav-links{display:grid;gap:8px}
.site-nav-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(243,234,223,.07);
    background:#252a27;
    color:var(--cream,#f3eadf);
    text-decoration:none;
    font-weight:850;
}
.site-nav-links a:hover{border-color:rgba(225,161,94,.42);color:var(--amber,#e1a15e)}
.site-nav-links a::after{content:'›';color:var(--amber,#e1a15e);font-size:20px}
.site-nav-note{margin:18px 4px 0;color:var(--muted,#b5ada3);font-size:12px;line-height:1.5}
body.site-nav-open,body.info-open{overflow:hidden}

.info-overlay{
    position:fixed;
    inset:0;
    z-index:2100;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(5,8,8,.72);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.info-overlay[hidden]{display:none!important}
.info-dialog{
    width:min(560px,100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    padding:22px;
    border-radius:20px;
    border:1px solid rgba(225,161,94,.22);
    background:linear-gradient(180deg,#1b201e,#111514);
    box-shadow:0 28px 80px rgba(0,0,0,.52);
}
.info-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:-14px}
.info-dialog h2{margin:2px 0 0;color:#fff8ef;font-size:28px}
.info-dialog h3{margin:22px 0 7px;color:var(--amber,#e1a15e);font-size:16px}
.info-dialog p,.info-dialog li{color:var(--cream,#f3eadf);line-height:1.62}
.info-dialog ul,.info-dialog ol{padding-left:22px}
.info-dialog .muted{color:var(--muted,#b5ada3)}
.info-close{
    width:40px;
    height:40px;
    margin:0;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(243,234,223,.12);
    background:#292d2a;
    color:var(--cream,#f3eadf);
    font-size:26px;
    line-height:1;
    flex:0 0 auto;
}

@media(max-width:520px){
    .site-menu-toggle{top:11px;right:11px;width:44px;height:44px}
    .info-overlay{padding:10px}
    .info-dialog{padding:18px;max-height:calc(100dvh - 20px)}
}