/* ============================================================
   Comments — styled to match editorial aesthetic
   ============================================================ */

#comments {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.comments-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: var(--space-6);
}

/* ---------- Comment list ---------- */
.comment-list {
	list-style: none;
}
.comment {
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--line);
}
.comment:last-child { border-bottom: none; }
.comment .comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}
.comment .comment-author img {
	border-radius: 50%;
	border: 1px solid var(--line);
}
.comment .fn {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.comment .fn a { color: inherit; }
.comment .fn a:hover { color: var(--brand); }
.comment .comment-metadata {
	font-family: var(--font-ui);
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px;
}
.comment .comment-metadata a { color: var(--muted); }
.comment .comment-content p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 12px;
}
.comment .reply {
	font-family: var(--font-ui);
	font-size: 12px;
}
.comment .reply a {
	color: var(--brand);
	font-weight: 600;
	letter-spacing: 0.3px;
}
.comment .reply a:hover { color: var(--brand-dark); }

/* Threaded replies */
.children {
	list-style: none;
	padding-left: var(--space-6);
	border-left: 2px solid var(--line);
	margin-top: var(--space-4);
}
.children .comment { padding: var(--space-4) 0; }

/* Pingback / trackback */
.pingback .comment-body,
.trackback .comment-body {
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--muted);
	padding: var(--space-3) 0;
}

/* ---------- Comment form ---------- */
.comment-respond {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line);
}
.comment-reply-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: var(--space-5);
}
.comment-reply-title small { font-size: 14px; font-weight: 400; }
.comment-reply-title small a { color: var(--brand); }

.comment-form .comment-notes {
	font-family: var(--font-ui);
	font-size: 12px;
	color: var(--muted);
	margin-bottom: var(--space-4);
}
.comment-form label {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ink);
	display: block;
	margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 15px;
	background: var(--bg);
	color: var(--ink);
	border-radius: 2px;
	transition: border-color var(--ease-quick);
}
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--brand);
	outline: none;
}
.comment-form textarea { min-height: 160px; resize: vertical; }
.comment-form .comment-form-comment,
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
	margin-bottom: var(--space-4);
}
.comment-form .form-submit { margin-top: var(--space-5); }
.comment-form .submit {
	background: var(--ink);
	color: var(--bg);
	border: none;
	padding: 12px 28px;
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	transition: background var(--ease-quick);
}
.comment-form .submit:hover { background: var(--brand); }

.no-comments {
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--muted);
	padding: var(--space-5) 0;
}