fix: clean page transitions and navigation a11y

app/globals.css

@@ -101,6 +101,11 @@
   a:hover {
     text-decoration-thickness: 3px;
   }
+  :where(a, button, input, textarea, select, [role="button"]):focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 3px;
+    border-radius: 0.375rem;
+  }
 }
 
 /* === Dark mode token overrides === */

app/page.tsx

@@ -1,12 +1,10 @@
 import { getPosts } from '@/lib/posts'
 import { PostList } from '@/components/blog/PostList'
-import Template from './template'
 
 export default async function HomePage() {
   const posts = await getPosts()
 
   return (
-    <Template>
     <main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
       <header className="editorial-hero mb-14 rounded-[2rem] border border-border px-6 py-12 shadow-card sm:px-10 sm:py-16">
         <div className="relative z-10 max-w-3xl">
@@ -48,6 +46,5 @@ export default async function HomePage() {
         )}
       </section>
     </main>
-    </Template>
   )
 }

app/posts/page.tsx

@@ -1,6 +1,5 @@
 import { getPosts } from '@/lib/posts'
 import { PostSearch } from '@/components/blog/PostSearch'
-import Template from '../template'
 
 export const metadata = { title: 'Posts' }
 
@@ -8,7 +7,6 @@ export default async function PostsPage() {
   const posts = await getPosts()
 
   return (
-    <Template>
     <main className="mx-auto max-w-5xl px-6 py-12 sm:py-16">
       <header className="mb-10 border-b border-border pb-8">
         <p className="mb-3 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Archive</p>
@@ -32,6 +30,5 @@ export default async function PostsPage() {
         </section>
       )}
     </main>
-    </Template>
   )
 }

components/blog/TableOfContents.tsx

@@ -58,7 +58,7 @@ export function TableOfContents() {
   if (headings.length === 0) return null;
 
   return (
-    <nav className="lg:sticky lg:top-[var(--header-height)]">
+    <nav aria-label="Table of contents" className="lg:sticky lg:top-[var(--header-height)]">
       <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
         On this page
       </h4>

components/layout/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { m } from "motion/react";
 import { ThemeToggle } from "@/components/ui/ThemeToggle";
 
@@ -10,8 +11,11 @@ const navLinks = [
 ];
 
 export function Header() {
+  const pathname = usePathname();
+
   return (
     <m.nav
+      aria-label="Primary navigation"
       initial={{ opacity: 0, y: -12 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.4, ease: "easeOut" }}
@@ -22,15 +26,25 @@ export function Header() {
           blog
         </Link>
         <div className="flex items-center gap-8">
-          {navLinks.map((link) => (
+          {navLinks.map((link) => {
-            <Link
+            const isActive =
-              key={link.href}
+              link.href === "/"
-              href={link.href}
+                ? pathname === "/"
-              className="font-medium text-sm text-ink-soft hover:text-ink transition-colors"
+                : pathname === link.href.slice(0, -1) || pathname.startsWith(link.href);
-            >
+
-              {link.label}
+            return (
-            </Link>
+              <Link
-          ))}
+                key={link.href}
+                href={link.href}
+                aria-current={isActive ? "page" : undefined}
+                className={`font-medium text-sm transition-colors ${
+                  isActive ? "text-ink" : "text-ink-soft hover:text-ink"
+                }`}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
           <ThemeToggle />
         </div>
       </div>