Redesign comment rendering and styling

comments.php

@@ -4,8 +4,9 @@ if ( post_password_required() ) { return; }
 ?>
 <section id="comments" class="comments-area">
 	<?php if ( have_comments() ) { ?>
-		<h2 class="comments-title"><?php printf( esc_html( _nx( 'One comment', '%1$s comments', get_comments_number(), 'comments title', 'c1024-2026' ) ), esc_html( number_format_i18n( get_comments_number() ) ) ); ?></h2>
-		<ol class="comment-list"><?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 48 ) ); ?></ol>
+		<h2 class="comments-title"><?php echo esc_html( get_comments_number_text() ); ?></h2>
+		<?php // The custom callback uses an avatar-led, non-numbered discussion layout. ?>
+		<ol class="comment-list"><?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 44, 'callback' => 'c1024_2026_comment' ) ); ?></ol>
 		<?php the_comments_navigation(); ?>
 	<?php } ?>
 	<?php if ( ! comments_open() && get_comments_number() ) { ?><p><?php esc_html_e( 'Comments are closed.', 'c1024-2026' ); ?></p><?php } ?>

functions.php

@@ -53,6 +53,34 @@ function c1024_2026_customize_register( $wp_customize ) {
 // Customize controls are registered only while the Customizer API is available.
 add_action( 'customize_register', 'c1024_2026_customize_register' );
 
+/**
+ * Render comments without the default avatar-heavy, numbered-list presentation.
+ *
+ * WordPress's Walker_Comment closes the wrapping list item after this callback.
+ */
+function c1024_2026_comment( $comment, $args, $depth ) {
+	?>
+	<li <?php comment_class( 'comment-item' ); ?> id="comment-<?php comment_ID(); ?>">
+		<article class="comment-body" id="div-comment-<?php comment_ID(); ?>">
+			<header class="comment-meta">
+				<?php echo get_avatar( $comment, 44, '', sprintf( esc_attr__( 'Avatar for %s', 'c1024-2026' ), get_comment_author( $comment ) ), array( 'class' => 'comment-avatar' ) ); ?>
+				<div class="comment-identity">
+					<span class="comment-author"><?php echo wp_kses_post( get_comment_author_link( $comment ) ); ?></span>
+					<time class="comment-published" datetime="<?php echo esc_attr( get_comment_date( DATE_W3C, $comment ) ); ?>"><?php echo esc_html( get_comment_date( '', $comment ) ); ?></time>
+					<?php edit_comment_link( esc_html__( 'Edit', 'c1024-2026' ), '<span class="comment-edit-link">', '</span>' ); ?>
+				</div>
+			</header>
+			<?php if ( '0' === $comment->comment_approved ) { ?>
+				<p class="comment-awaiting-moderation"><?php esc_html_e( 'Your comment is awaiting moderation.', 'c1024-2026' ); ?></p>
+			<?php } ?>
+			<div class="comment-content"><?php comment_text(); ?></div>
+			<footer class="comment-actions">
+				<?php comment_reply_link( array_merge( $args, array( 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'reply_text' => esc_html__( 'Reply', 'c1024-2026' ) ) ) ); ?>
+			</footer>
+		</article>
+	<?php
+}
+
 function c1024_2026_excerpt_more( $more ) {
 	return '…';
 }

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 {