/* Shared editorial prose for article + case study detail pages */

.article-prose,
.portfolio-prose {
  /* Editorial rhythm: blocks breathe, and a heading sits closer to its own
     paragraph than to the block above it. */
  --prose-block-gap: var(--gap-lg);
  --prose-heading-top: calc(var(--gap-lg) * 1.5);
  --prose-heading-gap: var(--gap);

  margin-top: var(--gap-lg);
  max-width: 72ch;
  text-align: left;
  color: var(--color-ink);
  font-family: var(--type-body-family);
  font-weight: var(--type-body-weight);
  font-style: var(--type-body-style);
  font-size: var(--type-body-size);
  line-height: var(--type-body-height);
}

.article-prose > :first-child,
.portfolio-prose > :first-child {
  margin-top: 0;
}

.article-prose p + p,
.portfolio-prose p + p {
  margin-top: var(--prose-block-gap);
}

.article-prose h2,
.portfolio-prose h2 {
  margin-top: var(--prose-heading-top);
  margin-bottom: var(--prose-heading-gap);
  text-transform: uppercase;
  color: var(--color-ink);
  font-family: var(--type-accent-title-family);
  font-weight: var(--type-accent-title-weight);
  font-style: var(--type-accent-title-style);
  font-size: var(--type-accent-title-size);
  line-height: var(--type-accent-title-height);
}

.article-prose h3,
.portfolio-prose h3 {
  margin-top: calc(var(--prose-block-gap) * 1.25);
  margin-bottom: calc(var(--prose-heading-gap) / 2);
  color: var(--color-ink);
  font-family: var(--type-card-title-family);
  font-weight: var(--type-card-title-weight);
  font-style: var(--type-card-title-style);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-height);
}

/* h4+ still needs rhythm — editors reach for it inside long case studies. */
.article-prose h4,
.article-prose h5,
.article-prose h6,
.portfolio-prose h4,
.portfolio-prose h5,
.portfolio-prose h6 {
  margin-top: var(--prose-block-gap);
  margin-bottom: calc(var(--prose-heading-gap) / 2);
  color: var(--color-ink);
  font-family: var(--type-card-title-family);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4;
}

.article-prose ul,
.article-prose ol,
.portfolio-prose ul,
.portfolio-prose ol {
  margin-top: var(--prose-block-gap);
  padding-left: 1.25em;
}

.article-prose li + li,
.portfolio-prose li + li {
  margin-top: 12px;
}

.article-prose a,
.portfolio-prose a {
  color: var(--color-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* In-body diagrams: framed like a card so they read as an exhibit, not a stray
   screenshot dropped into the copy. */
.article-prose figure,
.portfolio-prose figure {
  margin: var(--prose-block-gap) 0 0;
}

.article-prose img,
.portfolio-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--color-gray);
  background: var(--color-sky-wash);
}

.article-prose figcaption,
.portfolio-prose figcaption {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 0.875em;
  line-height: 1.5;
}

.article-prose blockquote,
.portfolio-prose blockquote {
  margin-top: var(--prose-block-gap);
  padding-left: var(--gap);
  border-left: 2px solid var(--color-magenta);
  color: var(--color-muted);
  font-family: var(--type-lead-family);
  font-weight: var(--type-lead-weight);
  font-style: italic;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-height);
}

/* Last: a heading's margin-bottom is the only gap under it, whatever follows. */
.article-prose :is(h2, h3, h4, h5, h6) + *,
.portfolio-prose :is(h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}