.site-nav{margin-bottom:20px;border:1px solid var(--line);background:var(--window);box-shadow:8px 8px 0 var(--shadow)}
.site-nav__bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:8px 12px;border-bottom:1px solid var(--line);font-family:var(--font-ui);
  background:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 14%, white) 0, color-mix(in srgb, var(--accent) 14%, white) 3px, color-mix(in srgb, var(--accent) 8%, white) 3px, color-mix(in srgb, var(--accent) 8%, white) 6px);
}
.site-nav__brand{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.04em}
.site-nav__toggle{display:none;border:1px solid var(--line);background:var(--window-2);padding:6px 10px;font-family:var(--font-ui)}
.site-nav__menu{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.site-nav__menu a{text-decoration:none;padding:8px 10px;border:1px solid transparent;font-family:var(--font-ui);font-size:.9rem}
.site-nav__menu a:hover,.site-nav__menu a[aria-current="page"]{border-color:var(--line);background:var(--window-2)}
@media (max-width: 640px){
  .site-nav__toggle{display:inline-block}
  .site-nav__menu{display:none;flex-direction:column}
  .site-nav.is-open .site-nav__menu{display:flex}
}