/* S10 — GRMH DEVELOPMENT (bone venture chapter).
   Copy column left; the roles rail right: a vertical survey line whose
   fill lights five nodes on scrub. CSS defaults render everything
   drawn, lit and fully visible — motion mode alone sets hidden states
   (reduced-motion law). */

.s10 { padding-block: 150px; }

.s10-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.s10-name { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.s10-grid {
  margin-top: var(--rhythm-layer);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: calc(var(--gutter) * 2);
  align-items: start;
}

.s10-h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); }

/* ---------- the rail: a survey instrument, not an infographic ---------- */

.s10-railwrap {
  position: relative;
  padding-left: 46px;
  padding-block: 10px;
}

.s10-rail {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
}
.s10-rail-track {
  position: absolute;
  inset: 0;
  background: rgba(156, 85, 51, .22);
}
.s10-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--earth);
  /* fully drawn by default; motion mode sets scaleY(0) then scrubs */
  transform-origin: top center;
}

.s10-roles { display: grid; row-gap: 42px; }

.s10-role { position: relative; }

.s10-node {
  position: absolute;
  left: -46px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--earth);
  background: var(--earth); /* lit by default; motion mode unlights, the scrub relights */
  transform: translateX(-50%);
}

.s10-role-text {
  display: block;
  max-width: 40ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.s10-ctas {
  margin-top: var(--rhythm-layer);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 899px) {
  .s10 { padding-block: 96px; }
  .s10-grid { grid-template-columns: 1fr; }
  .s10-railwrap { margin-top: 72px; }
  .s10-roles { row-gap: 34px; }
  .s10-ctas { margin-top: 72px; gap: 10px; }
}