:root { --bg:#0b0c10; --fg:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; }
*{box-sizing:border-box} 
html,body{height:100%}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1000px 700px at 20% 10%,#111827 0%,#0b0c10 60%);
  color:var(--fg);
  display:grid;
  place-items:center;
}

.wrap {
  width:min(720px,92vw);
  line-height:1.6;
  padding:6rem 0 5rem;
  text-align:center;   /* ✅ center all text and inline elements */
}

h1 {
  font-size:clamp(2.4rem,7vw,4rem);
  margin:0 0 .25rem;
  letter-spacing:-.02em;
}

.name {
  font-size:clamp(1.25rem,3.4vw,1.6rem);
  margin:0 0 .75rem;
}

.tagline {
  font-size:clamp(1.05rem,2.8vw,1.15rem);
  color:var(--muted);
  margin:0 0 1.5rem;
  max-width:58ch;
  margin-left:auto;   /* ✅ keep tagline centered when max-width is active */
  margin-right:auto;
}

.links {
  list-style:none;
  padding:0;
  margin:2rem 0 0;
  display:inline-grid;  /* ✅ shrink to content width */
  gap:.5rem;
  text-align:left;      /* ✅ keeps the links neatly aligned inside the centered block */
}

a {
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
a:hover {color:var(--accent);border-color:var(--accent)}

.profile {
  width:220px;
  height:220px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 1.5rem;   /* ✅ center image */
  box-shadow:0 0 18px rgba(0,0,0,0.5);
}