:root{
  --bg:#fafafa; --panel:#ffffff; --ink:#111827; --ink-dim:#4b5563;
  --accent:#2563eb; --border:#e5e7eb; --muted:#6b7280;
  --shadow:0 10px 20px rgba(0,0,0,.06), 0 3px 6px rgba(0,0,0,.05);
  --radius:14px; --w-sidebar:320px; --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}

/* Layout */
.shell{display:grid;grid-template-columns:var(--w-sidebar) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;background:var(--panel);border-right:1px solid var(--border)}
.sidewrap {
  padding: 22px;
  max-width: var(--w-sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;   /* keep avatar + text centered */
  justify-content: center;
}

/* specifically left-align only .btns inside */
.sidewrap .btns {
  align-self: flex-start;   /* override parent center */
  width: 100%;              /* optional: remove if you want natural shrink */
}

.main{min-width:0}

/* Topbar (right) */
.topbar{position:sticky;top:0;z-index:40;background:rgba(250,250,250,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.topwrap{max-width:calc(var(--maxw) - var(--w-sidebar));margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:14px}
.spacer{flex:1}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink);font-size:14px;text-decoration:none;box-shadow:var(--shadow)}
.pill:hover{filter:brightness(0.98)}

/* Sidebar content */
.avatar {
  width: 180px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top ; /* 👈 shift focus down so more space appears above head */
  border: 4px solid #fff;
  box-shadow: var(--shadow);
}

.name{font-weight:800;font-size:20px;margin:12px 0 4px}
.role{color:var(--ink-dim);margin:0 0 10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.tag{font-size:12px;padding:3px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff}
.buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 🔑 left-align children instead of center */
  gap: 10px;
}


.btn{
  display:flex;
  align-items:center;
  gap:8px;                 /* space between icon & text */
  justify-content:center;
  padding:10px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
/* CV button: left aligned + compact */
.btn.cv {
  display:inline-flex;         /* shrink to content */
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:6px;
  font-weight:500;
  font-size:13px;
  background:#e0f2fe;          /* light blue */
  color:#2563eb;
  text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:all 0.2s ease;
  margin:8px 0;
}

/* Hover effect */
.btn.cv:hover {
  background:#bfdbfe;
}

/* Active (click) effect */
.btn.cv:active {
  background:#2563eb;
  color:#fff;
}





/* Lightweight list style for LinkedIn, Email, Location */
.info-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:#374151;
}

.info-item {
  display:flex;
  align-items:center;
  gap:8px;
  color:#374151;
  text-decoration:none;
}

.info-item i {
  width:16px;
  text-align:center;
  opacity:.8;
}
.info-item .text { font-weight:600 }
.info-item.small { padding:8px 12px } /* optional tighter look */
.btn.secondary{background:#fff;color:#1f2937;border:1px solid #e5e7eb}

.company-link svg {
  margin-left: 4px;
  vertical-align: middle;
  color: #555; /* neutral gray */
  transition: color 0.2s ease;
}

.company-link:hover svg {
  color: #007acc; /* subtle blue on hover */
}


/* Page content */
main{max-width:calc(var(--maxw) - var(--w-sidebar));margin:0 auto;padding:22px}
h1{font-size:clamp(26px,3.4vw,40px);margin:14px 0}
h2{font-size:20px;margin:18px 0 10px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--border)}
  .topwrap{max-width:var(--maxw)}
  main{max-width:var(--maxw)}
  .buttons{gap:8px}
}

/* Timeline */
.timeline{display:grid;gap:12px}
.item{display:grid;grid-template-columns:160px 1fr;gap:16px}
.when{color:var(--muted);font-size:13px}
.what{font-weight:700}
.where{color:var(--ink-dim);font-size:14px}
.bullets{margin:6px 0 0;padding-left:18px}
.bullets li{margin:6px 0}

/* Footer */
footer{max-width:calc(var(--maxw) - var(--w-sidebar));margin:20px auto 30px;padding:12px 22px;color:var(--muted);border-top:1px solid var(--border)}