@layer components {
  .header {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--color-ground) 86%, transparent);
    border-block-end: 1px solid var(--color-hairline);
    inset-block-start: 0;
    position: sticky;
    z-index: 5;
  }

  .header__inner {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding-block: 18px;

    @media (max-width: 760px) {
      padding-block: 14px;
    }
  }

  .header__logo {
    align-items: center;
    display: flex;
    text-decoration: none;

    img {
      block-size: 28px;
      inline-size: auto;
    }
  }

  /* Inside the flow: the document or the order, where the site's navigation would be. */
  .header__pill {
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    font: 500 12px/16px var(--font-mono);
    padding: 3px 10px;
    white-space: nowrap;
  }

  .header__nav {
    align-items: center;
    display: flex;
    font-size: 17px;
    gap: 28px;
    line-height: 22px;

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    @media (max-width: 760px) {
      display: none;
    }
  }
}