.comments { padding-top: 56px; padding-bottom: 20px; text-align: left; }
.comments h2, .comments-moderation h2 { font: 2rem/1.2 var(--serif); color: var(--wine); font-weight: 400; }
.comments-note, .comment-meta { color: #6d5a5d; }
.comments-preview { padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--mist); font-size: .85rem; }
.comment { background: #fffdf9; padding: 20px; border: 1px solid var(--line); margin: 18px 0; }
.comment-meta { font-size: .85rem; margin: 0 0 10px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.comment-form { margin-top: 30px; padding: 24px; background: var(--mist); }
.comment-form h3 { margin-top: 0; font: 1.5rem var(--serif); }
.comment-form label { display: block; margin: 15px 0 6px; }
.comment-form input, .comment-form textarea { display: block; width: 100%; padding: 12px; border: 1px solid var(--line); font: inherit; background: var(--paper); }
.comment-form textarea { resize: vertical; }
.comment-form button, .comment-actions button { border: 1px solid var(--wine); background: var(--wine); color: white; padding: 11px 16px; cursor: pointer; font: inherit; }
.comment-form button { margin-top: 15px; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.comment-actions button { font-size: .85rem; }
.comment-actions [data-delete-comment] { color: var(--wine); background: transparent; }
.comment-status { min-height: 1.6em; color: var(--wine); }
.comments-empty { margin: 28px 0; font-style: italic; }
.comments-moderation { border-top: 1px solid var(--line); margin-top: 50px; padding-top: 24px; }
.moderation-entry h3 { font: 1.25rem var(--serif); margin-bottom: 8px; }
.comment-form :focus-visible, .comment-actions button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }