.single-post__hero {
  position: relative;
  overflow: clip;
  margin: 0;
  width: 100%;
  height: 100svh;
  max-height: 100svh;
}

.single-post__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Parallax + slight scale-up as the hero scrolls out of view — shares
   the single-hero-parallax keyframes defined in header.css (loaded on
   every page) with .single-object__hero img, gated behind @supports
   so browsers without animation-timeline (Safari, Firefox as of
   writing) keep the static image instead of an ambiguous fallback. */
@supports (animation-timeline: scroll()) {
  .single-post__hero img {
    animation: single-hero-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}

.single-post__hero-body {
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: calc(var(--theme-section-padding) * 2);
  background-image: linear-gradient(0deg, var(--brand-color-dark), transparent);
  color: var(--brand-color-light);
}

.single-post__date {
  display: inline-block;
  margin: 0 0 0.5em;
  padding: .5em 1em;
  background: var(--theme-color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.single-post__title {
  margin: 0 auto;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  max-width: 70rem;
}

.single-post__content {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--theme-section-padding);
  font-size: var(--theme-font-size-copy);
}

.single-post__content > p:first-child {
  font-weight: 500;
  font-size: 1.1em;
}

.single-post__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: var(--theme-section-padding);
}

@media (width <= 768px) {
  .single-post__content {
    padding: calc(var(--theme-section-padding) * 2);
  }

  .single-post__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 640px) {
  .single-post__gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

.single-post__gallery-item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.single-post__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-post__related h2 {
  margin-top: 0;
}

/* .section-objects has its own top padding (parts/section-objects.css)
   meant to sit under a hero it directly follows on other pages — here
   it follows plain content, so drop that top padding and let the
   heading's own -10rem margin-top (front-page.css) pull it up to
   overlap the section above instead. margin-top on the section itself
   makes room for that overlap so it eats into empty space rather than
   the content above it. flow-root establishes a new block formatting
   context so the section contains the h2's negative margin-top
   without the section's own box shifting up too. */
.section-objects.single-post__related {
  margin-top: 10rem;
  padding-top: 0;
  display: flow-root;
}

.section-objects.single-post__related h2 {
  margin-top: -10rem;
}