@layer components {
  /* The first thing a keyboard or screen-reader user reaches on any page: a jump past the
     header and nav straight to the content (WCAG 2.4.1). Out of view until focused — :focus,
     not :focus-visible, since reaching it at all means keyboard. Above the sticky header, or
     it would appear behind the very chrome it skips. */
  .skip-link:not(:focus) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link:focus {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-start: var(--block-space-half);
    z-index: var(--z-dialog);
    padding: var(--block-space-half) var(--block-space);
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
  }
}