Year-Grouped Timeline

<!--
  Entries are bucketed under a year heading that sticks to the top of the
  viewport while its own group scrolls past, then yields to the next year. The
  heading has a translucent backdrop so text scrolling under it stays legible.
-->
<div class="mx-auto w-full max-w-2xl">
  <section>
    <h2 class="sticky top-0 z-10 mb-4 bg-white/80 py-1 text-lg font-bold text-gray-900 backdrop-blur dark:bg-gray-950/80 dark:text-gray-100">2026</h2>
    <ol class="relative border-s border-gray-200 dark:border-gray-800">
      <li class="ms-6 pb-6 last:pb-0">
        <span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
        <time class="block text-xs font-medium text-gray-500 dark:text-gray-400">March</time>
        <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Opened the Berlin office</h3>
        <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Twelve desks and one very good espresso machine.</p>
      </li>
      <li class="ms-6 pb-6 last:pb-0">
        <span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
        <time class="block text-xs font-medium text-gray-500 dark:text-gray-400">June</time>
        <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Passed SOC 2</h3>
        <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">A long audit with a short, happy ending.</p>
      </li>
    </ol>
  </section>

  <section class="mt-8">
    <h2 class="sticky top-0 z-10 mb-4 bg-white/80 py-1 text-lg font-bold text-gray-900 backdrop-blur dark:bg-gray-950/80 dark:text-gray-100">2025</h2>
    <ol class="relative border-s border-gray-200 dark:border-gray-800">
      <li class="ms-6 pb-6 last:pb-0">
        <span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
        <time class="block text-xs font-medium text-gray-500 dark:text-gray-400">November</time>
        <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Hit $1M ARR</h3>
        <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Small number, big party.</p>
      </li>
    </ol>
  </section>
</div>