.navbar{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:6px 16px;
    margin:0 0 4px;
    padding:6px 4px 6px;
    border-bottom:1px solid #999;
    border-top:1px solid #999;
    overflow:hidden;
    transition:max-height .45s ease;
}

.navbar a{
    text-decoration:none;
    font-size:14px;
    white-space:nowrap;
    color:#777;
}
.navbar a:hover{ text-decoration:underline; color:black; }

.subtitle{
    padding:3px 2px;
    color:black;
    margin-top:0;
    font-size:14px;
    font-style:italic;
    font-family:"Courier New", Courier, monospace;
    transition:opacity .8s ease;
}

.navMobileTop{ display:none; }
.mobileRegister{ display:none; }
.desktopRegister{ display:inline; }

.navLinks{
  display:flex;
  gap:6px 16px;
  flex-wrap:wrap;
}

#navCloseBtn{ display:none; }

/* Mobile navbar */
@media (max-width:600px){

    .navbar a{ font-size:19px; }

    .subtitle{
        font-size:17px;
        min-height:calc(1.25em * 2);
        display:flex;
        align-items:flex-start;
    }

    .siteHeader a:last-child{
        font-size:42px;
        line-height:1;
    }

    .navMobileTop{
        display:flex;
        width:100%;
        justify-content:space-between;
        align-items:center;
    }

    .mobileRegister{ display:inline; }
    .desktopRegister{ display:none; }

    .navMobileTop a{ margin-left:auto; }

    .navLinks{
        display:none;
        flex-direction:column;
        gap:10px;
        margin-top:8px;
        opacity:0;
        transition:opacity .35s ease;
    }

    .navbar.expanded .navLinks{
        display:flex;
        margin-top:-30px;
        opacity:1;
        transition-delay:.35s;
    }

    #navCloseBtn{ display:block; color:#777; opacity:0; transition:opacity .25s ease; }
    #siteMenuBtn{ cursor:pointer; color:#777; transition:opacity .25s ease; }

    .navbar{ max-height:46px; }
    .navbar.expanded{ max-height:420px; }

    .navbar.expanded #siteMenuBtn{
        opacity:0;
        pointer-events:none;
    }

    .navbar.expanded #navCloseBtn{ opacity:1; }
}
/* ===============================
   SITE MENU OVERLAY (BODY LEVEL)
================================ */

#siteMenuOverlay{
  position:fixed;
  inset:0;
  z-index:100000;
  pointer-events:none;
  width:100vw;
  height:100vh;
}

#siteMenuOverlay.open{
  pointer-events:auto;
  background:rgba(0,0,0,.4);   /* DIM PAGE */
}

/* panel */
#siteMenuOverlay .navLinks{
  position:absolute;
  display: block !important;
  opacity: 1;
  top:0;
  left:0;
  margin-top:0 !important;   /* ← THIS LINE */
  width:140px;              /* ← also shrink ~30% */
  height:100vh;
  background:#eee;
  padding:8px;
  box-shadow:2px 0 12px rgba(0,0,0,.3);
}

/* buttons */
#siteMenuOverlay .site-menu-btn{
  display:block;
  width:100%;
  text-align:left;
  margin:6px 0;
  padding:8px 10px;
  background:none;
  border:0;
  font-size:18px;
  color:#222;
  cursor:pointer;
}

/* keep panel above dim layer */
#siteMenuOverlay .navLinks{
  z-index:100001;
}

/* prevent page scroll while menu open */
body.siteMenuOpen{
  overflow:hidden;
}