@font-face {
  font-family:Fira;
  src:url('../fonts/FiraMono-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  --paper:#faf9f6;
  --ink:#252823;
  --muted:#676b63;
  --line:#dcded4;
  --accent:#596945;
  --code:#eeeee7;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:.2em;
}

a:hover {
  text-decoration:underline;
}

a:focus-visible, pre:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

::selection {
  background:#d5dfc6;
  color:#20291c;
}

h1, h2, h3, p {
  margin:0;
}

h1, h2, h3 {
  font-weight:400;
}

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

.site-shell {
  max-width:1140px;
  margin:auto;
  padding:0 52px;
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:38px 0;
  border-bottom:1px solid var(--line);
}

.brand {
  font-size:16px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.025em;
}

.main-nav {
  display:flex;
  gap:26px;
  align-items:center;
  font-size:13px;
}

.main-nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.main-nav a[aria-current] {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:8px;
}

.socials {
  display:flex;
  gap:14px;
  align-items:center;
}

.socials a {
  display:grid;
  place-items:center;
  width:32px;
  height:36px;
  color:var(--muted);
  transition:color .15s;
}

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

.socials svg {
  width:19px;
  height:19px;
  fill:currentColor;
}

.eyebrow {
  font:10px/1.7 Fira,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.hero {
  padding:82px 0 76px;
}

.hero h1 {
  font-size:72px;
  line-height:1.08;
  letter-spacing:-.04em;
  margin:22px 0 28px;
}

.intro {
  max-width:520px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.hero .socials {
  margin-top:24px;
}

.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px;
}

.section-heading h2 {
  font-size:13px;
  font-weight:500;
}

.section-heading h2>span {
  font:10px Fira,monospace;
  color:var(--muted);
  margin-right:22px;
}

.section-heading>a {
  font-size:11px;
  color:var(--muted);
}

.writing-section {
  margin-bottom:70px;
}

.post-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  gap:24px;
  align-items:center;
  padding:25px 0;
  border-top:1px solid var(--line);
}

.post-row:hover {
  text-decoration:none;
}

.post-row:hover h3 {
  text-decoration:underline;
  text-decoration-thickness:1px;
}

.post-row:hover .row-arrow {
  color:var(--accent);
}

.post-summary h3 {
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.02em;
}

.post-summary p {
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
  max-width:500px;
}

.post-row time {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.row-arrow {
  font-size:17px;
  color:var(--muted);
}

.code-section {
  margin-bottom:64px;
}

.project-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:40px;
}

.project {
  display:block;
  padding:24px 0;
  border-top:1px solid var(--line);
}

.project:hover {
  text-decoration:none;
}

.project:hover h3 {
  text-decoration:underline;
}

.project-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
}

.project-heading h3 {
  font-size:21px;
  letter-spacing:-.02em;
}

.project-heading>span {
  color:var(--muted);
  font-size:14px;
}

.project p {
  font-size:13px;
  color:var(--muted);
  margin:7px 0 15px;
}

.project-language {
  font:9px Fira,monospace;
  color:var(--muted);
}

.site-footer {
  border-top:1px solid var(--line);
  padding:24px 0 36px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:var(--muted);
}

.collection-header {
  padding:65px 0 52px;
}

.collection-header h1 {
  font-size:64px;
  line-height:1.1;
  letter-spacing:-.04em;
  margin:20px 0;
}

.page-blog .post-list, .page-code .project-list {
  margin-bottom:90px;
}

.skip-link {
  position:absolute;
  top:0;
  left:20px;
  transform:translateY(-150%);
  background:var(--paper);
  padding:12px;
  z-index:10;
}

.skip-link:focus {
  transform:none;
}

.article {
  max-width:740px;
  margin:auto;
}

.article-header {
  padding:45px 0 30px;
}

.back-link {
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  margin-bottom:44px;
}

.article-header h1 {
  font-size:55px;
  line-height:1.09;
  letter-spacing:-.035em;
  margin:20px 0 25px;
}

.prose {
  font-size:18px;
  line-height:1.8;
  overflow-wrap:break-word;
}

.prose p {
  margin:1.3em 0;
}

.prose h2 {
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.02em;
  margin:2em 0 .8em;
}

.prose h3 {
  font-size:23px;
  line-height:1.3;
  margin:1.8em 0 .8em;
}

.prose strong {
  font-weight:600;
}

.prose a {
  text-decoration:underline;
}

.prose ul, .prose ol {
  padding-left:1.3em;
  margin:1.4em 0;
}

.prose li+li {
  margin-top:.6em;
}

.prose li p {
  margin:.6em 0;
}

.prose blockquote {
  margin:2em 0;
  padding-left:24px;
  border-left:2px solid var(--accent);
  color:var(--muted);
}

.prose blockquote h2 {
  font-size:27px;
}

.prose figure {
  margin:2em 0;
}

.prose figure img {
  max-width:100%;
  height:auto;
  margin:auto;
}

.prose hr {
  border:0;
  border-top:1px solid var(--line);
  margin:3em 0;
}

code {
  font: .75em/1.7 Fira,monospace;
}

pre {
  overflow-x:auto;
  background:var(--code);
  padding:24px;
  margin:32px 0;
  border:1px solid var(--line);
  tab-size:4;
  max-width:100%;
  font-size:14px;
  line-height:1.8;
}

pre code {
  font-size:12px;
  display:block;
  white-space:pre;
  overflow-wrap:normal;
}

.hljs-comment, .hljs-quote {
  color:#667367;
  font-style:italic;
}

.hljs-keyword, .hljs-built_in {
  color:#8c493c;
}

.hljs-string, .hljs-regexp {
  color:#416c48;
}

.hljs-number, .hljs-literal {
  color:#815a78;
}

.hljs-title, .hljs-type {
  color:#30697b;
}

.hljs-variable {
  color:#76583a;
}

.article-end {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:30px 0 60px;
  margin-top:60px;
  font-size:13px;
  color:var(--muted);
}

.brand-dot {
  color:var(--accent);
}

.theme-afterhours {
  --paper:#191b1e;
  --ink:#e9e9e7;
  --muted:#9da0a8;
  --line:#373a40;
  --accent:#b9afdb;
  --code:#202328;
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.theme-afterhours ::selection {
  background:#4b435e;
  color:#fff;
}

.theme-afterhours .site-shell {
  max-width:1110px;
  padding:0 52px;
}

.theme-afterhours .site-header {
  padding:27px 0;
  border-bottom:1px solid var(--line);
}

.theme-afterhours .brand {
  font-size:16px;
}

.theme-afterhours .site-header .socials {
  gap:9px;
}

.theme-afterhours .site-header .socials a {
  width:27px;
}

.theme-afterhours .site-header .socials svg {
  width:19px;
  height:19px;
}

.theme-afterhours .main-nav {
  font:13px Fira,monospace;
  gap:22px;
}

.theme-afterhours .main-nav a[aria-current] {
  text-decoration:none;
}

.theme-afterhours .hero {
  padding:78px 0 65px;
}

.theme-afterhours .hero h1 {
  font-size:73px;
  line-height:1.05;
  font-weight:450;
  letter-spacing:-.045em;
  margin:24px 0;
}

.theme-afterhours .hero .eyebrow {
  color:var(--accent);
  font-size:9px;
}

.theme-afterhours .hero .intro {
  font-size:16px;
  max-width:530px;
  line-height:1.75;
}

.theme-afterhours .hero .socials {
  display:none;
}

.theme-afterhours .section-heading {
  margin-bottom:22px;
}

.theme-afterhours .section-heading h2 {
  font:11px Fira,monospace;
}

.theme-afterhours .section-heading h2>span {
  color:var(--accent);
}

.theme-afterhours .section-heading>a {
  font-size:10px;
}

.theme-afterhours .post-row {
  grid-template-columns:110px minmax(0,1fr) 20px;
  gap:20px;
  padding:25px 0;
}

.theme-afterhours .post-row time {
  grid-column:1;
  grid-row:1;
  align-self:start;
  padding-top:5px;
  font:9px/1.8 Fira,monospace;
}

.theme-afterhours .post-summary {
  grid-column:2;
  grid-row:1;
}

.theme-afterhours .post-summary h3 {
  font-size:21px;
  font-weight:450;
}

.theme-afterhours .post-summary p {
  font-size:12px;
  margin-top:9px;
}

.theme-afterhours .row-arrow {
  color:var(--accent);
}

.theme-afterhours .project-list {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 30px;
}

.theme-afterhours .project-heading h3 {
  font:16px Fira,monospace;
  color:var(--accent);
}

.theme-afterhours .project p {
  font-size:12px;
}

.theme-afterhours .project-language {
  font-size:9px;
}

.theme-afterhours .site-footer {
  font:9px/1.6 Fira,monospace;
}

.theme-afterhours .article-header h1 {
  font-size:55px;
  font-weight:450;
}

.theme-afterhours .prose {
  font-size:17px;
  line-height:1.85;
  color:#d1d2d5;
}

.theme-afterhours .prose h2, .theme-afterhours .prose h3 {
  color:var(--ink);
  font-weight:500;
}

.theme-afterhours .hljs-comment, .theme-afterhours .hljs-quote {
  color:#a4ac9d;
}

.theme-afterhours .hljs-keyword, .theme-afterhours .hljs-built_in {
  color:#c9b4e6;
}

.theme-afterhours .hljs-string, .theme-afterhours .hljs-regexp {
  color:#a9c6ae;
}

.theme-afterhours .hljs-number, .theme-afterhours .hljs-literal {
  color:#d6ba8c;
}

.theme-afterhours .hljs-title, .theme-afterhours .hljs-type {
  color:#a9cbd6;
}

.theme-afterhours .hljs-variable {
  color:#d5b4aa;
}

@media(min-width:1400px) {
.theme-afterhours .hero {
    padding-top:100px;
  }
}

@media(max-width:1000px) {
.site-shell, .theme-afterhours .site-shell {
    padding-left:36px;
    padding-right:36px;
  }

.post-summary p {
    max-width:400px;
  }

.theme-afterhours .hero h1 {
    font-size:64px;
  }
}

@media(max-width:760px) {
.site-shell, .theme-afterhours .site-shell {
    padding:0 24px;
  }

.site-header, .theme-afterhours .site-header {
    padding:20px 0;
    gap:12px;
    flex-wrap:wrap;
  }

.brand {
    font-size:14px;
  }

.main-nav {
    gap:18px;
    font-size:12px;
  }

.hero, .theme-afterhours .hero {
    display:block;
    padding:48px 0;
  }

.hero h1, .theme-afterhours .hero h1 {
    font-size:clamp(42px,10vw,64px);
    line-height:1.06;
    letter-spacing:-.04em;
  }

.hero .eyebrow {
    font-size:9px;
  }

.intro {
    font-size:16px;
  }

.section-heading h2>span {
    margin-right:12px;
  }

.post-row {
    grid-template-columns:1fr 15px;
    gap:9px 15px;
    padding:22px 0;
  }

.post-row time {
    grid-column:1;
    grid-row:2;
  }

.row-arrow {
    grid-column:2;
    grid-row:1;
  }

.post-summary h3 {
    font-size:22px;
  }

.post-summary p {
    font-size:13px;
  }

.project-list, .theme-afterhours .project-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 25px;
  }

.site-footer {
    flex-wrap:wrap;
    gap:8px 22px;
  }

.site-footer>a {
    flex-basis:100%;
  }

.site-footer>span:nth-child(2) {
    display:none;
  }

.collection-header {
    padding:40px 0;
  }

.collection-header h1 {
    font-size:49px;
  }

.article-header {
    padding:25px 0;
  }

.article-header h1, .theme-afterhours .article-header h1 {
    font-size:40px;
  }

.back-link {
    margin-bottom:30px;
  }

.prose {
    font-size:17px;
  }

.prose h2 {
    font-size:27px;
  }

.prose h3 {
    font-size:22px;
  }

pre {
    padding:18px;
  }

.theme-afterhours .site-header .socials {
    display:none;
  }

.theme-afterhours .hero .socials {
    display:flex;
  }

.theme-afterhours .post-row {
    grid-template-columns:1fr 15px;
    gap:10px;
  }

.theme-afterhours .post-row time {
    grid-column:1;
    grid-row:2;
  }

.theme-afterhours .post-summary {
    grid-column:1;
    grid-row:1;
  }
}

@media(max-width:420px) {
.project-list, .theme-afterhours .project-list {
    grid-template-columns:1fr;
  }

.theme-afterhours .brand {
    font-size:14px;
  }

.theme-afterhours .main-nav {
    gap:15px;
    font-size:12px;
  }

.eyebrow {
    letter-spacing:.045em;
  }

.article-end {
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce) {
html {
    scroll-behavior:auto;
  }

* {
    transition:none!important;
  }
}

.theme-afterhours .post-age-note {
  margin:28px 0 0;
  padding:15px 19px;
  border-left:2px solid var(--accent);
  background:#24232d;
  color:#c2bdcf;
  font-size:13px;
  line-height:1.65;
}

.theme-afterhours .post-age-note strong {
  color:#ddd3f2;
  font-weight:500;
}