/* ========================================================================== */
/* HEADER & LOGO                                                              */
/* ========================================================================== */
.logo{
margin:0;
padding:0;
position:relative;
z-index:1;
}
.logo img{
width:100px;
height:auto;
object-fit:contain;
}
.fixed-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
pointer-events:none;
background:transparent;
}
.fixed-header__inner{
max-width:100%;
margin:1.25em 0 0 1.25em;
padding-left:0;
padding-right:var(--gutter);
text-align:left;
pointer-events:none;
}
.fixed-header__inner a,
.fixed-header__inner button,
.fixed-header__inner .major,
.fixed-header__inner .minor{
pointer-events:auto;
}


/* ========================================================================== */
/* NAV TOGGLE                                                      */
/* ========================================================================== */
.nav-toggle {
position:fixed;
top:12px;
right:12px;
width:84px;
height:84px;
border: 1px solid var(--color-bg);
background:transparent;
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
z-index:1001;
cursor:zoom-in!important;
touch-action:manipulation;
}
.nav-toggle:hover {
background-color: transparent;
box-shadow: none;
border: 1px solid var(--color-dark);
cursor:zoom-in!important;
}
.nav-toggle img {
width:50%;
height:50%;
object-fit:cover;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}

/* ========================================================================== */
/* DRAWER NAVIGATION                                                          */
/* ========================================================================== */
.drawer-overlay{
position:fixed;
inset:0;
background:transparent;
opacity:0;
pointer-events:none;
transition:opacity 200ms ease;
z-index:1000;
}
.drawer{
position:fixed;
top:0;
right:0;
height:100vh;
width:min(280px,58.67vw);
transform:translateX(100%);
transition:transform 260ms ease;
z-index:1002;
background:rgba(255,255,255,0.04);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
border-left:1px dashed var(--color-medium);
}
.drawer-inner{
height:100%;
display:flex;
flex-direction:column;
padding:var(--gap-2);
}
.drawer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--gap-1);
padding-bottom:var(--gap-1);
border-bottom:1px solid var(--color-medium);
}
.drawer-close{
text-align: right;
background:rgba(4,4,4,0.04);
color:var(--color-light);
border-radius:var(--radius);
padding:10px 12px;
font-size:0.875rem;
border:1px solid transparent;
cursor:pointer;
}
.drawer-close:hover,
.drawer-close:focus,
.drawer-close:focus-visible{
outline:none;
box-shadow:none;
border:1px solid transparent;
color:var(--color-medium);
}
.drawer-nav{
display:flex;
flex-direction:column;
gap:var(--gap-1);
padding-top:var(--gap-1);
}
.drawer-link{
display:block;
text-decoration:none;
color:var(--color-light);
padding:4px;
border-radius:var(--radius);
border:1px solid transparent;
box-sizing:border-box;
transition:background 160ms ease, border-color 160ms ease;
font-size:0.875rem;
}
.drawer-link:hover{
color:var(--color-light);
border-bottom:1px dotted var(--color-medium);
}
.drawer-link:focus-visible{
outline:2px solid var(--color-light);
outline-offset:3px;
}
.drawer-divider{
border-bottom:1px dotted var(--color-medium);
}
.drawer-link-icon{
display:inline-flex !important;
align-items:center;
gap:10px;
}
.drawer-link-icon i{
width:20px;
text-align:center;
font-size:1rem;
flex:0 0 20px;
}
.drawer-icon-row{
display:flex;
gap:var(--gap-1);
align-items:center;
}
.drawer-icon-row .drawer-link{
width:auto;
}
body.drawer-open .drawer{
transform:translateX(0);
}

body.drawer-open .drawer-overlay{
opacity:1;
pointer-events:auto;
}
/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */
.fixed-footer{
position:fixed; padding:12px 4px 4px 4px;
bottom:0px;
left:0px;
right:0px;
z-index:2000;
pointer-events:none;
background:transparent;
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);  
}
.footer {
margin-top:0;
padding-top:calc(var(--gap-1) * 0.75);
border-top:1px dotted var(--color-medium);
display:flex;
justify-content:flex-end;
align-items:center;
}