header {
  background: var(--blueprint-steel);
  color: white;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  position: sticky;
  top: 0;
  z-index: 10;

  a.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--fg-on-dark);
    text-decoration: none;

    img {
      height: 1.875rem;
      width: auto;
    }

    span {
      font-weight: var(--fw-bold);
      font-size: var(--fs-body-lg);
      letter-spacing: var(--ls-tight);
    }
  }

  nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: var(--space-md);
    font-size: var(--fs-nav-item);

    [aria-current="page"] {
      color: var(--site-signal-amber);
      font-weight: var(--fw-semibold);
    }

    a {
      color: var(--fg-on-dark);
      font-weight: var(--fw-medium);
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-lg);
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }

  .nav-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
    align-items: center;
  }

  .search-form {
    position: relative;
    display: flex;
    align-items: center;

    label {
      display: none;
    }

    kbd {
      position: absolute;
      right: var(--space-sm);
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-mono);
      font-size: .6875rem;
      padding: 1px 5px;
      border: var(--search-border);
      border-radius: var(--radius-sm);
      color: var(--fg-2);
      pointer-events: none;
    }
  }

  .search {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-xl);
    background: var(--surface-contrast);
    color: var(--fg-on-dark);
    border: var(--search-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-label);
    font-family: var(--font-sans);
    cursor: pointer;
  }

  .search-button {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    height: 20px;
    width: 20px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none !important;
    cursor: pointer;
    color: var(--fg-on-dark);
  }

  .search::-webkit-search-cancel-button {
    appearance: none;
  }

  .source {
    color: var(--fg-on-dark);
    background: none;
    border: none;
    padding: 0 var(--space-sm);
    cursor: pointer;
    display: flex;
  }

  .palette {
    display: flex;
    flex-shrink: 0;
    max-width: 100%;
    white-space: nowrap;

    input {
      height: 0;
      opacity: 0;
      position: absolute;
      width: 0;
      bottom: 0;
    }
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg-on-dark);
    background-color: transparent;
    transition: color .5s;

    svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      -webkit-mask: var(--icon) no-repeat;
      mask: var(--icon) no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      color: inherit;
    }
  }
}

.github-icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
}