/* ═══════════════════════════════════════════════════════════════
   Components used only by /about and /projects.
   Shared components (.label, .sec, .pull, .cta-band, .pager and the
   footer) live in style.css, because all three pages use them.

   The light "paper" theme /about used to carry has been removed —
   it was the single biggest inconsistency between the three pages.
   ═══════════════════════════════════════════════════════════════ */

.page {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(110px, 17vh, 190px) var(--gutter) clamp(50px, 7vh, 90px);
}
.rule { height: 1px; background: var(--line-2); width: 100%; margin: clamp(40px, 6vw, 80px) 0 }

/* ── two-column section: heading left, prose right ─────────────── */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(26px, 5vw, 80px); align-items: start;
}
.split__body > p { color: var(--muted); margin-bottom: 1.3em; max-width: 60ch }
.split__body > p:last-child { margin-bottom: 0 }
.split__body .pull { color: var(--paper); margin-bottom: 1em }

/* ── numbered principle rows ───────────────────────────────────── */
.rows { display: grid; gap: 3px; margin-top: clamp(28px, 4vw, 48px) }
.rows__item {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 26px);
  background: var(--ink-2);
  transition: background-color .2s var(--ease-io);
}
.rows__item:hover { background: color-mix(in srgb, var(--ink-2) 80%, var(--paper)) }
.rows__no { font-family: var(--font-mono); font-size: .66rem; color: var(--amber); flex: none }
.rows__sep { color: var(--line); flex: none }
.rows__label { font-weight: 600; letter-spacing: -.01em; flex: none }
.rows__body { color: var(--muted); font-size: .92rem; margin-left: auto; text-align: right; max-width: 52ch }
.rows__arrow {
  width: 17px; height: 17px; flex: none; color: var(--faint);
  transition: transform .2s var(--ease-io), color .2s linear;
}
.rows__item:hover .rows__arrow { transform: translateX(3px); color: var(--paper) }

/* ── leadership block ──────────────────────────────────────────── */
.bio {
  display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: start;
  margin-top: clamp(28px, 4vw, 48px);
}
.bio__card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2vw, 26px);
  background: linear-gradient(170deg, rgba(244,243,240,.045), rgba(244,243,240,.012));
}
.bio__card .portrait { aspect-ratio: 4 / 5; border-radius: 12px }
.bio__name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; margin-top: 16px }
.bio__role { color: var(--amber); margin-top: 6px }
.bio__body > p { color: var(--muted); margin-bottom: 1.3em; max-width: 60ch }
.bio__body b { color: var(--paper); font-weight: 600 }

.facts { list-style: none; display: grid; gap: 0; margin-top: clamp(18px, 2.4vw, 28px) }
.facts li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-top: 1px solid var(--line-2); font-size: .9rem;
}
.facts b { font-weight: 600 }
.facts span { color: var(--muted); text-align: right }
.facts a { border-bottom: 1px solid var(--line); transition: color .25s var(--ease) }
.facts a:hover { color: var(--amber); border-bottom-color: var(--amber) }

/* ── project case entries ──────────────────────────────────────── */
.case { padding: clamp(46px, 7vw, 96px) 0; border-top: 1px solid var(--line-2) }
.case:first-of-type { border-top: 0; padding-top: 0 }
.case__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.case__lede { color: var(--muted); max-width: 52ch }
.case__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px); margin-top: clamp(24px, 3.4vw, 44px);
}
.case__cell {
  border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(18px, 2.2vw, 28px);
  transition: border-color .3s var(--ease);
}
.case__cell:hover { border-color: rgba(255, 106, 43, .4) }
.case__cell h4 { font-size: .98rem; font-weight: 600; margin: 12px 0 8px; letter-spacing: -.015em }
.case__cell p { color: var(--muted); font-size: .9rem }

/* ── prediction model visual ───────────────────────────────────── */
.pred { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: linear-gradient(168deg, #12121E, #0A0A12) }
.pred__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,.025);
}
.pred__title { color: var(--muted); margin-inline: auto }
.pred__badge { color: var(--faint); font-size: .52rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px }
.pred__body { padding: clamp(16px, 2vw, 26px) }
.pred__chart svg { width: 100%; height: clamp(150px, 20vw, 250px); display: block }
.pred__grid-line { stroke: rgba(244,243,240,.07); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke }
.pred__band { fill: rgba(106,130,255,.16) }
.pred__actual { fill: none; stroke: #F4F3F0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.pred__forecast { fill: none; stroke: #6A82FF; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.pred__split { stroke: rgba(255,106,43,.55); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke }
.js .pred__actual { stroke-dasharray: 1; stroke-dashoffset: 1 }
.js .case.is-in .pred__actual { animation: app-draw 1.7s var(--ease) forwards }
.pred__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px }
.pred__legend span { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: .58rem }
.pred__swatch { width: 16px; height: 3px; border-radius: 2px; flex: none }
.pred__swatch--actual { background: #F4F3F0 }
.pred__swatch--fc { background: #6A82FF }
.pred__swatch--band { background: rgba(106,130,255,.4); height: 10px; border-radius: 3px }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .split, .case__head, .bio { grid-template-columns: 1fr }
  .case__grid { grid-template-columns: 1fr }
  .bio__card { max-width: 300px }
  .rows__item { flex-wrap: wrap; gap: 10px 14px }
  .rows__body { margin-left: 0; text-align: left; width: 100%; order: 3 }
}

/* ── founder portrait placeholder (About only) ─────────────────── */
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: 12px;
  overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--blue-deep), #2A1338 55%, #4A1C10);
}
.portrait__initials {
  font-family: var(--font-wordmark); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.05em;
  color: rgba(244, 243, 240, .9);
}
.portrait__ring {
  position: absolute; inset: 12%; border-radius: 50%;
  border: 1px dashed rgba(244, 243, 240, .22);
  animation: spin 24s linear infinite;
}