Stop the orange skip link peeking out of the…

Details

`.v3-skip` parks itself off-screen with `transform: translateY(-120%)`, a
percentage of its own height — which only hides it if the box is tall enough to
out-run its own top margin. It isn't. Measured on the live site (identical in
both themes and at both viewports):
  height 39.66px, top: 0 + margin: 0.5rem  ->  8 - (1.2 * 39.66) + 39.66
                                           =  bottom edge at +0.07px
So a sliver of #ff5a1f sat permanently in the top-left corner, and any elastic
overscroll — rubber-banding upward past the top of the page — drags fixed layers
down far enough to reveal the whole "Skip to content" pill.
Park it by a fixed distance instead of a percentage of a box whose height
depends on the inherited line-height, and gate it on opacity so no positional
leak can paint it at all. The link stays fully keyboard-accessible: an opacity-0
element is still focusable, and `:focus` restores transform, opacity and
pointer-events.
Verified against the live page with the locally compiled stylesheet across
theme x viewport x weather x season (6 cells): at rest bottom=-48.34px,
opacity=0, pointer-events=none, and nothing of the link hit-testable in the
corner; a real Tab press still brings it to top=8px at opacity=1 pointing at
#hero; blur re-hides it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012ZejPEHvD8ombiu37aHbGY

Files changed (1)