/* ABOUT — planet with the bio written in its open middle
   (on phones it becomes a rounded card, see mobile.css) */
#planet {
  position: relative;
  z-index: 1;
  width: min(840px, 92vw);
  aspect-ratio: 1;
  background: url("../assets/about/planet-about.svg") center / contain no-repeat;
}

/* children position against #planet itself */
#planetContent { display: contents; }

/* bio sits in the open middle of the drawing, clear of the pink ribbons */
#bioText {
  position: absolute;
  left: 47%;
  top: 53%;
  width: 38%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.42;
  color: #000;
}
#bioText p { margin: 0 0 0.7em; }
#bioText p:last-child { margin-bottom: 0; }

/* headshot rides the planet's rim like a little moon */
#headshot {
  position: absolute;
  left: 1%;
  bottom: 8%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid #000;
  background: #222;
}

#icon {
  position: absolute;
  left: 22%;
  bottom: 2%;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid #000;
  background: #333;
}

/* ---------- BACKGROUND PLANETS ----------
   two smaller decorative planets drifting behind the main one */
#about {
  overflow: hidden;
  padding: 120px 16px 160px;
}

.bg-planet {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  animation: planet-float 14s ease-in-out infinite;
}

.bg-planet-stars {
  width: clamp(100px, 14vw, 210px);
  left: 3%;
  top: 5%;
}

.bg-planet-maze {
  width: clamp(110px, 15vw, 230px);
  right: 2%;
  bottom: 4%;
  animation-duration: 18s;
  animation-delay: -6s;
}

@keyframes planet-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-planet { animation: none; }
}