/* Header and navigation
   Reorganized from the verified working production build. */

.site-header {
  z-index: 20;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(290px,1fr) auto minmax(190px,1fr);
  align-items: center;
  width: min(1180px,100% - 48px);
  height: 166px;
  display: grid;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.brand {
  align-items: center;
  width: 290px;
  height: 160px;
  display: inline-flex;
}

.brand-logo {
  object-fit: contain;
  object-position: left center;
  width: 100%;
  height: 100%;
  display: block;
}

.header-mascot {
  z-index: 2;
  justify-self: end;
  width: 190px;
  height: 190px;
  position: relative;
  transform: translateY(-7px);
}

.header-mascot:before {
  z-index: -1;
  content: "";
  filter: blur(24px);
  background: #d30f1d33;
  border-radius: 50%;
  position: absolute;
  inset: 30% 24% 14%;
}

.header-mascot img {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 20px #0000007a)drop-shadow(0 0 11px #d30f1d29);
  width: 100%;
  height: 100%;
  display: block;
}

.site-header nav {
  color: #c6cad3;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  display: flex;
}

.site-header nav a {
  transition: color .16s;
}

.site-header nav a:hover,.site-header nav a:focus-visible {
  color: #fff;
}