#nav {
  align-items: center;
  -webkit-backdrop-filter: blur(66px);
  backdrop-filter: blur(66px);
  background-color: oklch(var(--lch-white) / 0.9);
  column-gap: var(--inline-space-half);
  display: flex;
  grid-area: nav;
  padding-block: var(--block-space);
  padding-inline: calc(var(--inline-space) * 1.5) var(--inline-space-double);
  pointer-events: none;
  row-gap: var(--block-space);
  z-index: 2;

  .sidebar & {
    @media (max-width: 100ch) {
      padding-block: var(--block-space-half);
    }
  }
}

.skip-navigation {
  --left-offset: -999em;

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 11;

  &:focus {
    --left-offset: var(--inline-space);
  }
}