/* ------------------------------------------------------------------
   Hero: typographic opening (.hero--void).

   For pages that must establish the brand before showing the object —
   the Story page opens as a manifesto, not an About page. No cosmic
   photography has been supplied, so rather than borrow an unrelated
   product shot the section opens on a deep radial field: the charte's
   noir, revealed by a suggestion of light rather than stated.

   The headline is centred and given room, since it is carrying the
   section alone.
   ------------------------------------------------------------------ */
.hero--void .himg{
  /* A slow breath in the field, so the black is alive but never busy. */
  animation:sn-void-breathe 26s ease-in-out infinite;
}
@keyframes sn-void-breathe{
  0%,100%{transform:scale(1);   opacity:1;}
  50%    {transform:scale(1.06); opacity:.92;}
}

.hero--void .htext{
  max-width:min(20ch,92vw);
  margin-inline:auto;
  text-align:center;
}
.hero--void .htext h1{
  font-size:clamp(30px,5.4vw,74px);
  line-height:1.12;
  text-wrap:balance;
}

/* No photograph to protect the type, so the scrim is unnecessary. */
.hero--void .hshade{opacity:.35;}

@media (prefers-reduced-motion:reduce){
  .hero--void .himg{animation:none;}
}

/* ------------------------------------------------------------------
   Story hero: keep the headline clear of the subject.

   The hero photograph places its subject right of centre (the supernova
   sits at ~67%). Without a width bound the headline ran the full frame
   and crossed it. Constraining the type to the left keeps both legible
   and gives the image somewhere to breathe.
   ------------------------------------------------------------------ */
.hero--narrowtext .htext{
  max-width:min(46vw, 620px);
}

@media (max-width:900px){
  .hero--narrowtext .htext{max-width:100%;}
}