:root{
  --bg:#f1f3ee; --fg:#17201b; --muted:#5c6861; --line:#c9d0c8; --accent:#1f4fe0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1412; --fg:#e7ede9; --muted:#97a39b; --line:#2a342e; --accent:#8fb4ff; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1412; --fg:#e7ede9; --muted:#97a39b; --line:#2a342e; --accent:#8fb4ff; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
main{max-width:44rem; margin:0 auto; padding:1.25rem 1.25rem 4rem}
.top{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin-bottom:clamp(2.5rem,9vw,5rem); font-size:.95rem}
.brand{color:var(--muted); text-decoration:none; font-weight:600}
.top nav{display:flex; gap:1.1rem; order:3; width:100%}
.top nav a{color:var(--fg); text-decoration:none}
.top nav a:hover,.brand:hover{color:var(--accent)}
#theme{
  margin-left:auto; font:inherit; font-size:.85rem; color:var(--fg); background:transparent;
  border:1px solid var(--line); border-radius:6px; padding:.2rem .4rem;
}
@media (min-width:40rem){
  .top nav{order:0; width:auto; margin-left:auto}
  #theme{margin-left:0}
}
h1{
  font-size:clamp(4rem,22vw,9rem); line-height:.9; margin:0 0 1.5rem;
  font-weight:800; letter-spacing:-.05em;
}
h1.small{font-size:clamp(2rem,8vw,3rem); line-height:1.1; letter-spacing:-.03em; margin:1.5rem 0 .75rem}
.lead{font-size:1.25rem; color:var(--muted); max-width:30ch; margin:0 0 4rem}
h2{font-size:1rem; font-weight:700; margin:0 0 1rem; color:var(--muted)}
section{margin-bottom:3.5rem; scroll-margin-top:1rem}
p{margin:0; max-width:62ch}
ul{list-style:none; padding:0; margin:0}
a{color:var(--accent); text-underline-offset:.2em}
a:focus-visible,#theme:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.grp{font-size:.9rem; color:var(--muted); margin:1.75rem 0 .25rem}
.projects li{padding:1.1rem 0; border-top:1px solid var(--line)}
.projects li:last-child{border-bottom:1px solid var(--line)}
.projects h3{font-size:1.1rem; margin:0 0 .25rem; font-weight:650}
.projects p{color:var(--muted)}
.tags{margin-top:.5rem; font-size:.85rem; color:var(--muted)}
.body p{margin:0 0 1rem}
.links{margin-top:1.5rem}
.links li{padding:.2rem 0}