:root {
  --light: #fdf5e1;
}

body {
  background: var(--ivory);
}

.site-header {
  z-index: 40;
  gap: 36px;
  min-height: 76px;
  padding: 14px 48px 14px 190px;
  background: rgba(188, 178, 153, 0.55);
  border-bottom: 1px solid rgba(173, 160, 124, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
}

.brand {
  position: absolute;
  top: 12px;
  left: 40px;
  z-index: 2;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 214px;
  transform-origin: left top;
  filter: drop-shadow(0 10px 18px rgba(29, 29, 27, 0.16));
}

.desktop-nav {
  gap: 4px;
}

.desktop-nav > a:not(.site-discord) {
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.desktop-nav > a:not(.site-discord):hover {
  background: rgba(29, 29, 27, 0.07);
  text-decoration: none;
}

.site-discord {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 14px;
  border: 1.5px solid var(--clay);
  border-radius: 64px;
  background: var(--light);
  color: var(--carbon);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

.site-discord:hover {
  background: #fff;
  text-decoration: none;
}

.site-discord img {
  display: block;
  width: auto;
  height: 18px;
}

.desktop-nav .site-discord {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.desktop-nav .site-discord:hover {
  text-decoration: none;
}

.hero {
  min-height: calc(100vh - 69px);
  padding-top: 56px;
  padding-bottom: 84px;
  background: radial-gradient(120% 120% at 16% 6%, var(--ivory) 28%, #ebdfb9 68%, #d2bf92 100%);
}

.hero-glow {
  display: none;
}

.hero-copy {
  margin-top: 120px;
}

@media (max-width: 1100px) {
  .site-header {
    gap: 14px;
    min-height: 83px;
    padding: 12px 20px;
  }

  .brand {
    position: static;
    min-width: 0;
  }

  .brand img {
    width: auto;
    max-width: calc(100vw - 94px);
    height: 58px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 10px rgba(29, 29, 27, 0.12));
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav {
    top: 83px;
  }

  .mobile-nav .site-discord {
    width: fit-content;
    padding: 8px 16px 8px 14px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
  }

  .hero {
    padding: 40px 22px 60px;
  }

  .hero-copy {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 28px;
  }
}