:root{
  --bg:#fbfaf8; --fg:#1a1a1a; --muted:#5f5b56; --faint:#8a857e;
  --rule:#e2ddd6; --accent:#9a4a2f; --code-bg:#f2eee8;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14130f; --fg:#eae6df; --muted:#a49e94; --faint:#7b756b;
    --rule:#2c2a25; --accent:#e0855c; --code-bg:#1c1a16;
  }
}
:root[data-theme="dark"]{
  --bg:#14130f; --fg:#eae6df; --muted:#a49e94; --faint:#7b756b;
  --rule:#2c2a25; --accent:#e0855c; --code-bg:#1c1a16;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg); margin:0;
  font:16px/1.65 ui-serif,Georgia,"Iowan Old Style",Palatino,serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem;margin:0 auto;padding:3rem 1.5rem 6rem}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}

/* masthead shown on inner pages */
.masthead{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0 0 2.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.masthead a{color:var(--muted)}
.masthead .me{color:var(--fg);font-weight:600}

header.hero{border-bottom:1px solid var(--rule);padding-bottom:1.75rem;margin-bottom:2.5rem}
h1{font-size:2.1rem;line-height:1.15;margin:0 0 .4rem;letter-spacing:-.02em}
.tag{color:var(--muted);font-size:1.02rem;margin:0 0 1.1rem}
.contact{font-family:var(--mono);font-size:.78rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0;list-style:none;padding:0}
.contact a{color:var(--muted)}

h2{font-size:.76rem;font-family:var(--mono);font-weight:600;letter-spacing:.13em;
   text-transform:uppercase;color:var(--faint);margin:3.25rem 0 1.25rem}
h3{font-size:1.02rem;margin:0 0 .2rem;font-weight:600}
p{margin:0 0 1.05rem}
.lede{font-size:1.1rem}

.proj{padding:1.1rem 0;border-top:1px solid var(--rule)}
.proj:first-of-type{border-top:none;padding-top:.25rem}
.proj p{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}
.meta{font-family:var(--mono);font-size:.72rem;color:var(--faint);
      letter-spacing:.02em;margin-top:.45rem !important}
.role{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);display:inline-block;
  margin-left:.55rem;vertical-align:.1em;font-weight:600}
.flag{color:var(--faint);font-style:italic}

.job{display:flex;justify-content:space-between;gap:1.5rem;
     padding:.55rem 0;border-top:1px solid var(--rule);font-size:.95rem}
.job:first-of-type{border-top:none}
.job span:last-child{font-family:var(--mono);font-size:.75rem;
     color:var(--faint);white-space:nowrap;padding-top:.2rem}

/* archive listing */
.note{background:var(--code-bg);border-left:2px solid var(--rule);
  padding:.9rem 1.1rem;margin:0 0 2rem;font-size:.93rem;color:var(--muted)}
.note p{margin:0}
.year{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  color:var(--faint);margin:2.25rem 0 .5rem;font-weight:600}
.entry{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.5rem 0;border-top:1px solid var(--rule)}
.entry .date{font-family:var(--mono);font-size:.73rem;color:var(--faint);
  white-space:nowrap;padding-top:.25rem}

/* post page */
article h1{font-size:1.75rem;margin-bottom:.5rem}
.postmeta{font-family:var(--mono);font-size:.73rem;color:var(--faint);
  margin:0 0 2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
article h2{font-size:1.2rem;font-family:inherit;text-transform:none;
  letter-spacing:normal;color:var(--fg);margin:2.25rem 0 .75rem}
article h3{font-size:1.05rem;margin:1.75rem 0 .5rem}
article img{max-width:100%;height:auto}
article ul,article ol{margin:0 0 1.05rem;padding-left:1.35rem}
article li{margin-bottom:.35rem}
blockquote{margin:1.5rem 0;padding:.15rem 0 .15rem 1.15rem;
  border-left:2px solid var(--accent);color:var(--muted)}
blockquote p:last-child{margin-bottom:0}
code{font-family:var(--mono);font-size:.85em;background:var(--code-bg);
  padding:.12em .35em;border-radius:3px}
pre{background:var(--code-bg);padding:1rem;border-radius:4px;
  overflow-x:auto;font-size:.82rem;line-height:1.5;color:var(--fg)}
/* chroma-highlighted blocks bring their own palette; see chroma.css */
.highlight pre{padding:.9rem 1rem;font-size:.8rem}
pre code{background:none;padding:0;font-size:inherit}
table{width:100%;border-collapse:collapse;margin:0 0 1.05rem;
  display:block;overflow-x:auto;font-size:.92rem}
th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--rule)}

footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--faint);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
footer a{color:var(--faint)}

@media(max-width:34rem){
  .wrap{padding:2rem 1.15rem 4rem} h1{font-size:1.75rem}
  .job,.entry{flex-direction:column;gap:.1rem}
  .job span:last-child,.entry .date{padding-top:0}
}