/* Catalog style "demo36" — tags add-on (loaded instead of _tags.css): tags as an italic serif index with small caps counts. Mirrors /demo36/. */
/*
 * List page: "Suits a site for" is a ruled strip like the categories, each tag an italic serif word
 * with its count in small caps; the active tag is gold. Cards: a short italic line of tags. Post:
 * a ruled block; each tag a serif button with an em dash, agreed = gold italic with a tick.
 */
.tagcloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.tagcloud__title { margin: 0; font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.tagcloud__link { font: italic 400 19px/1.3 var(--serif); color: var(--soft); text-decoration: none; }
.tagcloud__link:hover { color: var(--ink); }
.tagcloud__link.is-active { color: var(--gold); }
.tagcloud__count { margin-left: 4px; font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: 0.14em; color: var(--faint); }
.tagcloud__empty { margin: 0; font: italic 300 18px/1.4 var(--serif); color: var(--faint); }
.listing__tag { grid-column: 1 / -1; margin: 0; font: italic 300 20px/1.4 var(--serif); color: var(--soft); }
.listing__tag strong { font-weight: 400; color: var(--gold); }
.listing__tag a { margin-left: 10px; font: 700 11px/1.3 var(--sans); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }

.post__fits { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.post__fit a { font: italic 400 16px/1.3 var(--serif); color: var(--faint); text-decoration: none; }
.post__fit a:hover { color: var(--gold); }

.fits { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.fits__title { margin: 0 0 8px; font: 400 36px/1.1 var(--serif); color: var(--ink); }
.fits__intro { max-width: 60ch; margin: 0 0 20px; color: var(--soft); }
.fits__list { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 24px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--soft); font: italic 400 21px/1.2 var(--serif); cursor: pointer; }
.fits__tag::before { content: "+"; font: 700 12px/1 var(--sans); font-style: normal; color: var(--gold); }
.fits__tag:hover { color: var(--ink); border-color: var(--rule-strong); }
.fits__tag.is-mine { color: var(--gold); border-color: var(--gold); }
.fits__tag.is-mine::before { content: "✓"; }
.fits__tag:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.fits__count { font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: 0.14em; color: var(--faint); }
.fits__empty { margin: 0 0 20px; font: italic 300 20px/1.4 var(--serif); color: var(--soft); }
.fits-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin: 0; }
.fits-form__label { width: 100%; font: 700 11px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.fits-form__input { flex: 1 1 220px; max-width: 380px; min-width: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: 400 20px/1.3 var(--serif); }
.fits-form__input::placeholder { color: var(--faint); }
.fits-form__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }