Fix comments UX regressions and HTMX/Turnstile behavior

- standardize comment and reply UI layout
- target replies with stable OOB container IDs
- remove stale empty-state on approved HTMX comments
- initialize Turnstile widgets after HTMX swaps
- add regression tests for empty-state, OOB targets, and reply form rerender

Refs #48

templates/blog/article_page.html

@@ -141,16 +141,15 @@
 {% if page.comments_enabled %}
 <section class="mt-16 pt-12 border-t border-zinc-200 dark:border-zinc-800">
   <div class="h-1 w-24 bg-gradient-to-r from-brand-cyan to-brand-pink mb-6"></div>
-  <h2 class="font-display font-bold text-3xl mb-8">Comments</h2>
+  <h2 class="font-display font-bold text-3xl">Comments</h2>
+  <p class="mt-2 mb-6 font-mono text-xs uppercase tracking-wider text-zinc-500">
+    {{ approved_comments|length }} public comment{{ approved_comments|length|pluralize }}
+  </p>
 
-  {% if approved_comments %}
-    {% include "comments/_comment_list.html" %}
-  {% else %}
-  <div id="comments-list" class="space-y-8 mb-12"></div>
-  <div class="mb-12 p-8 bg-grid-pattern text-center">
+  {% include "comments/_comment_list.html" %}
+  <div id="comments-empty-state" class="mb-8 rounded-md border border-zinc-200 bg-zinc-50 p-4 text-center dark:border-zinc-800 dark:bg-zinc-900/40 {% if approved_comments %}hidden{% endif %}">
     <p class="font-mono text-sm text-zinc-500">No comments yet. Be the first to comment.</p>
   </div>
-  {% endif %}
 
   {% include "comments/_comment_form.html" %}
 </section>