fix(ui): remove accent stripes, fix project card consistency

- Remove black accent stripe from ProductCard, BlogCard, and mission cards
- Fix inconsistent card heights on Projects page by using flex column
  layout with description flex-grow to push features/links to bottom
- Reduce tag size for tighter, more uniform spacing across cards

Author: maskedsyntax

src/components/BlogCard.svelte

@@ -11,24 +11,23 @@
 </script>
 
 <a href="/blog/{slug}" class="card">
-  <div class="card-accent"></div>
-  <div class="card-body">
-    <div class="meta">
-      <span class="category">{category}</span>
-      <span class="date">{formatDate(date)}</span>
-    </div>
-    <h3 class="title">{title}</h3>
-    <p class="excerpt">{excerpt}</p>
-    <span class="read-more">Read more &rarr;</span>
+  <div class="meta">
+    <span class="category">{category}</span>
+    <span class="date">{formatDate(date)}</span>
   </div>
+  <h3 class="title">{title}</h3>
+  <p class="excerpt">{excerpt}</p>
+  <span class="read-more">Read more &rarr;</span>
 </a>
 
 <style>
   .card {
     display: flex;
-    overflow: hidden;
+    flex-direction: column;
+    gap: 10px;
     background-color: var(--bg-primary);
     border: var(--border-width) solid var(--border-default);
+    padding: 24px;
     transition: border-color 0.15s ease;
     text-decoration: none;
     color: inherit;
@@ -38,21 +37,6 @@
     border-color: var(--border-hover);
   }
 
-  .card-accent {
-    width: 4px;
-    flex-shrink: 0;
-    background-color: var(--text-primary);
-  }
-
-  .card-body {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 24px;
-    flex: 1;
-    min-width: 0;
-  }
-
   .meta {
     display: flex;
     align-items: center;

src/components/ProductCard.svelte

@@ -3,13 +3,12 @@
 </script>
 
 <article class="card">
-  <div class="card-accent"></div>
-  <div class="card-body">
-    <div class="header">
-      <h3 class="name">{name}</h3>
-      <span class="status" class:status-live={status === "Live"} class:status-beta={status === "Beta"}>{status}</span>
-    </div>
-    <p class="description">{description}</p>
+  <div class="header">
+    <h3 class="name">{name}</h3>
+    <span class="status" class:status-live={status === "Live"} class:status-beta={status === "Beta"}>{status}</span>
+  </div>
+  <p class="description">{description}</p>
+  <div class="card-footer">
     {#if features.length > 0}
       <ul class="features">
         {#each features as feature}
@@ -37,27 +36,17 @@
   .card {
     background-color: var(--bg-primary);
     border: var(--border-width) solid var(--border-default);
+    padding: 28px;
     transition: border-color 0.15s ease;
     display: flex;
-    overflow: hidden;
+    flex-direction: column;
+    height: 100%;
   }
 
   .card:hover {
     border-color: var(--border-hover);
   }
 
-  .card-accent {
-    width: 4px;
-    flex-shrink: 0;
-    background-color: var(--text-primary);
-  }
-
-  .card-body {
-    padding: 28px;
-    flex: 1;
-    min-width: 0;
-  }
-
   .header {
     display: flex;
     align-items: center;
@@ -98,19 +87,23 @@
     font-size: 0.9375rem;
     color: var(--text-secondary);
     line-height: 1.5;
-    margin-bottom: 16px;
+    flex: 1;
+  }
+
+  .card-footer {
+    margin-top: 16px;
   }
 
   .features {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
   }
 
   .features li {
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
     color: var(--tag-text);
-    padding: 4px 10px;
+    padding: 3px 8px;
     background-color: var(--bg-surface);
     border: 1px solid var(--tag-border);
     font-weight: 500;
@@ -120,8 +113,8 @@
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
-    margin-top: 16px;
-    padding-top: 16px;
+    margin-top: 14px;
+    padding-top: 14px;
     border-top: 1px solid var(--border-default);
   }
 

src/pages/Home.svelte

@@ -80,11 +80,8 @@
   <div class="mission-grid">
     {#each mission as item}
       <article class="mission-card">
-        <div class="mission-accent"></div>
-        <div class="mission-body">
-          <h3>{item.title}</h3>
-          <p>{item.text}</p>
-        </div>
+        <h3>{item.title}</h3>
+        <p>{item.text}</p>
       </article>
     {/each}
   </div>
@@ -145,27 +142,14 @@
   .mission-card {
     background-color: var(--bg-primary);
     border: var(--border-width) solid var(--border-default);
-    display: flex;
-    overflow: hidden;
+    padding: 24px;
     transition: border-color 0.15s ease;
   }
 
   .mission-card:hover {
     border-color: var(--border-hover);
   }
 
-  .mission-accent {
-    width: 4px;
-    flex-shrink: 0;
-    background-color: var(--text-primary);
-  }
-
-  .mission-body {
-    padding: 24px;
-    flex: 1;
-    min-width: 0;
-  }
-
   .mission-card h3 {
     font-family: var(--font-heading);
     font-weight: 600;