/* Course portraits: brand shapes sit behind the original portrait cutouts. */
#masters.course-masters { padding-block: clamp(64px, 8vw, 112px); }
#masters .ds-sec-head { margin-bottom: clamp(48px, 6vw, 84px); }
#masters .ds-master {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  margin-bottom: 64px;
  --portrait-color: #ffdc2d;
  --portrait-soft: #fff9db;
}
#masters .ds-master:last-child { margin-bottom: 0; }
#masters .master-lin { --portrait-color: #3786e6; --portrait-soft: #edf5ff; }
#masters .master-hu { --portrait-color: #bab5ff; --portrait-soft: #f5f3ff; }
#masters .master-lin .m-photo { order: 2; }
#masters .m-photo {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 440px;
  max-width: 470px;
  margin-inline: auto;
}
#masters .m-photo::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 28% 1% 0 4%;
  background: var(--portrait-soft);
  border-radius: 50% 46% 38% 42%;
  transform: rotate(-9deg);
}
#masters .portrait-plate {
  position: absolute;
  z-index: -1;
  inset: 24% 9% 0 8%;
  background: var(--portrait-color);
  border-radius: 100px 100px 100px 12px;
}
#masters .master-lin .portrait-plate {
  inset: 27% 4% 0 8%;
  border-radius: 120px 20px 100px 100px;
}
#masters .master-hu .portrait-plate {
  inset: 25% 8% 0 7%;
  border-radius: 140px 140px 18px 100px;
}
#masters .m-photo .portrait-person {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 0;
  box-shadow: none;
}
#masters .master-lin .portrait-person { height: 95%; top: 5%; }
#masters .portrait-accent {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #34c8a0;
  border-radius: 50% 50% 50% 8px;
  left: 0;
  top: 19%;
  transform: rotate(-18deg);
}
#masters .portrait-spark {
  position: absolute;
  right: 0;
  bottom: 7%;
  width: 70px;
  height: 70px;
  background: #ff9925;
  clip-path: polygon(50% 0%, 60% 28%, 85% 15%, 72% 40%, 100% 50%,
    72% 60%, 85% 85%, 60% 72%, 50% 100%, 40% 72%, 15% 85%,
    28% 60%, 0% 50%, 28% 40%, 15% 15%, 40% 28%);
}
#masters .master-lin .portrait-accent {
  background: #ffdc2d;
  top: 12%; left: auto; right: 0;
  border-radius: 50%;
  width: 72px; height: 72px;
}
#masters .master-lin .portrait-spark {
  background: #bab5ff;
  right: auto; left: 0; bottom: 5%;
}
#masters .master-hu .portrait-accent { background: #3786e6; }
#masters .master-hu .portrait-spark { background: #ffdc2d; }
#masters .m-body { display: flex; flex-direction: column; gap: 0; }
#masters .nm {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
  letter-spacing: .06em;
}
#masters .ti {
  font-family: var(--font-body);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  margin-top: 8px;
  max-width: 34em;
}
#masters .ds-tags { justify-content: flex-start; margin: 18px 0 0; gap: 8px; }
#masters .ds-chip {
  background: var(--portrait-soft);
  border: 0;
  color: var(--dark);
  font-size: 12px;
  padding: 6px 13px;
}
#masters .m-quote {
  color: var(--dark);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.65;
  border: 0;
  padding: 0;
  margin: 26px 0 15px;
}
#masters .ds-body { font-size: 15px; line-height: 1.95; margin: 0; }
/* Motion runs only while portraits are visible; text stays still. */
@media (prefers-reduced-motion: no-preference) {
  #masters .is-inview .portrait-plate {
    animation: portrait-unfold 800ms cubic-bezier(.2,.7,.2,1) both;
  }
  #masters .is-inview .portrait-accent {
    animation: portrait-float 8s ease-in-out infinite;
  }
  #masters .is-inview .portrait-spark {
    animation: portrait-turn 14s ease-in-out infinite alternate;
  }
}
@keyframes portrait-unfold {
  from { transform: scale(.88) rotate(-5deg); }
  to { transform: scale(1) rotate(0); }
}
@keyframes portrait-float {
  0%, 100% { transform: translateY(0) rotate(-18deg); }
  50% { transform: translateY(-10px) rotate(-8deg); }
}
@keyframes portrait-turn {
  from { transform: rotate(-12deg); }
  to { transform: rotate(24deg); }
}
@media (max-width: 768px) {
  #masters .ds-master { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  #masters .master-lin .m-photo { order: 0; }
  #masters .m-photo { height: 380px; max-width: 390px; }
  #masters .m-body { text-align: left; max-width: 480px; margin-inline: auto; }
  #masters .ds-tags { justify-content: flex-start; }
  #masters .m-quote { margin-top: 22px; }
  #masters .ds-sec-head .ds-h3 { max-width: 13em; margin-inline: auto; }
}
@media (max-width: 400px) {
  #masters .m-photo { height: 340px; }
  #masters .portrait-accent { width: 50px; height: 50px; }
  #masters .portrait-spark { width: 56px; height: 56px; }
}