/* Minimal content scaffolding using the approved visual foundation. */
.content-page > * + * {
  margin-block-start: var(--space-6);
}

.content-page__header {
  max-inline-size: 65ch;
}

.content-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-list > li {
  min-inline-size: 0;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-stone);
}

.content-page__hero {
  max-inline-size: 72rem;
}

.project-facts,
.work-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.project-facts dt,
.work-item__facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.project-facts dd,
.work-item__facts dd {
  margin: 0;
}

.content-prose .rich-text > * + * {
  margin-block-start: var(--space-4);
}

/* Project-detail composition is independent of other content pages. */
.project-detail {
  max-inline-size: calc(72rem + 2 * var(--gutter));
}

.project-detail__header {
  max-inline-size: 64rem;
  margin-inline: auto;
  text-align: center;
}

.project-detail__header h1 {
  max-inline-size: 24ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
}

.project-detail__header .lead {
  max-inline-size: 50ch;
  margin-inline: auto;
}

.project-detail > .project-facts {
  justify-content: center;
  text-align: center;
  font-size: var(--text-small);
}

.project-detail > .content-prose,
.project-detail__services {
  max-inline-size: 42rem;
  margin-inline: auto;
  text-align: left;
}

.project-gallery {
  max-inline-size: 72rem;
}

.project-gallery > h2 {
  margin-block-end: var(--space-5);
  text-align: center;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.project-gallery__grid {
  display: grid;
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.project-gallery__grid figure {
  min-inline-size: 0;
  margin: 0;
}

.project-gallery__grid img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-gallery figcaption {
  margin-block-start: var(--space-3);
}

@media (min-width: 48rem) {
  .project-gallery__grid {
    max-inline-size: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .content-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .project-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}