feat: align homepage to mockup-a with centered hero, terminal animation, article grid

Restructure hero layout with centered .hero-container (max-width 1080px),
update hero text (prompt "welcome to", button "About Me" → /is/), add
terminal widget title bar and staggered fade-in animation, replace scroll
indicator with animated line.

Add section header (eyebrow + title) above articles, new vertical .article-card
grid layout with solid type badges (sharp corners, sharp badges), implement
scroll reveal stagger (90ms per sibling). Update terminal color palette to
use proper CSS variables. Remove ambient glow from hero.

Changes follow THEMING-STANDARD: semantic color variables, mobile-first
responsive design, prefers-reduced-motion support, WCAG AA accessibility.

- hero.html: new .hero-container wrapper, typed terminal content, scroll line
- hero.css: restructure layout, add color classes, stagger animation, scroll pulse
- home.html: add section header, .articles-grid, pass context="home" flag
- post-card.html: context-conditional rendering (homepage vertical vs. other horizontal)
- card.css: new .article-card, .articles-grid, .article-* styles
- main.css: add section utilities, .reveal/.revealed base states
- variables.css: add --terminal-prompt, --terminal-text, --terminal-accent
- scroll-reveal.js: add 90ms per-item stagger with cleanup
- 404.css: remove hardcoded terminal color fallbacks

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 35 insertions, 14 deletions

diff --git a/layouts/home.html b/layouts/home.html
index 6328ee5..54d8087 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -3,25 +3,46 @@
 {{ define "main" }}
   {{ partial "hero.html" . }}
 
-  <section id="articles" class="section-container reveal-group">
+  <section id="articles" class="section-container reveal-group"
+           style="background: var(--bg2); padding: 6rem 2rem;">
+
+    <div class="section-header">
+      <p class="section-eyebrow">// latest posts</p>
+      <h2 class="section-title">Recent Articles</h2>
+    </div>
+
     {{ $articlesSection := .Site.GetPage "/articles" }}
     {{ if $articlesSection }}
       {{ $articles := $articlesSection.Pages }}
-      {{ $articles := sort $articles "Date" "desc" }}
-      {{ range first 6 $articles }}
-        {{ $type := .Params.type }}
-        {{ if not $type }}{{ $type = "article" }}{{ end }}
-
-        {{ $excerpt := .Params.excerpt }}
-        {{ if not $excerpt }}
-          {{ $excerpt = .Summary | plainify | truncate 150 }}
-        {{ end }}
+      {{ $articles = sort $articles "Date" "desc" }}
+      <div class="articles-grid">
+        {{ range first 6 $articles }}
+          {{ $type := .Params.type }}
+          {{ if not $type }}{{ $type = "article" }}{{ end }}
 
-        {{ $data := dict "title" .Title "type" $type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" .Params.featured }}
-        {{ partial "post-card.html" $data }}
-      {{ end }}
+          {{ $excerpt := .Params.excerpt }}
+          {{ if not $excerpt }}
+            {{ $excerpt = .Summary | plainify | truncate 150 }}
+          {{ end }}
+
+          {{ $data := dict
+              "title"       .Title
+              "type"        $type
+              "description" $excerpt
+              "date"        .Date
+              "url"         .RelPermalink
+              "image"       .Params.image
+              "featured"    .Params.featured
+              "context"     "home"
+          }}
+          {{ partial "post-card.html" $data }}
+        {{ end }}
+      </div>
     {{ end }}
 
-    <a href="/articles/" class="btn btn-outline">View All Articles</a>
+    <div style="text-align: center; margin-top: 3rem;">
+      <a href="/articles/" class="btn btn-outline">View All Articles</a>
+    </div>
+
   </section>
 {{ end }}