/* Place the instructor's portrait and the original orbital backdrop with his story. */
.hero-glow {
  background: radial-gradient(ellipse at 50% 0%, #16576566, transparent 62%),
    linear-gradient(135deg, #031821, #0b303c);
}

.hero-glow::before { display: none; }
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-width: 1080px;
  padding-top: clamp(68px, 8vw, 120px);
  padding-bottom: clamp(68px, 8vw, 120px);
}
.hero-copy { width: 100%; max-width: 850px; }

.teacher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(35px, 5vw, 62px);
}
.teacher-title {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: center;
  min-height: 490px;
  max-width: none;
  margin: 0;
  padding: clamp(35px, 5vw, 64px);
  overflow: hidden;
  background: radial-gradient(ellipse at 80% 35%, #20758180, transparent 52%),
    linear-gradient(140deg, #031821, #0b303c);
  border-bottom: 5px solid #d7b969;
  box-shadow: 10px 10px 0 #cdded5;
}
.teacher-title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#d6ece808 1px, transparent 1px),
    linear-gradient(90deg, #d6ece808 1px, transparent 1px);
  background-size: 65px 65px;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.teacher-title::after {
  content: '';
  position: absolute;
  right: -10%;
  top: 20%;
  width: 60%;
  height: 100%;
  z-index: -1;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, #cdf4e008, transparent);
  border-left: 1px solid #e5d4a317;
}
.teacher-copy { position: relative; z-index: 2; }
.teacher-title h2 {
  max-width: 640px;
  font-size: clamp(30px, 3.2vw, 43px);
  line-height: 1.58;
}
.teacher-signature {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  margin-top: clamp(28px, 4vw, 45px);
}
.teacher-name {
  min-width: 0;
  flex: 1;
  margin-top: 0;
  padding-top: 20px;
}
.teacher-signature .art-seal {
  position: relative;
  inset: auto;
  flex: none;
  width: 116px;
  height: 116px;
  transform: rotate(-8deg);
  font-size: 15px;
  line-height: 1.55;
}
.teacher-art { position: relative; min-height: 435px; }
.teacher-art .portrait-frame {
  top: 16px;
  right: 4%;
  width: min(92%, 330px);
  height: 408px;
  border-radius: 170px 170px 6px 6px;
  box-shadow: 0 28px 65px #0006, 0 0 0 10px #cee1d109,
    0 0 0 11px #b7d4c222;
}
.teacher-art .orbit-one { width: 490px; height: 490px; right: -100px; top: -30px; }
.teacher-art .orbit-two { width: 560px; height: 330px; right: -140px; top: 55px; }
.teacher-art .art-word {
  top: 4px;
  right: -90px;
  left: auto;
  font-size: clamp(45px, 5vw, 65px);
  transform: rotate(90deg);
  color: #bce7db10;
}
.teacher-story { width: min(100%, 880px); margin-inline: auto; }

@media (max-width: 900px) {
  .teacher-title { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); padding: 38px; }
  .teacher-title h2 { font-size: clamp(26px, 3.5vw, 33px); }
  .teacher-art { min-height: 390px; }
  .teacher-art .portrait-frame { top: 18px; height: 355px; }
  .teacher-signature .art-seal { width: 95px; height: 95px; font-size: 12px; }
}

@media (max-width: 640px) {
  .hero-grid { padding-top: 48px; padding-bottom: 56px; }
  .teacher { padding-top: 35px; }
  .teacher-grid { display: block; }
  .teacher-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-width: none;
    margin: 0 0 42px;
    padding: 31px 24px 29px;
  }
  .teacher-title h2 { font-size: clamp(25px, 6.3vw, 31px); line-height: 1.55; }
  .teacher-title h2 br { display: block; }
  .teacher-title h2 .phrase { margin-right: 0; }
  .teacher-copy { display: contents; }
  .teacher-copy > .eyebrow,
  .teacher-copy > h2 { position: relative; z-index: 2; order: 0; }
  .teacher-art { order: 1; min-height: 340px; margin-top: 20px; }
  .teacher-art .portrait-frame {
    top: 5px;
    right: max(8%, 18px);
    width: min(72%, 245px);
    height: 315px;
    border-radius: 130px 130px 5px 5px;
  }
  .teacher-art .orbit-one { width: 335px; height: 335px; right: -15px; top: -10px; }
  .teacher-art .orbit-two { width: 360px; height: 205px; right: -35px; top: 60px; }
  .teacher-art .art-word {
    top: 100px;
    right: auto;
    left: -10px;
    font-size: 39px;
    transform: none;
  }
  .teacher-signature {
    order: 2;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
  }
  .teacher-name { font-size: 19px; line-height: 1.5; }
  .teacher-name span { font-size: 11px; }
  .teacher-signature .art-seal { width: 90px; height: 90px; font-size: 12px; }
}

/* Instructor signature readability. */
.teacher-signature .teacher-name{font-size:clamp(25px,2.8vw,32px);line-height:1.5}
.teacher-signature .teacher-name span{font-size:15px;line-height:1.7;margin-top:5px}
@media(max-width:640px){.teacher-signature .teacher-name{font-size:23px}.teacher-signature .teacher-name span{font-size:13px}.teacher-signature{gap:10px}.teacher-signature .art-seal{width:82px;height:82px;font-size:11px}}