header {
  /*
   * This is duplicate, but the global one in global.css
   * is being overridden and I'm unsure why.  Having this
   * here scopes it sufficiently local that it actually
   * takes affect.
  */
  --spectrum-heading-color: var(--text-1);
}

div.header {
  align-items: center;
  background-color: var(--spectrum-heading-color);
  box-sizing: border-box;
  color: var(--text-2);
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 2fr 4fr 1fr;
  height: var(--header-height);
  padding: var(--size-1);
  width: 100vw;
}

div.site-title-section {
  box-sizing: border-box;
  display: grid;
  grid-column: 1;
  grid-row: 1 / -1;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: subgrid;
}

div.logo-container {
  box-sizing: border-box;
  display: block;
  grid-column: 1 / 1;
  grid-row: 1/-1;
  margin: 2px 0;
  max-height: var(--header-height);
}

svg.site-logo {
  display: block;
  height: 90%;
  max-height: var(--header-height);
  width: auto;
}

div.title-container {
  box-sizing: border-box;
  display: block;
  grid-column: 2/-1;
  grid-row: 1/-1;
  max-height: var(--header-height);
  overflow: hidden;
  text-wrap: nowrap;
  white-space: nowrap;
}

span.site-title.spectrum-Heading {
  background-color: var(--spectrum-heading-font-color);
  box-sizing: border-box;
  color: var(--text-2);
  font-size: var(--spectrum-heading-size-m);
  line-height: var(--spectrum-heading-line-height-m);
  margin: auto 0; /* center vertically */
}

@media (width >= 1016px) {
  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-l);
    line-height: var(--spectrum-heading-line-height-l);
  }
}

@media (width >= 1286px) {
  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-xl);
    line-height: var(--spectrum-heading-line-height-xl);
  }
}

@media (width >= 1401px) {
  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-xxl);
    line-height: var(--spectrum-heading-line-height-xxl);
  }
}

a.site-title {
  --spectrum-link-text-color: var(--text-2);
  --spectrum-link-text-color-secondary-hover: var(--text-2);
  --spectrum-link-text-color-secondary-focus: var(--text-2);
}

div.nav-section {

  --spectrum-heading-font-color: var(--text-2);
  display: grid;
  gap: 0 1em;
  grid-column: 2/3;
  grid-row: 1/-1;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: subgrid;
  justify-content: space-between;
}

div.nav-section > div.nav-item {
  grid-column-end: span 1;
  grid-row: 1/-1;
  margin: auto 0;
}

div.social-icons-section {

  --social-icon-size: var(--size-7);
  --spectrum-heading-font-color: var(--text-2);
  align-items: center;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-end: span 1;
  grid-row: 1/-1;
  grid-template-rows: subgrid;
  justify-content: end;
  margin: 2em;
}

div.social-icons-section > div.nav-item {
  justify-self: end;
}

iconify-icon.social-icons.nav-item {
  height: var(--social-icon-size);
  width: var(--social-icon-size);
}

iconify-icon#github {
  color: var(--github-green);
}

div.nav-item > a.social-icons.nav-item {
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}