/* The home page hero on a phone, and on any screen up to 900 px wide where the still picture shows: the title is live
   type ABOVE the picture - two lines, wide, a size up - and the picture closes up over the rows that carried the
   painted title, so the scene, the sentence, the two buttons and the tools strip follow it without a hole. On a wide
   screen nothing here applies: the moving hero carries its own words and the heading stays out of sight. 14 October. */
@media (max-width: 900px) {

  /* 1. THE TITLE. The page's own heading, shown. Centred, the site's bold face, paper on black. The size is 7.61
        percent of the screen's width per em: that puts the longer line's words at about 85 percent of a phone's width
        (about 91 percent with the spinning crest that rides the end of that line) and keeps that share at every phone
        width (the words scale with the screen, so the two lines never re-break); it is capped where the hero's frame
        stops growing, at 560 px. Two lines by construction: each line is its own no-wrap span. */
  /* 19 October, the owner's words "too big now on phone": the black over and under the title is trimmed - the hero's top
     padding 20 to 14 px, the title's bottom margin 18 to 12 px - so no black band over 24 px shows between the header and the
     picture, and the first screen keeps 12 px more for the line and the two buttons. */
  .a3-phone-page .hero-platform { padding-top: 14px; }
  .a3-phone-page .hero-platform .a3-hero-title {
    position: static !important;
    display: block;
    width: auto;
    max-width: 560px;
    height: auto;
    margin: 0 auto 12px;
    padding: 0 12px;
    box-sizing: border-box;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    border: 0;
    text-align: center;
    color: var(--paper, #f1f0eb);
    font-family: var(--serif, Arial, Helvetica, sans-serif);
    font-weight: 700;
    font-size: min(7.61vw, 2.66rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
  }
  .a3-phone-page .hero-platform .a3-hero-title .a3-hero-line {
    display: block;
    white-space: nowrap;
  }
  /* the company's name stays in the heading for a reader that lists headings, out of sight */
  .a3-phone-page .hero-platform .a3-hero-title .a3-hero-brand {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 2. THE PICTURE, CLOSED UP. The still's box ends at row 1570 of the picture's 2312 (the scene ends at row 1477,
        the painted title began at row 1626), so the title's rows are never drawn. The rows under the title - the
        sentence from row 1813, the two buttons from 1871, the tools strip to the end - are drawn right after it by the
        frame's own after-box, which shows the bottom 536 rows of the same picture at the same width (the 1120 file on
        a 2x or 3x phone, the 560 file at 1x; the jpg where image-set is not understood). The frame's height is the two
        boxes together, so the two tap targets over the buttons are placed against that height. The picture files are
        untouched: this is the same picture, with one band of black rows left out. */
  .a3-phone-page .hero-platform .hp-still {
    overflow: hidden;
    aspect-ratio: 1120 / 1570;
  }
  .a3-phone-page .hero-platform .hp-frame::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1120 / 536;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-image: url("../img/home/hero-platform-phone-1120.jpg");
    background-image: -webkit-image-set(url("../img/home/hero-platform-phone-560.webp") 1x, url("../img/home/hero-platform-phone-1120.webp") 2x);
    background-image: image-set(url("../img/home/hero-platform-phone-560.webp") 1x, url("../img/home/hero-platform-phone-1120.webp") 2x);
  }
}