body { background: var(--blog-black); }

.collection-hero {
    max-width: 900px;
    padding-top: 76px;
    padding-bottom: 42px;
    color: var(--dim-white);
    font-family: 'Didact Gothic', Arial, sans-serif;
}
.collection-kicker {
    color: var(--blog-yellow);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 14px;
}
.collection-hero h1 { margin: 8px 0 14px; font-size: clamp(42px, 7vw, 72px); font-weight: 300; }
.collection-hero p { max-width: 720px; font-size: 21px; line-height: 1.65; opacity: .84; }
.collection-count { margin-top: 18px; color: var(--blog-yellow); }

.collection-list { max-width: 900px; padding-bottom: 80px; }
.collection-row {
    display: grid;
    grid-template-columns: 72px 1fr 36px;
    gap: 22px;
    align-items: center;
    padding: 26px 4px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: var(--dim-white);
    text-decoration: none;
    font-family: 'Didact Gothic', Arial, sans-serif;
}
.collection-row:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.collection-row:hover { color: var(--dim-white); border-top-color: rgba(196,155,52,.75); }
.collection-number { color: var(--blog-yellow); font-size: 25px; font-variant-numeric: tabular-nums; }
.collection-row h2 { margin: 0 0 7px; font-size: 28px; font-weight: 400; }
.collection-row p { margin: 0 0 9px; line-height: 1.55; opacity: .72; }
.collection-row small { opacity: .58; }
.collection-row .row-series { color: var(--blog-yellow); opacity: .9; display: block; margin-bottom: 5px; }
.collection-arrow { font-size: 26px; opacity: .55; transition: transform .18s ease; }
.collection-row:hover .collection-arrow { transform: translateX(5px); opacity: 1; color: var(--blog-yellow); }
.collection-empty { padding: 28px; border: 1px solid rgba(255,255,255,.12); color: var(--dim-white); opacity: .8; }

@media (max-width: 640px) {
    .collection-hero { padding-top: 44px; }
    .collection-row { grid-template-columns: 44px 1fr 22px; gap: 12px; padding: 22px 0; }
    .collection-row h2 { font-size: 23px; }
    .collection-row p { font-size: 16px; }
    .collection-number { font-size: 19px; }
}