:root{
  --bg:#F2F4F8; --ink:#101A33; --muted:#5B6480; --accent:#2447F5; --soft:#DCE3F5; --line:#C9D1E6;
  --head:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0F1426; --ink:#E8ECFA; --muted:#9AA4C7; --accent:#7D93FF; --soft:#1B2340; --line:#2A3358}
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.05rem;line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.page{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:64px 32px;display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:64px;align-items:center}

.photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--soft);border-radius:4px;box-shadow:14px 14px 0 var(--soft),14px 14px 0 1px var(--line)}

.name{font-family:var(--head);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;letter-spacing:-.03em}
.role{margin-top:14px;color:var(--accent);font-weight:500}
.bio{margin-top:28px;max-width:34em}
.bio p+p{margin-top:14px;color:var(--muted)}

.facts{margin-top:36px;max-width:34em}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.95rem}
.facts dd{margin:0}

.foot{padding:24px 32px 32px;text-align:center;color:var(--muted);font-size:.9rem}

@media (max-width:760px){
  .page{grid-template-columns:1fr;gap:40px;padding:40px 24px}
  .photo{max-width:240px}
  .facts div{grid-template-columns:1fr;gap:0}
}