:root{
  --bg:#171a1f;
  --card:#1f2430;
  --text:#f2f4f8;
  --muted:#c3c9d4;
  --line:rgba(255,255,255,.15);
  --accent:#6ea8ff;
  --shadow:0 12px 34px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.page{
  width:min(940px, calc(100% - 32px));
  margin:30px auto 42px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:var(--shadow);
}

.header{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.name{
  margin:0;
  font-size:34px;
  line-height:1.1;
}

.headline{
  margin:8px 0 0;
  color:var(--muted);
  max-width:580px;
}

.contact{
  margin:0;
  padding:0;
  list-style:none;
  text-align:right;
  display:grid;
  gap:6px;
  color:var(--muted);
}

.section{ padding-top:20px; }

.section-title{
  margin:0 0 12px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.summary{ margin:0; }

.skills{
  margin:0;
  padding-left:18px;
  columns:2;
  column-gap:28px;
}

.skills li{ margin:6px 0; }

.role{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(31,36,48,.55);
}

.role-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
}

.role-title{
  margin:0;
  font-size:16px;
  font-weight:800;
}

.position{ font-weight:700; }

.dot{
  color:var(--muted);
  padding:0 6px;
}

.meta{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.dates{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.bullets{
  margin:10px 0 0;
  padding-left:18px;
}

.bullets li{ margin:6px 0; }

.education{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(31,36,48,.55);
}

.edu-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}

.edu-school{
  margin:0;
  font-size:16px;
  font-weight:900;
}

.edu-date{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.edu-detail{ margin:8px 0 0; }

.footer{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line);
  text-align:center;
}

.footer-text{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

@media (max-width:720px){
  .page{ padding:20px; }
  .header{ flex-direction:column; }
  .contact{ text-align:left; }
  .skills{ columns:1; }
  .role-top, .edu-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .dates, .edu-date{ white-space:normal; }
}