/* ================================================================
   COMPONENT: FOCUS
   The one state nobody had drawn.

   rest, hover, and active were all hand-designed; keyboard focus fell
   through to the browser default — the only thing on the page that did not
   belong to this design language. There were ZERO `:focus-visible` rules in
   the entire stylesheet before this file.

   `:focus-visible`, not `:focus` — a mouse click on a card must not leave a
   ring behind. The browser's own heuristic decides, which is the whole point
   of the pseudo-class.

   `outline`, not `box-shadow`. Outline follows `border-radius` on its own,
   never affects layout, and — unlike a shadow — is not cancelled by the
   `overflow: hidden` on the card and cover media plates. It also survives
   `corner-shape: squircle`. Do not reach for box-shadow here; `paper-physics`
   already owns box-shadow on `.project-card`, and a second author would
   collide with it mid-hover.
   ================================================================ */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* On the teal hero the ink ring disappears. Same shape, inverted value. */
.hero :focus-visible,
.case-cover--dark :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* The card is the one focus target whose ring would otherwise sit ON the
   image: the media plate fills the card and the outline offset lands inside
   the picture. Push it clear so the ring reads against paper, the way it
   does everywhere else. */
.project-card:focus-visible {
  outline-offset: 6px;
}

/* Skip link — the tab order starts with the navbar logo and passes eleven
   stops before the content. Present only to keyboard users, and only while
   focused. */
.skip-link {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: var(--z-navbar);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--type-body2-font);
  font-size: var(--type-body2-size);
  /* Clipped rather than display:none so it stays focusable. */
  clip-path: inset(50%);
}

.skip-link:focus-visible {
  clip-path: none;
}