.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.skip-link {
  --skip-bg:            #111111;
  --skip-fg:            #ffffff;
  --skip-radius:        0 0 6px 6px;
  --skip-pad:           10px 16px;
  --skip-offset:        0px;
  --skip-z:             9999;
  --skip-duration:      0.15s;

  position: fixed;
  top: 0;
  left: var(--skip-offset, 0px);
  z-index: var(--skip-z, 9999);
  padding: var(--skip-pad, 10px 16px);
  background: var(--skip-bg, #111111);
  color: var(--skip-fg, #ffffff);
  border-radius: var(--skip-radius, 0 0 6px 6px);
  text-decoration: none;
  font: inherit;
  font-size: 0.9rem;
  transform: translateY(-120%);
  transition: transform var(--skip-duration, 0.15s) ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent, #0057ff);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}