/* Outcomes and evaluation (site v3), this page's own design, 2026-09-24. Hand-authored: the words
   live in index.html beside this file, edited directly. Shared pieces (nav, hero grid, the other-areas
   tiles, the demo note card, contact band, footer) come from site.css, site-local.css, art.css and
   practice.css. Tokens only, never hex, so dark mode follows. No eyebrows: hierarchy is font weight.
   Every gold streak is round-ended. Gold marks change; activity is drawn in a plain rule. */

/* ---------- Bands ---------- */
.oc-band { padding-block: var(--space-24); }
.oc-band--ground { background: var(--ground); color: var(--ink); }
.oc-band--alt { background: var(--ground-alt); color: var(--ink); }
.oc-band--stone { background: var(--stone); color: var(--on-stone); }

.oc-h2 { font-family: var(--font-serif); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.oc-head { max-width: 22ch; margin-bottom: var(--space-6); }
.oc-lede { font-size: 21px; line-height: 1.5; color: var(--body); max-width: 56ch; margin: 0 0 var(--space-12); }
.oc-after { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 62ch; margin: var(--space-16) 0 0; }
.oc-band--stone .oc-lede, .oc-band--stone .oc-after { color: var(--on-stone-muted); }

.oc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.oc-split__head { position: sticky; top: calc(var(--site-nav-h) + var(--space-12)); }
.oc-prose { display: flex; flex-direction: column; gap: var(--space-6); }
.oc-prose p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; }
.oc-prose b { color: var(--ink); font-weight: 650; }

/* ---------- Every number has a source: a trace from the report back to the moment of entry ----------
   A gold line runs down through four stops, one segment per stop so it holds when a stop wraps; it
   draws once, top to bottom, when it scrolls into view. The segments are pseudo-elements, so they
   inherit the li's paused play state from .site-reveal. */
.oc-trace { position: relative; margin-bottom: var(--space-12); }
@keyframes oc-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.oc-trace ol { list-style: none; margin: 0; padding: 0 0 0 var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); }
.oc-trace li { position: relative; font-family: var(--font-serif); font-size: 28px; line-height: 1.2; font-weight: 400; color: var(--ink); text-wrap: balance; }
.oc-trace li::before { content: ""; position: absolute; left: calc(-1 * var(--space-12)); top: calc(.6em - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
.oc-trace li:not(:last-child)::after { content: ""; position: absolute; left: calc(-1 * var(--space-12) + 8px - var(--streak) / 2); top: .6em; height: calc(100% + var(--space-5)); width: var(--streak); background: var(--gold); transform-origin: 50% 0; animation: oc-down .4s linear both; animation-play-state: inherit; }
.oc-trace li:nth-child(2)::after { animation-delay: .4s; }
.oc-trace li:nth-child(3)::after { animation-delay: .8s; }
.oc-trace li:first-child { font-size: 36px; font-weight: 600; }

/* ---------- From activity to impact: activity in a plain rule, then one gold line through outcome and impact ----------
   The rules draw once, left to right. The gold is continuous across its two columns and round-ended
   only at its two ends. */
.oc-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-chain li { padding-inline: var(--space-6); }
.oc-chain li:first-child { padding-left: 0; }
.oc-chain li:last-child { padding-right: 0; }
.oc-chain h3 { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-5); }
.oc-chain__rule { display: block; height: var(--streak); background: var(--line-strong); border-radius: var(--radius-streak); transform-origin: 0 50%; animation: oc-across .5s linear both; }
.oc-chain li:nth-child(2) .oc-chain__rule { background: var(--gold); margin-right: calc(-1 * var(--space-6)); border-radius: var(--radius-streak) 0 0 var(--radius-streak); animation-delay: .6s; }
.oc-chain li:nth-child(3) .oc-chain__rule { background: var(--gold); margin-left: calc(-1 * var(--space-6)); border-radius: 0 var(--radius-streak) var(--radius-streak) 0; animation-delay: 1.1s; }
@keyframes oc-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.oc-chain p { font-family: var(--font-serif); font-size: 24px; line-height: 1.3; font-weight: 400; color: var(--ink); margin: var(--space-6) 0 0; max-width: 22ch; text-wrap: pretty; }
.oc-chain li:first-child p { color: var(--body); }

/* ---------- The same measures, year after year: one measure, eight years, drawn once ----------
   The chart stretches to the column (preserveAspectRatio none); every stroke is non-scaling, and the
   dots are round-capped zero-length strokes, so they stay round at any width. Illustrative: no values. */
.oc-years { margin: 0; }
.oc-years__chart { display: block; width: 100%; height: 220px; overflow: visible; animation: oc-reveal 1.6s ease-out both; }
@keyframes oc-reveal { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px -24px -24px -24px); } }
.oc-years__base, .oc-years__tick { fill: none; stroke: var(--line-on-stone); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.oc-years__line { fill: none; stroke: var(--gold); stroke-width: var(--streak); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.oc-years__dot { fill: none; stroke: var(--gold); stroke-width: 18px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.oc-years__caps { display: flex; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-5); }
.oc-years__caps span { font-size: 17px; line-height: 1.4; color: var(--on-stone-muted); }
.oc-years__caps b { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--on-stone); text-align: right; }

/* ---------- What is measured can be managed: where the work already records ---------- */
.oc-moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.oc-moments li { font-family: var(--font-serif); font-size: 36px; line-height: 1.15; font-weight: 300; font-style: italic; letter-spacing: -.01em; color: var(--ink); }

/* ---------- The barometer: the one big statement, then the demo ---------- */
.oc-rule { margin-top: var(--space-4); }
.oc-rule p { font-family: var(--font-serif); font-size: 48px; line-height: 1.12; font-weight: 300; letter-spacing: -.015em; color: var(--ink); margin: 0; max-width: 24ch; text-wrap: balance; }
.oc-rule b { font-weight: 650; }
.oc-rule p.oc-rule__why { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--body); max-width: 60ch; margin-top: var(--space-8); text-wrap: pretty; }
.oc-demo { margin-top: var(--space-16); max-width: 76ch; }
.oc-demo a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold-text); }
.oc-demo a:hover { color: var(--gold-text); }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .oc-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .oc-split__head { position: static; }
  .oc-chain { grid-template-columns: 1fr; gap: var(--space-12); max-width: 60ch; }
  .oc-chain li, .oc-chain li:first-child, .oc-chain li:last-child { padding: 0; }
  .oc-chain__rule, .oc-chain li:nth-child(2) .oc-chain__rule, .oc-chain li:nth-child(3) .oc-chain__rule { width: 48px; margin: 0; border-radius: var(--radius-streak); }
  .oc-chain p { margin-top: var(--space-5); max-width: none; }
}
@media (max-width: 899px) {
  .oc-band { padding-block: var(--space-16); }
  .oc-h2 { font-size: 44px; }
  .oc-rule p { font-size: 38px; }
  .oc-moments li { font-size: 30px; }
  .oc-years__chart { height: 180px; }
}
@media (max-width: 719px) {
  .oc-h2 { font-size: 34px; }
  .oc-trace ol { padding-left: var(--space-8); }
  .oc-trace li::before { left: calc(-1 * var(--space-8)); }
  .oc-trace li:not(:last-child)::after { left: calc(-1 * var(--space-8) + 8px - var(--streak) / 2); }
  .oc-trace li { font-size: 23px; }
  .oc-trace li:first-child { font-size: 28px; }
  .oc-chain h3 { font-size: 28px; }
  .oc-chain p { font-size: 21px; }
  .oc-moments li { font-size: 26px; }
  .oc-rule p { font-size: 28px; }
  .oc-years__chart { height: 140px; }
  .oc-years__dot { stroke-width: 14px; }
  .oc-years__caps b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-trace li::after, .oc-chain__rule, .oc-years__chart { animation: none !important; }
}