:root{
  --bg:#faf9f6;
  --fg:#1c1c1a;
  --muted:#66635e;
  --line:#ddd8cf;
  --max:980px;
}

:root.dark{
  --bg:#111111;
  --fg:#f3f3f0;
  --muted:#b8b5ae;
  --line:#2a2a2a;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:20px/1.7 "Source Serif 4", serif;
}

main{
  max-width:var(--max);
  margin:0 auto;
  padding:0 2rem 6rem;
}

.topbar{
  max-width:var(--max);
  margin:0 auto;
  padding:1.25rem 2rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.brand{
  font-family:Inter,sans-serif;
  font-weight:600;
}

.topbar nav{
  margin-left:auto;
}

.topbar nav a{
  margin-left:1.25rem;
  text-decoration:none;
  color:var(--muted);
  font:14px Inter,sans-serif;
}

#theme-toggle{
  border:none;
  background:none;
  color:var(--muted);
  font-size:1rem;
  cursor:pointer;
}

.hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:4rem;
  margin:5rem 0 4rem;
}

h1{
  font-size:clamp(2.8rem,9vw,5.5rem);
  line-height:1.02;
  margin:0 0 1.5rem;
  font-weight:600;
}

.lead{
  font-size:1.3rem;
  color:var(--muted);
  max-width:42rem;
}

.meta{
  border-left:1px solid var(--line);
  padding-left:2rem;
  font-size:.95rem;
  color:var(--muted);
}

section{
  margin-top:5rem;
}

h2{
  font-size:2rem;
  margin-bottom:1.5rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2.5rem;
}

.grid h3{
  font:600 14px Inter,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}

.grid p{
  color:var(--muted);
}

.work-list{
  padding-left:1.2rem;
}

.work-list li{
  margin:.55rem 0;
}

footer{
  margin-top:6rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.95rem;
}

@media (max-width:800px){
  body{font-size:18px}

  .hero{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .meta{
    border-left:none;
    border-top:1px solid var(--line);
    padding:1.5rem 0 0;
  }
}