guides: fix landing load jank (section jump + nav flash)

The section spacing and the nav highlight colors were only applied via
Alpine :class bindings, so before Alpine booted the sections rendered
with no padding (then jumped down once it applied) and the nav buttons
rendered with no color (all looking "selected" until inactive ones
dimmed).

- Move the grouped section spacing (border-t, py-12) into the static
  class so first paint matches the initial state.
- Give the nav container a default gray text color so buttons inherit the
  inactive look pre-Alpine.
- Preserve the flat-list-while-filtering look with a .guides-flat > section
  rule toggled on the container only when filtering, so it never affects
  first paint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: dvdksn

assets/css/utilities.css

@@ -248,6 +248,15 @@
   font-size: calc(var(--text-base) * 0.9);
 }
 
+/* Guides landing: collapse section spacing into a flat list while filtering.
+   Grouped spacing is the static default; this only applies once the page is
+   being filtered, so it never affects first paint (no layout jank). */
+.guides-flat > section {
+  border-top-width: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 @utility topbar-button {
   @apply min-h-10 max-w-40 rounded-md border-1 border-blue-300 bg-(--topnav-button-bg) px-2 text-center font-semibold text-white;
   @apply inline-flex items-center justify-center gap-1.5 transition-colors hover:border-blue-300 hover:bg-blue-400;

layouts/guides/landing.html

@@ -74,7 +74,7 @@
 
     <div class="flex flex-1 gap-16 xl:gap-24">
       <!-- Sticky topic filter -->
-      <nav class="sticky top-20 hidden w-52 flex-none flex-col self-start xl:flex">
+      <nav class="sticky top-20 hidden w-52 flex-none flex-col self-start text-gray-500 xl:flex dark:text-gray-400">
         <p class="mb-3 text-xs font-semibold tracking-widest text-gray-400 uppercase dark:text-gray-500">
           Browse
         </p>
@@ -113,7 +113,10 @@
       </nav>
 
       <!-- Guide list -->
-      <div class="min-w-0 flex-1">
+      <div
+        class="min-w-0 flex-1"
+        :class="{ 'guides-flat': filtering() }"
+      >
         <!-- Filtering meta bar -->
         <div
           x-show="filtering()"
@@ -140,8 +143,7 @@
               id="{{ $tag }}"
               data-tag="{{ $tag }}"
               x-show="sectionVisible($el)"
-              class="scroll-mt-16"
-              :class="filtering() ? '' : 'border-t border-gray-200 py-12 first:border-t-0 first:pt-0 dark:border-gray-800'"
+              class="scroll-mt-16 border-t border-gray-200 py-12 first:border-t-0 first:pt-0 dark:border-gray-800"
             >
               <div class="mb-6" x-show="!filtering()">
                 <p class="mb-1 text-xs font-semibold tracking-widest text-gray-400 uppercase dark:text-gray-500">