/* Approved homepage collage, layered over the existing reading design. */
.reference-hero{background:#fffdf7}
.reference-hero::after{content:"";position:absolute;inset:auto 0 0;height:11px;background:var(--home-blue);z-index:5;pointer-events:none}
.hero-art{z-index:1;background:url("illustrations/home-hero-transparent.webp") center/100% 100% no-repeat;mask-image:linear-gradient(90deg,#000 0 28%,transparent 39% 100%)}
.reference-copy{z-index:3}
.stage-ground{position:absolute;z-index:0;left:46%;right:-10%;bottom:-42%;height:130%;background:#ffe9b5;border-radius:54% 46% 0 0 / 56% 60% 0 0;pointer-events:none}
.stage-right-art,.stage-books{position:absolute;inset:0;z-index:1;background:url("illustrations/home-hero-transparent.webp") center/100% 100% no-repeat;pointer-events:none}
.stage-right-art{clip-path:polygon(94% 0,100% 0,100% 36%,94% 36%);mask-image:linear-gradient(90deg,transparent 93%,#000 97%)}
.stage-books{clip-path:polygon(92% 37.5%,98% 37.5%,98% 47%,100% 47%,100% 73%,91% 73%,91% 47%,92% 47%);transform:translate(-55%,28%)}
.stage-rainbow{position:absolute;z-index:1;left:60%;top:4%;width:112px;height:84px;filter:drop-shadow(0 2px 0 rgba(255,255,255,.8));pointer-events:none}
.student-stage{position:absolute;inset:0 0 0 auto;width:62%;height:100%;z-index:2;overflow:hidden;pointer-events:none}
.student-composite{position:absolute;right:0;bottom:0;width:100%;height:auto;max-width:none;display:block}

@media(max-width:1100px){
  .stage-rainbow{left:62%;top:3%;width:94px;height:70px}
  .student-stage{width:61%}
}

@media(max-width:820px){
  .reference-hero{height:auto;display:flex;flex-direction:column;padding:30px 20px 0}
  .hero-art,.stage-right-art,.stage-books{display:none}
  .reference-copy{width:100%;margin:0;padding:0;text-align:center}
  .reference-copy h1{font-size:clamp(44px,8vw,60px)}
  .reference-copy>p{max-width:none}
  .hero-course-link{margin:0 auto}
  .student-stage{position:relative;inset:auto;width:100%;height:300px;margin-top:12px}
  .student-composite{bottom:-16px}
  .stage-ground{left:-4%;right:-4%;bottom:-18%;height:calc(290px + 18%);border-radius:50% 50% 0 0}
  .stage-rainbow{left:12%;top:53%;width:86px;height:64px}
}

@media(max-width:540px){
  .student-stage{height:245px;margin-top:14px}
  .student-composite{bottom:-10px}
  .stage-ground{height:calc(235px + 18%)}
  .stage-rainbow{left:9%;top:52%;width:74px;height:56px}
}