fix mobile layout: switch to flex-start on small screens

Pages used align-items: center with min-height: 100vh, which clips
content at the top on mobile when it exceeds the viewport height.
Override to flex-start at <=600px so content scrolls normally.
Also tightened nav gap/font-size on mobile to reduce wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/Nav.astro

@@ -99,7 +99,8 @@ function isActive(href: string, current: string): boolean {
         }
 
         .nav-inner {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
+            gap: 4px;
         }
     }
 </style>

src/pages/404.astro

@@ -118,6 +118,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .not-found-page {
+            align-items: flex-start;
+        }
+
+        .container {
+            padding: var(--space-md);
+        }
+
         .error-code {
             font-size: 3rem;
         }

src/pages/about.astro

@@ -413,6 +413,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/blog/[...slug].astro

@@ -797,6 +797,10 @@ const readingTime = getReadingTime(post.body);
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/blog/index.astro

@@ -276,6 +276,10 @@ const previewPosts = posts.map((post) => ({
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/blog/tag/[tag].astro

@@ -351,6 +351,10 @@ const previewPosts = posts.map((post) => ({
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/index.astro

@@ -448,6 +448,10 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
 
     /* Responsive */
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/projects.astro

@@ -286,6 +286,10 @@ function getPrimaryLink(project: Project): string | undefined {
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }

src/pages/uses.astro

@@ -538,6 +538,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     }
 
     @media (max-width: 600px) {
+        .main {
+            align-items: flex-start;
+        }
+
         .container {
             padding: var(--space-md);
         }