Fix spacing on MD upload

app/blog/[slug]/page.js

@@ -105,18 +105,11 @@ export default async function BlogPostPage({ params }) {
               })}
             </time>
           </div>
-
-          <p className="text-xl text-gray-700 leading-relaxed">
-            {post.frontmatter.description}
-          </p>
         </header>
 
         {/* Article Content */}
-        <div className="prose prose-lg max-w-none">
-          <div
-            dangerouslySetInnerHTML={{ __html: post.htmlContent }}
-            className="text-gray-800 leading-relaxed"
-          />
+        <div className="post-body max-w-none text-gray-800 leading-relaxed text-lg">
+          <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
         </div>
       </article>
 

app/tailwind.css

@@ -1068,4 +1068,43 @@
     text-indent: 0px;
     margin-bottom: 0px;
   }
+
+  /* Blog post body styling with semantic spacing */
+  .post-body p {
+    /* Scales with font size - uses logical properties for better writing mode support */
+    margin-block: 1em;
+  }
+
+  /* Extra blank lines from markdown -> visible gaps that scale with font size */
+  .post-body .md-gap {
+    /* Each "extra blank line" is one em; scales with font size */
+    block-size: calc(1em * var(--gap, 1));
+    margin: 0; /* no extra margins around the gap */
+    line-height: 1; /* prevent tall line-height from compounding */
+  }
+
+  /* Heading rhythm for better typography */
+  .post-body h1 {
+    margin-block: 1.5em 0.6em;
+  }
+  .post-body h2 {
+    margin-block: 1.4em 0.6em;
+  }
+  .post-body h3 {
+    margin-block: 1.2em 0.5em;
+  }
+  .post-body h4 {
+    margin-block: 1.1em 0.5em;
+  }
+  .post-body h5 {
+    margin-block: 1em 0.4em;
+  }
+  .post-body h6 {
+    margin-block: 1em 0.4em;
+  }
+
+  /* Ensure line breaks are visible */
+  .post-body br {
+    display: block;
+  }
 }