/* Catalog style "demo36" — rating + comments add-on (loaded instead of _rate.css): ruled editorial blocks, serif numerals, small caps. Mirrors /demo36/. */
/*
 * Card: "8.4 / 10 · 2 comments" as small caps under the row. Post: the rating is a ruled block with
 * a huge light Cormorant score and ten serif numerals in a row (the chosen one gold and
 * underlined, like the active row of the index). Comments read like letters to the editor: name
 * in serif, date in small caps, hairline between them; the form is underlined fields.
 */
.post__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 6px; font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.post__rating { color: var(--ink); }
.post__rating-avg { font: 400 18px/1 var(--serif); letter-spacing: 0; }
.post__comments { text-decoration: none; }
.post__comments:hover { color: var(--gold); }
.post__flash { margin: 16px 0 0; }

.rating, .comments { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.rating__title, .comments__title { margin: 0 0 16px; font: 400 36px/1.1 var(--serif); color: var(--ink); }
.rating__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 24px; }
.rating__avg { font: 300 96px/0.85 var(--serif); }
.rating__max { font: italic 300 26px/1 var(--serif); color: var(--faint); }
.rating__count { font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.rating__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; }
.rating__scale { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating__legend { width: 100%; margin-bottom: 10px; padding: 0; font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.rating__opt { position: relative; }
.rating__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rating__num { display: grid; place-items: center; width: 48px; height: 56px; font: 300 32px/1 var(--serif); color: var(--soft); cursor: pointer; border-bottom: 1px solid var(--rule); transition: color 0.2s, border-color 0.2s; }
.rating__opt:hover .rating__num { color: var(--ink); border-color: var(--rule-strong); }
.rating__input:checked + .rating__num { color: var(--gold); font-style: italic; border-color: var(--gold); }
.rating__input:focus-visible + .rating__num { outline: 1px solid var(--gold); outline-offset: 2px; }
.rating__mine { margin: 0; font: italic 300 21px/1.4 var(--serif); color: var(--soft); }
.rating__mine-score { margin: 0 4px; font: 400 32px/1 var(--serif); font-style: normal; color: var(--gold); }

.comments__count { margin-left: 8px; font: italic 300 26px/1 var(--serif); color: var(--faint); }
.comments__list { margin: 0 0 32px; padding: 0; list-style: none; }
.comment { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; }
.comment__author { font: 400 22px/1.2 var(--serif); color: var(--ink); }
.comment__date { font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.comment__body { color: var(--soft); }
.comments__empty { margin: 0 0 24px; font: italic 300 20px/1.4 var(--serif); color: var(--soft); }
.comment-form { display: grid; gap: 18px; }
.comment-form__field { display: grid; gap: 6px; margin: 0; }
.comment-form__label { font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.comment-form__input, .comment-form__text { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: 400 20px/1.4 var(--serif); }
.comment-form__input { max-width: 380px; }
.comment-form__text { min-height: 110px; resize: vertical; }
.comment-form__input:focus, .comment-form__text:focus { outline: none; border-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0; }
.comment-form__note { font: italic 300 17px/1.4 var(--serif); color: var(--faint); }

@media (max-width: 520px) {
    .rating__num { width: 30px; height: 46px; font-size: 26px; }
    .rating__avg { font-size: 72px; }
}