* { box-sizing: border-box }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, #44475a 0, transparent 34rem),
    radial-gradient(circle at 80% 0%, #6272a4 0, transparent 30rem),
    var(--bg);
  color: var(--fg);
  font: 16px/1.55 var(--font);
}
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
.cv {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 7vh 0;
}
.glass {
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
h1 { font-size: clamp(36px, 7vw, 72px); line-height: 1; margin: 0 0 10px }
h2 { margin: 32px 0 12px; color: #bd93f9 }
h3 { margin: 0; font-size: 1rem }
.role { font-size: 1.1rem; color: #bd93f9 }
.org { color: #50fa7b; margin: 2px 0 8px; font-size: .9rem }
.meta { color: var(--muted) }
nav { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 }
.intro {
  text-align: center;
  padding: 42px 28px;
  margin-bottom: 24px;
}
.intro nav { justify-content: center }
.grid {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr);
  gap: 24px;
}
.grid > * { padding: 28px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 }
.chip {
  background: rgba(98,114,164,.25);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: .85rem;
  color: #8be9fd;
}
.article-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.article-head .meta { font-size: .85rem; white-space: nowrap }
article { margin-bottom: 20px }
article ul { padding-left: 18px; margin: 6px 0 }
article li { margin: 4px 0; color: var(--fg); list-style: "▸ "; padding-left: 6px }
article li::marker { color: #8be9fd }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr }
  .article-head { flex-direction: column; gap: 2px }
}