Unify section spacing rhythm

components/project-card.tsx

@@ -49,36 +49,36 @@ export function ProjectCard({
         </div>
       </div>
 
-      <div className="flex flex-col justify-center">
+      <div className="project-card-copy flex flex-col justify-center">
         <div className="type-label-wide flex flex-wrap items-center gap-x-3 gap-y-2 text-[var(--color-muted)] sm:flex-nowrap">
           <span>{project.id}</span>
           <span className="project-rule-line h-px w-12 shrink-0" />
           <span>{project.location}</span>
         </div>
 
-        <h3 className="type-project-title mt-5 text-[var(--color-ink)]">
+        <h3 className="type-project-title text-[var(--color-ink)]">
           {project.title}
         </h3>
-        <p className="type-body-responsive mt-5 max-w-xl text-[var(--color-muted)]">
+        <p className="type-body-responsive max-w-xl text-[var(--color-muted)]">
           {project.description}
         </p>
 
-        <dl className="project-meta-list mt-8 grid gap-4 border-y py-6 sm:grid-cols-3">
-          <div>
+        <dl className="project-meta-list grid gap-4 border-y py-6 sm:grid-cols-3">
+          <div className="project-meta-item">
             <dt className="eyebrow-note">{labels?.year ?? "Year"}</dt>
-            <dd className="type-body mt-2 font-semibold text-[var(--color-ink)]">{project.year}</dd>
+            <dd className="type-body font-semibold text-[var(--color-ink)]">{project.year}</dd>
           </div>
-          <div>
+          <div className="project-meta-item">
             <dt className="eyebrow-note">{labels?.area ?? "Area"}</dt>
-            <dd className="type-body mt-2 font-semibold text-[var(--color-ink)]">{project.area}</dd>
+            <dd className="type-body font-semibold text-[var(--color-ink)]">{project.area}</dd>
           </div>
-          <div>
+          <div className="project-meta-item">
             <dt className="eyebrow-note">{labels?.role ?? "Role"}</dt>
-            <dd className="type-body mt-2 font-semibold text-[var(--color-ink)]">{project.role}</dd>
+            <dd className="type-body font-semibold text-[var(--color-ink)]">{project.role}</dd>
           </div>
         </dl>
 
-        <ul className="type-chip mt-8 grid gap-3 text-[var(--color-muted)] sm:grid-cols-2">
+        <ul className="type-chip grid gap-3 text-[var(--color-muted)] sm:grid-cols-2">
           {project.highlights.map((highlight) => (
             <li key={highlight} className="flex items-center gap-3">
               <span className="h-2 w-2 rounded-full bg-[var(--color-blue-500)]" />
@@ -90,7 +90,7 @@ export function ProjectCard({
         {project.sheetImage ? (
           <a
             href={project.sheetImage}
-            className="button-secondary mt-8 w-fit"
+            className="button-secondary w-fit"
             target="_blank"
             rel="noreferrer"
           >