/* Outcome layer: shared presentation for the outcome index and the evergreen
   outcome pages. The outcome is the product, so the page's central object is the
   before-and-after: two states of the same work, set side by side on one rule. */

/* Before / after ---------------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4);
  align-items: start; margin-top: var(--space-4); }
.ba-rule { width: 1px; background: var(--rule-strong); align-self: stretch; }
.ba-col .eyebrow { display: block; margin-bottom: var(--space-2); }
.ba-col p { font-family: var(--font-mono); font-size: var(--size-prose);
  line-height: var(--lh-prose); color: var(--text-body); margin: 0; }
.ba-col--after p { color: var(--text-display); }
@media (max-width: 760px) {
  .ba { grid-template-columns: 1fr; }
  .ba-rule { width: auto; height: 1px; }
}

/* KPI band ---------------------------------------------------------------- */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.kpi { flex: 1; min-width: 210px; background: var(--surface-card); border: var(--border-default);
  padding: var(--space-3); }
.kpi .lbl { font-family: var(--font-mono); font-size: var(--size-mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-700);
  display: block; margin-bottom: var(--space-1); }
.kpi p { font-family: var(--font-mono); font-size: var(--size-prose-sm);
  line-height: var(--lh-prose); color: var(--text-body); margin: 0; }

/* Outcome cards on the index --------------------------------------------- */
.oc { border: var(--border-default); background: var(--surface-card); padding: var(--space-5);
  margin-bottom: var(--space-3); display: block; text-decoration: none; color: inherit;
  transition: border-color var(--dur-instant) var(--ease-standard); }
a.oc:hover { border-color: var(--copper-600); }
.oc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2); }
.oc h3 { font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: var(--track-display);
  color: var(--text-display); margin: 0; max-width: 22ch; }
a.oc:hover h3 { color: var(--copper-700); }
.oc-stage { font-family: var(--font-mono); font-size: var(--size-mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--rule-strong); padding: 3px var(--space-2); color: var(--text-muted); }
.oc-stage--active { border-color: var(--copper-600); color: var(--copper-700); }
.oc p.claim { font-family: var(--font-mono); font-size: var(--size-prose);
  line-height: var(--lh-prose); color: var(--text-body); margin: 0 0 var(--space-3); max-width: 62ch; }
.oc-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); border-top: var(--border-hairline);
  padding-top: var(--space-3); }
.oc-meta div { min-width: 190px; flex: 1; }
.oc-meta .lbl { display: block; font-family: var(--font-mono); font-size: var(--size-mono-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-700);
  margin-bottom: 3px; }
.oc-meta span.val { font-family: var(--font-mono); font-size: var(--size-prose-sm);
  line-height: var(--lh-prose); color: var(--text-body); }

/* The evidence posture note that sits under a hypothesis-stage outcome ----- */
.stagenote { border-left: 2px solid var(--copper-600); padding: var(--space-2) 0 var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0; font-family: var(--font-mono); font-size: var(--size-prose-sm);
  line-height: var(--lh-prose); color: var(--text-body); max-width: var(--measure-prose); }