/* ---------------------------------------------------------------
   A text site. System fonts, no webfonts, no external requests.
   Loads instantly on any connection and never shifts.
   --------------------------------------------------------------- */
:root{
  --text:#141414;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --rule:#e6e6e6;
  --link:#141414;
  --measure:34rem;   /* ~66 characters at 18px */
}
@media (prefers-color-scheme:dark){
  :root{
    --text:#e8e8e6;
    --muted:#9a9a97;
    --bg:#141414;
    --rule:#2c2c2c;
    --link:#e8e8e6;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 18px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.page{max-width:var(--measure);margin-inline:auto;padding:80px 24px 96px}

a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:currentColor}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:1.5rem;line-height:1.3}
h2{font-size:1.0625rem;line-height:1.4}
h3{font-size:1rem}
p{margin:0}

/* intro --------------------------------------------------------- */
.intro{display:flex;flex-direction:column;gap:22px}
.intro__head{display:flex;align-items:center;gap:18px}
.avatar{
  width:64px;height:64px;flex:none;border-radius:50%;
  object-fit:cover;background:var(--rule);
  display:grid;place-items:center;
  font-size:.9375rem;font-weight:600;color:var(--muted);letter-spacing:.02em;
}
.intro__name{display:flex;flex-direction:column;gap:2px}
.intro__role{font-size:.9375rem;color:var(--muted)}
.prose{display:flex;flex-direction:column;gap:16px}
.prose a{border-bottom-color:currentColor;opacity:.95}

/* links row ----------------------------------------------------- */
.links{display:flex;flex-wrap:wrap;gap:18px;font-size:.9375rem;color:var(--muted)}
.links a{color:var(--muted);border-bottom-color:transparent}
.links a:hover{color:var(--text);border-bottom-color:currentColor}

/* sections ------------------------------------------------------ */
.section{margin-top:64px;display:flex;flex-direction:column;gap:20px}
.section__label{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* post list ----------------------------------------------------- */
.posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.posts li{border-top:1px solid var(--rule)}
.posts li:last-child{border-bottom:1px solid var(--rule)}
.posts a{
  display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:16px 0;border-bottom:0;
}
.posts a:hover .posts__title{border-bottom:1px solid currentColor}
.posts__title{font-size:1rem}
.posts__date{
  font-size:.8125rem;color:var(--muted);flex:none;
  font-variant-numeric:tabular-nums;
}
.empty{font-size:.9375rem;color:var(--muted)}

/* article ------------------------------------------------------- */
.back{font-size:.9375rem;color:var(--muted);border-bottom:0;display:inline-block;margin-bottom:40px}
.back:hover{color:var(--text)}
.article__head{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}
.article__meta{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.article h1{font-size:1.75rem}
.article__body{display:flex;flex-direction:column;gap:22px}
.article__body h2{margin-top:18px}
.article__body ul,.article__body ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.article__body code{
  font:400 .875em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--rule);padding:.15em .4em;border-radius:4px;
}
.article__body pre{
  margin:0;padding:16px 18px;background:var(--rule);border-radius:8px;
  overflow-x:auto;font:400 .875rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.article__body pre code{background:none;padding:0}
.article__body blockquote{
  margin:0;padding-left:18px;border-left:2px solid var(--rule);color:var(--muted);
}
.article__body img{max-width:100%;height:auto;border-radius:8px;display:block}

/* footer -------------------------------------------------------- */
.footer{
  margin-top:80px;padding-top:24px;border-top:1px solid var(--rule);
  font-size:.875rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.footer a{color:var(--muted);border-bottom-color:transparent}
.footer a:hover{color:var(--text)}

@media (max-width:600px){
  .page{padding:56px 22px 72px}
  .posts a{flex-direction:column;gap:4px;align-items:flex-start}
}