/* Shared by every page. Mark overlay pages with data-header-layout="overlay". */
.site-header {
  position: relative;
  z-index: 20;
  height: 96px;
  padding: 23px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: var(--white);
  color: var(--black);
}
body[data-header-layout="overlay"] .site-header { position: absolute; inset: 0 0 auto; }
.header-brand { position: relative; display: flex; align-items: center; align-self: stretch; }
.brand { height: 50px; display: flex; align-items: flex-end; justify-content: center; gap: 25px; text-decoration: none; }
.brand-logo { display: block; width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover; }
.brand-word { font-family: var(--display); font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.brand-word-mobile { display: none; }
.brand-credit {
  position: absolute;
  z-index: 1;
  top: calc(100% + 4px);
  right: 0;
  color: var(--black);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: .025em;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 3px solid transparent; }
.site-nav:hover, .site-nav[aria-current="page"] { border-bottom-color: var(--pink); }
@media (max-width: 1100px) {
  .site-header { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .brand { gap: 12px; align-items: center; }
  .brand-word-desktop { display: none; }
  .brand-word-mobile { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); font-size: 24px; font-weight: 900; line-height: .9; letter-spacing: .01em; }
  /* Keep the two name lines centered against the logo; the credit sits below them. */
  .brand-credit { top: calc(50% + 26px); left: 62px; right: auto; text-align: left; }
}
@media (max-width: 700px) {
  .site-header { padding-inline: 20px; }
  .site-nav { right: 20px; font-size: .9rem; }
}