/* The template every post is drawn on (posts/show), and the one the account and stats pages
   borrow: a document header fenced by rules, then a contents rail beside a column of prose. No
   page is hand-built on it, so a rule here reaches the whole corpus. */

.p-article { display: flex; flex-direction: column; gap: var(--space-2xl); }

/* The rail-and-column split is o-split--docs, named for the page it was first cut for rather than
   for the shape. The article overrides that object's fixed 12rem rail so the body column is sized
   to the reading measure and the rail takes what is left, rather than the body column keeping
   slack it cannot use: --measure is in ch, the body sets it at --text-lg, and one monospace family
   sizes both, so the ×1.15 converts it. Below the container's full width the body column shrinks
   first and the rail falls back to its 12rem minimum. Everything in the body is bounded by that
   column, so a wide figure or table scrolls inside it instead of flowing over the right gutter. */
@media (min-width: 56rem) {
  .p-article .o-split--docs {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, calc(var(--measure) * 1.15));
  }
}

.p-article__frontmatter {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  padding-block: var(--space-lg);
  border-block: var(--bw) dashed var(--line-strong);
}
.p-article__title {
  color: var(--text-bright);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.p-article__summary {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}

.p-article__epigraph { display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--measure); margin: 0; }
.p-article__epigraph-text { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); }
.p-article__epigraph-cite { color: var(--text-dim); font-size: var(--text-sm); }
.p-article__epigraph-src { color: var(--text-bright); }

.p-article__body { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }
.p-article__section { display: flex; flex-direction: column; gap: var(--space-lg); }
.p-article__heading {
  color: var(--text-bright);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
/* A post's body is one section, so the section's flex gap is all that separates a heading from
   the prose above it as well as below. A heading with anything before it takes an extra gap on
   top — twice the space above that it has below — or it reads as another line of the passage it
   is ending rather than as the start of one. */
.p-article__body * + .p-article__heading { margin-block-start: var(--space-lg); }

/* A still and a screencast are the same beat in a body, so they take the same air on top of the
   section's own rhythm and neither is set apart from the other by the room around it. */
.p-article__section > .c-postfigure,
.p-article__section > .c-videoframe { margin-block: var(--space-lg); }

/* The reading size for the c-prose markup Post::Renderer emits, a step above the size prose takes
   elsewhere: a post is read start to finish, not consulted. */
.p-article .c-prose { font-size: var(--text-lg); line-height: var(--lh-cell); }

.p-article__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--measure);
  /* A flex gap does not collapse with a margin, so this adds to the section's gap and sets the
     quote apart from the prose it interrupts at every width. */
  margin-block: var(--space-sm);
  margin-inline: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--bw) solid var(--line-strong);
}
.p-article__quote-text { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); }
.p-article__quote-cite { color: var(--text-dim); font-size: var(--text-sm); }
.p-article__quote-src { color: var(--text-bright); }