/* Responsive layouts */
@media (max-width: 1100px) {
    .wrap { width: calc(100% - 40px); }
    .main-nav { overflow-x: auto; justify-content: flex-start; gap: 24px; }
    .comic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-copy { padding: 25px 25px 62px; }
    .hero-art { min-height: 390px; }
    .hero-slide { grid-template-columns: 50% 50%; }
    .rank-layout { gap: 24px; }
}
@media (max-width: 800px) {
    .comic-grid, .comic-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-slide { grid-template-columns: 1fr; }
    .hero-art { grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; max-height: 330px; }
    .hero-copy { padding: 24px 24px 64px; }
    .hero-summary { -webkit-line-clamp: 2; }
    .rank-layout { grid-template-columns: 1fr; }
    .rank-intro h2 { max-width: none; }
    .detail-intro { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 22px; }
    .facts { grid-template-columns: 1fr; }
    .horizontal .comic-card { grid-template-columns: 100px minmax(0, 1fr); }
    .horizontal .card-body { padding: 12px; }
    .horizontal .summary { display: none; }
    .footer-grid { grid-template-columns: 1.5fr 1fr; }
    .footer-grid nav:last-child { grid-column: 1 / -1; display: flex; }
    .chapter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .wrap { width: calc(100% - 28px); }
    .header-top { min-height: 72px; gap: 12px; }
    .brand img { width: 158px; height: auto; }
    .brand-note, .intro-note { display: none; }
    .main-nav { gap: 20px; }
    .main-nav a { padding: 12px 0; }
    .home-intro { margin: 26px 0 20px; }
    .hero-copy h2 { font-size: 31px; }
    .hero-copy { padding: 22px 20px 62px; }
    .is-ready .slider-controls { left: 20px; }
    .hero-meta { font-size: 13px; }
    .shelf { margin-top: 34px; }
    h2 { font-size: 22px; }
    .section-head { gap: 12px; align-items: flex-start; margin-bottom: 17px; }
    .section-head p { font-size: 13px; }
    .comic-grid, .comic-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .card-body { padding: 12px; }
    .card-body h3 { font-size: 16px; height: 48px; }
    .card-body .summary { font-size: 13px; height: 45px; }
    .horizontal { grid-template-columns: 1fr !important; }
    .horizontal .comic-card { grid-template-columns: 118px minmax(0, 1fr); }
    .horizontal .cover { min-height: 185px; }
    .horizontal .summary { display: -webkit-box; }
    .rank-layout { padding: 20px; }
    .rank-intro h2 { font-size: 27px; }
    .rank-item { gap: 10px; }
    .rank-number { min-width: 30px; font-size: 24px; }
    .mobile-panel { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
    .mobile-panel > img { width: 90px; height: 90px; }
    .mobile-panel h2 { font-size: 26px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-grid nav:last-child { grid-column: auto; flex-wrap: wrap; }
    .category-feature { grid-template-columns: 90px minmax(0, 1fr); padding: 16px; gap: 16px; }
    .category-feature h2 { font-size: 21px; }
    .category-feature p:not(.eyebrow) { font-size: 14px; }
    .category-feature .button { padding: 9px 12px; }
    .filter-bar { gap: 12px; }
    .filter-bar label { font-size: 14px; gap: 8px; }
    .filter-bar span { margin-left: 0; }
    .detail-intro { grid-template-columns: 1fr; padding: 20px; }
    .detail-intro > img { max-width: 180px; }
    .facts { grid-template-columns: 1fr; }
    .chapter-grid { grid-template-columns: 1fr; }
    .gallery { gap: 12px; }
    .button { padding: 10px 15px; }
}