/* hero: full-bleed photo on computers, lower-half photo on phones (each set in the editor), title, buttons */
.hero{min-height:100vh;min-height:100svh;position:relative;display:flex;align-items:flex-start;overflow:hidden;background:#0f0818}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;animation:drift 22s ease-out both}
@keyframes drift{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,8,24,.92) 0%,rgba(15,8,24,.55) 32%,rgba(15,8,24,0) 52%,rgba(15,8,24,.35) 80%,var(--bg) 100%)}
.mandala{position:absolute;width:min(120vmin,820px);aspect-ratio:1;top:30%;left:50%;translate:-50% -50%;opacity:.22;animation:spin 120s linear infinite;z-index:1}
.mandala.b{width:min(80vmin,560px);animation-duration:80s;animation-direction:reverse;opacity:.3}
@keyframes spin{to{rotate:360deg}}
.hero-in{position:relative;z-index:2;padding:104px 24px 0;text-align:center;width:100%}
.eyebrow{font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(50px,14vw,132px);line-height:.92;letter-spacing:.02em}
h1 em{font-style:italic;color:var(--gold2)}
.tag{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,26px);color:#e4d8f2;margin:18px auto 26px;max-width:520px}
.btn{display:inline-block;padding:14px 26px;border:1px solid var(--gold);color:var(--gold2);letter-spacing:.2em;font-size:12px;text-transform:uppercase;transition:.35s;margin:0 4px 10px}
.btn:hover,.btn.fill{background:var(--gold);color:#150a22}
.btn.fill:hover{background:var(--gold2)}
.scroll{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:2;width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:drop 2s infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-12px)}50%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

@media(min-width:900px){
  .hero{align-items:center}
  .hero-photo img{object-position:80% 35%}
  .hero::after{background:linear-gradient(90deg,rgba(15,8,24,.95) 0%,rgba(15,8,24,.7) 38%,rgba(15,8,24,0) 68%),linear-gradient(to bottom,transparent 75%,var(--bg) 100%)}
  .mandala{top:50%;left:28%;width:min(95vmin,760px)}
  .hero-in{text-align:left;padding:0 max(48px,7vw);max-width:760px}
  .tag{margin-left:0;margin-right:0}
  .btn{margin:0 12px 10px 0;padding:14px 34px}
}

/* phones: the wide teacher photo sits below the buttons so her face stays clear of the title, and the two buttons share one row */
@media(max-width:899px){
  .hero-photo{top:max(40%,310px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%);mask-image:linear-gradient(to bottom,transparent,#000 18%)}
  .hero-photo img{object-position:83% 50%}
  .hero-in{padding-top:92px}
  .tag{margin:14px auto 20px;font-size:17px}
  .btn{padding:13px 16px;font-size:11px;letter-spacing:.14em;margin:0 3px}
}