/* Keep the phone headline and its purpose together in the painting's sky.
   Explicitly grouping the amber phrase keeps a line break from falling on
   the Oxford spire when browser chrome shortens the viewport. */
@media(max-width:760px){
  html[data-edge] .hero .hero-copy{top:100px;width:88vw;max-width:600px}
  html[data-edge] .hero .hero-copy h1{font-size:clamp(34px,10vw,48px);line-height:1.04}
  html[data-edge] .hero .hero-copy p{font-size:clamp(22px,6.1vw,27px);line-height:1.35;margin-top:26px}
  html[data-edge] .hero .hero-copy p em{display:block}
}
/* The landscape phone gets enough painted sky above the city without
   borrowing the desktop headline scale. The page can still scroll normally. */
@media(min-width:761px) and (max-width:1000px) and (max-height:500px){
  html[data-edge] .hero{min-height:650px}
  html[data-edge] .hero .hero-copy{top:100px}
  html[data-edge] .hero .hero-copy h1{font-size:52px;line-height:1.04}
  html[data-edge] .hero .hero-copy p{font-size:23px;line-height:1.35;margin-top:26px}
}