/* v4 hero: NASA Earth-limb photograph replaces the animated dot field */
.hero--photo { min-height: min(820px, calc(100svh - 76px)); background: var(--bg); }
.hero-photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* left shade, same idea as panel 2 and the closing */
.hero--photo::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,17,28,.86) 0%, rgba(8,17,28,.62) 30%, rgba(8,17,28,.18) 56%, rgba(8,17,28,0) 72%); }
.hero--photo::after { z-index: 1; }   /* eased bottom fade from polish.css */
.hero--photo .hero-copy { z-index: 2; }
@media (max-width: 700px) {
  .hero--photo { min-height: 0; }
  .hero--photo::before { display: none; }
  .hero-photo { inset: 0 0 auto; height: 100vw; }
  .hero-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(0deg, var(--fade)); }
  .hero--photo .hero-copy { padding-top: 84vw; }
}
/* hero -> panel 2: no rule line, and panel 2's glow eases in from the page navy */
.hero--photo + .feature::before { display: none; }
.hero--photo + .feature > .p2-cover { border-top: 0; }
.hero--photo + .feature > .p2-cover::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--fade-len); z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--fade)); }