.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.topic-card {
    display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; overflow: hidden;
    transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.topic-card:hover { border-color: var(--ink); box-shadow: var(--shadow-pop); transform: translateY(-4px); }
.topic-cover {
    background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 800; letter-spacing: 3px; height: 150px; flex-shrink: 0;
    position: relative; overflow: hidden;
}
.topic-cover::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0);
    background-size: 20px 20px;
}
.topic-cover span { transition: transform .5s var(--ease); position: relative; z-index: 1; }
.topic-card:hover .topic-cover span { transform: scale(1.18) rotate(-2deg); }
.topic-info { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.topic-info h3 { font-size: 16.5px; font-weight: 800; line-height: 1.5; display: -webkit-box;-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;}
.topic-info p {
    font-size: 12.5px; color: var(--ink-2); line-height: 1.75; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-info .t-meta { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--num); }
@media (max-width: 1200px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .topic-grid { grid-template-columns: 1fr; }
    .topic-cover { height: 130px; }
}