:root{--ink:#23212b;--muted:#6b6676;--line:#e3dfe8;--bg:#fbfaf7;--accent:#3d3a68}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 Georgia,'Iowan Old Style',serif}
a{color:var(--accent)}
header.site{border-bottom:1px solid var(--line);background:#fff}
header.site .wrap{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline}
header.site .brand{font-size:1.25rem;font-weight:700;text-decoration:none;
  color:var(--ink);letter-spacing:.01em}
nav a{margin-right:1rem;font-size:.85rem;text-decoration:none;
  font-family:system-ui,sans-serif}
.wrap{max-width:44rem;margin:0 auto;padding:1.25rem}
main.wrap{padding:2rem 1.25rem 3rem}
h1{font-size:1.9rem;line-height:1.25;margin:.2rem 0 .6rem}
h2{font-size:1.3rem;margin:2rem 0 .5rem}
h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
.lede{color:var(--muted);font-size:1.05rem;margin:0 0 1.5rem}
.meta{font-family:system-ui,sans-serif;font-size:.78rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 .3rem}
.disclosure{border:1px solid var(--line);background:#fff;padding:.85rem 1rem;
  font-family:system-ui,sans-serif;font-size:.82rem;color:var(--muted);
  margin:0 0 2rem;border-left:3px solid var(--accent)}
blockquote{margin:1.5rem 0;padding-left:1rem;border-left:3px solid var(--line);
  color:var(--muted)}
ul,ol{padding-left:1.2rem}
li{margin:.3rem 0}
.cards{list-style:none;padding:0;margin:1.5rem 0}
.cards li{border-top:1px solid var(--line);padding:1rem 0;margin:0}
.cards a{font-size:1.1rem;text-decoration:none;font-weight:700}
/* The file is 1000x1500 because that is what Pinterest wants. Displaying it at
   full height would push the entire article below the fold, so it is capped
   here and saved at full resolution. */
figure.pin{margin:1.5rem 0 2rem;text-align:center}
figure.pin img{max-width:min(100%,340px);height:auto;border:1px solid var(--line);
  border-radius:3px}
figure.pin figcaption{font-family:system-ui,sans-serif;font-size:.75rem;
  color:var(--muted);margin-top:.4rem;text-transform:uppercase;
  letter-spacing:.08em}
.cards p{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}
footer.site{border-top:1px solid var(--line);margin-top:3rem;background:#fff}
footer.site .wrap{font-family:system-ui,sans-serif;font-size:.8rem;
  color:var(--muted)}
@media(prefers-color-scheme:dark){
  :root{--ink:#e8e6ee;--muted:#a09aad;--line:#332f3d;--bg:#191722;--accent:#b3aee8}
  header.site,footer.site,.disclosure{background:#211e2b}
}