@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-recommendations { align-self: auto; }
  .featured-grid, .card-grid, .museum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-panel { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .museum-region { grid-template-columns: 1fr; gap: 14px; }
  .museum-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .museum-region-head { position: static; }
  .split-section, .contact-layout { grid-template-columns: 1fr; }
  .calendar-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-cell:nth-child(7n) { border-right: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .site-header { min-height: 72px; padding: 0 20px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; }
  .hero { min-height: 620px; padding: 82px 20px; }
  .hero-home { align-items: center; }
  .section, .page-hero { padding-left: 20px; padding-right: 20px; }
  .featured-grid, .card-grid, .museum-grid, .notice-list { grid-template-columns: 1fr; }
  .museum-list { grid-template-columns: 1fr; }
  .museum-list-item { padding: 16px 0; }
  .museum-list-item dl div { grid-template-columns: 76px minmax(0, 1fr); }
  .section-head { align-items: start; flex-direction: column; }
  .art-card img, .museum-card img { height: 220px; }
  .detail-panel { padding: 18px; }
  .detail-media img { min-height: 260px; }
  .detail-info div { grid-template-columns: 84px minmax(0, 1fr); }
  .calendar-shell { grid-template-columns: 1fr; }
  .site-footer { padding: 24px 20px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .stat-panel div, .feature-list div { flex-direction: column; gap: 4px; }
}

@media (max-width: 420px) {
  .hero-actions, .filter-bar, .tabs { flex-direction: column; align-items: stretch; }
  .btn, .chip, .tab { width: 100%; }
  .hero h1, .page-hero h1 { font-size: 42px; }
}