/* page-hero defaults now live in css/site.css; keep only the per-page
   measure override. */
.page-hero .wrap { max-width: 56ch; }

.bio-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 62px); align-items: start; }
.bio-split > * { min-width: 0; }
.bio-portrait { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); position: sticky; top: 92px; }
.bio-body h2 { margin-top: 36px; }
.bio-body h2:first-child { margin-top: 0; }
.bio-body p { margin-top: 16px; color: var(--fg); }
.bio-body p.lead { color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.fact .k { font-family: var(--font-display); font-size: 2rem; color: var(--accent); line-height: 1; }
.fact .v { color: var(--muted); font-size: .9rem; margin-top: 8px; }

.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.value { display: flex; gap: 14px; align-items: flex-start; }
.value .dot { width: 34px; height: 34px; border-radius: 9px; flex: none; background: rgba(60,122,89,.12); color: var(--green-ink); display: grid; place-items: center; }
.value h3 { font-size: 1.1rem; }
.value p { color: var(--muted); font-size: .94rem; margin-top: 4px; }

.interview { margin-top: 30px; padding: 22px 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.interview-intro { color: var(--muted); margin: 0; }
.interview blockquote { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.4; color: var(--ink); letter-spacing: -.01em; max-width: 62ch; margin: 14px 0; }
.interview .ts { font-size: .8rem; font-weight: 700; color: var(--green-ink); text-decoration: none; white-space: nowrap; }
.interview .ts:hover { text-decoration: underline; }
.interview .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .bio-split { grid-template-columns: 1fr; }
  .bio-portrait { position: static; aspect-ratio: auto; width: min(100%, 380px); max-width: 100%; height: auto; margin-inline: auto; }
  .facts { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .interview .btn { max-width: 100%; padding-inline: 1.15em; white-space: normal; text-align: center; }
}