:root {
  /* Adjust this value to move the navbar content toward or away from the viewport edges. */
  --navbar-edge-margin: clamp(1rem, 2vw, 2rem);
}

#nav-placeholder {
  display: flex;
  margin-inline: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

main > header {
  align-items: center;
  display: flex;
  isolation: isolate;
  margin-inline: calc(clamp(1rem, 4vw, 2.5rem) * -1);
  padding: var(--navbar-block-padding) var(--navbar-edge-margin);
  position: sticky;
  top: 0;
  width: auto;
  z-index: 1000;
  body.page & {
    padding-inline: var(--navbar-edge-margin);
  }
}

main > header::before {
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  background: rgb(8 14 23 / 94%);
  content: "";
  inset: 0 0 -24px;
  -webkit-mask-image: linear-gradient(to bottom, #000000 0%, #000000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 0%, #000000 calc(100% - 24px), transparent 100%);
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity 260ms ease,
  -webkit-backdrop-filter 260ms ease,
  backdrop-filter 260ms ease;
  z-index: 0;
}

main > header.has-navbar-hero:not(.is-past-hero)::before {
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
  opacity: 0.55;
}

.brand,
.nav-toggle,
.nav-links {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
  transition: background-color 260ms ease,
  border-color 260ms ease,
  box-shadow 260ms ease,
  -webkit-backdrop-filter 260ms ease,
  backdrop-filter 260ms ease;
}

main > header.has-navbar-hero:not(.is-past-hero) .brand,
main > header.has-navbar-hero:not(.is-past-hero) .nav-toggle {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgb(8 10 9 / 38%);
  border-color: rgb(255 255 255 / 18%);
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
}

.brand {
  align-items: center;
  display: inline-flex;
  padding: 0.45rem;
  text-decoration: none;
  & .brand__logos {
    align-items: center;
    display: flex;
    gap: 0.4rem;
  }
  & .brand__mark {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
  }
}

.site-nav {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  width: 100%;
}

.nav-toggle {
  display: none;
}

.nav-logo {
  color: white;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  margin: 0 0.2rem;
  white-space: nowrap;
  .nav-logo__trademark {
    font-size: 0.28em;
    font-weight: 200;
    line-height: 1;
    margin-left: 0.08em;
    position: relative;
    top: -1.35em;
    vertical-align: baseline;
  }
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.nav-links {
  align-items: center;
  display: flex;
  gap: 0.15rem;
  list-style: none;
  padding: 0.45rem;
  & a {
    border-radius: 8px;
    color: var(--muted);
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    &:hover,
    &:focus-visible {
      background: rgb(255 255 255 / 11%);
      color: var(--text);
      outline: none;
      transform: translateY(-1px);
    }
    &[aria-current="page"] {
      background: var(--accent);
      color: var(--ink);
    }
  }
}

@media (max-width: 1000px) {
  .site-nav {
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    &.is-open .nav-toggle__bar:nth-of-type(2) {
      transform: translateY(7px) rotate(45deg);
    }
    &.is-open .nav-toggle__bar:nth-of-type(3) {
      opacity: 0;
    }
    &.is-open .nav-toggle__bar:last-of-type {
      transform: translateY(-7px) rotate(-45deg);
    }
    &.is-open .nav-links {
      display: flex;
    }
  }
  .nav-toggle {
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    height: 3.75rem;
    justify-content: center;
    padding: 0.9rem;
    width: 3.75rem;
  }
  .nav-toggle__bar {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    transition: transform 180ms ease, opacity 180ms ease;
    width: 100%;
  }
  .nav-links {
    align-items: stretch;
    backdrop-filter: blur(14px);
    background: rgb(8 10 9 / 96%);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    width: min(18rem, calc(100vw - 2rem));
    & a {
      padding: 0.9rem 1rem;
    }
  }
}

@media (min-width: 1001px) {
  main > header.has-navbar-hero:not(.is-past-hero) .nav-links {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgb(8 10 9 / 38%);
    border-color: rgb(255 255 255 / 18%);
    box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
  }
}

@media (max-width: 400px) {
  .site-nav {
    gap: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  main > header::before,
  .brand,
  .nav-toggle,
  .nav-links,
  .nav-links a,
  .nav-toggle__bar {
    transition: none;
  }
}

/* Shared wordmark sizing for every page using the navbar. */
.brand__wordmark-original { display:block; width:clamp(130px,14vw,175px); height:auto;  }

/* Desktop-only readability and current-page treatment. */
@media (min-width: 1001px) {
  main > header.has-navbar-hero:not(.is-past-hero)::before {
    opacity: 0.65;
    inset-block-end: -96px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), rgb(0 0 0 / 85%) calc(100% - 72px), rgb(0 0 0 / 50%) calc(100% - 48px), rgb(0 0 0 / 15%) calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), rgb(0 0 0 / 85%) calc(100% - 72px), rgb(0 0 0 / 50%) calc(100% - 48px), rgb(0 0 0 / 15%) calc(100% - 24px), transparent 100%);
  }
  .nav-links a[aria-current="page"] {
    background: transparent;
    color: var(--text);
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
  }
}