/* Layout: an "about" band (round photo + links on the left, name + bio on the right),
   then full-width section bands with a centered 760px column. Entries are bordered cards
   with outlined link buttons; the blog is a date + title list. */
:root {
  --accent: #40045c;
  --text: #2c2c2c;
  --text-muted: #666666;
  --bg: #ffffff;
  --band: #fafafa;
  --card: #ffffff;
  --border: #e0e0e0;
  --code-bg: #f5f5f5;
  --font: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light; /* always white, even when the visitor's system is in dark mode */
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  color: var(--text); background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; }

section { padding: 4rem max(16px, 2rem); }
section + section { border-top: 1px solid var(--border); }
section.band { background: var(--band); }
.container { max-width: 760px; margin: 0 auto; }
section h2 { font-size: 1.8rem; font-weight: 700; margin: 0 0 2rem; }

/* About */
#about { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.about-grid { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: center; }
.avatar {
  width: 200px; height: 200px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  margin-bottom: 1.25rem; background: var(--border); color: var(--text-muted);
  font-family: var(--mono); font-size: 48px; font-weight: 500;
}
.social-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem;
  width: 200px; list-style: none; margin: 0; padding: 0; font-size: .9rem;
}
.social-links a { color: var(--text-muted); }
.social-links a:hover { color: var(--accent); }
.bio-name { font-size: 2.5rem; font-weight: 600; margin: 0 0 1rem; line-height: 1.2; }
.bio p { margin: 0 0 1rem; }
.bio p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .profile-col { display: flex; flex-direction: column; align-items: center; }
  .bio-name { text-align: center; }
}

/* Cards (projects + research) */
.card-list { display: flex; flex-direction: column; gap: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 1.1rem 1.25rem; }
.card-title { font-size: 1.1rem; font-weight: 600; line-height: 1.4; margin: 0 0 .3rem; }
.card-text { margin: 0 0 .5rem; font-size: .97rem; }
.card-tags { margin: 0 0 .6rem; font-family: var(--mono); font-size: .78rem; color: var(--text-muted); }
.card-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-block; border: 1px solid var(--accent); border-radius: 3px;
  padding: .1rem .55rem; font-size: .8rem; font-weight: 600; color: var(--accent);
  transition: background .15s, color .15s;
}
.pill:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

.subhead { font-size: 1.25rem; font-weight: 600; margin: 2.5rem 0 1rem; }
.plain-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }

/* Blog list */
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.post-row { display: flex; align-items: baseline; gap: 1.5rem; }
.post-date { font-family: var(--mono); font-size: .88rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.post-title { color: var(--text); }
.post-title:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 480px) { .post-row { flex-direction: column; gap: .15rem; } }

footer { padding: 2rem 16px; text-align: center; font-size: .85rem; color: var(--text-muted); border-top: 1px solid var(--border); }
footer p { margin: 0; }

/* Single-post pages */
.post-page { padding-top: 3rem; }
.back { display: inline-block; margin-bottom: 2.5rem; font-size: .95rem; color: var(--text-muted); }
.back:hover { color: var(--accent); text-decoration: none; }
.post-header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2.25rem; }
.post-header h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin: 0; }
.post-header time { font-family: var(--mono); font-size: .85rem; color: var(--text-muted); }
.post-header .summary { margin: 0; color: var(--text-muted); }
.post-body > * + * { margin-top: 1.1em; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin-bottom: 0; }
.post-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2em 0 0; }
.post-body h3 { font-size: 1.2rem; font-weight: 600; margin: 1.6em 0 0; }
.post-body img { max-width: 100%; display: block; }
.post-body pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: .75rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.5; }
.post-body code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { border-left: 3px solid var(--accent); margin-left: 0; padding-left: 1rem; color: var(--text-muted); }
.post-body ul, .post-body ol { padding-left: 1.5rem; }