/* Viewport adaptations preserve the source template's final cascade. */
@media (max-height: 780px) and (min-width: 768px) {
  .page { grid-template-rows: 72px minmax(0, 1fr); padding-bottom: 24px; }
  .copy p { font-size: 17px; margin-top: 23px; }
  .art { max-height: 510px; }
}
@media (max-width: 767px) {
  .page {
    min-height: 700px;
    padding: 0 26px 24px;
    grid-template-rows: 65px minmax(0, 1fr);
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
  }
  .copy { display: block; order: 1; max-width: none; }
  .copy h1 { font-size: 38px; padding-top: 0; }
  .copy h1 br { display: block; }
  .copy p { font-size: 15px; margin-top: 20px; padding-bottom: 0; opacity: .9; }
  .art { order: 2; height: 265px; flex: none; max-height: none; }
  .art img { max-height: 100%; }
}
@media (max-width: 360px) {
  .page { padding-left: 22px; padding-right: 22px; }
  .copy h1 { font-size: 34px; }
  .copy p { font-size: 14px; }
  .art { height: 235px; }
}
@media (max-width: 767px) and (max-height: 740px) {
  .page { min-height: 660px; grid-template-rows: 58px minmax(0, 1fr); }
  .copy h1 { font-size: 34px; }
  .copy p { font-size: 14px; margin-top: 16px; }
  .art { height: 210px; }
}