/* A single, centred composition keeps the type and sculpture together. */
.hero {
  height: 125svh;
  min-height: 900px;
}
.hero-stage {
  min-height: 680px;
}
.hero-composition {
  position: absolute;
  top: 49%;
  left: 9%;
  width: 82%;
  transform: translateY(calc(-50% - var(--hero-progress) * 25px));
}
.hero-title {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  font-size: clamp(60px, min(9.5vw, 18svh), 190px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.05em;
  transform: none;
  opacity: 1;
  z-index: 2;
}
.hero-line { display: block; white-space: nowrap; }
.hero-line:nth-child(2) { text-align: center; }
.hero-line:nth-child(3) { text-align: right; }
.hero-art-anchor {
  position: absolute;
  width: clamp(130px, 11vw, 215px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
}
.hero-art-anchor--one { left: 27%; top: -12%; }
.hero-art-anchor--two { left: 63%; top: 118%; }
#hero-canvas { z-index: 3; }
.hero-intro {
  top: auto;
  right: var(--gutter);
  bottom: 7.5%;
  left: auto;
  width: 240px;
  max-width: 22%;
  font-size: 13px;
  line-height: 1.35;
  transform: none;
  z-index: 4;
}
.hero-glow {
  /* Keep the glow flush with the stage and blend into the next section. */
  transform: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  background:
    radial-gradient(ellipse 16% 65% at 47% 26%, rgba(251,247,241,.67), transparent 90%),
    radial-gradient(ellipse 21% 50% at 66% 74%, rgba(243,244,241,.6), transparent 90%),
    radial-gradient(ellipse 35% 50% at 84% 53%, rgba(174,179,178,.23), transparent 95%);
}
.site-header.is-scrolled.is-over-hero {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-fallback img:first-child { left: 31%; top: 25%; }
.hero-fallback img:last-child { left: 61%; top: 76%; }
.scroll-link { font-size: 10px; bottom: 20px; animation: scroll-cue-float 3s ease-in-out infinite; }
@keyframes scroll-cue-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}
@media (min-width: 1001px) {
  .site-header { padding-top: 22px; padding-bottom: 22px; }
  .brand img { width: 112px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-composition { left: 7%; width: 86%; top: 47%; }
  .hero-title { font-size: 9.9vw; }
  .hero-art-anchor { width: 125px; }
  .hero-intro { width: 235px; max-width: 30%; bottom: 9%; }
}
@media (max-width: 760px) {
  .hero { height: 100svh; min-height: 780px; }
  .hero-stage { position: relative; min-height: 780px; }
  .hero-composition { left: 6%; width: 88%; top: 40%; }
  .hero-title { font-size: 10.1vw; line-height: .98; }
  .hero-art-anchor { width: 100px; }
  .hero-art-anchor--one { left: 27%; top: -20%; }
  .hero-art-anchor--two { left: 69%; top: 134%; }
  .hero-intro { right: 6%; left: auto; bottom: 13%; width: 240px; max-width: 50%; font-size: 13px; }
  .scroll-link { left: 50%; bottom: 25px; align-items: center; transform: translateX(-50%); padding: 10px; }
}
@media (max-width: 520px) {
  .hero, .hero-stage { min-height: 560px; }
  .hero-composition { left: 20px; width: calc(100% - 40px); top: 43%; }
  .hero-title { font-size: 10vw; line-height: 1.02; letter-spacing: -.055em; }
  .hero-line:nth-child(2) { text-align: center; }
  .hero-art-anchor { width: 80px; }
  .hero-art-anchor--one { left: 24%; top: -21%; }
  .hero-art-anchor--two { left: 72%; top: 137%; }
  .hero-intro { left: 20px; right: 20px; top: auto; bottom: 16%; width: auto; max-width: 310px; font-size: 14px; line-height: 1.4; }
  .hero-fallback img:first-child { left: 27%; top: 27%; }
  .hero-fallback img:last-child { left: 71%; top: 54%; }
}
@media (min-width: 761px) and (max-height: 680px) {
  .hero-stage { min-height: 680px; }
  .hero-composition { top: 45%; }
  .hero-title { font-size: min(9.5vw, 110px); }
  .hero-art-anchor { width: 130px; }
  .hero-intro { bottom: 6%; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-link { animation: none; }
  .hero { height: auto; min-height: 100svh; }
  .hero-composition { transform: translateY(-50%); }
}