/* Alternative hero (index_alt.html): "The Creation of Adam" rendered as ASCII by three.js.
   Everything else on the page uses site.css unchanged. */

.hero-alt { height: clamp(600px, 92vh, 820px); cursor: default; }
.hero-alt .hero-mesh { opacity: 0; transition: opacity .7s ease; }
.hero-alt.is-ready .hero-mesh { opacity: 1; }
.hero-alt-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 44% 38% at 50% 38%, rgba(250, 250, 248, .92), rgba(250, 250, 248, 0) 72%);
}

.hero-alt-copy {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 38%; transform: translateY(-50%);
  text-align: center; z-index: 3; pointer-events: none;
}
.hero-alt-copy a { pointer-events: auto; }
.hero-alt h1 { width: auto; max-width: 15ch; margin: 0 auto 20px; font-size: clamp(44px, 6vw, 84px); line-height: 1.05; }
.hero-alt h1 .ser { display: block; color: var(--mut); font-size: .9em; letter-spacing: 0; }
.hero-alt-copy p { font-size: 15px; color: var(--fg2); max-width: 420px; margin: 0 auto 26px; }


/* Model credit (CC BY) under the footer row */
.footer-credit { margin: 18px auto 0; font-size: 11.5px; color: var(--mut); }
.footer-credit a { color: var(--mut); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--hi); }

@media (max-width: 900px) {
  .hero-alt { height: 640px; min-height: 0; }
  .hero-alt-copy { top: 32%; }
  .hero-alt h1 { font-size: 38px; max-width: none; }
  .hero-alt-copy p { font-size: 14.5px; margin-bottom: 20px; }
}