.chip[data-kind="comic"] { --chip: var(--grain); }
.comic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--s-5); }
.comic-card { height: 100%; align-content: start; }
.comic-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-thumb); background: var(--paper); }
.comic-note { margin-block: var(--s-5); max-width: 65ch; }
.comic-more { margin-top: var(--s-6); }
.comic-intro { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.comic-intro .lead { max-width: 60ch; }
.comic-title { font-size: clamp(1.75rem, 5vw, 3.5rem); line-height: 1.4; text-wrap: balance; }
.comic-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.comic-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-4); }
.comic-actions .btn { white-space: normal; text-align: center; }
.comic-viewer { position: relative; }
.comic-zoom { width: 22px; height: 22px; vertical-align: middle; accent-color: var(--ink); }
.comic-zoom-label { display: inline-flex; gap: var(--s-2); align-items: center; min-height: 48px; padding: var(--s-2); font-weight: 700; cursor: pointer; }
.comic-art-frame { overflow: auto; max-height: none; background: var(--card); border-radius: var(--r-thumb); margin-top: var(--s-3); }
.comic-art { width: 100%; max-width: 1024px; margin-inline: auto; }
.comic-zoom:checked ~ .comic-art-frame .comic-art { width: 1024px; max-width: none; }
.comic-scroll-note { color: var(--ink-muted); font-size: var(--fs-small); margin-top: var(--s-2); }
.comic-caption { margin-top: var(--s-4); color: var(--ink-muted); font-size: var(--fs-small); }
.comic-description { display: grid; gap: var(--s-4); margin-top: var(--s-7); max-width: 65ch; }
.comic-script { margin-top: var(--s-6); border-block: 1px solid var(--rule); padding-block: var(--s-4); }
.comic-script summary { cursor: pointer; font-weight: 700; min-height: 44px; }
.comic-script ol { list-style: decimal; padding-left: 2em; display: grid; gap: var(--s-3); margin-block: var(--s-4); }
.comic-related { margin-top: var(--s-7); }
.comic-related h2 { margin-bottom: var(--s-5); }
@media (min-width: 64rem) { .comic-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }