fix: stop heading overlapping an image that directly follows it

The -10px negative margin-bottom on h2/h3 (meant to tighten heading-to-paragraph spacing) had no line-height leading to absorb it when the next sibling was a bare <img>, so the image overlapped the heading. Restore a normal 16px gap for the heading-directly-followed-by-image case via :has(+ img).

Author: tw93

src/styles/index.css

@@ -68,6 +68,13 @@ h6 {
   margin-bottom: -6px;
 }
 
+/* When a heading is directly followed by an image (not a text paragraph),
+   there is no line-height leading to absorb the negative margin above, so
+   the image overlaps the heading. Restore a normal gap for that case only. */
+:is(h2, h3, h4, h5, h6):not(:first-child):has(+ img) {
+  margin-bottom: 16px;
+}
+
 h1 {
   font-size: clamp(32px, 5vw, 52px);
   font-weight: 800;