/* Homepage phone finishing layer. Desktop composition remains untouched. */

@media (max-width: 1020px) {
  #ipad-cursor {
    display: none !important;
  }

  html.has-ipad-cursor,
  html.has-ipad-cursor body,
  html.has-ipad-cursor a,
  html.has-ipad-cursor button,
  html.has-ipad-cursor summary {
    cursor: auto !important;
  }
}

@media (max-width: 820px) {
  .hero-grid {
    gap: 48px !important;
  }

  .portrait-wrap {
    width: min(70vw, 300px) !important;
    margin: 0 auto !important;
  }

  .portrait .fr {
    aspect-ratio: 4 / 4.65 !important;
  }

  .portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .journey {
    justify-content: center !important;
    margin-top: 24px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-bottom: 72px !important;
  }

  .hero-grid {
    gap: 42px !important;
  }

  .portrait-wrap {
    width: min(68vw, 286px) !important;
  }

  .portrait::before {
    inset: 9px -9px -9px 9px !important;
  }
}

/* Mobile legibility and touch: these ran at 12.8 to 13.1px at 390px, and the
   footer's standalone links were 24px tall against a 44px touch target. */
@media (max-width: 600px) {
  figure.said cite, figure.said cite b,
  aside.facts > div > span,
  footer.contact p.resp,
  .wrap > .foot > span {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  footer.contact a.lnk,
  .foot a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}