/* Homepage hero: open, centred copy on the light page canvas with the
   full-width animated investigation map below (map styles live in
   public_trace.css). No enclosing shell, window, or frame. */

/* Visible gap below the FIXED nav = main padding (5.25rem) + this
   top padding − nav bottom edge (~77px): 3.25rem lands the lead-in
   ~59px clear of the nav, and the lead's own .75rem bottom margin
   keeps it visually attached to the H1 (~23px). */
.hero{
  padding:2.75rem 1.5rem 1.5rem;
  text-align:center;
}
@media(min-width:1024px){.hero{padding:2.75rem 2rem 2rem}}

/* problem lead-in above the H1: lead scale, quiet weight — context
   before the claim, clearly subordinate to the H1 */
.hero-lead{
  font-size:1.5rem;line-height:1.45;
  font-weight:500;color:var(--foreground);
  margin:0 auto .75rem;
}

/* one line at ~1600px and wider; natural wrapping below that */
.hero-h{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 3vw, 3.4rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.08;
  color:var(--foreground);
  text-wrap:balance;
  margin:0 auto 1.5rem;
}
.hero-sub{
  font-size:1.0625rem;line-height:1.65;
  color:var(--muted-foreground);
  max-width:50rem;
  margin:0 auto 2rem;
}
.hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem;
}

/* the investigation map sits directly on the page canvas,
   spanning most of the viewport with safe gutters */
.trace{
  width:100%;
  padding:0 1.5rem;
  margin:2.75rem auto 0;
}
@media(min-width:1024px){.trace{padding:0 2.5rem}}

@media(max-width:600px){
  .hero{padding:1.875rem 1rem 1rem}
  .hero-lead{font-size:1.25rem;margin-bottom:.6rem}
  .hero-h{font-size:clamp(1.9rem,7vw,2.4rem);letter-spacing:-.025em}
  .hero-sub{font-size:1rem}
  .trace{margin-top:2.25rem;padding:0 .5rem}
}