/* Study 02: full-bleed teaching photograph. No filtered or fixed background. */
.edu-stage {
  position: relative;
  isolation: isolate;
  height: clamp(680px, calc(100svh - 96px), 980px);
  overflow: clip;
  color: var(--edu-paper);
  background: #171b17;
}
.edu-stage-photo {
  position: absolute;
  inset: -34px 0;
  z-index: -2;
}
.edu-stage-photo img { object-position: 57% 50%; }
.edu-stage-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(9,16,12,.77), rgba(9,16,12,.24) 38%, transparent 70%), linear-gradient(0deg, rgba(9,16,12,.86), transparent 54%), linear-gradient(180deg, rgba(9,16,12,.52), transparent 24%);
}
.edu-stage-heading, .edu-stage-caption {
  position: absolute;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.7;
}
.edu-stage-heading { top: 27px; }
.edu-stage-caption { bottom: 22px; font-size: 9px; }
.edu-stage-body {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-block: 90px 92px;
  gap: 24px;
}
.edu-stage h1 {
  font-family: Education Display, Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(120px, 14vw, 228px);
  line-height: .79;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.edu-stage h1 span { display: block; }
.edu-stage-copy { width: 285px; max-width: 30%; padding-bottom: 2px; }
.edu-stage-copy h2 { font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; }
.edu-stage-copy p { font-size: 13px; line-height: 1.85; color: #e3e4dd; margin: 15px 0 22px; }
.edu-stage-copy .edu-pill { color: var(--edu-ink); font-size: 13px; }
.edu-stage + .edu-chapters { border-top: 0; }
@media (max-width: 1050px) {
  .edu-stage { height: clamp(660px, calc(100svh - 96px), 820px); }
  .edu-stage h1 { font-size: 15vw; }
  .edu-stage-copy { width: 245px; max-width: 36%; }
  .edu-stage-copy h2 { font-size: 23px; }
  .edu-stage-copy .edu-pill { font-size: 12px; padding: 14px 17px; gap: 15px; }
}
@media (max-width: 700px) {
  .edu-stage { height: 710px; }
  .edu-stage-photo { inset: 0 0 auto; height: 500px; }
  .edu-stage-photo img { object-position: 62% 50%; }
  .edu-stage-shade {
    background: linear-gradient(180deg, rgba(9,16,12,.46), transparent 17%, transparent 36%, rgba(23,27,23,.24) 53%, #171b17 76%), linear-gradient(90deg, rgba(9,16,12,.22), transparent 60%);
  }
  .edu-stage-heading { top: 19px; font-size: 8px; }
  .edu-stage-heading span:last-child { display: none; }
  .edu-stage-body { display: block; padding: 0; }
  .edu-stage h1 { position: absolute; left: 0; top: 343px; font-size: calc((100vw - 70px) / 3.8); line-height: .8; }
  .edu-stage h1 span:first-child, .edu-stage h1 span:nth-child(2) { display: inline; }
  .edu-stage h1 span:nth-child(2) { margin-left: .055em; }
  .edu-stage-copy { position: absolute; top: 535px; left: 0; width: 100%; max-width: none; }
  .edu-stage-copy h2 { font-size: 21px; line-height: 1.4; }
  .edu-stage-copy h2 br { display: none; }
  .edu-stage-copy p { display: none; }
  .edu-stage-copy .edu-pill { margin-top: 17px; min-height: 46px; padding: 11px 18px; }
  .edu-stage-caption { bottom: 19px; font-size: 8px; }
}
@media (max-width: 360px) {
  .edu-stage { height: 675px; }
  .edu-stage-photo { height: 450px; }
  .edu-stage h1 { top: 315px; }
  .edu-stage-copy { top: 489px; }
  .edu-stage-copy h2 { font-size: 19px; max-width: 230px; }
}