style: improve readability across all pages

Bump body/description text from text-xs to text-sm. Lighten body copy
from color-text-dim/label (#444/#666) to near-white with opacity.
Increase row padding, card padding, and inter-section spacing to match
GitHub Changelog-style breathing room.

src/components/Hero.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Hero() {
   return (
-    <section className="mb-12">
+    <section className="mb-16">
       {/* Section header */}
       <div className="flex items-center gap-3 mb-6">
         <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
@@ -31,7 +31,7 @@ export default function Hero() {
             </p>
           </div>
 
-          <p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-lg">
+          <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-80">
             I write software and run infrastructure that goes well past what my
             job title implies. Games, AI tooling, mobile apps, and a homelab
             running 20+ self-hosted services on segmented VLANs. Continuously

src/components/ProjectCard.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 export default function ProjectCard({ project }: Props) {
   return (
-    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-3 p-4">
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-4 p-5">
       <div className="flex items-start justify-between gap-3">
         <a
           href={project.githubUrl}
@@ -34,7 +34,7 @@ export default function ProjectCard({ project }: Props) {
         </div>
       </div>
 
-      <p className="font-sans text-xs text-[var(--color-text-label)] leading-relaxed flex-1">
+      <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75">
         {project.description}
       </p>
 

src/components/Skills.tsx

@@ -32,14 +32,14 @@ export default function Skills() {
         {skillGroups.map(({ label, skills }, i) => (
           <div
             key={label}
-            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${
+            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
               i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
             }`}
           >
             <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
               {label}
             </span>
-            <span className="font-mono text-xs text-[var(--color-text)]">
+            <span className="font-mono text-sm text-[var(--color-text)]">
               {skills.join(" · ")}
             </span>
           </div>

src/components/Widget.tsx

@@ -16,8 +16,8 @@ export default function Widget({
   children,
 }: WidgetProps) {
   return (
-    <Tag className={`mb-12 ${className ?? ""}`}>
-      <div className="flex items-center gap-3 mb-6">
+    <Tag className={`mb-16 ${className ?? ""}`}>
+      <div className="flex items-center gap-3 mb-8">
         <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap">
           {title}
         </span>