@layer components {
  /* Group 13: focus outline. Gold ring with a navy edge inside and out,
     so it shows on baby blue, white and navy. Loaded last so it wins. */
  :focus-visible {
    outline: var(--focus-w) solid var(--color-focus);
    outline-offset: var(--focus-gap);
    box-shadow: 0 0 0 calc(var(--focus-gap) * 2 + var(--focus-w)) var(--color-focus-edge);
  }

  /* Blog cards: the whole card gets the ring, not the title link */
  .post-card__link:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .post-card:has(.post-card__link:focus-visible) {
    outline: var(--focus-w) solid var(--color-focus);
    outline-offset: var(--focus-gap);
    box-shadow: 0 0 0 calc(var(--focus-gap) * 2 + var(--focus-w)) var(--color-focus-edge);
  }

  /* The skip link moves focus to the main area; no ring around the whole middle */
  .site-main:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* Skip to content: waits just above the screen, slides in on Tab */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    font-weight: 800;
    color: var(--color-ink);
    text-decoration: none;
    background: var(--color-surface);
    border: var(--edge-w) solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .skip-link:not(:focus) {
    translate: 0 calc(-100% - var(--space-4));
  }
}