/* The pencil-to-screen reveal: a hand-drawn outline, a pencil wireframe of
   the screen, then a scribble that wipes it away (home.js). Shared by Onset,
   the apps collection and each app page. */
.chapter-phone {
  position: relative;
  justify-self: center;
  width: min(290px, 70vw);
  margin: 0;
}
.phone {
  position: relative;
  aspect-ratio: 736 / 1600;
  overflow: hidden;
  border-radius: 34px;
  background: var(--porcelain);
  box-shadow: 0 34px 60px -34px #15171c99;
}
.phone img,
.phone video,
.phone-sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.phone img,
.phone video {
  object-fit: cover;
}
.phone video {
  opacity: 0;
  transition: opacity 0.4s;
}
.phone video.is-playing {
  opacity: 1;
}
/* Blank paper until the pencil sketch is drawn, so the screen never shows
   before its sketch. */
.js .phone-sketch:not(.is-painted) {
  background: var(--porcelain);
}
.phone-sketch.is-done {
  display: none;
}
.phone-outline {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  overflow: visible;
  color: var(--pen);
  pointer-events: none;
}
/* Notes sit above the phone's corner and grow upward, so a second line
   never runs into the outline. */
.chapter-note {
  position: absolute;
  bottom: calc(100% + 18px);
  right: -18%;
  width: max-content;
  max-width: 13ch;
  font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.9rem);
  text-align: left;
  transform: rotate(5deg);
}