/* Base */
:root{
  --ink:#1d1d1f;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#e11d48; /* rose-600 */
  --bg:#fafafa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

/* Topbar */
.topbar{
  padding:18px 20px;
  text-align:center;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.topbar h1{margin:0;font-size:20px}
.topbar p{margin:6px 0 0;color:var(--muted);font-size:14px}

/* CV layout */
.cv{
  max-width:1100px;
  margin:28px auto;
  display:flex;
  gap:24px;
  padding:0 16px;
}
.cv__side{
  width:300px;
  flex:0 0 300px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.cv__main{
  flex:1 1 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
}

/* Avatar (no image, pure CSS) */
.avatar{
  width:120px;height:120px;border-radius:50%;
  margin:6px auto 16px;
  background: radial-gradient(circle at 30% 30%, #fde68a, #fca5a5);
  border:4px solid #fff;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

/* Blocks */
.block + .block{margin-top:22px}
.block h3{
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; font-weight:700;
}
.list{list-style:none; padding:0; margin:0}
.list li{padding:6px 0; border-bottom:1px dashed var(--line)}
.list li:last-child{border-bottom:none}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{
  background:#f3f4f6;border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;font-size:12px;
}

/* Head section */
.head h2{margin:0; font-size:28px}
.role{margin:6px 0 8px; color:var(--brand); font-weight:600}
.summary{
  margin:10px 0 0; color:var(--ink);
  background:#fff7fb; border:1px solid #ffe4ef; padding:10px 12px; border-radius:10px;
}

/* Items */
.item{margin:14px 0}
.item__header{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; border-bottom:1px solid var(--line); padding-bottom:6px;
}
.item h4{margin:0}
.meta{color:var(--muted); font-size:13px}
.bullets{margin:8px 0 0 18px}
.bullets li{margin:6px 0}

/* Project cards */
.cards{display:flex;flex-wrap:wrap;gap:14px}
.card{
  flex:1 1 250px; min-height:90px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.card h4{margin:0 0 6px}

/* Footer note */
.note{ text-align:center; color:var(--muted); font-size:13px; padding:10px 0 26px}

/* Make editable areas visible on focus */
[contenteditable="true"]{
  outline: 2px dashed transparent;
  transition: outline-color .2s, background-color .2s;
}
[contenteditable="true"]:focus{
  background:#fffdf0;
  outline-color:#f59e0b;
}

/* Print styles */
@media print{
  body{background:#fff}
  .topbar, .note{display:none}
  .cv{margin:0; padding:0}
  .cv__side, .cv__main{border:none; box-shadow:none}
}

/* Responsive */
@media (max-width: 900px){
  .cv{flex-direction:column}
  .cv__side{width:100%;flex:auto}
}