.site-header {
  position: relative;
  z-index: 2;
  height: var(--header-h);
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  background: var(--olive);
  overflow: visible;
  opacity: var(--nav-veil, 1);
  pointer-events: var(--nav-events, auto);
}

.nav {
  display: none;
  gap: 1.6rem;
  justify-self: start;
  align-items: center;
}

.site-header > .logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.nav .pencil {
  transform: rotate(-3deg);
}

.site-header > .pencil {
  justify-self: end;
  transform: rotate(-2.5deg);
}

body.is-issue-page {
  background: color-mix(in srgb, var(--olive) calc(var(--issue-veil) * 100%), var(--paper));
}

body.is-issue-page .site-header {
  background: color-mix(in srgb, var(--olive) calc(var(--issue-veil) * 100%), var(--paper));
}

body.is-issue-page .logo {
  color: color-mix(in srgb, var(--ivory) calc(var(--issue-veil) * 100%), var(--ink));
}

body.is-issue-page .logo span {
  color: color-mix(in srgb, var(--ivory-muted) calc(var(--issue-veil) * 100%), var(--ink-soft));
}

body.is-issue-page .site-header .pencil--light {
  color: color-mix(in srgb, var(--gold) calc(var(--issue-veil) * 100%), var(--ink));
}