/* a11y.css — primitives the template had none of. */

a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 0.75em 1.25em;
  background: var(--fg);
  color: var(--bg);
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.85rem;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s;
}

.skip-link:focus { transform: translateY(0); }

.navbar-item a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }

/* The navigation is held in place across the transition by name; it has to
   carry that name in CSS now that no React prop sets it. */
.navbar { view-transition-name: navbar; }