:root {
  --header-height: 124px;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .3s ease, border-color .3s ease,
    box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-header .utility-bar {
  background: transparent;
  border-bottom-color: #ffffff0b;
}

.site-header nav > a,
.site-header .nav-account > .text-button {
  color: #dce4ee;
  text-shadow: 0 1px 8px #000b;
}

.site-header nav > a:hover,
.site-header nav > a[aria-current="page"] { color: var(--gold-light); }

.site-header.is-scrolled,
.site-header.is-inner,
.site-header.is-menu-open {
  background: rgba(8, 15, 25, .72);
  border-bottom-color: rgba(217, 184, 117, .22);
  box-shadow: 0 8px 30px #0000001c;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

body[data-page="inner"] #main-content {
  padding-top: var(--header-height);
}

.hero {
  height: min(883px, 100svh);
  min-height: calc(660px + var(--header-height));
  padding-top: var(--header-height);
}

@media (min-width: 1600px) {
  .hero { min-height: calc(740px + var(--header-height)); }
}

@media (max-width: 900px) {
  :root { --header-height: 110px; }
  .site-header nav {
    top: 100%;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    background: rgba(8, 15, 25, .96);
    border-bottom-color: rgba(217, 184, 117, .25);
  }
  .hero {
    height: calc(690px + var(--header-height));
    min-height: calc(620px + var(--header-height));
  }
}

@media (max-width: 600px) {
  :root { --header-height: 100px; }
  .hero {
    height: calc(650px + var(--header-height));
    min-height: calc(650px + var(--header-height));
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled,
  .site-header.is-inner,
  .site-header.is-menu-open { background: rgba(8, 15, 25, .94); }
}