.article-comments { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--color-sand); font: var(--type-ui)/var(--leading-ui) var(--font-ui); }
.article-comments h2 { font-size: var(--type-card); margin: 0 0 22px; }
.article-comments h2 span { font-size: 18px; font-weight: normal; }
.article-comment-form { display: grid; gap: 10px; }
.article-comment-form input:not([type=radio]):not([type=hidden]), .article-comment-form textarea { box-sizing: border-box; width: 100%; min-height: var(--field-height); padding: 12px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--color-paper); font: inherit; color: inherit; }
.article-comment-form textarea { resize: vertical; }
.article-comment-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.article-comment-identity label { display: block; margin-bottom: 8px; }
.article-comment-form button { justify-self: end; min-height: var(--control-height); background: var(--action-fill); color: var(--action-text); padding: 10px 20px; border: 1px solid var(--action-fill); border-radius: var(--radius-control); font: inherit; cursor: pointer; }
.article-comment-form :focus-visible:not(a) { outline: var(--focus-ring); outline-offset: 3px; }
.article-comment-form #article-comment-notice { font-size: var(--type-meta); }
.article-stars { padding: 0; border: 0; margin: 0 0 12px; }
.article-stars > div { display: flex; gap: 6px; margin: 8px 0; }
.article-stars > div label { position: relative; display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; }
.article-stars > div input { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.article-stars > div span[aria-hidden] { font-size: 30px; color: transparent; -webkit-text-stroke: 1px #81704b; }
.article-stars > div label:has(input:checked) span[aria-hidden], .article-stars > div label:has(~ label input:checked) span[aria-hidden] { color: #a48b50; }
.article-stars label:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.article-no-rating { font-size: var(--type-meta); }
.article-comment-form input[type=radio] { accent-color: var(--color-blue); }
.article-comment-form button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.article-comment-list { list-style: none; margin: 20px 0 30px; padding: 0; }
.article-comment-list li { border-bottom: 1px solid var(--color-sand); padding: 20px 0; overflow-wrap: anywhere; }
.article-comment-list header { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.article-comment-text { font-family: var(--font-reading); }
.article-comment-list time { font-size: var(--type-meta); }
.article-comment-rating { color: #81704b; margin: 8px 0; }
.article-comments-pages { display: flex; gap: 14px; margin-bottom: 24px; }
@media (max-width: 640px) { .article-comment-identity { grid-template-columns: 1fr; } }
@media print { .article-comment-form { display: none; } }