@layer components {
  /* The signed-out site's top bar: where you are, and the two ways in. It stays put as the page
     scrolls under it. */
  .site-header {
    --logo-size: var(--logo-min-wordmark);

    position: sticky;
    inset-block-start: var(--space-0);
    z-index: var(--z-chrome);
    background-color: var(--color-chrome);
    -webkit-backdrop-filter: var(--chrome-backdrop);
    backdrop-filter: var(--chrome-backdrop);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-inline-size: var(--max-content);
    margin-inline: auto;
    padding: calc(var(--safe-top) + var(--space-5)) var(--gutter-fluid) var(--space-5);
  }

  .site-header__home {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    margin-inline-end: auto;
    color: inherit;
    text-decoration: none;
  }

  .site-header__home .brand {
    margin-inline-start: calc(var(--logo-mark-scale) * 1em * (var(--logo-mark-visible) - 1) / 2);
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .site-header__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-5);
    border-radius: var(--radius-pill);
    font: var(--type-button);
    color: var(--color-ink-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-calm);
  }

  .site-header__link[aria-current="page"] {
    color: var(--color-ink);
  }

  .site-header__link--wide {
    display: none;
  }

  .site-header__start {
    margin-inline-start: var(--space-2);
  }

  @media (any-hover: hover) {
    .site-header__link:hover {
      background-color: var(--color-surface-sunken);
      color: var(--color-ink);
    }
  }

  @media (width >= 900px) {
    .site-header__link--wide {
      display: inline-flex;
    }
  }
}