style(blog): smaller list headers, readable date color

list-view post titles were h3 at the bootstrap default, large enough
to wrap; size them to 1.4rem. dates used bootstrap's text-muted, whose
dark grey contrasts poorly on the dark background — replace with a
blog-date class matching the site's opacity-based muted-text pattern,
on the list and the detail page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

ui/src/App.css

@@ -191,6 +191,15 @@ a.hot-pink {
   overflow-x: auto;
 }
 
+.blog-list-title {
+  font-size: 1.4rem;
+}
+
+.blog-date {
+  font-size: 85%;
+  opacity: 0.6;
+}
+
 .site-footer {
   margin-top: 3rem;
   padding: 1rem 0;

ui/src/pages/BlogIndexPage.tsx

@@ -23,10 +23,10 @@ export function BlogIndexPage() {
         {posts.length === 0 && <p>nothing here yet.</p>}
         {posts.map((post) => (
           <article key={post.slug} className="mb-4">
-            <h3 className="mb-1">
+            <h3 className="blog-list-title mb-1">
               <Link to={`/blog/${post.slug}`}>{post.title}</Link>
             </h3>
-            <p className="text-muted mb-1" style={{ fontSize: '85%' }}>
+            <p className="blog-date mb-1">
               {formatDate(post.published_at)}
             </p>
             {post.excerpt && <p className="mb-0">{post.excerpt}</p>}

ui/src/pages/BlogPostPage.tsx

@@ -37,7 +37,7 @@ export function BlogPostPage() {
           <Link to="/blog">← blog</Link>
         </p>
         <h2 className="mb-1">{post.title}</h2>
-        <p className="text-muted" style={{ fontSize: '85%' }}>
+        <p className="blog-date">
           {formatDate(post.published_at)}
         </p>
         <div className="blog-post">