.site-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem max(1.5rem, calc((100vw - 1200px) / 2));
  border-bottom: 4px solid var(--wine);
  background: var(--night);
  color: var(--light);
}
.site-masthead a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  color: var(--light);
  text-decoration: none;
}
.masthead-name { font-family: "Rubik", Arial, sans-serif; font-weight: 700; letter-spacing: -.02em; }
.masthead-directory { font-size: 1rem; white-space: nowrap; }
.masthead-directory:hover { text-decoration: underline; }
.site-masthead a:focus-visible { outline-color: var(--gold); }
.skip-link {
  position: absolute;
  top: -160px;
  left: 1rem;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem 1rem;
  background: var(--light);
  color: var(--ink);
  z-index: 5;
}
.skip-link:focus { top: .5rem; }
@media (max-width: 520px) {
  .site-masthead { flex-wrap: wrap; gap: 0 .75rem; padding: .65rem 1.25rem; }
  .masthead-name { font-size: 1.1rem; flex-basis: 100%; }
  .masthead-directory { margin-top: .1rem; }
}