/* 保留原有断点 */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 20px 14px 44px; }
  .hero-main, .hero-side, .timeline-card, .detail-card { padding: 18px; }
  .year-head { grid-template-columns: 1fr; }
  .heatmap-shell { grid-template-columns: 36px minmax(0,1fr); }
  .grid { grid-auto-columns: 12px; gap: 4px; }
  .cell { width: 12px; height: 12px; }
}

/* 额外的手机优化 */
@media (max-width: 980px) {
  .wrap {
    padding: 18px 12px 32px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .timeline-card,
  .detail-card,
  .hero-main,
  .hero-side {
    padding: 16px;
    border-radius: 18px;
  }

  .timeline-card {
    overflow: hidden;
  }

  .years {
    width: max-content;
    min-width: 100%;
  }

  .year-block {
    min-width: 760px;
  }

  .meta-pill,
  .toggle,
  .badge {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .kicker {
    font-size: 10px;
  }

  .section-title {
    font-size: 16px;
  }

  .lead,
  .section-note,
  .footnote {
    font-size: 12px;
  }

  .materials-heading,
  .material-meta,
  .show-sub,
  .tip-meta {
    font-size: 11px;
  }

  .show-title,
  .material-title,
  .tip-title {
    font-size: 13px;
  }
}

@media (hover: none), (pointer: coarse) {
  .tip {
    display: none !important;
  }

  .cell:hover,
  .material-item:hover {
    transform: none;
  }
}