:root{
  --bg:#ffffff;
  --dark:#3d1f1f;
  --body:#4d5663;
  --muted:#8993a0;
  --accent:#7a2e2e;
  --rule:#e8eaee;
  --soft:#f7f0e3;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--body)}
body{
  font:400 17px/1.7 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* header */
header.site{border-bottom:1px solid var(--rule);padding:20px 0}
header.site .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between}
.brand{color:var(--dark);font-weight:900;font-size:20px;letter-spacing:-.01em;text-decoration:none}
.brand span{color:var(--accent)}
nav a{color:var(--body);text-decoration:none;font-size:15px;margin-left:18px}
nav a:hover{color:var(--accent);text-decoration:underline}

h1{color:var(--dark);font-weight:900;font-size:32px;line-height:1.2;margin:38px 0 6px;letter-spacing:-.01em}
h2{color:var(--accent);font-weight:800;font-size:21px;line-height:1.3;margin:34px 0 10px}
h3{color:var(--dark);font-weight:700;font-size:18px;margin:22px 0 6px}
p,li{margin:10px 0}
ul,ol{padding-left:22px}
a{color:var(--accent)}
.updated{color:var(--muted);font-size:14px;margin:0 0 8px}
.lede{background:var(--soft);border-radius:10px;padding:16px 18px;margin:22px 0}
.lede p{margin:6px 0}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
th,td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--soft);color:var(--dark);font-weight:700}
.scroll{overflow-x:auto}

/* post list */
.postlist{list-style:none;padding:0;margin:26px 0}
.postlist li{border-bottom:1px solid var(--rule);padding:18px 0}
.postlist li:last-child{border-bottom:0}
.postlist h2{margin:0 0 4px;font-size:20px}
.postlist h2 a{text-decoration:none}
.postlist h2 a:hover{text-decoration:underline}
.postlist p{margin:4px 0 0;font-size:15.5px;color:var(--body)}
.cat{display:inline-block;background:var(--soft);color:var(--accent);font-size:12px;font-weight:700;
     letter-spacing:.03em;text-transform:uppercase;border-radius:4px;padding:3px 8px;margin-bottom:6px}

.note{border-left:3px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0;
      padding:14px 16px;margin:24px 0;font-size:15.5px}
.note strong{color:var(--dark)}

.back{display:inline-block;margin:30px 0 0;font-size:15px;text-decoration:none}
.back:hover{text-decoration:underline}

footer.site{border-top:1px solid var(--rule);margin:44px 0 0;padding:22px 0 30px;text-align:center;font-size:13px;color:var(--muted)}
footer.site p{margin:6px 0;overflow-wrap:anywhere}
footer.site a{color:var(--accent);text-decoration:none;margin:0 4px}
footer.site a:hover{text-decoration:underline}

@media(max-width:520px){
  h1{font-size:26px}
  h2{font-size:19px}
  body{font-size:16px}
  header.site .wrap{flex-direction:column;align-items:flex-start}
  nav a{margin:0 16px 0 0}
}