/* Catalog style "demo13" — tags add-on (loaded instead of _tags.css). */
/* tags as Bodoni italic labels in hairline pills: one more index row on the list and on the post (heading left, the work right); yours turns ink with the yellow rule */

/* list page: the cloud as a thin index row under the switch */
.tagcloud { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 24px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.tagcloud__title { margin: 0; font: italic 400 22px/1.1 var(--serif); }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tagcloud__link {
    display: inline-flex; align-items: baseline; gap: 8px; min-height: 42px; padding: 9px 18px 7px; border: 1px solid var(--rule); border-radius: 999px;
    font: italic 400 19px/1.2 var(--serif); text-decoration: none; transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.tagcloud__link:hover { background: var(--paper); border-color: var(--ink); }
.tagcloud__link.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tagcloud__count { color: var(--soft); font: 400 12px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.tagcloud__link.is-active .tagcloud__count { color: #b9bcc2; }
.tagcloud__empty { margin: 0; color: var(--soft); font-size: 15px; }
.listing__tag strong { font: italic 500 1.25em/1 var(--serif); color: var(--ink); }
.listing__tag a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* cards: the top tags under the counters, in the right-hand column of the row */
.post__body { grid-template-areas: "title meta" "title stats" "title fits" "excerpt actions"; }
.post__fits { grid-area: fits; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.post__fit a {
    display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px 1px; border: 1px solid var(--rule); border-radius: 999px;
    color: var(--ink); font: italic 400 16px/1.15 var(--serif); text-decoration: none; transition: background 250ms ease, border-color 250ms ease;
}
.post__fit a:hover { background: var(--paper); border-color: var(--ink); }

/* post: an index row between the rating and the comments */
.fits {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); column-gap: clamp(24px, 5vw, 96px); align-items: start;
    margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(22px, 2.4vw, 36px); border-top: 1px solid var(--ink);
}
.fits > * { grid-column: 2; min-width: 0; }
.fits__title { grid-column: 1; grid-row: 1 / span 4; margin: 0; font: 400 clamp(44px, 5vw, 92px)/0.95 var(--serif); font-optical-sizing: auto; letter-spacing: -0.03em; }
.fits__intro { max-width: 52ch; margin: 0 0 20px; color: var(--soft); font-size: 16px; }
.fits__list { display: flex; flex-wrap: wrap; gap: 18px 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag {
    position: relative; display: inline-flex; align-items: baseline; gap: 10px; min-height: 52px; padding: 12px 22px 10px; border: 1px solid var(--rule); border-radius: 999px;
    background: transparent; color: var(--ink); font: 400 24px/1.15 var(--serif); text-align: left; cursor: pointer;
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.fits__tag:hover { background: var(--paper); border-color: var(--ink); font-style: italic; }
.fits__tag.is-mine { background: var(--ink); border-color: var(--ink); color: #fff; font-style: italic; }
.fits__tag.is-mine::after { content: ""; position: absolute; bottom: -9px; left: 50%; width: 22px; height: 2px; margin-left: -11px; background: var(--yellow); }
.fits__tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--yellow); }
.fits__count { color: var(--soft); font: 500 13px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.fits__tag.is-mine .fits__count { color: #b9bcc2; }
.fits__empty { margin: 0 0 24px; color: var(--soft); font: italic 400 24px/1.3 var(--serif); }
.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; }
.fits-form__label { width: 100%; color: var(--soft); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
.fits-form__input {
    flex: 0 1 420px; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid var(--rule); border-bottom-color: var(--ink); border-radius: 2px;
    background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--sans); transition: background 250ms ease;
}
.fits-form__input::placeholder { color: #6b7078; }
.fits-form__input:focus { outline: 2px solid var(--ink); outline-offset: 2px; background: #fff; }
.fits-form__submit { min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--ink); cursor: pointer; }

@media (max-width: 1100px) {
    .post__body { grid-template-areas: "meta" "stats" "title" "excerpt" "fits" "actions"; }
    .post__fits { justify-content: flex-start; margin: 2px 0 4px; }
}
@media (max-width: 800px) {
    .tagcloud { grid-template-columns: minmax(0, 1fr); }
    .fits { grid-template-columns: minmax(0, 1fr); }
    .fits > *, .fits__title { grid-column: 1; grid-row: auto; }
    .fits__title { margin-bottom: 16px; }
}
@media (max-width: 520px) {
    .fits__tag { font-size: 22px; padding-inline: 18px; }
    .fits-form__input { flex-basis: 100%; }
}