/* V57 Off the clock: single-column intro, then the fact cards.
   The floating objects now live on the cards themselves. */
.about-page .about-offclock-head { display: block; margin-bottom: clamp(28px, 4vw, 44px); }
.about-page .about-offclock-intro { max-width: 980px; }
.about-page .about-offclock-intro h2 { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.about-page .about-offclock-intro > p:last-child { max-width: 640px; margin: 0; }

/* Card stickers: gentle bob, offset per card so they never move in sync. */
.about-page .about-facts-scroll .about-fact-sticker {
  animation: about-sticker-bob var(--bob, 5.6s) ease-in-out var(--bob-delay, 0s) infinite alternate;
}
@keyframes about-sticker-bob {
  from { transform: translateY(0) rotate(var(--sticker-tilt, 5deg)); }
  to { transform: translateY(-7px) rotate(calc(var(--sticker-tilt, 5deg) + 2deg)); }
}
.about-fact:nth-child(2n) .about-fact-sticker { --bob: 6.4s; --bob-delay: -1.8s; }
.about-fact:nth-child(3n) .about-fact-sticker { --bob: 5.1s; --bob-delay: -3.2s; }

/* Two stickers on one card sit together in the corner. */
.about-fact-stickers {
  display: flex;
  align-self: flex-end;
  align-items: flex-end;
  gap: 4px;
  margin: 10px 0 auto auto;
}
.about-fact-stickers .about-fact-sticker { margin: 0; }
.about-fact-stickers .about-fact-sticker + .about-fact-sticker { --bob-delay: -2.6s; }

.about-fact-sticker-house {
  --sticker-w: 96px; --sticker-tilt: -5deg;
  /* white die-cut edge so the red line drawing reads on the sage card */
  filter: drop-shadow(1.5px 0 0 #fffaf5) drop-shadow(-1.5px 0 0 #fffaf5) drop-shadow(0 1.5px 0 #fffaf5) drop-shadow(0 -1.5px 0 #fffaf5) drop-shadow(0 8px 10px rgba(20,10,8,.25));
}
.about-fact-sticker-handled { --sticker-w: 74px; --sticker-tilt: 4deg; }
.about-fact-sticker-error { --sticker-w: 132px; --sticker-tilt: -5deg; }
.about-fact-stickers .about-fact-sticker-bore { --sticker-w: 104px; }
.about-fact-stickers .about-fact-sticker-can { --sticker-w: 50px; --sticker-tilt: -10deg; }
.about-fact-sticker-sundae { --sticker-w: 84px; --sticker-tilt: 6deg; }
.about-fact-stickers .about-fact-sticker-voyage { --sticker-w: 112px; }

/* The collage banner is now a still image rather than a scrolling strip. */
.about-page .about-offclock-collage-track {
  width: auto;
  justify-content: center;
  padding: 0 clamp(18px, 4vw, 48px);
  animation: none;
}
.about-page .about-offclock-collage-track img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}

/* V58 sticker clusters: three to five objects per card, overlapped like a collage. */
.about-page .about-fact-stickers .about-fact-sticker + .about-fact-sticker { margin-left: -12px; }
.about-page .about-fact-stickers .about-fact-sticker:nth-child(3n) { --bob-delay: -4.1s; }
.about-page .about-fact-stickers-center {
  align-self: center;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.about-page .about-fact-stickers-travel { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; row-gap: 0; }

/* white die-cut edge for line art that would disappear on a dark card */
.about-fact-sticker-quote,
.about-fact-sticker-palm,
.about-fact-sticker-umbrella,
.about-fact-sticker-starburst {
  filter: drop-shadow(1.5px 0 0 #fffaf5) drop-shadow(-1.5px 0 0 #fffaf5) drop-shadow(0 1.5px 0 #fffaf5) drop-shadow(0 -1.5px 0 #fffaf5) drop-shadow(0 8px 10px rgba(20,10,8,.25));
}

/* Home life */
.about-page .about-fact-stickers .about-fact-sticker-cream { --sticker-w: 76px; --sticker-tilt: -5deg; }
.about-page .about-fact-stickers .about-fact-sticker-keys { --sticker-w: 82px; --sticker-tilt: 10deg; align-self: flex-start; }
.about-page .about-fact-stickers .about-fact-sticker-croissant { --sticker-w: 86px; --sticker-tilt: -4deg; }

/* The honest mix: crying meme centered, quote marks tucked on its corner */
.about-page .about-fact-stickers .about-fact-sticker-crying { --sticker-w: 104px; }
.about-page .about-fact-stickers .about-fact-sticker-quote { --sticker-w: 52px; --sticker-tilt: -8deg; align-self: flex-start; margin-left: -18px; }

/* Research habits */
.about-page .about-fact-stickers .about-fact-sticker-clip { --sticker-w: 50px; --sticker-tilt: 12deg; align-self: flex-start; }
.about-page .about-fact-stickers .about-fact-sticker-zebra { --sticker-w: 96px; --sticker-tilt: -5deg; }
.about-page .about-fact-stickers .about-fact-sticker-cursor { --sticker-w: 54px; --sticker-tilt: 4deg; margin-left: -26px; align-self: flex-end; }

/* Details matter: Miranda centered between the fig and the lemon */
.about-page .about-fact-stickers .about-fact-sticker-fig { --sticker-w: 66px; --sticker-tilt: -10deg; align-self: flex-end; }
.about-page .about-fact-stickers .about-fact-sticker-smile { --sticker-w: 100px; --sticker-tilt: -4deg; position: relative; z-index: 1; }
.about-page .about-fact-stickers .about-fact-sticker-lemon { --sticker-w: 58px; --sticker-tilt: 12deg; align-self: flex-start; }

/* The outsourcer: System Error where the wine was, wine pours in from the card's left edge */
.about-page .about-facts-scroll .about-fact:nth-child(6) { overflow: hidden; }
.about-page .about-fact-stickers-outsource {
  display: grid;
  align-self: stretch;
  width: auto;
  margin: 4px 0 auto -36px;
}
.about-page .about-fact-stickers-outsource .about-fact-sticker + .about-fact-sticker { margin-left: 0; }
.about-page .about-fact-stickers .about-fact-sticker-handled { --sticker-w: 84px; --sticker-tilt: 0deg; grid-row: 2; justify-self: start; margin-top: -14px; }
.about-page .about-fact-stickers .about-fact-sticker-error { --sticker-w: 132px; --sticker-tilt: -5deg; grid-row: 1; justify-self: end; }

/* Accurately annoying: Miranda centered, the "!" and the arrow around her */
.about-page .about-fact-stickers .about-fact-sticker-bang { --sticker-w: 34px; --sticker-tilt: -10deg; align-self: flex-start; }
.about-page .about-fact-stickers .about-fact-sticker-bore { --sticker-w: 104px; --sticker-tilt: -4deg; }
.about-page .about-fact-stickers .about-fact-sticker-arrow { --sticker-w: 72px; --sticker-tilt: 8deg; align-self: flex-end; margin-left: -20px; }

/* Day one, mom mode: the constellation stays, with a small starburst beside it */
.about-fact-sticker-starburst { --sticker-w: 44px; --sticker-tilt: 10deg; margin: 70px auto auto 0; align-self: flex-start; }

/* Kitchen credentials */
.about-page .about-fact-stickers .about-fact-sticker-can { --sticker-w: 40px; --sticker-tilt: -10deg; }
.about-page .about-fact-stickers .about-fact-sticker-sundae { --sticker-w: 74px; --sticker-tilt: 6deg; }
.about-page .about-fact-stickers .about-fact-sticker-pretzel { --sticker-w: 68px; --sticker-tilt: -8deg; }

/* The long-term goal */
.about-page .about-fact-stickers .about-fact-sticker-palm { --sticker-w: 58px; --sticker-tilt: -4deg; }
.about-page .about-fact-stickers .about-fact-sticker-adventures { --sticker-w: 70px; --sticker-tilt: -6deg; }
.about-page .about-fact-stickers .about-fact-sticker-umbrella { --sticker-w: 54px; --sticker-tilt: 6deg; }
.about-page .about-fact-stickers .about-fact-sticker-voyage { --sticker-w: 80px; --sticker-tilt: 4deg; }
.about-page .about-fact-stickers .about-fact-sticker-orange { --sticker-w: 46px; --sticker-tilt: 14deg; }

/* Desktop cards are wider, so the clusters grow a little. */
@media (min-width: 900px) {
  .about-page .about-fact-stickers .about-fact-sticker-cream { --sticker-w: 88px; }
  .about-page .about-fact-stickers .about-fact-sticker-keys { --sticker-w: 96px; }
  .about-page .about-fact-stickers .about-fact-sticker-croissant { --sticker-w: 104px; }
  .about-page .about-fact-stickers .about-fact-sticker-crying { --sticker-w: 120px; }
  .about-page .about-fact-stickers .about-fact-sticker-quote { --sticker-w: 60px; }
  .about-page .about-fact-stickers .about-fact-sticker-zebra { --sticker-w: 112px; }
  .about-page .about-fact-stickers .about-fact-sticker-cursor { --sticker-w: 62px; }
  .about-page .about-fact-stickers .about-fact-sticker-fig { --sticker-w: 78px; }
  .about-page .about-fact-stickers .about-fact-sticker-smile { --sticker-w: 116px; }
  .about-page .about-fact-stickers .about-fact-sticker-lemon { --sticker-w: 68px; }
  .about-page .about-fact-stickers .about-fact-sticker-handled { --sticker-w: 96px; }
  .about-page .about-fact-stickers .about-fact-sticker-error { --sticker-w: 150px; }
  .about-page .about-fact-stickers .about-fact-sticker-bore { --sticker-w: 120px; }
  .about-page .about-fact-stickers .about-fact-sticker-arrow { --sticker-w: 86px; }
  .about-page .about-fact-stickers .about-fact-sticker-sundae { --sticker-w: 86px; }
  .about-page .about-fact-stickers .about-fact-sticker-pretzel { --sticker-w: 80px; }
  .about-page .about-fact-stickers .about-fact-sticker-palm { --sticker-w: 68px; }
  .about-page .about-fact-stickers .about-fact-sticker-adventures { --sticker-w: 84px; }
  .about-page .about-fact-stickers .about-fact-sticker-umbrella { --sticker-w: 64px; }
  .about-page .about-fact-stickers .about-fact-sticker-voyage { --sticker-w: 96px; }
  .about-page .about-fact-stickers .about-fact-sticker-orange { --sticker-w: 54px; }
}

@media (max-width: 620px) {
  .about-page .about-fact-stickers-outsource { margin-left: -28px; }

  /* The long-term goal: five stickers have to fit inside a phone-width card */
  .about-page .about-facts-scroll .about-fact:has(.about-fact-stickers-travel) { overflow: hidden; }
  .about-page .about-fact-stickers-travel { justify-content: center; margin: 10px auto auto; }
  .about-page .about-fact-stickers-travel .about-fact-sticker + .about-fact-sticker { margin-left: -6px; }
  .about-page .about-fact-stickers .about-fact-sticker-palm { --sticker-w: 46px; }
  .about-page .about-fact-stickers .about-fact-sticker-adventures { --sticker-w: 56px; }
  .about-page .about-fact-stickers .about-fact-sticker-umbrella { --sticker-w: 42px; }
  .about-page .about-fact-stickers .about-fact-sticker-voyage { --sticker-w: 64px; }
  .about-page .about-fact-stickers .about-fact-sticker-orange { --sticker-w: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .about-facts-scroll .about-fact-sticker { animation: none; }
}