.hero-art { position: absolute; z-index: -2; inset: 0; display: block; }
.hero-art .hero-scene { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modern-hero { background: #031225; }

@media (min-width: 1700px) {
  .modern-hero { height: min(820px, 35.57vw, calc(100svh - 200px)); }
}

@media (max-width: 640px) {
  .modern-hero { display: grid; grid-template-rows: auto minmax(150px, 1fr); height: min(700px, calc(100svh - 154px)); min-height: 500px; }
  .hero-content { grid-area: 1 / 1; padding-top: 24px; padding-bottom: 20px; }
  .hero-art { position: relative; grid-area: 2 / 1; inset: auto; width: 100%; height: 100%; min-height: 0; }
  .hero-art .hero-scene { object-position: center bottom; }
  .hero-photo-caption { grid-area: 2 / 1; align-self: end; z-index: 1; padding-block: 12px; }
  .modern-hero h1, html:not([lang^="zh"]) .modern-hero h1 { font-size: 40px; line-height: 1.1; margin-bottom: 14px; }
  .modern-hero h1 span, html:not([lang^="zh"]) .modern-hero h1 span { display: block; font-size: 27px; margin-top: 6px; }
  .hero-affiliation, html:not([lang^="zh"]) .hero-affiliation { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
  .hero-summary, html:not([lang^="zh"]) .hero-summary { max-width: none; font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
}

@media (max-width: 640px) and (max-height: 740px) {
  .modern-hero { min-height: 400px; grid-template-rows: auto minmax(0, 1fr); }
  .hero-content { padding-top: 18px; padding-bottom: 16px; }
  .modern-hero h1, html:not([lang^="zh"]) .modern-hero h1 { font-size: 32px; margin-bottom: 10px; }
  .modern-hero h1 span, html:not([lang^="zh"]) .modern-hero h1 span { display: inline; font-size: 23px; margin-top: 0; }
  .hero-affiliation, html:not([lang^="zh"]) .hero-affiliation { font-size: 13px; line-height: 1.45; margin-bottom: 10px; }
  .hero-summary, html:not([lang^="zh"]) .hero-summary { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .hero-cta .btn { min-height: 40px; font-size: 13px; padding-block: 8px; }
  .hero-cta { gap: 14px; }
  .hero-photo-caption { justify-content: flex-end; padding-block: 8px; }
  .hero-photo-caption > span { display: none; }
}