/* Load after the scene styles. Font: Bodoni Moda, Owen Earl, SIL OFL 1.1. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('assets/fonts/BodoniModa-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

.site-header.brand-header {
  --brand-ink: #f9f5ea;
  box-sizing: border-box;
  height: 116px;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  color: var(--brand-ink);
  isolation: isolate;
}
.brand-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -38px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#08090980, #08090921 64%, transparent);
}
.brand-header .brand-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  margin: 0;
  padding: 0 6px 7px;
  min-height: 44px;
  font-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  font-weight: 900;
  font-size: 72px;
  font-style: normal;
  font-synthesis: none;
  font-optical-sizing: none;
  font-variation-settings: 'wght' 900, 'opsz' 72;
  letter-spacing: -.065em;
  line-height: .94;
  white-space: nowrap;
  transform: translate(-50%, -50%) scaleX(.79);
  transform-origin: center;
  text-shadow: 0 2px 14px #08080835;
  transition: color 180ms ease;
}
.brand-header .brand-wordmark:hover { color: #fff; }
.brand-header .brand-wordmark:focus-visible { outline-offset: 5px; }
.brand-header .brand-links {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-self: start;
  pointer-events: none;
}
.brand-header .brand-link {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .025em;
  border-radius: 50%;
  pointer-events: auto;
  transition: color 180ms ease, background-color 180ms ease;
}
.brand-header .brand-link[data-brand-link='pump'] { border-radius: 24px; }
.brand-header .brand-link svg { flex: 0 0 auto; width: 20px; height: 20px; }
.brand-header .brand-link .brand-x { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.brand-header .brand-link:hover { color: #fff; background: #ffffff10; }
.brand-header .brand-link[aria-disabled='true'] { opacity: .4; cursor: default; }
.brand-header .brand-link[aria-disabled='true']:hover { background: none; color: inherit; }
.brand-header .menu-toggle {
  justify-self: end;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 0 10px 12px;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .015em;
}
.brand-header .menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 700px) {
  .site-header.brand-header { height: 96px; padding: 12px 20px; }
  .brand-header .brand-wordmark { font-size: 54px; }
  .brand-header .brand-link-label { display: none; }
  .brand-header .brand-links { gap: 2px; }
}
@media (max-width: 480px) {
  .site-header.brand-header {
    height: calc(86px + env(safe-area-inset-top));
    padding: calc(11px + env(safe-area-inset-top)) 12px 11px;
  }
  .brand-header .brand-wordmark {
    top: calc(50% + env(safe-area-inset-top) / 2);
    font-size: clamp(24px, calc(12vw - 14px), 44px);
    padding-bottom: 5px;
  }
  .brand-header .menu-toggle { padding: 10px; }
  .brand-header .menu-toggle span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-header .brand-wordmark,
  .brand-header .brand-link,
  .brand-header .menu-toggle svg { transition: none; }
}
@media (max-width: 350px) {
  .brand-header .brand-wordmark {
    font-size: 24px;
    transform: translate(-50%, -50%) scaleX(.76);
  }
}