@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .controls { grid-template-columns: 1fr; }
  .filters { padding-bottom: 2px; }
}

@media (max-width: 600px) {
  .shell { width: calc(100% - 20px); }
  .topbar { height: 56px; }
  .top-note { display: none; }

  .hero { padding: 22px 0 15px; grid-template-columns: 1fr; }
  .hero-stats { justify-self: start; gap: 8px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cover { aspect-ratio: 1.35/1; }
  .emblem { font-size: 29px; }
  .meta { padding: 7px; }
  .title { font-size: 11px; }

  .ad-slot { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ad-placeholder { align-self: stretch; text-align: center; }

  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}