@media (max-width: 1000px) {
    .nav {
        flex-wrap: wrap;
    }
    .nav a {
        padding-inline: 8px;
        font-size: 14px;
    }
    .hero-copy {
        padding: 26px;
    }
    .hero-visual {
        min-height: 320px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature .cover {
        aspect-ratio: 16 / 9;
    }
    .updates-rank {
        grid-template-columns: 1.3fr 1fr;
        gap: 22px;
    }
    .timeline {
        grid-template-columns: 1fr;
    }
    .shorts-band .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .shorts-band .cover {
        aspect-ratio: 4 / 3;
    }
    .categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .anime-layout {
        grid-template-columns: 1fr 1.4fr;
    }
    .topic-copy {
        padding: 15px;
    }
    .detail-intro {
        gap: 22px;
    }
    .detail-intro h1 {
        font-size: 28px;
    }
}
@media (max-width: 720px) {
    .wrap {
        width: calc(100% - 32px);
    }
    .masthead {
        padding-block: 14px;
    }
    .brand {
        font-size: 20px;
    }
    .brand img {
        width: 34px;
        height: 34px;
    }
    .header-note {
        display: none;
    }
    .js .menu-toggle {
        display: block;
    }
    .nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .js .nav:not(.is-open) {
        display: none;
    }
    .nav a {
        justify-content: center;
        font-size: 14px;
    }
    .hero {
        grid-template-columns: 1fr;
        margin-top: 18px;
        border-radius: 14px;
    }
    .hero-copy {
        padding: 26px 22px;
    }
    .hero h1 {
        font-size: 32px;
    }
    .hero p {
        margin-block: 12px 18px;
    }
    .hero-visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .hero-caption {
        left: 20px;
        bottom: 18px;
    }
    .hero-caption h2 {
        font-size: 25px;
    }
    .hero-caption p {
        margin: 0;
        font-size: 12px;
    }
    .quickbar {
        flex-wrap: wrap;
        gap: 8px 18px;
        font-size: 12px;
    }
    .section {
        margin-block: 32px;
    }
    h2 {
        font-size: 22px;
    }
    .section-head {
        gap: 10px;
    }
    .section-head p {
        font-size: 12px;
    }
    .more {
        font-size: 12px;
    }
    .grid, .channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }
    .card h3 {
        font-size: 15px;
    }
    .card p {
        font-size: 13px;
    }
    .meta {
        gap: 3px 9px;
    }
    .feature {
        gap: 15px;
        padding: 12px;
        grid-template-columns: 42% 1fr;
    }
    .feature h3 {
        font-size: 17px;
    }
    .feature .cover {
        aspect-ratio: 4 / 3;
    }
    .feature p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
    }
    .updates-rank {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .timeline {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .timeline-item {
        gap: 10px;
    }
    .timeline-item h3 {
        font-size: 15px;
    }
    .category-tile {
        padding: 15px 12px;
        grid-template-columns: 25px 1fr;
    }
    .category-tile .icon {
        font-size: 24px;
    }
    .category-tile h3 {
        font-size: 16px;
    }
    .shorts-band {
        padding: 20px 16px;
    }
    .shorts-band .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shorts-band .cover {
        aspect-ratio: 3 / 4;
    }
    .anime-layout {
        grid-template-columns: 1fr;
    }
    .anime-lead {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    .anime-lead .cover {
        height: 100%;
    }
    .anime-lead .copy {
        padding: 16px;
    }
    .anime-lead h3 {
        font-size: 19px;
    }
    .compact-list {
        gap: 18px;
    }
    .topics {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .topic-card {
        display: grid;
        grid-template-columns: 38% 1fr;
    }
    .topic-card .cover {
        height: 100%;
    }
    .topic-copy p {
        font-size: 13px;
    }
    .editor-pick {
        grid-template-columns: 1fr;
    }
    .editor-pick .cover {
        aspect-ratio: 16 / 9;
    }
    .editor-pick .copy {
        padding: 22px;
    }
    .about-strip {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .subscribe {
        padding: 23px;
        gap: 15px;
    }
    .subscribe img {
        width: 62px;
        height: 62px;
    }
    .footer-main {
        flex-direction: column;
        gap: 20px;
    }
    .footer-links {
        justify-content: flex-start;
    }
    .copyright {
        flex-direction: column;
        gap: 5px;
    }
    .channel-head {
        padding: 22px;
    }
    .channel-head p {
        font-size: 14px;
    }
    .detail-intro, .article-layout {
        grid-template-columns: 1fr;
    }
    .detail-intro h1 {
        font-size: 28px;
    }
    .prose {
        padding: 20px;
    }
    .scene-grid {
        grid-template-columns: 1fr;
    }
    .controls {
        flex-wrap: wrap;
        gap: 7px;
        padding: 7px;
    }
    .controls .seek {
        flex-basis: 100%;
        order: -1;
    }
    .controls .volume {
        width: 45px;
    }
    .player-screen > button {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }
    .player-caption {
        bottom: 5px;
        padding: 3px 8px;
        font-size: 12px;
    }
    .player-label {
        top: 8px;
        left: 8px;
        font-size: 12px;
    }
    .archive-list {
        grid-template-columns: 1fr;
    }
    .back-top {
        bottom: 12px;
        right: 12px;
    }
}
@media (max-width: 360px) {
    .brand small {
        display: none;
    }
    .masthead {
        gap: 12px;
    }
    .timeline {
        grid-template-columns: 1fr;
    }
    .subscribe img {
        display: none;
    }
    .controls {
        font-size: 12px;
        gap: 3px;
    }
    .controls button {
        padding-inline: 7px;
    }
}