/* Figtree, self-hosted from /fonts (variable weight, SIL OFL 1.1). */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --text: #1a1a18;
  --muted: #6b6b66;
  --rule: #e6e5e0;
  --code-bg: #f4f3ef;
  --accent: #3a5a8c;

  --heading-weight: 600;

  --font:
    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-base: 1rem;

  --text-small: 0.875rem;

  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413;
    --text: #e8e6e1;
    --muted: #8f8d86;
    --rule: #2a2a27;
    --code-bg: #1e1e1c;
    --accent: #8fb0e0;

    --heading-weight: 500;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  padding: 3rem 1.25rem;
  max-width: var(--measure);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  font-weight: var(--heading-weight);
  line-height: 1.2;
}

h1 {
  font-size: 1.875rem;
  letter-spacing: -0.02em;
}

@media (min-width: 40rem) {
  body {
    padding: 4rem 1.5rem;
  }
  h1 {
    font-size: 2.125rem;
  }
}

h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 1.25em;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.post-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.content-error {
  color: var(--muted);
  font-size: var(--text-small);
}

.site-header {
  margin-bottom: 2.75rem;
  text-align: left;
}

.site-title {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-title:hover {
  text-decoration: none;
  color: var(--text);
}

.post-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-list > li + li {
  margin-top: 2.5rem;
}

.post-summary h2 {
  font-size: 1.4rem;
  margin-bottom: 0.15rem;
}
.post-summary h2 a {
  color: var(--text);
}
.post-summary h2 a:hover {
  color: var(--accent);
}

.post-excerpt {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--text-small);
}

.pagination {
  margin-top: 2.5rem;
}

.more {
  color: var(--muted);
  font-size: var(--text-small);
}

.more:hover {
  color: var(--accent);
}

.post-header {
  margin-bottom: 2rem;
}

.post-body > *:first-child {
  margin-top: 0;
}
.post-body > *:last-child {
  margin-bottom: 0;
}

.post-body h2,
.post-body h3 {
  margin-top: 2rem;
}

.post-body a,
.intro a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.25em;
  padding-left: 1.25rem;
}

.post-body li {
  margin-bottom: 0.35em;
}

.post-body figure {
  margin: 1.75rem 0;
}
.post-body figure img {
  margin: 0;
  display: block;
}

.post-body img {
  margin: 1.75rem 0;
  border-radius: 3px;
}

.post-body figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: var(--text-small);
}

.post-body blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

.post-body blockquote > *:last-child {
  margin-bottom: 0;
}

.post-body hr {
  width: 4rem;
  margin: 2.5rem auto;
  border: 0;
  border-top: 1px solid var(--rule);
}

.post-body code {
  padding: 0.15em 0.35em;
  background: var(--code-bg);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.875em;
}

.post-body pre {
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--code-bg);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.875em;
}

.post-body pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

@media (max-width: 40rem) {
  .post-body pre {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-radius: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.post-body table {
  display: block;
  overflow-x: auto;
  margin: 1.25rem 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.post-body th,
.post-body td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.post-body th {
  color: var(--muted);
  font-weight: 500;
}

/* Portrait on the left, text on the right. The intro is emitted as
   <section class="intro"><img class="avatar">…paragraphs…</section> and the
   markup can't be wrapped, so the text column is the section itself (a column
   flexbox, centred vertically) and the portrait sits in its left padding,
   centred in whatever space is left after the top and bottom padding. That
   keeps both centred against each other however many paragraphs there are. */
.intro {
  --avatar-size: 5rem;
  --gap: 1.25rem;
  --pad-top: 0rem;
  --pad-bottom: 0rem;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--avatar-size) + var(--pad-top) + var(--pad-bottom));
  padding: var(--pad-top) 0 var(--pad-bottom)
    calc(var(--avatar-size) + var(--gap));
  text-align: left;
}

.intro > *:last-child {
  margin-bottom: 0;
}

.avatar {
  position: absolute;
  left: 0;
  top: calc(
    var(--pad-top) +
      (100% - var(--pad-top) - var(--pad-bottom) - var(--avatar-size)) / 2
  );
  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  /* A hairline ring keeps the photo from bleeding into the page background. */
  box-shadow: 0 0 0 1px var(--rule);
}

.home .intro {
  --pad-bottom: 2.5rem;
  margin: 0 0 3.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.95rem;
}

.post .intro {
  --avatar-size: 3rem;
  --gap: 1rem;
  --pad-top: 1.25rem;
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-small);
}

/* The author box already closes the post, so the footer only needs the same
   breathing room as the rule above the box, not the full 4rem. */
.post .site-footer {
  margin-top: 2rem;
}

@media (max-width: 40rem) {
  .intro {
    --gap: 0.875rem;
  }
  .home .intro {
    --avatar-size: 4rem;
  }
}

article.error {
  margin: 5rem 0;
  text-align: center;
}

.site-footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-small);
  text-align: center;
}

.site-footer p {
  margin: 0;
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--accent);
}