.project-navigation { display: block; margin: 0; }
.project-navigation a {
  position: fixed;
  top: calc(var(--header-height) + var(--project-top-gap) + var(--project-navigation-offset, 0px));
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 108px;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-underline-offset: 5px;
}
.project-navigation a span { position: absolute; top: 0; left: 12px; display: block; white-space: nowrap; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; }
.project-navigation__back { left: 12px; }
.project-navigation__next { right: 12px; }
.project-navigation__previous { right: 12px; --project-navigation-offset: 132px; }
.project-navigation a:hover { color: var(--blue); text-decoration: underline; }
.project-navigation a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 1100px) {
  .project-navigation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 8px var(--pad) 0; }
  .project-navigation a { position: static; width: auto; min-width: 44px; height: 44px; font-size: 14px; }
  .project-navigation__back { justify-self: start; }
  .project-navigation__previous { justify-self: center; }
  .project-navigation__next { justify-self: end; }
  .project-navigation a span { position: static; transform: none; }
}
@media (max-width: 700px) {
  .project-navigation { padding-inline: 24px; }
}
@media print { .project-navigation { display: none; } }