/* nav.css — the page link(s) inside the header nav. The blob weaves over
   them. The links live inside #moving-bug (pointer-events:none) so they
   re-enable pointer events. */

.loop-link{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;                       /* above the weaving blob */
  pointer-events:auto;
  font-family:'Special Elite', monospace;
  font-size:clamp(11px,1.02vw,13.5px);
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease;
}

/* typewriter brackets so they read as pressable: [ stories ] */
.loop-link::before{content:"[\00a0";}
.loop-link::after{content:"\00a0]";}

/* centred in the nav; the blob still weaves across and over it */
.loop-link--about{left:50%;}

.loop-link:hover,
.loop-link:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* the page you're already on */
.loop-link.is-current{
  color:var(--ink);
  border-bottom:1.5px solid currentColor;
}
.loop-link.is-current:hover{text-decoration:none;}