@font-face { font-family: Poppins; src: url('../fonts/poppins/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/poppins/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

.release-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; font-family: Poppins, Arial, sans-serif; }
.release-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-width: 0; min-height: 184px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.release-art { position: relative; display: block; min-height: 184px; overflow: hidden; }
.release-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.release-cover-fallback { display: grid; height: 100%; min-height: 184px; place-items: center; background: var(--line); color: var(--muted); }
.release-body { min-width: 0; padding: 14px 12px; }
.release-title { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.release-title a { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.release-body ol { list-style: none; padding: 0; margin: 0; }
.release-body li + li { border-top: 1px solid var(--line); }
.release-chapter { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; padding: 6px 0; font-size: 12px; line-height: 1.5; }
.release-chapter-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.release-chapter-label > span:not(.sr-only) { white-space: nowrap; }
.release-stamp { flex: none; color: var(--muted); font-size: 11px; white-space: nowrap; }
.release-free-badge { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; line-height: 1.4; }
.release-card a:focus-visible { outline-offset: -2px; }

@media (max-width: 1100px) {
    .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .release-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .release-card { grid-template-columns: 128px minmax(0, 1fr); }
}