/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  width:100%;
  background:var(--c-neutral-50);
  border-bottom:1px solid var(--c-neutral-200);
  z-index:100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--space-4);
  padding-bottom:var(--space-4);
}
.logo{
  font-size:var(--fs-xl);
  font-weight:700;
  color:var(--c-primary);
  letter-spacing:.05em;
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--c-text);
  cursor:pointer;
  padding:var(--space-2);
  border-radius:var(--radius);
}
.nav-toggle:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.primary-nav .nav-list{
  display:flex;
  gap:var(--space-6);
  list-style:none;
  margin:0;
  padding:0;
}
.primary-nav a{
  font-weight:500;
  color:var(--c-text);
  transition:color var(--duration) var(--timing);
}
.primary-nav a:hover{color:var(--c-primary)}
body.menu-open{overflow:hidden}
@media(max-width:767px){
  .nav-toggle{display:block}
  .primary-nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--c-neutral-50);
    border-bottom:1px solid var(--c-neutral-200);
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform var(--duration) var(--timing),visibility var(--duration) var(--timing);
  }
  .primary-nav.is-open{
    transform:translateY(0);
    visibility:visible;
  }
  .primary-nav .nav-list{
    flex-direction:column;
    gap:0;
    padding:var(--space-4);
  }
  .primary-nav li+li{margin-top:var(--space-2)}
  .primary-nav a{display:block;padding:var(--space-2) 0}
}