/* hero.css — the navy top section: date line, headline, intro text,
   and the circuit-line drawing in the background. */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.hero__circuit {
  position: absolute;
  right: -60px;
  top: 60px;
  width: 640px;
  height: 640px;
  opacity: 0.18;
  pointer-events: none;
}

.hero__top { position: relative; padding-top: 20px; }
.hero__body { position: relative; padding-top: 56px; padding-bottom: 80px; }

.hero__date {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__date-rule { width: 48px; height: 2px; background: var(--gold); }

@media (max-width: 480px) {
  .hero__date { font-size: 13px; letter-spacing: 0.1em; gap: 8px; white-space: nowrap; }
  .hero__date-rule { width: 24px; }
}

.hero__title {
  max-width: 14em;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.hero__title-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  margin-top: 24px;
  max-width: 34em;
  font-size: 21px;
  color: var(--on-navy-soft);
}