/*
  Siblings nav: viewport-edge prev / next arrow buttons for rapid browsing of
  a sequence of detail pages (projects, principles, future: events).
  Fixed-position so they stay in view while the page scrolls.
*/

nav.siblings {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* don't block scroll between the buttons */
  z-index: 5;
}
nav.siblings > a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--brand);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  font-family: var(--font-ui);
  text-decoration: none;
  transition: background var(--duration-normal), transform var(--duration-fast);
}
nav.siblings > a[rel="prev"] { left:  max(1rem, calc(50% - (var(--width-narrow) / 2) - 4rem)); }
nav.siblings > a[rel="next"] { right: max(1rem, calc(50% - (var(--width-narrow) / 2) - 4rem)); }
nav.siblings > a:hover  { background: white; transform: translateY(-50%) scale(1.05); }
nav.siblings > a:active { transform: translateY(-50%) scale(.95); }