@layer components {
  .site-header {
    background: var(--color-chrome);
    border-bottom: 1px solid #111;
    color: #e8e8e5;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-header__main {
    align-items: stretch;
    display: flex;
    justify-content: space-between;
    min-height: 3.25rem;
    padding-inline: var(--space-4);
  }

  .site-header__actions {
    align-items: stretch;
    display: flex;
  }

  .site-brand {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-self: start;
    text-decoration: none;
  }

  .site-brand:hover {
    color: #fff;
  }

  .site-brand__mark {
    background: #fff;
    display: block;
    height: 2rem;
    width: 2rem;
  }

  .site-nav {
    align-items: stretch;
    display: flex;
  }

  .site-nav__link {
    align-items: center;
    border-inline-start: 1px solid #1f1f1f;
    display: flex;
    font-size: var(--font-size-base);
    font-weight: 650;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
    position: relative;
    text-decoration: none;
  }

  .site-nav__link:last-child {
    border-inline-end: 1px solid #1f1f1f;
  }

  .site-nav__link::after {
    background: transparent;
    bottom: 0;
    content: "";
    height: 0.2rem;
    inset-inline: 0;
    position: absolute;
  }

  .site-nav__link:hover,
  .site-nav__link.is-current {
    background: #505050;
    color: #fff;
  }

  .site-nav__link.is-current::after {
    background: var(--color-orange);
  }

  .site-session {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin-left: var(--space-2);
    padding-left: var(--space-2);
  }

  .site-session__state {
    align-items: center;
    color: #bbb;
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    gap: 0.5rem;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .site-session__state i {
    background: var(--color-green);
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
  }

  .site-header__telemetry {
    background: var(--color-chrome);
    border-top: 1px solid #171717;
    color: #bdbdb9;
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    justify-content: space-between;
    letter-spacing: var(--letter-spacing-wide);
    padding: 0.25rem 1rem;
    text-transform: uppercase;
  }

  .site-header__telemetry-status {
    color: #9bd27d;
  }

  .breadcrumb {
    align-items: center;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    gap: var(--space-2);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-2);
    padding: 0.25rem var(--space-2);
    background: #989894;
    border: var(--border-subtle);
    text-transform: uppercase;
  }

  .breadcrumb a {
    color: var(--color-ink);
  }

  @media (max-width: 48rem) {
    .site-header__main {
      flex-wrap: wrap;
      padding-inline: var(--space-2);
    }

    .site-header__actions {
      display: contents;
    }

    .site-nav {
      border-top: 1px solid #1f1f1f;
      flex-basis: calc(100% + 1rem);
      margin-inline: calc(var(--space-2) * -1);
      order: 3;
    }

    .site-nav__link {
      flex: 1;
      justify-content: center;
      min-height: 3.25rem;
    }

    .site-session__state {
      display: none;
    }
  }

  @media (max-width: 36rem) {
    .site-header__main {
      min-height: 3.25rem;
    }

    .site-header__telemetry span:nth-child(2) {
      display: none;
    }

    .site-session .button {
      padding-inline: 0.75rem;
    }
  }
}