/* Approved desktop hero (wall-only repair v4). The aspect-ratio floor keeps the 13-inch iPad landscape hero (1376×1032) on its approved tablet framing. */
@media (min-width: 1300px) and (min-aspect-ratio: 7/5) {
  .hero .hero-image { transform: none; object-position: center center; }
  .hero h1 { left: 54%; font-size: 20px; font-weight: 500; color: #171815; }
  /* Match fourteen-inch's 104px roles against its 1117px-tall artwork. */
  .hero .roles { font-size: max(5.12613vw, 9.31065svh); }
  .hero-name { display: inline-block; transition: color .22s ease, transform .22s ease; }
  .hero-name:hover { color: #234b74; transform: translateX(7px); }
}

/* Standard also uses the existing 48px-header framing at this width. */
@media (min-width: 1300px) and (max-width: 1450px) and (min-height: 601px) and (min-aspect-ratio: 7/5) {
  .hero .roles { font-size: max(5.12613vw, calc(9.31065svh - 4.46911px)); }
}

@media (min-width: 1300px) and (max-width: 1699px) and (min-aspect-ratio: 7/5) {
  .hero .roles { left: 12%; bottom: 290px; }
  .hero h1 { top: 80px; }
}

@media (min-width: 1700px) and (min-aspect-ratio: 7/5) {
  .hero .hero-image { object-position: center 72%; }
  .hero .roles { left: 12%; bottom: 35.7%; }
  /* Match Standard's 20px greeting against the artwork's cover scale:
     1860x1024 image in a 1440x900 hero. Taller and wider frames both count. */
  .hero h1 { top: 10%; font-size: max(1.22342vw, 2.22222svh); }
}

/* Keep the crown visible when browser chrome makes desktop wider than the artwork. */
@media (min-width: 1300px) and (min-aspect-ratio: 1860/1024) {
  .hero {
    min-height: calc(100vw * 1024 / 1860);
    top: min(0px, calc(100svh - 100vw * 1024 / 1860));
  }
  .hero .hero-image { object-position: center top; }
}