/* The opening keeps the original source at full height. Copy occupies the
   quiet facade above the person; later story compositions keep their rules. */
#school-stage:is([data-phase="reality"], :not([data-phase])) {
  height: 100svh;
  min-height: 0;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) #school-film {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .story-shade {
  background: none;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy {
  top: clamp(132px, 18svh, 180px);
  left: var(--pad);
  right: auto;
  width: min(770px, 68%);
  color: #fff7e8;
  animation: none;
  text-shadow: 0 2px 14px #161c1866;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 {
  font-size: clamp(58px, 6.1vw, 88px);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p {
  margin-top: 19px;
  max-width: 620px;
  font-family: var(--sans);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button {
  margin-top: 23px;
  min-height: 50px;
  padding: 14px 23px;
  font-size: 19px;
  text-shadow: none;
}
#school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference {
  top: 115px;
}
@media (min-width: 761px) and (max-height: 740px) {
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 128px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: clamp(54px, 5.3vw, 70px); }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 600px; margin-top: 16px; font-size: 18px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 17px; }
}
@media (min-width: 761px) and (max-height: 650px) {
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 116px; left: 25vw; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { margin-top: 14px; font-size: 17px; line-height: 1.35; }
}
@media (max-width: 760px) {
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy {
    top: 124px; left: 24px; right: 24px; width: auto;
  }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 {
    max-width: 440px; font-size: clamp(40px, 11.2vw, 68px); line-height: 1;
  }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 br { display: block; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 390px; margin-top: 18px; font-size: 16px; line-height: 1.45; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button {
    margin-top: 19px; padding: 13px 21px; font-size: 18px; min-height: 48px;
  }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference {
    top: auto; bottom: 118px; right: 18px; font-size: 11px;
  }
}
@media (max-width: 350px) {
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 108px; left: 20px; right: 20px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: 38px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { margin-top: 10px; font-size: 15px; line-height: 1.3; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 104px; left: 25vw; width: min(540px, 67%); }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: 40px; max-width: none; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 540px; font-size: 16px; line-height: 1.35; margin-top: 14px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 12px; min-height: 44px; padding: 10px 18px; font-size: 17px; }
  #school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference { top: 95px; bottom: auto; }
}