@layer components {
.site-header {
  background: var(--nav-bg);
  padding: 0;

  .site-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 3.6rem;
  }
}

.site-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--nav-fg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem 0 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  text-decoration: none;

  :where(span) { color: var(--accent); margin: 0 0.05em; }
}

.site-name-issue {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: oklch(from var(--nav-fg) l c h / 0.4);
  letter-spacing: 0.08em;
  margin-left: 1.2rem;
  align-self: center;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 0;
  margin-left: auto;

  :where(a) {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: oklch(from var(--nav-fg) l c h / 0.5);
    background: none;
    border: none;
    border-left: 1px solid oklch(from var(--nav-fg) l c h / 0.12);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    padding: 0 1.2rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;

    &:hover { color: var(--nav-fg); background: oklch(from var(--nav-fg) l c h / 0.07); }
  }
}

}