:root{
  --gold:#fdf1bc;
  --gold-dim:#c9bd8a;
  --slate:#4d565e;
  --slate-dark:#3a4148;
  --slate-deep:#2b3137;
  --ink:#e8eaec;
  --ink-soft:#b3bac0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--slate-deep);
  color:var(--ink);
  font:17px/1.65 Georgia,"Iowan Old Style","Times New Roman",serif;
}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(253,241,188,.35)}
a:hover{border-bottom-color:var(--gold)}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}

/* header */
.masthead{background:var(--slate);border-bottom:1px solid rgba(0,0,0,.25)}
.masthead a.logo{display:block;border:0;line-height:0}
.masthead img{display:block;width:100%;height:auto;max-width:720px;margin:0 auto}
.tagline{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:.06em;color:var(--gold-dim);
  text-align:center;padding:14px 22px 18px;margin:0;
  background:var(--slate-dark);
}

/* nav */
nav.top{background:var(--slate-dark);border-bottom:1px solid rgba(0,0,0,.3)}
nav.top .wrap{display:flex;gap:20px;padding-top:10px;padding-bottom:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
nav.top a{border:0;color:var(--ink-soft)}
nav.top a:hover{color:var(--gold)}

main{padding:40px 0 10px}
h1,h2,h3{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--gold);line-height:1.25}
h1{font-size:29px;margin:0 0 6px}
h2{font-size:20px;margin:38px 0 10px}
h3{font-size:16px;margin:28px 0 8px;color:var(--gold-dim)}
p{margin:0 0 18px}
.dek{color:var(--ink-soft);font-size:19px;margin:0 0 26px}
.meta{font-family:ui-monospace,monospace;font-size:12px;color:#8d959b;letter-spacing:.04em;margin:0 0 30px}

blockquote{
  margin:26px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--gold-dim);
  color:var(--ink-soft);font-style:italic;
}
blockquote cite{display:block;font-style:normal;font-size:13px;color:#8d959b;margin-top:8px;
  font-family:ui-monospace,monospace}

.callout{
  background:var(--slate-dark);border-left:3px solid var(--gold);
  padding:16px 20px;margin:28px 0;font-size:16px;
}
.callout p:last-child{margin-bottom:0}

ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:8px}

/* post list */
.postlist{list-style:none;padding:0;margin:0}
.postlist li{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;margin:0}
.postlist li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.postlist h2{margin:0 0 6px;font-size:19px}
.postlist h2 a{border:0}
.postlist p{margin:0;color:var(--ink-soft);font-size:16px}
.soon{color:#7d858b;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.05em}

/* the running order on the home page — a plan, not links yet */
ol.plan{
  color:var(--ink-soft);font-size:16px;
  padding-left:26px;margin:0 0 8px;
}
ol.plan li{margin-bottom:6px}

/* soft close at the foot of a post */
.cta{
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:18px;margin-top:34px;
  color:var(--ink-soft);font-size:16px;
}

hr.rule{border:0;border-top:1px solid rgba(255,255,255,.09);margin:44px 0}

footer{
  background:var(--slate-dark);margin-top:50px;padding:26px 0 34px;
  font-size:14px;color:var(--ink-soft);
}
footer p{margin:0 0 8px}

@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:24px}
  .dek{font-size:17px}
}