/* ============================================================
   profile.css — self-hosted professional profile
   Shares the portfolio's palette so both pages read as one identity.
   ============================================================ */
:root {
  --ink:#0B0E14; --panel:#12161F; --line:#1E2530;
  --phosphor:#5EEAD4; --violet:#A78BFA; --amber:#FBBF24;
  --text:#E7ECF3; --muted:#8B95A7;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }

.profile { max-width:760px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }

/* identity card */
.pcard { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cover { height:150px; background:linear-gradient(120deg,#0f1a2b,var(--violet) 55%,var(--phosphor)); opacity:0.85; }
.pcard__body { padding:0 1.75rem 1.75rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:end; }
.avatar {
  width:104px; height:104px; margin-top:-52px; border-radius:50%;
  background:var(--ink); border:3px solid var(--panel);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:2rem;
  color:var(--phosphor); box-shadow:0 0 0 1px var(--line);
}
.ident { padding-top:1rem; }
.ident__name { font-family:var(--display); font-weight:700; font-size:1.9rem; margin:0; letter-spacing:-0.02em; }
.ident__headline { margin:0.2rem 0 0; color:var(--text); }
.ident__meta { margin:0.35rem 0 0; font-family:var(--mono); font-size:0.8rem; color:var(--muted); }
.ident__meta a { color:var(--phosphor); }
.ident__actions { display:flex; gap:0.75rem; margin-top:1rem; flex-wrap:wrap; }
.ident__quick { list-style:none; margin:0; padding-top:1rem; display:grid; gap:0.75rem; text-align:right; }
.ident__quick li { font-family:var(--mono); font-size:0.72rem; color:var(--muted); text-transform:uppercase; }
.ident__quick span { display:block; font-family:var(--display); font-size:1.1rem; color:var(--phosphor); text-transform:none; }
@media (max-width:620px){
  .pcard__body { grid-template-columns:1fr; }
  .ident__quick { text-align:left; grid-auto-flow:column; justify-content:start; gap:1.5rem; }
}

.btn { font-family:var(--mono); font-size:0.82rem; padding:0.6rem 1.2rem; border-radius:3px; border:1px solid var(--line); transition:transform .15s,border-color .2s; text-decoration:none; }
.btn:hover { transform:translateY(-2px); }
.btn--solid { background:var(--phosphor); color:var(--ink); border-color:var(--phosphor); font-weight:500; }
.btn--ghost:hover { border-color:var(--phosphor); color:var(--phosphor); }

/* content blocks */
.block { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.75rem; margin-top:1rem; }
.block__title { font-family:var(--display); font-weight:500; font-size:1.15rem; margin:0 0 1rem; }
.block__text { margin:0; color:var(--text); }

/* experience */
.xp { list-style:none; margin:0; padding:0; }
.xp__item { display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.xp__item:first-child { border-top:0; padding-top:0; }
.xp__mark { width:10px; height:10px; margin-top:0.5rem; border-radius:50%; background:var(--violet); box-shadow:0 0 10px var(--violet); }
.xp__item h3 { font-family:var(--display); font-weight:500; font-size:1.05rem; margin:0; }
.xp__org { font-family:var(--mono); font-size:0.78rem; color:var(--amber); margin:0.15rem 0 0.4rem; }
.xp__desc { margin:0; color:var(--muted); font-size:0.95rem; }

/* skills */
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0.6rem; }
.chips li { font-family:var(--mono); font-size:0.8rem; color:var(--text); background:var(--ink); border:1px solid var(--line); border-radius:20px; padding:0.4rem 0.9rem; }

/* links */
.links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.links__a { font-family:var(--mono); font-size:0.9rem; color:var(--phosphor); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.links__a:hover { border-color:var(--phosphor); }

.pfooter { text-align:center; font-family:var(--mono); font-size:0.72rem; color:var(--muted); margin-top:2rem; }

a:focus-visible, .btn:focus-visible { outline:2px solid var(--phosphor); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .btn:hover{transform:none;} }