/* Separate editable annotations; photograph remains untouched. */
.competence__photo { position: relative; margin-top: clamp(4rem, 7vw, 7rem); }
.competence__bridge {
  position: absolute; z-index: 2; right: 3%; top: 0;
  transform: translateY(-50%) rotate(-1.5deg);
  width: 39%; max-width: 26ch; margin: 0;
  padding: 1.1rem 1.4rem;
  background: #f1f6ed; color: #102c24;
  border: 3px solid #b1ee36;
  border-radius: 8% 3% 6% 2% / 12% 8% 16% 5%;
  box-shadow: 3px 4px 0 rgb(16 44 36 / 9%);
  font-size: clamp(1.25rem, 2.1vw, 2rem);
}
.person-note {
  position: absolute; z-index: 1;
  color: #102c24;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-weight: 400; font-size: clamp(1.1rem, 2vw, 2rem); line-height: 1.08;
  text-align: center;
}
.person-note p {
  margin: 0; padding: .65rem .8rem;
  background-image: linear-gradient(174deg, transparent 5%, #c4ff37 13% 86%, transparent 94%);
  background-repeat: repeat-y;
  clip-path: polygon(2% 8%, 96% 0, 100% 91%, 5% 100%, 0 58%);
}
.person-note--olaf p { background-size: 100% 25%; }
.person-note--roland p { background-size: 100% 33.333%; }
.person-note--olaf { left: 4%; top: 26%; width: 25%; transform: rotate(-5deg); }
.person-note--roland { right: 3%; top: 23%; width: 23%; transform: rotate(4deg); }
.person-note svg { position: absolute; fill: none; stroke: #c4ff37; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #102c24); }
.person-note--olaf svg { width: 75%; height: auto; bottom: 100%; left: 42%; }
.person-note--roland svg { width: 35%; height: auto; top: 95%; left: -12%; }
@media (max-width: 760px) {
  .competence__bridge { width: 75%; right: 3%; padding: .8rem 1rem; font-size: 1.2rem; }
  .competence__notes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-top: 1rem; }
  .person-note { position: relative; top: auto; left: auto; right: auto; width: auto; font-size: clamp(1rem, 4vw, 1.4rem); }
  .person-note--olaf { transform: rotate(-2deg); }
  .person-note--roland { transform: rotate(2deg); }
  .person-note svg { display: none; }
}