.site-header {
  display: flex;
  flex-wrap: wrap;
  padding: calc(var(--gap) * 2) var(--gap) var(--gap);
  gap: calc(var(--gap) * 2);
  align-items: flex-end;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
}

.site-header a,
.home main .navigation a,
.error main .navigation a,
.prev-next a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  width: auto;
}

.site-title,
.menu-toggle {
  background-color: #ffffff;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
  pointer-events: auto;
}

.site-title svg {
  width: auto;
  height: 3.1em;
  transform: rotateZ(180deg);
  margin: -0.07em 0.1em -0.05em;
}

.menu-toggle {
  padding-left: 0.2em;
  padding-right: 0.2em;
  margin-left: -0.2em;
  margin-right: -0.2em;
}


.site-header a:hover,
.site-header a:focus-visible,
.home main .navigation a:hover,
.home main .navigation a:focus-visible,
.error main .navigation a:hover,
.error main .navigation a:focus-visible,
.prev-next a:hover,
.prev-next a:focus-visible {
  color: var(--accent);
}

.site-title {
  height: min-content;
  writing-mode: vertical-rl;
transform: rotateZ(180deg);
}

.menu-toggle {
  height: min-content;
  writing-mode: vertical-rl;
transform: rotateZ(180deg);
  line-height: 0.7;
}

.navigation {
  display: none;
}

.menu-toggle .close {
  display: none;
}

body.menu {
  overflow: hidden;
}

.menu .site-header {
  height: 100vh;
}

.menu .navigation,
.home main .navigation,
.error main .navigation {
  display: block;
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.site-header .navigation ul ul,
.home main .navigation ul ul,
.error main .navigation ul ul {
  padding-left: calc(var(--gap) * 2);
}

.site-header .navigation a,
.home main .navigation a,
.error main .navigation a,
.prev-next nav a {
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
}

.site-header .navigation a span,
.home main .navigation a span,
.error main .navigation a span,
.prev-next nav a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header .navigation .line,
.home main .navigation .line,
.error main .navigation .line,
.prev-next nav .line {
  border-bottom: dotted thin;
  position: relative;
  top: -0.2rem;
  flex-grow: 1;
  min-width: 2rem;
}

.site-header .navigation .pages-list,
.home main .navigation .pages-list,
.error main .navigation .pages-list {
  margin-top: calc(var(--gap) * 2);
  font-variant-numeric: tabular-nums;
}

.site-header .navigation .issues-list {
  margin-top: var(--gap);
  font-variant-numeric: tabular-nums;
}

.menu .menu-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
}

.menu .menu-toggle .close {
  display: block;
}

.menu .site-header {
  background: #ffffff;
}

.menu main {
  opacity: 0.25;
  overflow: hidden;
}

.site-header .navigation .pages-list li,
.site-header .navigation .issues-list li {
  pointer-events: auto;
}

@media (min-width: 50rem) {
  .site-header .navigation .pages-list,
  .site-header .navigation .issues-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    margin-top: 0;
    padding: calc(var(--gap) * 9) calc(var(--gap) * 2) calc(var(--gap) * 5) var(--gap);
    background-image: linear-gradient(to left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 3%);
  }

  .site-header .navigation .issues-list {
    left: auto;
    right: 0;
    margin-top: 0;
    background-image: linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 3%);
    border-left: thin solid rgba(0,0,0,0.25);
    padding-left: calc(var(--gap) * 2);
    padding-right: var(--gap);
  }

  .issue .scatter {
    height: 100%;
    max-height: none;
    z-index: -1;
  }
}