:root{
  --text:#111; --muted:#666; --border:#ddd; --accent:#06c;
}

@media (prefers-color-scheme: dark){
  :root{
    --text:#111;
    --muted:#666;
    --border:#ddd;
    --accent:#06c;
  }
}

body{
  margin:0;
  font-family:system-ui,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:
    url("../img/background.jpg") center/cover no-repeat fixed;
}

.container{
  max-width:860px;
  margin:4rem auto;
  padding:2rem 1.5rem;
  background:rgba(255,255,255,.92);
  border-radius:6px;
}

h1,h2,h3{ line-height:1.25; margin:2.5rem 0 0; }
h1{ font-size:2.2rem; margin-top:0; }
p{ margin:1rem 0; }

.site-header{ border-bottom:1px solid var(--border); padding:1rem 0; }
.site-title{ font:700 1.1rem system-ui,sans-serif; color:inherit; text-decoration:none; }

a{ color:var(--accent); text-underline-offset:.15em; }
.site-nav a{ margin-right:1rem; color:var(--muted); text-decoration:none; }
a:hover{ text-decoration-thickness:2px; }
.site-nav a:hover{ color:var(--accent); }

.home h1{ font-size:2.6rem; }
.home .container{ max-width:640px; }

.home-hero{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1.5rem;
  align-items:center; /* vertical centering */
}

.home-headshot{
  width:180px; height:180px;
  object-fit:cover;
  object-position: center top;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
}

@media (max-width:700px){
  .home-hero{ grid-template-columns:1fr; }
  .home-headshot{ width:140px; height:140px; margin:0 auto; }
  .research-grid{ grid-template-columns: 1fr; }
  .research-wide{ grid-column: auto; }
}

.research-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.research-wide{
  grid-column: 1 / -1; /* spans both columns */
}

.social-links{
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.social-links img{
  width: 24px;
  height: 24px;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.social-links a:hover img{
  opacity: 1;
  transform: translateY(-2px);
}