#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2;
  inset-inline-end: var(--sidebar-width);
  padding-block: var(--block-space);
  padding-inline: var(--inline-space);
  display: flex;
  align-items: center;
  column-gap: var(--inline-space);
  row-gap: var(--block-space);

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

      &::before {
        content: "";
        background: linear-gradient(180deg, color(display-p3 var(--rgb-white)) 20%, color(display-p3 var(--rgb-white) / 0) 100%);
        inset: 0;
        position: absolute;
        z-index: -1;
      }
    }
  }
}

/* Skip navigation */
.skip-navigation {
  position: absolute;
  top: 4rem;
  left: -999em;
  z-index: 11;
  white-space: nowrap;

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