:root{
  --bg:#ffffff;
  --ink:#0f1b24;
  --muted:#3d4c59;
  --hairline:rgba(15,27,36,.14);
  --panel:rgba(15,27,36,.03);
  --link:#0f3a5a;
  --focus:#1f5c8b;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,27,36,.08);
  --max:1020px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.55;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

header{
  border-bottom:1px solid var(--hairline);
}

footer{
  border-top:1px solid var(--hairline);
  margin-top:60px;
}

.wrap{
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}

nav a{
  margin-left:16px;
  font-size:14px;
}

main{
  padding:48px 0;
}

h1{
  font-size:42px;
  margin:.2em 0 .4em;
}

h2{
  margin-top:40px;
}

h3{
  margin-bottom:.2em;
}

p{
  max-width:72ch;
}

ul{
  max-width:70ch;
}

.card{
  background:var(--panel);
  padding:18px;
  border-radius:var(--radius);
}

.grid{
  display:grid;
  gap:18px;
}

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

footer p{
  font-size:14px;
  color:var(--muted);
}

@media(max-width:700px){
  h1{font-size:32px}
  nav a{margin-left:10px}
}