/* Collections (/collections, /collection/ID). Colours come from site.css variables. */
.cl{max-width:1232px;margin:24px auto 56px;padding:0 24px;display:grid;gap:22px}
@media(max-width:700px){.cl{padding:0 16px;margin-top:16px}}
.cl .back-link{justify-self:start}
.cl-head h1{font-size:2rem;line-height:1.3;margin:0 0 8px}
.cl-head p{color:var(--espresso-light);max-width:760px;line-height:1.6}
.cl-head-one{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;padding:26px 28px;border-radius:20px;background:var(--tag-bg);border:1px solid var(--border-warm)}
.cl-meta{font-size:.88rem;color:var(--espresso-light)}

.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cl .cl-card{display:grid;gap:8px;text-decoration:none;color:var(--espresso);background:var(--card-bg);border:1px solid var(--border-warm);border-radius:20px;padding:20px 22px;transition:border-color .15s,transform .15s,box-shadow .15s}
.cl .cl-card:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:0 10px 26px var(--shadow,rgba(43,24,16,.08))}
.cl-samples{display:grid;gap:4px;padding:12px 16px;margin-bottom:6px;border-radius:14px;background:var(--bg-warm);font-size:1.9rem;line-height:1.3;overflow:hidden;color:var(--espresso)}
.cl-samples span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-name{font-size:1.1rem;font-weight:700}

.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl .cl-row{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:18px;align-items:center;text-decoration:none;color:var(--espresso);background:var(--card-bg);border:1px solid var(--border-warm);border-radius:16px;padding:14px 20px;transition:border-color .15s}
.cl .cl-row:hover{border-color:var(--coral)}
.cl-row-name{font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.cl-row-name small{display:block;font-weight:400;font-size:.8rem;color:var(--espresso-light)}
.cl-row-sample{font-size:1.6rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.cl .cl-row{grid-template-columns:1fr;gap:4px}.cl-row-sample{font-size:1.35rem}.cl-head-one{padding:20px}}
.cl .set-preview{display:block;max-width:100%;width:auto;object-fit:contain;object-position:left center}
html[data-theme=dark] .cl .set-preview{filter:invert(.9) hue-rotate(180deg)}
.cl-group{display:grid;gap:14px}
.cl-group h2{font-size:1.3rem;margin:6px 0 0;display:flex;align-items:center;gap:10px}
.cl-group h2 .count{font-size:.8rem;font-weight:600;color:var(--espresso-light);background:var(--tag-bg);border-radius:999px;padding:2px 10px}
#fonts-ge-reference .cl .cl-notice{width:auto;max-width:none;margin:0}
.cl-name .chip,.cl-row-name .chip{vertical-align:2px;margin-left:6px;font-size:.72rem;font-weight:600}