/* The hero's phone picture: the Home still on the phone, the adventure's photo and two friends' stickers tucked
   behind its edges, and Caraka in front, looking up at it. One widget for the homepage and every landing look: its
   markup comes from landing/hero-phone.html (build_landing.py pours it into each page), and this is its structure and
   its layering. A page or look sets --hp-w (the widget's width, 520px if not; on the widget or anything round it) and
   adds its own dressing: the photo's frame and caption, tape, pins, shadows (.hp-deco are two spare bits on the photo
   and on the phone for that). Everything sits on a 520 x 660 grid, in --hp-u. */
.hero-phone { --hp-u: calc(var(--hp-w, 520px) / 520); position: relative; width: var(--hp-w, 520px); height: calc(660 * var(--hp-u)); }
.hero-phone > * { position: absolute; margin: 0; }
.hero-phone img { display: block; max-width: none; }
/* behind the phone, peeking out from under its edges: the photo's top corner on the left (its caption clear), a
   friend's sticker high on the right and another low on the right, their words clear (the low one tilts left: its
   words run the sticker's whole width since the app's 10-17 redraw, and tilted right the phone hid its Q) */
.hero-phone .hp-photo { z-index: 1; left: calc(8 * var(--hp-u)); top: calc(70 * var(--hp-u)); width: calc(150 * var(--hp-u)); padding: calc(8 * var(--hp-u)) calc(8 * var(--hp-u)) 0; rotate: 6deg; transform-origin: 50% 0; }
.hero-phone .hp-photo img { width: 100%; height: auto; aspect-ratio: 1; }
.hero-phone .hp-photo figcaption { padding: calc(6 * var(--hp-u)) 0 calc(9 * var(--hp-u)); text-align: center; font-size: calc(12.5 * var(--hp-u)); line-height: 1.2; white-space: nowrap; }
.hero-phone .hp-sticker { z-index: 1; height: auto; }
.hero-phone .hp-s1 { left: calc(392 * var(--hp-u)); top: calc(100 * var(--hp-u)); width: calc(128 * var(--hp-u)); rotate: -9deg; }
.hero-phone .hp-s2 { left: calc(402 * var(--hp-u)); top: calc(318 * var(--hp-u)); width: calc(122 * var(--hp-u)); rotate: -7deg; }
/* the phone */
.hero-phone .hp-phone { z-index: 2; left: calc(150 * var(--hp-u)); top: calc(40 * var(--hp-u)); width: calc(260 * var(--hp-u)); }
.hero-phone .hp-phone > img { width: 100%; height: auto; }
/* in front: Caraka (her feet at 602, 58 units up from the foot) */
.hero-phone .hp-caraka { z-index: 3; left: calc(-14 * var(--hp-u)); top: calc(282 * var(--hp-u)); width: auto; height: calc(320 * var(--hp-u)); }
.hero-phone .hp-deco { position: absolute; display: block; pointer-events: none; }