.site-header,
main,
.site-footer {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  isolation: isolate;
}

.site-header::before,
.site-header::after {
  position: absolute;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
  content: "";
  pointer-events: none;
}

.site-header::before {
  inset-block: 0;
  background: rgba(18, 18, 18, 0);
  transition: background-color var(--motion-fast) var(--ease-standard), backdrop-filter var(--motion-fast) var(--ease-standard);
}

.site-header::after {
  bottom: 0;
  height: 1px;
  background: var(--color-line);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.site-header.is-scrolled::before {
  background: rgba(18, 18, 18, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-footer {
  border-top: 1px solid var(--color-line);
}

@media (min-width: 64rem) {
  .site-nav {
    gap: 1.875rem;
  }
}