/* Hero — El Umbral */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 120px;
  padding-bottom: 48px;
  position: relative;
  overflow: hidden;
}

/* Candlelight gradient — bottom-left to upper-right */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 18% 110%, rgba(217,185,122,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% -10%, rgba(217,185,122,0.06), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
}

.hero-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.hero-eyebrow .right { color: var(--bone-mute); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 760px) {
  .hero-eyebrow .right { display: none; }
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 9.5vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--bone);
  text-wrap: balance;
  margin: 0;
  max-width: 14ch;
}
.hero-headline em {
  font-style: italic;
  color: var(--star);
  font-weight: 400;
  position: relative;
}

/* Mirror echo — reflected ghost of the headline below */
.hero-mirror {
  position: relative;
  display: inline-block;
  width: 100%;
}
.hero-mirror .echo {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  transform: scaleY(-1);
  transform-origin: top;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 55%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 55%);
  pointer-events: none;
  user-select: none;
  filter: blur(0.4px);
  opacity: 0.65;
}

.hero-sub {
  max-width: 56ch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.hero-sub p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--bone);
  font-family: var(--sans);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* Bottom row */
.hero-foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.hero-foot .col {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.hero-foot .center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-foot .center .reflect {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-dim);
}
.hero-foot .right { text-align: right; }
.hero-foot .scroll-ind {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-foot .scroll-ind .stem {
  display: inline-block; width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--bone-faint), var(--star));
  animation: drip 2.6s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

@media (max-width: 760px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot .right { text-align: left; }
  .hero-foot .center { align-items: flex-start; }
}

/* Star ornament — top-right of hero */
.hero-star-ornament {
  position: absolute;
  top: 14vh;
  right: var(--page-pad);
  width: 18vw;
  max-width: 200px;
  min-width: 80px;
  opacity: 0.55;
  z-index: 1;
  color: var(--star);
}
@media (max-width: 880px) {
  .hero-star-ornament { width: 80px; right: 24px; top: 96px; }
}