.portrait-link {
  display: block;
  width: min(100%, 240px);
  justify-self: center;
  color: inherit;
  text-decoration: none;
  border-radius: 18px;
}
.portrait-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.portrait-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  perspective: 750px;
  perspective-origin: 50% 45%;
}
.portrait-scene {
  --portrait-width: 84%;
  --portrait-bottom: 5%;
  --portrait-depth: 16px;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--portrait-x, 0deg)) rotateY(var(--portrait-y, 0deg));
}
.portrait-view.is-tilting .portrait-scene { will-change: transform; }
.portrait-person {
  position: absolute;
  display: block;
  width: var(--portrait-width);
  height: 88%;
  left: 50%;
  bottom: var(--portrait-bottom);
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%) translateZ(var(--portrait-depth));
  pointer-events: none;
  user-select: none;
}
.portrait-baseline {
  position: absolute;
  left: 50%;
  bottom: calc(var(--portrait-bottom) - 1.75px);
  width: var(--portrait-width);
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #386348);
  transform: translateX(-50%) translateZ(var(--portrait-depth));
  pointer-events: none;
}
.portrait-math {
  position: absolute;
  display: block;
  width: 22%;
  height: 22%;
  color: #6e8173;
  opacity: .72;
  pointer-events: none;
  user-select: none;
}
.portrait-math--derivative {
  top: 12%;
  left: 0;
  width: 24%;
  height: 24%;
  transform: translateZ(30px) rotate(-10deg);
}
.portrait-math--sigma {
  top: 2%;
  right: 4%;
  width: 18%;
  height: 18%;
  color: var(--accent, #386348);
  opacity: .48;
  transform: translateZ(-8px) rotate(9deg);
}
.portrait-math--pushforward {
  top: 21%;
  right: -3%;
  width: 27%;
  height: 21.6%;
  opacity: .66;
  transform: translateZ(12px) rotate(-6deg);
}
.portrait-math--gradient {
  bottom: 15%;
  left: 1%;
  width: 17%;
  height: 17%;
  opacity: .56;
  transform: translateZ(-16px) rotate(8deg);
}
.portrait-math--graph {
  right: -1%;
  bottom: 14%;
  width: 25%;
  height: 25%;
  transform: translateZ(36px) rotate(7deg);
}
@media (prefers-reduced-motion: reduce) {
  .portrait-scene { transform: none; }
  .portrait-view.is-tilting .portrait-scene { will-change: auto; }
}