/* Shared header menu — index.html is the single visual source of truth. */
:root{
  --header-primary:var(--color-brand);
  --header-ink:var(--color-header-ink);
  --header-bg:var(--color-header-bg);
  --header-ease:var(--ease-ui);
}

.top-bar{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  padding:var(--header-padding);
  background:var(--header-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.top-bar-inner{
  max-width:var(--content-max);width:100%;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
}
.top-bar .brand{
  display:flex;align-items:center;text-decoration:none;color:inherit;
}
.top-bar .brand-logo{height:var(--header-logo-height);width:auto;display:block}
.nav-desktop{display:flex;align-items:center;gap:var(--header-nav-gap)}
.nav-desktop a{
  font-size:15px;color:var(--header-ink);text-decoration:none;
  letter-spacing:.06em;transition:color .3s;
  position:relative;padding-bottom:4px;
}
.nav-desktop a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
  background:var(--header-primary);transition:width .3s var(--header-ease);
}
.nav-desktop a:hover{color:var(--header-primary)}
.nav-desktop a:hover::after{width:100%}
.nav-desktop a.active{color:var(--header-primary);font-weight:600}
.nav-desktop a.active::after{width:100%}

.hamburger{display:none}
.mobile-menu{display:none}

@media(max-width:768px){
  .nav-desktop{display:none}
  .top-bar{padding:var(--header-padding-mobile)}
  body{padding-top:58px}
  .nav-desktop a:active{color:var(--header-primary)}
  .hamburger{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:4px;
    z-index:200;position:relative;
  }
  .hamburger span{
    display:block;width:24px;height:2px;
    background:var(--header-ink);transition:all .3s var(--header-ease);
  }
  .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{
    position:fixed;top:0;left:0;width:100%;height:100vh;
    background:rgba(250,247,242,.97);backdrop-filter:blur(16px);
    z-index:150;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:32px;
    opacity:0;visibility:hidden;transition:all .35s var(--header-ease);
  }
  .mobile-menu.active{opacity:1;visibility:visible}
  .mobile-menu a{
    font-size:1.4rem;color:var(--header-ink);text-decoration:none;
    letter-spacing:.12em;transition:color .3s;font-weight:400;
  }
  .mobile-menu a:hover{color:var(--header-primary)}
  .mobile-menu a.active{color:var(--header-primary);font-weight:600}
}