Challenge 2: Write a Skip Link — Possible Solution
====================================================================

<!-- HTML: placed as the very first focusable element on the page -->
<a href="#content" class="skip-link">Skip to main content</a>

<!-- ... rest of the page, including eventually: -->
<main id="content">
  ...
</main>

/* CSS */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
}

.skip-link:focus {
  top: 1rem;
}

WHY THIS WORKS
--------------
- The <a href="#content"> targets the id="content" attribute on the
  <main> element — clicking or activating this link (via Enter, since
  it's a real keyboard-focusable link) jumps the browser's focus and
  scroll position directly to that element, skipping over everything
  in between (navigation, headers, etc.).
- By default, .skip-link is positioned far off-screen (top: -9999px) —
  this hides it visually from everyone, without using display: none or
  visibility: hidden, which would remove it from the accessibility tree
  entirely and make it permanently unreachable by keyboard, defeating
  the entire purpose. Using position: absolute with an off-screen
  coordinate keeps the element fully present and focusable, just not
  visibly rendered in its normal position.
- The .skip-link:focus rule moves it back on-screen (top: 1rem) the
  MOMENT it receives keyboard focus — since this is the very first
  focusable element on the page, the very first Tab press from a fresh
  page load reveals it immediately, giving a keyboard user the chance
  to activate it before continuing to tab through the rest of the page.
- Once the link loses focus again (the user tabs away or activates it),
  it returns to being visually hidden — sighted mouse users, who never
  tab to it, never see it appear at all under normal use, exactly
  matching the chapter's description of a skip link being "visually
  hidden until focused."