feat(web): site chrome on /blog + distinct content link color

- Add SiteShell (rail nav + workspace + footer) and wrap /blog and
  /blog/[slug] in it so they share the site's dark chrome instead of
  rendering as bare standalone pages.
- Style rendered post HTML (.blog-content) for the dark workspace.
- Links were `color: inherit` everywhere, so content-area links matched
  body text and were invisible. Give links a distinct accent (#5ac8a6);
  keep the rail nav and buttons on their own colors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/logicsrc-web/src/app/blog/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { publicClient } from "@/lib/supabase";
+import { SiteShell } from "@/components/site-shell";
 
 export const dynamic = "force-dynamic";
 
@@ -65,17 +66,15 @@ export default async function BlogPostPage({
   if (!post) notFound();
 
   return (
-    <main style={{ maxWidth: 760, margin: "0 auto", padding: "64px 24px" }}>
-      <p style={{ marginBottom: 32 }}>
-        <Link href="/blog" style={{ color: "#5b6b7a", textDecoration: "none" }}>
-          ← Blog
-        </Link>
-      </p>
-      <article>
-        <h1 style={{ fontSize: 38, fontWeight: 800, margin: "0 0 8px" }}>
-          {post.title}
-        </h1>
-        <div style={{ color: "#8a95a0", fontSize: 14, marginBottom: 32 }}>
+    <SiteShell active="Blog">
+      <article className="band" style={{ maxWidth: "48rem" }}>
+        <p style={{ marginBottom: "1.5rem" }}>
+          <Link href="/blog" style={{ color: "#b5beb2", textDecoration: "none" }}>
+            ← Blog
+          </Link>
+        </p>
+        <h1 style={{ fontSize: "2.2rem", margin: "0 0 0.5rem" }}>{post.title}</h1>
+        <div style={{ color: "#8a95a0", fontSize: "0.85rem", marginBottom: "2rem" }}>
           {formatDate(post.published_at)}
         </div>
         {post.featured_image?.url ? (
@@ -83,14 +82,15 @@ export default async function BlogPostPage({
           <img
             src={post.featured_image.url}
             alt={post.title}
-            style={{ width: "100%", borderRadius: 12, margin: "0 0 32px" }}
+            style={{ width: "100%", borderRadius: "0.75rem", margin: "0 0 2rem" }}
           />
         ) : null}
         <div
           className="blog-content"
+          style={{ lineHeight: 1.7 }}
           dangerouslySetInnerHTML={{ __html: post.html }}
         />
       </article>
-    </main>
+    </SiteShell>
   );
 }

apps/logicsrc-web/src/app/blog/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { publicClient } from "@/lib/supabase";
+import { SiteShell } from "@/components/site-shell";
 
 export const dynamic = "force-dynamic";
 
@@ -37,48 +38,50 @@ export default async function BlogIndex(): Promise<ReactNode> {
   const posts = (data ?? []) as PostRow[];
 
   return (
-    <main style={{ maxWidth: 760, margin: "0 auto", padding: "64px 24px" }}>
-      <p style={{ marginBottom: 32 }}>
-        <Link href="/" style={{ color: "#5b6b7a", textDecoration: "none" }}>
-          ← LogicSRC
-        </Link>
-      </p>
-      <h1 style={{ fontSize: 40, fontWeight: 800, margin: "0 0 8px" }}>Blog</h1>
-      <p style={{ color: "#5b6b7a", margin: "0 0 40px" }}>
-        Project notes for LogicSRC OpenSpec standards, AgentSwarm, AgentByte,
-        SDKs, MCP, and reference implementations.{" "}
-        <a href="/blog/rss.xml" style={{ color: "#5b6b7a" }}>
-          RSS
-        </a>
-      </p>
+    <SiteShell active="Blog">
+      <div className="band">
+        <div className="section-head">
+          <h2>Blog</h2>
+          <p>
+            Project notes for LogicSRC OpenSpec standards, AgentSwarm, AgentByte,
+            SDKs, MCP, and reference implementations.{" "}
+            <a href="/blog/rss.xml">RSS</a>
+          </p>
+        </div>
 
-      {posts.length === 0 ? (
-        <p style={{ color: "#5b6b7a" }}>No posts yet.</p>
-      ) : (
-        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {posts.map((post) => (
-            <li
-              key={post.slug}
-              style={{ padding: "20px 0", borderTop: "1px solid #e3e6e0" }}
-            >
-              <Link
-                href={`/blog/${post.slug}`}
-                style={{ color: "#101418", textDecoration: "none" }}
+        {posts.length === 0 ? (
+          <p style={{ color: "#b5beb2" }}>No posts yet.</p>
+        ) : (
+          <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+            {posts.map((post) => (
+              <li
+                key={post.slug}
+                style={{
+                  padding: "1.25rem 0",
+                  borderTop: "1px solid rgba(245, 247, 244, 0.12)",
+                }}
               >
-                <h2 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 6px" }}>
-                  {post.title}
-                </h2>
-              </Link>
-              <div style={{ color: "#8a95a0", fontSize: 14, marginBottom: 8 }}>
-                {formatDate(post.published_at)}
-              </div>
-              {post.excerpt ? (
-                <p style={{ color: "#41505d", margin: 0 }}>{post.excerpt}</p>
-              ) : null}
-            </li>
-          ))}
-        </ul>
-      )}
-    </main>
+                <Link
+                  href={`/blog/${post.slug}`}
+                  style={{ color: "inherit", textDecoration: "none" }}
+                >
+                  <h3 style={{ margin: "0 0 0.35rem", fontSize: "1.25rem" }}>
+                    {post.title}
+                  </h3>
+                </Link>
+                <div
+                  style={{ color: "#8a95a0", fontSize: "0.85rem", marginBottom: "0.5rem" }}
+                >
+                  {formatDate(post.published_at)}
+                </div>
+                {post.excerpt ? (
+                  <p style={{ color: "#b5beb2", margin: 0 }}>{post.excerpt}</p>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </SiteShell>
   );
 }