:root {
  --bg: #fdfcf9;
  --fg: #1d1c1a;
  --muted: #6b6760;
  --rule: #e4e0d8;
  --link: #1f4e8c;
  --mark: #f3ecd9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151514;
    --fg: #e9e6df;
    --muted: #9a958c;
    --rule: #2c2b28;
    --link: #8db4ea;
    --mark: #2a2619;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 2.5rem 1rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 1.125rem/1.65 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
}
a { color: var(--link); text-underline-offset: 0.15em; }
img, video { max-width: 100%; height: auto; border-radius: 4px; }

header.site { margin-bottom: 3rem; }
header.site .name { color: var(--fg); text-decoration: none; font-weight: 700; }

h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { font-size: 2rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.3rem; margin-top: 2.5rem; }
.tagline, .meta, .muted, time { color: var(--muted); }
.tagline { font-size: 1.2rem; margin-top: 0; }

ol.posts { list-style: none; padding: 0; }
ol.posts li { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
ol.posts time { display: block; font-size: 0.9rem; }
ol.posts a { font-weight: 600; }
ol.posts p { margin: 0.25rem 0 0; color: var(--muted); font-size: 1rem; }

header.post { margin-bottom: 2rem; }
header.post .meta { font-size: 0.95rem; margin: 0; }
header.post .summary { font-size: 1.2rem; font-style: italic; margin: 1rem 0 0; }
.hero { display: block; margin: 0 0 2rem; }

.body blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
.body pre { overflow-x: auto; padding: 1rem; background: var(--mark); border-radius: 4px; font-size: 0.9rem; }
.body code { font-size: 0.92em; }
.body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Where the LinkedIn excerpt ends. Flash it when arriving via #continue. */
.continue-mark { scroll-margin-top: 2rem; }
.continue-mark:target + * { animation: arrive 2.5s ease-out; }
@keyframes arrive { from { background: var(--mark); } to { background: transparent; } }

.source { margin-top: 3rem; font-size: 0.9rem; }
footer.site { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; }