<a 
  href="#main-content" 
  class="skip-to-content" 
  aria-label="Skip to main content"
>
  <span class="font-['Instrument_Sans']">Skip to content</span>
</a>

<style>
  .skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    padding: 1rem;
    margin: 1rem;
    background: black;
    color: rgba(255, 255, 255, 0.95);
    z-index: 100;
    transition: top 0.3s ease-out;
    font-weight: 500;
    font-family: 'Instrument Sans', sans-serif;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .skip-to-content:focus {
    top: 0;
  }

  /* Theme variations */
  html[data-theme="red"] .skip-to-content {
    background: #170c0c;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.15);
  }

  html[data-theme="gold"] .skip-to-content {
    background: #121107;
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.15);
  }
  
  /* Dark mode support */
  :root.dark .skip-to-content {
    background: #0A0A0A;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
</style> 