header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ds-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-4);
  min-height: var(--ds-h-l);
  padding: var(--ds-s-3) calc(var(--ds-page-inset) + var(--ds-s-4));
  background: var(--ds-veil-strong);
  backdrop-filter: blur(var(--ds-blur));
  border-bottom: 1px solid var(--ds-line);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-t-label);
  letter-spacing: var(--ds-track);
  text-transform: uppercase;
  color: var(--ds-ink-3);
}


section[id] {
  scroll-margin-top: var(--ds-h-l);
}

header > a {
  display: flex;
  align-items: center;
  gap: var(--ds-s-3);
  color: var(--ds-ink-1);
  white-space: nowrap;
}

header > a,
.nav-inline,
.nav-tools,
.nav-dropdown,
.nav-sheet,
.nav-reachbar {
  -webkit-user-select: none;
  user-select: none;
}

.nav-inline {
  display: flex;
  align-items: center;
  gap: var(--ds-s-4);
}

.nav-inline a:not(.ds-chip) {
  color: var(--ds-ink-3);
  white-space: nowrap;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--ds-s-3);
  margin-left: auto;
}

.nav-burger {
  position: relative;
  display: none;
}

.nav-burger__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-h-xs);
  height: var(--ds-h-xs);
  padding: 0;
  border: 1px solid var(--ds-stroke);
  background: transparent;
  color: var(--ds-ink-2);
  cursor: pointer;
}
.nav-burger__btn svg {
  flex: none;
  display: block;
}
.nav-burger__btn:hover,
.nav-burger__btn:focus-visible {
  border-color: var(--ds-accent);
  color: var(--ds-accent-text);
}
.nav-burger__btn[aria-expanded="true"] {
  border-color: var(--ds-accent);
  background: var(--ds-accent-14);
  color: var(--ds-ink-1);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-s-2));
  right: 0;
  z-index: var(--ds-z-scan);
  display: none;
  width: max-content;
  border: 1px solid var(--ds-stroke);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-menu);
}
.nav-dropdown:not([hidden]) {
  display: grid;
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-3);
  min-height: var(--ds-h-xs);
  padding: 0 var(--ds-s-3);
  border-bottom: 1px solid var(--ds-line);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-t-label);
  letter-spacing: var(--ds-track-tight);
  text-transform: uppercase;
  color: var(--ds-ink-2);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--ds-soft);
  color: var(--ds-accent-text);
}
.nav-dropdown__no {
  color: var(--ds-ink-4);
}
.nav-dropdown__check {
  border-bottom: none;
  color: var(--ds-accent-text);
}

@media (pointer: coarse) {
  .nav-burger__btn {
    width: var(--ds-tap);
    height: var(--ds-tap);
  }
  .nav-dropdown a {
    min-height: var(--ds-tap);
  }
  header {
    gap: var(--ds-tap-gap);
  }
  .nav-inline {
    gap: var(--ds-tap-gap);
  }
  .nav-inline a:not(.ds-chip) {
    min-width: var(--ds-tap);
    text-align: center;
  }
}

.nav-backdrop {
  display: none;
}

.nav-sheet {
  display: none;
}

.nav-reachbar {
  display: none;
}

.ds-scroll-lock .nav-reachbar {
  display: none;
}

.nav-reachbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-s-2);
  padding: 0 var(--ds-s-4);
  border: 1px solid var(--ds-stroke);
  background: transparent;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-t-label);
  letter-spacing: var(--ds-track-tight);
  text-transform: uppercase;
  color: var(--ds-ink-2);
  cursor: pointer;
}
.nav-reachbar__toggle:hover,
.nav-reachbar__toggle:focus-visible {
  border-color: var(--ds-accent);
  color: var(--ds-accent-text);
}
.nav-reachbar__toggle[aria-expanded="true"] {
  border-color: var(--ds-accent);
  background: var(--ds-accent-14);
  color: var(--ds-ink-1);
}

.nav-reach-spacer {
  height: var(--ds-reach-pad);
}

@media (max-width: 900px) {
  .nav-inline {
    display: none;
  }
  .nav-tools__check {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
}

@media (max-width: 520px) {
  .nav-burger {
    display: none;
  }
  .prefs {
    display: none;
  }

  .nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-header);
    background: var(--ds-veil);
  }

  .nav-sheet:not([hidden]) {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--ds-tap) + var(--ds-s-5));
    z-index: var(--ds-z-header);
    border-top: 1px solid var(--ds-stroke);
    background: var(--ds-card);
    box-shadow: var(--ds-shadow-menu);
    animation: var(--ds-anim-soft);
  }

  .nav-sheet a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-s-3);
    min-height: var(--ds-tap);
    padding: 0 var(--ds-s-4);
    border-bottom: 1px solid var(--ds-line);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-t-label);
    letter-spacing: var(--ds-track-tight);
    text-transform: uppercase;
    color: var(--ds-ink-1);
  }
  .nav-sheet a:hover,
  .nav-sheet a:focus-visible {
    background: var(--ds-soft);
    color: var(--ds-accent-text);
  }
  .nav-sheet__no {
    color: var(--ds-ink-4);
  }
  .nav-sheet__check {
    border-bottom: none;
    color: var(--ds-accent-text);
  }


  .nav-reachbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ds-z-header);
    gap: var(--ds-tap-gap);
    padding: var(--ds-s-2) var(--ds-s-3) calc(var(--ds-s-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ds-line);
    background: var(--ds-veil-strong);
    backdrop-filter: blur(var(--ds-blur));
  }

  .nav-reachbar__toggle {
    flex: 1 1 auto;
    min-height: var(--ds-tap);
  }
}

@media (orientation: landscape) and (max-height: 640px) {
  section[id] {
    scroll-margin-top: 0;
  }

  header {
    right: auto;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    width: calc(var(--ds-tap) + var(--ds-s-2) * 2 + 1px);
    min-height: 0;
    padding: var(--ds-s-2);
    border-bottom: 0;
    border-right: 1px solid var(--ds-line);
    backdrop-filter: none;
  }

  header > a {
    writing-mode: vertical-rl;
    justify-content: center;
    min-width: var(--ds-tap);
    padding: var(--ds-s-2) 0;
  }

  .nav-inline {
    display: none;
  }

  .nav-tools {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ds-z-header);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--ds-tap-gap);
    width: calc(var(--ds-tap) + var(--ds-s-2) * 2 + 1px);
    padding: var(--ds-s-2);
    border-left: 1px solid var(--ds-line);
    background: var(--ds-veil-strong);
  }

  .nav-tools__check {
    display: inline-flex;
    writing-mode: vertical-rl;
    height: auto;
    min-height: var(--ds-tap);
    padding: var(--ds-s-3) 0;
  }

  .nav-burger {
    display: flex;
  }

  .nav-burger__btn {
    width: var(--ds-tap);
    height: var(--ds-tap);
  }

  .nav-dropdown {
    top: auto;
    bottom: 0;
    right: calc(100% + var(--ds-s-2));
  }
}