/* Pager: one 18 x 18px slot per slide, in a row. Each slot holds the cross-hair (6 x 6px, see the #crosshair symbol in index.html).
   The current slot is a solid ink square with the cross-hair knocked out in the page colour. The change is a quick, sharp fade.
   <nav class="pager" aria-label="Case studies"><a class="pager__item" href="#luno" aria-label="Luno" aria-current="true"><svg width="6" height="6"><use href="#crosshair"/></svg></a>…</nav> */
.pager { display: flex; }
.pager__item {
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--color-action); background: transparent; text-decoration: none; border: 0; outline-offset: 0;
  transform: translateZ(0);   /* its own layer: on phones the slot that WAS current could leave a hairline of its old filled square behind (a stale repaint at the bottom edge) */
}
.pager__item svg { fill: currentColor; display: block; shape-rendering: crispEdges; }   /* hard pixel edges: no faint line above / below a cross-hair */
.pager__item[aria-current="true"] { background: var(--color-action); color: var(--color-bg); }
.pager__item:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }