/* The slideshow on its own, for an iframe on someone else's page.
   style.css does all the work; this only takes away the room the full
   page's title, install box and footer were holding, and gives it to the
   machine. */
html, body { height: 100%; }
/* A frame is a fixed box someone else chose, and this page is one
   composition. There is nothing below the fold to reach, so a scrollbar
   here would only be the slideshow admitting it does not fit. */
body { display: grid; align-content: center; overflow: hidden; }
main { width: 100%; }

.stage {
  /* The frame is the whole page here, so a machine may have all of it
     bar what sits under it — where index.html has to leave 21rem for the
     type above and the snippet below. That is the pager: a caption of a
     count, a title and a paragraph kept back under it (7.4rem, measured
     over the whole cast in style.css) after the 2.6rem it pulls back up
     through the track's 5.5rem shadow margin, and the link under that.
     So: 12.7rem, which leaves a little air too. */
  --w-desk: min(1080px, 90vw, (100vh - 12.7rem) * 1.6);
  padding-top: 0;
}

/* Where the slideshow came from, for anyone who meets it inside a frame
   with no other way out. It sits under the pager, in the small print the
   rest of the site uses, and stays out of the way until it is wanted. */
.from {
  display: block; margin: .25rem auto 0; padding-bottom: 1rem; width: max-content;
  color: var(--faint); text-decoration: none;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  transition: color .15s ease;
}
.from:hover { color: var(--ink); }

/* style.css hands a narrow window to the machine on the reasoning that a
   phone is tall and the page scrolls. A frame is neither: it is short and
   it does not scroll, so the height cap has to survive down here too. */
@media (max-width: 720px) {
  .stage {
    --w-desk: min(88vw, (100vh - 15.8rem) * 1.6);
    --h-phone: min(640px, 150vw, 100vh - 15rem);
  }
}
/* Narrower still, where style.css keeps another two lines back for a caption that wraps
   two or three times; the frame has to give those lines room as well. */
@media (max-width: 479px) {
  .stage {
    --w-desk: min(88vw, (100vh - 18.2rem) * 1.6);
    --h-phone: min(640px, 150vw, 100vh - 17.4rem);
  }
}