.hero {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hero-banner {
  position: relative;
  width: min(780px, 100%);  /* tweak 560 / 640 / 720 etc */
  margin: 0 auto;
}

.hero-banner-img {
  display: block;
  width: 100%;   /* ← change this */
  height: auto;
  object-fit: contain;
}


.hero-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-family: "Cinzel", serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.28em;
  white-space: nowrap;
  pointer-events: none;

  background: linear-gradient(120deg, #c8a45a, #f2e6c8, #c8a45a);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: goldSheen 8s ease-in-out infinite;

  text-shadow:
    0 0 8px rgba(240, 220, 170, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

@keyframes goldSheen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-intro {
  margin-top: 16px;
}

.hero-lede {
      font-weight: 500;

  margin: 10px auto 0;
  max-width: 80ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(230, 216, 181, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}