*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070907;color:#f6e8c2;font-family:Georgia, 'Times New Roman', serif}
.image-home{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  background:#070907;
}
.image-home img{
  display:block;
  width:100%;
  height:auto;
}
.hotspot{
  position:absolute;
  display:block;
  text-indent:-9999px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:4px;
  z-index:5;
}
.hotspot:hover,
.hotspot:focus{
  border-color:#d7b667;
  background:rgba(215,182,103,.13);
  outline:none;
}

/* Top navigation */
.nav-faith{left:51.5%;top:1.5%;width:8.2%;height:3.2%}
.nav-gracefully{left:61.5%;top:1.5%;width:7.2%;height:3.2%}
.nav-wisdom{left:70.0%;top:1.5%;width:7.6%;height:3.2%}
.nav-illuminations{left:78.3%;top:1.5%;width:8.0%;height:3.2%}
.nav-music{left:86.8%;top:1.5%;width:4.4%;height:3.2%}
.nav-library{left:91.5%;top:1.5%;width:4.8%;height:3.2%}
.nav-support{left:96.0%;top:1.5%;width:3.8%;height:3.2%}

/* Main visible buttons and panels */
.hero-enter{left:45.3%;top:19.3%;width:8.8%;height:3.3%}
.enter-library{left:9.0%;top:52.0%;width:15.0%;height:4.0%}
.explore-gracefully{left:43.0%;top:52.2%;width:14.0%;height:4.0%}
.enter-academy{left:74.3%;top:52.2%;width:15.3%;height:4.0%}
.explore-journey{left:19.2%;top:72.0%;width:13.5%;height:4.2%}
.experience-live{left:33.5%;top:72.0%;width:12.0%;height:4.2%}
.music-area{left:49.5%;top:57.5%;width:49.5%;height:19.0%}
.support-button{left:7.4%;top:90.2%;width:14.5%;height:4.0%}
.vision-card{left:31.2%;top:78.8%;width:16.8%;height:16.0%}
.our-story-button{left:50.0%;top:90.2%;width:10.0%;height:4.0%}

/* Real target sections below the image */
.content{
  max-width:1100px;
  margin:0 auto;
  padding:90px 7%;
  border-top:1px solid rgba(210,169,88,.35);
  font-family:Georgia, 'Times New Roman', serif;
}
.content h1,.content h2{
  margin:.2em 0 .35em;
  font-weight:500;
  line-height:1.1;
  letter-spacing:.04em;
}
.content h1{font-size:clamp(40px,6vw,76px)}
.content h2{font-size:clamp(36px,5vw,64px)}
.content p{
  font-family:Arial, sans-serif;
  font-size:18px;
  line-height:1.75;
  max-width:760px;
}
.eyebrow{
  color:#d7b667;
  letter-spacing:.2em;
  font-size:13px!important;
  font-weight:bold;
  text-transform:uppercase;
}
.dark{
  background:#090d11;
  color:#f0dfb7;
  max-width:none;
  padding-left:max(7%, calc((100% - 1100px)/2));
}
.cream{
  background:#efe3cc;
  color:#1f1b14;
  max-width:none;
  padding-left:max(7%, calc((100% - 1100px)/2));
}
.earth{
  background:#2f2319;
  color:#f3dfbd;
  max-width:none;
  padding-left:max(7%, calc((100% - 1100px)/2));
}
.support{
  background:#120f0a;
  color:#f3dfbd;
  max-width:none;
  padding-left:max(7%, calc((100% - 1100px)/2));
}
.gold{color:#d7b667!important;font-family:Georgia, 'Times New Roman', serif!important;font-style:italic}
.quick-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.quick-links a{
  color:#f6e8c2;
  border:1px solid #d7b667;
  text-decoration:none;
  padding:12px 18px;
  background:#152415;
}

@media(max-width:800px){
  .content{padding:64px 6%}
  .content p{font-size:16px}
  .hotspot:hover,.hotspot:focus{background:rgba(215,182,103,.22)}
}