/* Compact logo and generous outer spacing follow the Letter reference. */
.vl-header {
  --niwa-header-height: 84px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto auto;
  align-items: center;
  gap: 2.5vw;
  min-height: var(--niwa-header-height);
  padding: 20px clamp(28px, 2.5vw, 48px);
  color: #2e3032;
  background: var(--niwa-site-background);
}
.vl-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../../public/images/niwa-grain.png") repeat;
  background-size: 128px 128px;
  background-position: 0 var(--niwa-header-grain-y, 0px);
  mix-blend-mode: normal;
  opacity: .045;
}
body.admin-bar .vl-header { top: 32px; --niwa-header-grain-y: -32px; }
.vl-wordmark { justify-self: start; }
.vl-header .vl-wordmark__image { width: 70px; height: 18px; object-fit: contain; filter: brightness(0); }
.vl-header .custom-logo-link img { width: auto; max-width: 70px; max-height: 18px; }
.vl-primary-links .nav-links { flex-wrap: wrap; gap: 0 2.5vw; }
.vl-primary-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; letter-spacing: -.015em; }
.vl-primary-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.mobile-nav { display: none; }
@media (max-width: 980px) {
  .vl-header { --niwa-header-height: 60px; gap: 16px; padding: 8px 24px; }
  .vl-header { grid-template-columns: 1fr auto; }
  .vl-primary-links, .vl-header > .header-demo { display: none; }
  .mobile-nav { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; }
  .mobile-nav span { position: absolute; width: 18px; height: 1px; background: currentColor; }
  .mobile-nav span:first-child { transform: translateY(-4px); }
  .mobile-nav span:last-child { transform: translateY(4px); }
}
@media (max-width: 782px) {
  body.admin-bar .vl-header { top: 46px; --niwa-header-grain-y: -46px; }
}
@media (max-width: 640px) {
  .vl-header { gap: 12px; padding-inline: 20px; }
  .vl-header .vl-wordmark__image { width: 64px; height: 17px; }
}