.eclipse-page .page-intro {
  max-width: 960px;
}

.eclipse-page .page-intro h1 {
  color: color-mix(in srgb, var(--text-color) 72%, var(--accent-color));
}

.eclipse-panorama-section {
  gap: var(--space-m);
}

.eclipse-panorama-section .section-heading {
  max-width: 820px;
}

.eclipse-panorama {
  position: relative;
  width: min(1600px, calc(100vw - 2rem));
  margin: 0 0 0 50%;
  transform: translateX(-50%);
  padding: clamp(.45rem, 1vw, .85rem);
  border-radius: var(--radius-lg);
  background: #020202;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
  box-shadow: 0 24px 60px rgba(31, 23, 20, .2);
  overflow: hidden;
}

.eclipse-panorama::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 46px rgba(211, 119, 55, .08);
  pointer-events: none;
}

.eclipse-panorama img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - .5rem);
  cursor: zoom-in;
  transition: filter var(--focus-duration) var(--focus-ease);
}

.eclipse-panorama img:hover {
  filter: brightness(1.06);
}

.eclipse-panorama-note {
  margin: -.65rem 0 0;
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.6;
}

.eclipse-page .highlight-layout .cinematic-frame {
  padding: clamp(.45rem, 1vw, .75rem);
  border-radius: var(--radius-lg);
  background: #020202;
}

.eclipse-page .highlight-layout .cinematic-frame img {
  min-height: 48vh;
  max-height: 720px;
  object-fit: cover;
  box-shadow: none;
}

.eclipse-page .closing-layout .story-card img {
  background: #020202;
}

.eclipse-page .all-images-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eclipse-page .all-images-grid figure {
  background: #020202;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.eclipse-page .related-section {
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

@media (max-width: 1000px) {
  .eclipse-page .all-images-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .eclipse-panorama {
    width: calc(100vw - 1rem);
    padding: .3rem;
    border-radius: 16px;
  }

  .eclipse-panorama img {
    border-radius: 12px;
  }

  .eclipse-page .all-images-grid {
    grid-template-columns: 1fr;
  }

  .eclipse-page .highlight-layout .cinematic-frame img {
    min-height: 34vh;
  }
}