/* 手机不是把电脑版缩小，而是重新安排阅读顺序：头像 → 一句话 → 服务 → 案例。 */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  .site-header { position: sticky; top: 0; }

  /* 首屏：人物先出现，标题在下方完整阅读，避免相互遮挡。 */
  .hero-scene.hero-sac { height: 750px; min-height: 750px; }
  .hero-sac .hero-meta { top: 18px; }
  .hero-sac .hero-meta span:first-child { font-size: 9px; }
  .hero-sac .hero-art {
    left: 50%; top: 70px; width: 318px; height: 390px;
    opacity: 1; transform: translateX(-50%) !important;
  }
  .hero-sac .hero-copy {
    left: 0; right: auto; bottom: 34px; width: 100%;
    transform: none !important;
  }
  .hero-sac .hero-copy > p { font-size: 9px; letter-spacing: .075em; }
  .hero-sac .hero-copy h1 { margin: 12px 0 15px; font-size: 48px; line-height: .91; letter-spacing: -.09em; }
  .hero-sac .hero-copy .kinetic-line:first-child .kinetic-inner { letter-spacing: -.095em; }
  .hero-sac .hero-scroll { margin-top: 0; font-size: 12px; }

  /* 自我介绍：文字变得易读，保留重点而不堆成大字海报。 */
  .manifest { padding: 68px 0 52px; }
  .manifest-top > p:last-child { margin-top: 20px; font-size: 14px; line-height: 1.78; }
  .manifest h2 { margin: 45px 0 42px; font-size: 48px; line-height: .98; }
  .manifest-bottom { font-size: 12px; line-height: 1.8; }
  .manifest-bottom span + span { margin-top: 15px; }

  /* 所有选择按钮保持可点、可横向滑动，不挤成一团。 */
  .media-skills, .detail-tabs, .software-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .media-skills::-webkit-scrollbar, .detail-tabs::-webkit-scrollbar, .software-tabs::-webkit-scrollbar { display: none; }
  .media-skills button, .detail-tabs button { flex: 0 0 auto; }

  /* 案例在手机上一张一张看，标题和封面不会被压得太小。 */
  .works { padding: 72px 0; }
  .work-grid { grid-template-columns: 1fr; gap: 15px; }
  .work, .feature-film, .landscape-film, .visual-work { grid-column: span 1; min-height: 330px; }
  .feature-film, .landscape-film { min-height: 300px; }
  .work-copy { left: 16px; bottom: 15px; }
  .work-copy h3 { font-size: 19px; }
  .work-copy p { font-size: 11px; }
  .play { width: 36px; height: 36px; top: 13px; right: 13px; }

  /* 服务和工具卡片改为一列，减少视觉噪声与误触。 */
  .three-fields { padding-bottom: 58px; }
  .field { height: 238px; padding: 19px; }
  .field h3 { font-size: 28px; }
  .field > span { left: 19px; bottom: 19px; max-width: 72%; }
  .field > b { right: 19px; bottom: 19px; }
  .builds, .service-band { padding: 72px 0; }
  .tool { min-height: 345px; }
  .tool-info h3 { font-size: 32px; margin-top: 31px; }
  .resume-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .resume-gallery a { min-height: 235px; }
  .resume-gallery a:last-child { grid-column: span 2; }

  .contact { padding: 72px 0 30px; }
  .contact h2 { font-size: 54px; }
}

@media (max-width: 390px) {
  .hero-scene.hero-sac { height: 710px; min-height: 710px; }
  .hero-sac .hero-art { width: 292px; height: 355px; top: 68px; }
  .hero-sac .hero-copy h1 { font-size: 43px; }
  .manifest h2 { font-size: 44px; }
}