:root{
--btn-bg: #111827;
--btn-fg: #fff;
--drawer-bg: #fff;
--link-fg: #111;
--backdrop: rgba(0,0,0,.2);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}

#nav-toggle{
position:fixed;
inset:0;
opacity:0;
pointer-events:none;
}


.backdrop{
position:fixed;
inset:0;
background:transparent;
transition:background .25s ease;
pointer-events:none;
z-index:40;
}
#nav-toggle:checked ~ .backdrop{
background:var(--backdrop);
pointer-events:auto;
}


.fab-open{
position:fixed;
right:24px;
bottom:calc(24px + var(--safe-bottom));
z-index:50;
display:flex;
align-items:center;
justify-content:center;
width:84px;
height:84px;
background:var(--btn-bg);
color:var(--btn-fg);
border-radius:50%;
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
font-family: 'Helvetica Now Display';
font-weight:500;
font-size:14px;
}
#nav-toggle:checked ~ label.fab-open{
background:#0b1220;
}


.footer-drawer{
position:fixed;
left:0; right:0;
bottom:0;
z-index:60;
background:var(--drawer-bg);
color:var(--link-fg);
transform:translateY(100%);
transition:transform .35s cubic-bezier(.2,.8,.2,1);
border-top:1px solid #ccc;
padding-bottom:calc(10px + var(--safe-bottom));
}
#nav-toggle:checked ~ .footer-drawer{
transform:translateY(0%);
}

.drawer-inner{
padding: 16px 20px;
max-width:980px;
margin:0 auto;
text-align:left;
}
.drawer-inner nav ul{
list-style:none;
padding:0; margin:0;
}
.drawer-inner nav li{
margin-bottom:12px;
}
.drawer-inner nav a{
display:block;
text-decoration:none;
color:var(--link-fg);
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    font-weight: 700;
}


.close-row{
position:absolute;
top:10px;
right:16px;
}
.btn-close{
font-family: 'Helvetica Now Display';
font-size:0.9rem;
font-weight:500;
font-size:14px;
cursor:pointer;
color:#555;
background:none;
border:none;
}