@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-extrabold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #231c33;
  --muted: rgb(35 28 51 / 66%);
  --border: rgb(35 28 51 / 15%);
  --link: #0074e4;
  --surface: #fff;
  --code-surface: #f4f3f5;
  --space: 2.5em;
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #eeeaf4;
    --muted: #b5adbf;
    --border: rgb(238 234 244 / 22%);
    --link: #79b8ff;
    --surface: #18161d;
    --code-surface: #25212d;
  }

  /* Imported posts contain inline text colors intended for white pages. */
  .post-content span[style*="color:"] { color: var(--ink) !important; }
  .post-content span[style*="color: blue"],
  .post-content span[style*="color:#0000ff"] { color: var(--link) !important; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 17.6px 17.6px 70.4px;
  font-size: 17.6px;
}

.site-shell {
  max-width: 825px;
  margin-inline: auto;
}

a { color: var(--link); text-underline-offset: .12em; }
a:hover { text-decoration: none; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: .5em 1em;
  background: var(--surface);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75em 1.5em;
  margin-bottom: var(--space);
  text-align: left;
}
.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav li { margin: 0; }
.primary-nav a {
  display: inline-block;
  padding-block: .25em;
  color: var(--muted);
  text-decoration: none;
}
.primary-nav a:hover { color: var(--link); }
.primary-nav [aria-current] {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.primary-nav .site-brand {
  font-family: Manrope, sans-serif;
  font-size: 1.111111em;
  font-weight: 800;
  letter-spacing: .035em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav .site-brand:hover { color: var(--link); }

.home-intro {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 1.5em;
}
.intro-portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.intro-box {
  padding: 1.5em;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-wrap: anywhere;
  font-size: 85%;
}
.intro-box h1 {
  margin: 0 0 1em;
  font-size: 1.25em;
  font-weight: 500;
}
.intro-box > :last-child { margin-bottom: 0; }

.archive-year { margin-bottom: 2.5em; }
.archive-year h2 {
  margin: 0 0 .8em;
  font-size: 2.125em;
}
.archive-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.archive-posts li { margin: 0 0 1em; overflow-wrap: anywhere; }
.archive-posts time {
  margin-inline-start: .25em;
  color: var(--muted);
  font-size: .85em;
  white-space: nowrap;
}
.project-links { list-style: none; padding: 0; }
.project-links li + li { margin-top: 1em; }
.footer-heading {
  font-size: 13.2px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  overflow-wrap: anywhere;
}
h1 { font-size: 2.125em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 1.4em; }
p { margin-bottom: 1em; }
ul, ol { padding-inline-start: 1.5em; }
li + li { margin-top: .25em; }
dt { color: var(--muted); font-size: .8em; }
dd { margin: .25em 0 1.5em; }

.blog-post { margin-bottom: var(--space); }
.post-header { text-align: left; }
.blog-post-meta {
  margin: 0 0 .625em;
  font-size: 13.2px;
  color: var(--muted);
}
.blog-post-title {
  margin: 0;
  font-size: 37.4px;
  font-weight: 700;
  line-height: 1;
}
.blog-post-title a { color: inherit; text-decoration: none; }
.blog-post-title a:hover { text-decoration: underline; }
.post-content {
  margin-top: var(--space);
  overflow-wrap: anywhere;
}
.post-content > :last-child { margin-bottom: 0; }
.post-footer {
  margin-top: var(--space);
  text-align: center;
}
.post-footer .blog-post-meta { margin-bottom: 0; }
.about-author {
  margin-block: var(--space);
  color: var(--muted);
  text-align: center;
}
.author-bio {
  margin-bottom: 0;
  font-size: 15.4px;
}
.author-bio a { color: inherit; }
.about-author::after,
.post-footer::before {
  content: "";
  display: block;
  width: 132px;
  max-width: 100%;
  margin: 1.5em auto 0;
  border-top: 1px solid var(--border);
}
.post-footer::before { margin: 0 auto var(--space); }
.post-content h2, .post-content h3 { margin-top: 1.5em; }
.post-content img, .post-content video {
  max-width: 100%;
  height: auto;
}
.post-content iframe, .post-content embed, .post-content object { max-width: 100%; }
.post-images img {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.post-content iframe { border: 0; }
figure { margin-inline: 0; }
figcaption { font-size: .8em; color: var(--muted); text-align: left; }
blockquote {
  margin-inline: 0;
  padding-inline-start: 1em;
  border-inline-start: 2px solid var(--border);
  color: var(--muted);
}
blockquote > :last-child { margin-bottom: 0; }
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1em;
  border-radius: 4px;
  background: var(--code-surface);
  font-size: .85em;
  line-height: 1.5;
}
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
:not(pre) > code { font-size: .9em; }
.highlight { margin-bottom: 1.4em; }
.highlight pre { margin-bottom: 0; }
.post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
th, td { padding: .5em; border-bottom: 1px solid var(--border); text-align: start; }
hr { margin-block: var(--space); border: 0; border-top: 1px solid var(--border); }

.empty-state { text-align: left; }
.empty-state p { margin: 1.5em 0 0; max-width: 30em; color: var(--muted); }

.post-preview + .post-preview { margin-top: 4em; }
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1em 2em;
  margin-block: var(--space);
  color: var(--muted);
  font-size: .8em;
}
.blog-pagination a { color: inherit; }
.related-posts {
  margin-block: var(--space);
  font-size: .85em;
  color: var(--muted);
}
.related-posts summary { text-align: left; }
.related-posts section { margin-top: 2em; }
.related-posts ul { margin-bottom: 0; }
.related-posts a { color: inherit; }
summary { cursor: pointer; }

.site-footer {
  margin-top: var(--space);
  color: var(--muted);
  text-align: left;
  font-size: 13.2px;
}
.post-subscribe { text-align: center; }
.footer-heading { margin: 0 0 1em; line-height: 1.4; }
.site-footer a { color: inherit; }
.inline-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5em 1.25em;
  padding: 0;
  margin: 0 0 1.5em;
  list-style: none;
}
.inline-links li { margin: 0; }
.social { margin-bottom: 2em; }
.social .footer-heading { display: inline; margin: 0 .5em 0 0; }
.social .inline-links { display: inline; margin: 0; }
.social li { display: inline-block; }
.social li:not(:last-child)::after { content: ","; margin-inline-end: .3em; }
.language-nav { margin-inline-start: auto; font-size: .8em; }
.language-nav .btn {
  font: inherit;
  --bs-btn-padding-y: .15em;
  --bs-btn-padding-x: .5em;
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--surface);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--surface);
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
}
.language-nav .dropdown-menu {
  --bs-dropdown-min-width: 4rem;
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--code-surface);
  --bs-dropdown-link-active-color: var(--surface);
  --bs-dropdown-link-active-bg: var(--link);
  font: inherit;
}
.language-nav .dropdown-menu li { margin: 0; }
.blogroll { margin-block: 1.5em; }
.blogroll ul { margin-top: 1em; }

@media (min-width: 960px) {
  body { font-size: 19.8px; }
  .footer-heading, .blog-post-meta, .site-footer { font-size: 15.4px; }
  .blog-post-title { font-size: 44px; }
  .author-bio { font-size: 17.6px; }
}

@media (max-width: 600px) {
  .home-intro { grid-template-columns: minmax(0, 1.5fr); gap: 1.25em; }
  .intro-portrait { width: 120px; }
  .intro-box { padding: 1.25em; }
}

@media print {
  :root { color-scheme: light; }
  body { padding: 0; color: #000; font-size: 11pt; }
  .site-shell { max-width: none; }
  .site-header { margin-block: 1em; }
  .site-footer, .related-posts, .blog-pagination, .skip-link { display: none; }
  .post-content { margin-top: 1.5em; }
  .blog-post-title { font-size: 24pt; }
}

/* Stars hang in the margin without shifting the title text. */
.blog-post-title, .post-list-item { position: relative; }
.post-star {
  position: absolute;
  inset-inline-end: calc(100% + .2em);
  top: .08em;
  font-size: .7em;
  line-height: 1;
  color: var(--muted);
}
.post-list-item .post-star { top: .4em; }
.home-section { margin-top: var(--space); }
.home-section h2 { margin-top: 0; }

@media (max-width: 959px) {
  .blog-post-title .post-star {
    font-size: .4em;
    inset-inline-end: 100%;
    top: .2em;
  }
}