/* The pearl, fixed. One object, his true form, the only colour on the site.
   He starts as the hero's full stop. As the hero's line scrolls away he takes his place on the right
   of the viewport and holds there while the page passes: the ink of section 3 floods around him, the
   rules end short of him, and when the footer's line rises to him he lands on it, rolls along it and
   shrinks back to the hero's stop, resting after the final e. pearl.js moves him; the sections only know
   his resting height (--pearl-y) and size (--pearl-d). On a phone there is no fixed pearl: only the
   hero's full stop and the footer's, the first and the last mark on the page. */
/* size and place: 96px with his left edge on the gutter line; where the margin is narrower (821–1231px) he
   shrinks with it and keeps 8px from the window edge, so he is never cut */
/* --pearl-x is his centre's distance from the window's right edge: centred in his lane (the gutter plus the 96px
   the measure leaves him) until the lane is wide enough for his left edge to sit on the gutter line (about 1424px
   wide), then on the gutter line. One continuous rule: no jump at any width */
/* --pearl-y: his rest, 64% down the window, not higher than 460px: on a laptop (a 1366×768 screen leaves the
   browser about 633px) the plan screen's horizon, which is his underside, stays high enough for the price under it.
   Never so low that he leaves the window (24px under him at the least); under 560px tall pearl.js does not run */
:root{--pearl-d:min(96px, calc(var(--gutter, 40px) + 16px));--pearl-y:round(min(max(64vh, 460px), calc(100vh - var(--pearl-d) / 2 - 24px)), 1px);
  --pearl-x:round(max(calc(var(--gutter, 40px) - var(--pearl-d) / 2), calc((var(--gutter, 40px) + 96px) / 2)), 1px)}
/* the sphere: the colour ring turns about the specular highlight, so its hub is under the highlight and never
   shows; --roll turns the colours when he rolls (the light stays where it is). One recipe for the fixed pearl
   and every static full stop, all in em, so they match at any size. The ring is a smooth periodic curve through the
   six colours in OKLab, sampled every 15° (the six hand stops alone bent the gradient at each stop, and at 2x the
   bends showed as creases running out from the highlight) */
.orb,.voyager,.s8stop,.pearl.d.stop{border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.96) 0 14%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.26) 0 8%, rgba(255,255,255,0) 26%),
    conic-gradient(from calc(200deg + var(--roll, 0deg)) at 34% 30%, #FF5C8A, #FF6C72, #FF8459, #FF9C3F, #FFB020, #FFC105, #FFD21C, #FFE038, #FFE94D, #DFE959, #AEE261, #74D86D, #35D07F, #00CC9E, #00C9C4, #00C3E7, #2AB8FF, #44A4FF, #5788FF, #686DFF, #7A5CFF, #975AEA, #BD5BCB, #E45AA8, #FF5C8A);
  box-shadow:inset 0 -.05em .08em rgba(14,14,12,.28), inset 0 .01em .02em rgba(255,255,255,.7), 0 .14em .3em -.1em rgba(14,14,12,.38);
  filter:saturate(1.12)}
/* the hero's static stop: its em is its own diameter, like the footer's */
.pearl.d.stop{font-size:calc(var(--mark, 96px) * .19)}
/* hidden until pearl.js has placed him on the hero's full stop; the static stop shows until then */
.voyager{position:fixed;left:0;top:0;z-index:50;pointer-events:none;width:96px;height:96px;font-size:96px;will-change:transform;transform-origin:center;visibility:hidden}
.voyager.placed{visibility:visible}
/* an invisible marker at his resting point, so the position can live in CSS (vh, gutter) and be read by script */
.pearl-home{position:fixed;top:var(--pearl-y);right:var(--pearl-x);width:0;height:0;pointer-events:none}
html.has-voyager .stop,html.has-voyager .s8stop{visibility:hidden}
/* the water around him (water.js): a small canvas under him, shown only over the ink; hidden with him while the
   answers stage holds his place */
.wake{position:fixed;left:0;top:0;z-index:49;pointer-events:none;will-change:transform;visibility:hidden}
.wake.on{visibility:visible}
html.pearl-handed .wake{visibility:hidden}