.site-header{
  position:sticky;
  top:0;
  z-index:200;
  width:100%;
  padding:1.3rem 1rem 1rem;
  text-align:center;
  font-family:var(--font-orbitron);
  background:rgba(16,16,16,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  transition:padding .45s var(--ease), box-shadow .45s var(--ease-soft), background-color .45s var(--ease-soft);
  animation:exoworoHeaderDrop .8s var(--ease) both;
}

.site-header.is-scrolled{
  padding:.65rem 1rem .6rem;
  background:rgba(14,14,14,.88);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

@keyframes exoworoHeaderDrop{
  from{ opacity:0; transform:translateY(-100%); }
  to{ opacity:1; transform:none; }
}

.site-header .brand{
  display:inline-block;
  font-size:1.6rem;
  letter-spacing:.12em;
  color:var(--color-text);
  transition:font-size .45s var(--ease);
}

.site-header.is-scrolled .brand{
  font-size:1.25rem;
}

.site-header .brand a:hover{
  transform:scale(1.04);
}

.site-header .brand a{
  display:inline-block;
  transition:transform .5s var(--ease);
}

.site-header .brand span{
  color:var(--color-red);
}

.site-header nav{
  margin-top:.65rem;
  display:flex;
  justify-content:center;
  gap:1.6rem;
  flex-wrap:wrap;
  transition:margin .45s var(--ease);
}

.site-header.is-scrolled nav{
  margin-top:.3rem;
}

.site-header nav a{
  position:relative;
  padding:.2rem 0;
  font-size:.82rem;
  letter-spacing:.07em;
  color:var(--color-text-dim);
  transition:color .25s ease;
}

.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:2px;
  border-radius:2px;
  background:var(--color-red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"]{
  color:var(--color-text);
}

.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after{
  transform:scaleX(1);
}