@media (max-width: 1050px) {
    .hero {
    grid-template-columns: 1fr 1fr;
}
    .hero-copy {
    padding: 26px;
}
    .hero h1 {
    font-size: 33px;
}
    .anime-layout {
    grid-template-columns: 180px 1fr;
    gap: 18px;
}
    .anime-intro {
    padding: 20px;
}
    .short-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}
    .short-grid .cover {
    aspect-ratio: 16 / 9;
}
    .nav a {
    font-size: 13px;
    padding-left: 3px;
    padding-right: 3px;
}
    .nav a span {
    display: none;
}
    .documentary-grid > a {
    grid-template-columns: 1fr;
}
    .documentary-grid .cover {
    max-height: 215px;
}
    .heat {
    font-size: 12px;
}
}
@media (max-width: 760px) {
    .container {
    width: calc(100% - 32px);
}
    .topbar {
    padding: 16px 0;
    gap: 10px;
}
    .brand {
    font-size: 22px;
}
    .brand img {
    width: 36px;
    height: 36px;
}
    .brand small {
    font-size: 12px;
    letter-spacing: 0;
}
    .header-pick {
    display: none;
}
    .nav {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 0;
    padding: 0 0 8px;
}
    .nav a {
    text-align: center;
    padding: 9px 0;
    font-size: 12px;
    min-height: 42px;
}
    .hero {
    margin: 20px 0 38px;
    grid-template-columns: 1fr;
}
    .hero-copy {
    padding: 27px;
}
    .hero-feature {
    min-height: 250px;
}
    .hero-overlay {
    bottom: 23px;
    left: 25px;
}
    .hero-overlay h2 {
    font-size: 27px;
}
    .hero-feature .play-icon {
    top: 20%;
}
    .hero h1 {
    font-size: 35px;
}
    .hero-note {
    margin-top: 18px;
}
    .section {
    margin-bottom: 40px;
}
    .section-heading {
    margin-bottom: 18px;
    gap: 8px;
}
    h2 {
    font-size: 23px;
}
    .section-heading .text-link {
    white-space: nowrap;
    font-size: 12px;
}
    .eyebrow {
    font-size: 12px;
    letter-spacing: 0;
}
    .grid, .catalog-grid, .categories {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px 14px;
}
    .card-copy h3 {
    font-size: 16px;
    min-height: 48px;
}
    .card-copy p {
    font-size: 13px;
    min-height: 45px;
}
    .card-copy .meta {
    font-size: 12px;
}
    .category {
    padding: 17px;
}
    .category p {
    min-height: 46px;
}
    .timeline, .split-feature, .ranking-columns, .category-feature {
    grid-template-columns: 1fr;
    gap: 20px;
}
    .timeline {
    gap: 0;
}
    .tinted {
    padding: 20px;
}
    .short-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px 14px;
}
    .short-grid .cover {
    aspect-ratio: 3/4;
}
    .anime-layout {
    grid-template-columns: 1fr;
}
    .anime-intro {
    padding: 22px;
}
    .anime-intro > span {
    float: right;
}
    .anime-intro h3 br {
    display: none;
}
    .anime-intro h3 {
    font-size: 23px;
}
    .anime-layout .grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
    .anime-layout .cover {
    aspect-ratio: 16/9;
}
    .documentary-grid {
    gap: 20px 14px;
}
    .documentary-grid h3 {
    font-size: 16px;
}
    .topics {
    grid-template-columns: 1fr;
    gap: 20px;
}
    .topics article {
    display: flow-root;
}
    .topics .cover {
    aspect-ratio: 16/7;
}
    .about {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 20px;
}
    .brand-monogram {
    width: 75px;
    height: 75px;
    border-radius: 16px;
    font-size: 43px;
}
    .brand-monogram span {
    font-size: 12px;
    right: 10px;
    bottom: 7px;
}
    .subscribe {
    padding: 25px;
    gap: 20px;
    align-items: start;
    flex-direction: column;
}
    .subscribe-brand {
    width: 72px;
    height: 72px;
    font-size: 40px;
    border-radius: 16px;
}
    .subscribe-brand span {
    font-size: 12px;
    right: 8px;
    bottom: 7px;
}
    .subscribe-note {
    display: block;
    margin: 12px 0 0;
}
    .footer-grid {
    flex-direction: column;
    gap: 20px;
}
    .footer nav {
    gap: 13px;
    font-size: 12px;
}
    .category-hero {
    padding: 20px;
    gap: 15px;
    align-items: start;
}
    .category-hero .category-icon {
    font-size: 32px;
}
    .category-hero h1, .detail-heading h1 {
    font-size: 27px;
}
    .category-hero p {
    font-size: 14px;
}
    .scene-grid, .highlights {
    grid-template-columns: 1fr;
    gap: 22px;
}
    .scene-grid figure {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 14px;
}
    .scene-grid figcaption {
    padding: 0;
}
    .volume {
    display: none;
}
    .player-controls {
    gap: 8px;
    padding: 8px;
}
    .player-controls button {
    min-width: 34px;
}
    .player-label {
    top: 10px;
    left: 10px;
    font-size: 12px;
}
    .central-play {
    top: 35%;
    width: 48px;
    height: 48px;
    left: calc(50% - 24px);
    font-size: 19px;
}
    .player-caption {
    padding: 12px;
    font-size: 13px;
}
    .prev-next {
    flex-direction: column;
    gap: 16px;
}
}