.header {
  --_background-color: var(--page-background-color-light);
  --_background-opacity: 75%;
  padding-inline: max((100vw - var(--page-content-max-width-m)) / 2, var(--_padding-inline));
  height: var(--header-height);
  top: 0;
  z-index: 1;
  /* margin-bottom: -2px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--_background-color);
  /* background-color: color-mix(in lab, var(--_background-color) var(--_background-opacity), transparent ); */
  /* backdrop-filter: blur(24px); */

  animation: 1ms shadow-toggle linear both;
  animation-timeline: scroll();
  animation-range: 1px 50px;
  --_border-bottom-color: rgba(0, 0, 0, .1);
}

.header_background-color_default {
  --_background-color: var(--page-background-color-light);
}

.header_background-color_light {
  --_background-color: var(--page-background-color-light);
}

[data-color-scheme="dark"] .header,
.header[data-color-scheme="dark"] {
  --_border-bottom-color: rgba(255, 255, 255, .1);
  --_background-opacity: 90%;
}

.header::before {
  /* content: ''; */
  display: block;
  position: absolute;
  inset: 0;
}


@keyframes shadow-toggle {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 1px 0 var(--_border-bottom-color);
  }
}

.header_sticky {
  position: sticky;
}



.header__nav-item *:any-link {
  text-decoration: none;
}





.header__burger {
  display: none;
}

.header__logo {
  display: block;
  height: calc(var(--header-height) / 2);
  aspect-ratio: 3;
}