/* brev.software's pages (brev/landing and the four pages beside it). Every component the
   pages draw is a shared .c- one and every colour reaches it through the roles 02-brands/_brev.css
   re-tints, so what is left for this file is the page's own rhythm: the vertical spacing between
   sections, the heading above each, and the one element the components have no answer for.

   This is the layer a page-specific rule belongs in, and the only layer that may name a page. A
   rule a Brev page needs goes here rather than inside a component. */
.p-brev {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--space-lg) var(--space-xl);
}

.p-brev__hero { margin-block-end: calc(var(--space-lg) - var(--space-2xl)); }

.p-brev__head { display: flex; flex-direction: column; gap: var(--space-sm); }
.p-brev__title {
  margin: 0;
  font-size: var(--text-2xl);
  color: var(--text-bright);
  letter-spacing: var(--tracking-wide);
}
.p-brev__standfirst {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-muted);
}

.p-brev__section { display: flex; flex-direction: column; gap: var(--space-lg); }

/* The section heading is set the way the menu bar sets a label — small, upper, tracked — with the
   accent marker before it, so it reads as a divider without a rule being drawn under it. */
.p-brev__section-title {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.p-brev__section-title::before { content: "◆ "; color: var(--accent); }

/* The illustration is drawn on a 240×120 viewBox and scales to whatever column it lands in; the
   height follows from the ratio, so nothing here fixes one. */
.p-brev__illustration { width: 100%; height: auto; display: block; }

/* An .o-split is a grid, whose two items stretch to the taller of them — which is what a callout
   beside prose wants and a contents panel beside an article does not. This is the opt-out, and it
   sits here rather than in the object because the choice belongs to the page. */
.p-brev__split--top { align-items: start; }