Redesign comment rendering and styling

style.css

@@ -660,17 +660,95 @@ h4 {
   padding-top: 2rem;
   border-top: 1px solid var(--line);
 }
-.comment-list {
+.comment-list,
+.comment-list .children {
   padding: 0;
+  margin: 0;
   list-style: none;
 }
+
+/* Replies are nested by a subtle rule instead of default ordered-list numbering. */
+.comment-list .children {
+  margin: 0 0 0 1.25rem;
+  padding-left: 1.25rem;
+  border-left: 1px solid var(--line);
+}
+
 .comment-body {
-  padding: 1rem 0;
+  padding: 1.75rem 0;
   border-bottom: 1px solid var(--line);
 }
+
 .comment-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--muted);
   font-family: "Berkeley Mono", monospace;
-  font-size: 0.7rem;
+  font-size: 1rem;
+  line-height: 1.35;
+}
+
+.comment-avatar {
+  width: 2.75rem;
+  height: 2.75rem;
+  flex: 0 0 auto;
+  border-radius: 2px;
+  object-fit: cover;
+}
+
+.comment-identity {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.35rem 0.65rem;
+}
+
+.comment-author {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.comment-author a,
+.comment-published,
+.comment-edit-link a,
+.comment-actions a {
+  color: inherit;
+}
+
+.comment-published::before {
+  color: var(--accent);
+  content: "·";
+  margin-right: 0.65rem;
+}
+
+.comment-content {
+  margin-top: 1rem;
+}
+
+.comment-content > :last-child {
+  margin-bottom: 0;
+}
+
+.comment-awaiting-moderation {
+  margin: 1rem 0 0;
+  color: var(--accent);
+  font-family: "Berkeley Mono", monospace;
+  font-size: 1rem;
+}
+
+.comment-actions {
+  margin-top: 1.25rem;
+  font-family: "Berkeley Mono", monospace;
+  font-size: 1rem;
+}
+
+.comment-form label,
+.comment-form .logged-in-as,
+.comment-form .comment-notes,
+.comment-form .form-submit {
+  font-family: "Berkeley Mono", monospace;
+  font-size: 1rem;
 }
 .comment-form input:not([type="submit"]),
 .comment-form textarea {