:root{--bg:#0b0e12;--card:#11161c;--text:#e7edf3;--muted:#9fb0c0;--accent:#60a5fa;--ring:#1f2937}
@media(prefers-color-scheme:light){:root{--bg:#f7fafc;--card:#fff;--text:#0f172a;--muted:#475569;--accent:#2563eb;--ring:#e5e7eb}}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ring);padding:12px 0}
nav a{margin-left:16px;font-weight:600}
.hero{padding:42px 0 8px;display:grid;grid-template-columns:1fr;gap:16px}
.hero h1{font-size:clamp(20px,3vw,30px);margin:0 0 8px}.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:20px;box-shadow:0 10px 30px #0002}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;border:none;box-shadow:0 6px 18px #0003}
footer{text-align:center;margin:40px 0 24px;color:var(--muted)}
@media(min-width:820px){.hero{grid-template-columns:1.2fr .8fr}.grid{grid-template-columns:1fr 1fr}}




/* Circular avatar + caption */
.hero .avatar{
  width: clamp(160px, 28vw, 220px);
  height: clamp(160px, 28vw, 220px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%; /* tweak to center your face */
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 24px #0006;
}
.card.photo{ background: transparent; border: 0; box-shadow: none; padding: 8px; }
.avatar-wrap{ margin: 0; }
.caption{ text-align: center; margin-top: 10px; }
.caption .name{ font-weight: 800; font-size: 18px; line-height: 1.2; }
.caption .tagline{ color: var(--muted); font-size: 14px; }

/* Section titles + lists */
.section h2{ margin: 0 0 10px; font-size: clamp(18px, 2.2vw, 22px); }
.timeline{ list-style: none; padding: 0; margin: 0; }
.timeline li{ margin: 8px 0; }
.timeline .meta{ color: var(--muted); font-size: 14px; margin-right: 8px; }
.bullets{ margin: 0; padding-left: 18px; }
.bullets li{ margin: 6px 0; }