/* ============================================================
   Hero Container
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 clamp(32px, 7vw, 96px);
  overflow: hidden;
  background: var(--bg);
}

.hero-inner {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(590px,42%) 1fr;
  align-items: center;
  gap: 32px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================================
   Hero Typography
   ============================================================ */
.hero-headline {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(3.0rem, 3.45vw, 4.0rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  max-width: 620px;
  text-transform: uppercase;
  opacity: 0;
}

/* Glow technique: a blurred duplicate of each line sitting behind the
   crisp text, rather than a text-shadow stack — reads as illuminated
   print instead of a stacked halo. Applied per-line (via .hero-title
   spans) so the duplicate's box matches each line's own shape exactly. */
.hero-title {
  display:inline;
  color: #F6F2EB;
  position: relative;
  z-index: 2;
}
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #FFF6E8;
  opacity:.82;
  filter:blur(16px);
  transform: scale(1.004);
  pointer-events: none;
}

.hero-support {
  margin-top: 52px;
  font-family: 'Poderosa', 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  opacity: 0;
}

/* ============================================================
   Hero Image
   ============================================================ */
.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible; /* let the artwork bleed/crop against the hero's own edge */
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Treat the artwork as finished: no filters/glow added here, just scale
     it 20% larger than its natural fit so it dominates and crops against
     the viewport/hero edge rather than sitting comfortably inside a box. */
  transform: scale(1.2) translateX(2%);
}

/* ============================================================
   Hero Responsive
   ============================================================ */

/* Desktop: fixed viewport height, and let the logo bleed toward the
   viewport edge rather than sitting comfortably inside its column. */
@media (min-width: 861px) {
  .hero {
    height: 100vh;
  }
  .hero-media {
    width: calc(100% + 24px);
    margin-right: -24px;
  }
}

/* Mobile: image first, generous spacing */
@media (max-width: 860px) {
  .hero {
    min-height: 100vh;
    padding: 120px 24px 64px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-media {
    order: -1;
    aspect-ratio: 4 / 5;
  }
  .hero-content {
    align-items: flex-start;
  }
}