Polish: frosted navbar, word count, smooth TOC scroll

- Increase navbar backdrop blur to md (12px) for frosted glass effect
- Add word count alongside reading time in post header metadata
- Add smooth scroll + URL hash update on sidebar TOC link clicks
- Auto-scroll active TOC link into view for long outlines

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: benbalter

src/components/Navigation.astro

@@ -37,7 +37,7 @@ function isNavActive(itemUrl: string): boolean {
 }
 
 // Base classes for navbar
-const baseClasses = "navbar flex flex-wrap items-center justify-between py-3 px-4 bg-gray-100/95 dark:bg-gray-800/95 backdrop-blur-sm border border-gray-200 dark:border-gray-700 shadow-sm mb-4 max-md:mb-2";
+const baseClasses = "navbar flex flex-wrap items-center justify-between py-3 px-4 bg-gray-100/90 dark:bg-gray-800/90 backdrop-blur-md border border-gray-200 dark:border-gray-700 shadow-sm mb-4 max-md:mb-2";
 
 // Conditionally add rounded classes based on hero presence
 // For hero pages: round only bottom corners (top-left and top-right are 0)

src/components/TableOfContentsSidebar.astro

@@ -78,6 +78,7 @@ const showToc = headings.length >= MIN_HEADINGS_FOR_TOC;
         const activeLink = linkMap.get(id);
         if (activeLink) {
           activeLink.setAttribute('data-active', 'true');
+          activeLink.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         }
       }
     }
@@ -124,6 +125,25 @@ const showToc = headings.length >= MIN_HEADINGS_FOR_TOC;
       if (el) observer.observe(el);
     });
 
+    // Smooth scroll on TOC link clicks with URL hash update
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    links.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        const id = link.dataset.tocHref;
+        if (!id) return;
+        const heading = document.getElementById(id);
+        if (!heading) return;
+
+        e.preventDefault();
+        heading.scrollIntoView({
+          behavior: prefersReducedMotion.matches ? 'auto' : 'smooth',
+          block: 'start',
+        });
+        history.replaceState(null, '', `#${id}`);
+        setActive(id);
+      });
+    });
+
     // Initial highlight
     updateActive();
   }

src/layouts/PostLayout.astro

@@ -108,6 +108,8 @@ const blogPostingSchema = pubDate ? generateBlogPostingSchema({
               <span class="inline-flex items-center gap-1">
                 <Icon name="clock" /> {readingTime} min read
               </span>
+              <span class="mx-1.5" aria-hidden="true">·</span>
+              <span>{(readingTime * 200).toLocaleString()} words</span>
             </div>
           )}