:root {
  color-scheme: light dark;

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --font-display: "Avenir Next", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --background: oklch(98.5% 0 0);
  --text: oklch(37% .013 286);
  --heading: oklch(21% .006 286);
  --subtle: oklch(44.2% .017 286);
  --muted: oklch(55.2% .016 286);
  --border: oklch(92% .004 286);
  --accent: oklch(52.7% .154 150); /* 4.73:1 on the background */
  --accent-hover: oklch(44.8% .119 151); /* 6.79:1 on the background */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(14.1% .005 286);
    --text: oklch(87.1% .006 286);
    --heading: oklch(98.5% 0 0);
    --subtle: oklch(70.5% .015 286);
    --muted: oklch(70.5% .015 286);
    --border: oklch(27.4% .006 286);
    /* The light scheme's green is only 4.02:1 here, and brighter saturated greens are too vivid. */
    --accent: oklch(78% .1 150); /* 10.33:1 on the background */
    --accent-hover: oklch(86% .07 150); /* ~13:1 on the background */
  }
}

@view-transition {
  navigation: auto;
}

/* Reset */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--background);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; transition: color .15s; }
ol, ul { list-style: none; }
img, svg, iframe { display: block; }
img { max-width: 100%; height: auto; }
iframe { border: 0; }
code, pre { font-family: var(--font-mono); }
sup { position: relative; top: -.5em; font-size: 75%; line-height: 0; vertical-align: baseline; }

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

/* Shared text styles */
.site-title, .page-title, .featured-title, .list-heading, .entry-title, .recent-title, .prose h2, .prose h3, .prose th {
  font-family: var(--font-display);
}

.page-title, .featured-title, .list-heading, .entry-title, .recent-title {
  color: var(--heading);
  text-wrap: pretty;
}

.page-title, .featured-title, .list-heading { font-weight: 600; }
.entry-title, .recent-title { font-weight: 500; line-height: 1.4; }

.page-intro, .eyebrow, .entry-date, .featured-meta, .see-all a, .link-row, .post-meta, .post-back-footer {
  font-family: var(--font-sans);
}

.entry-date, .featured-meta, .see-all a, .link-row, .post-meta, .post-back-footer {
  font-size: .875rem;
  line-height: 1.4;
}

.featured-meta a, .see-all a, .link-row { font-weight: 500; }

.link-accent { color: var(--accent); }
.link-subtle { color: var(--subtle); }

/* Page frame */
body {
  max-width: 56rem;
  margin-inline: auto;
  padding: 1.5rem;
}

main { margin-bottom: 6rem; }

.site-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.site-title {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
}

/* Page headings */
.page-header { margin-bottom: 3rem; }
.article-header { margin-bottom: 2rem; }

.page-title {
  font-size: 2.25rem;
  line-height: 1.25;
}

.page-intro {
  max-width: 65ch;
  margin-top: .75rem;
  color: var(--subtle);
}

.eyebrow {
  margin-bottom: .75rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* Date-and-title lists */
.list-section { margin-top: 3rem; }

.list-heading {
  margin-bottom: .75rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.entry-list { border-top: 1px solid var(--border); }
.entry-list > * + *, .recent-list > * + * { border-top: 1px solid var(--border); }

.entry, .recent-post {
  display: grid;
  gap: .25rem;
}

.entry { padding-block: 1rem; }
.recent-post { padding-block: 1.25rem; }

.entry-date { color: var(--muted); }
.entry-title { font-size: 1.125rem; transition: color .15s; }
.recent-title { font-size: 1.25rem; }

/* Home page */
.featured { padding-bottom: 3rem; }

.featured-title {
  margin-bottom: 1rem;
  font-size: 1.875rem;
  line-height: 1.25;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin-top: 1.5rem;
  color: var(--muted);
}

.recent {
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.see-all { margin-top: 2rem; }

.excerpt {
  max-width: 42rem;
  line-height: 1.75;
}

.excerpt-small {
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.7;
}

/* Posts and newsletters: a text column, with the metadata beside it on wide screens */
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 3rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  color: var(--muted);
}

.post-meta time { color: var(--subtle); }
.post-meta-label { display: none; }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
}

.post-back-aside {
  display: none;
  margin-top: 1.5rem;
}

/* Written content, from Markdown */
.prose {
  max-width: 65ch;
  line-height: 1.75;
}

.prose p { margin-block: 1.25em; }
.prose a, .excerpt a { color: var(--accent); font-weight: 500; }
.prose strong { color: var(--heading); font-weight: 600; }
.prose blockquote strong { color: inherit; }

.prose ol, .prose ul {
  margin-block: 1.25em;
  padding-inline-start: 1.625em;
}

.prose ol { list-style-type: decimal; }
.prose ul { list-style-type: disc; }
.prose li { margin-block: .5em; padding-inline-start: .375em; }
.prose li::marker { color: var(--muted); }

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

.prose blockquote {
  margin-block: 1.6em;
  padding-inline-start: 1em;
  border-inline-start: .25rem solid var(--border);
  color: var(--heading);
  font-style: italic;
  font-weight: 500;
}

.prose blockquote small { display: block; }

.prose h2, .prose h3 { color: var(--heading); }
.prose h2 { margin-block: 2em 1em; font-size: 1.5em; font-weight: 600; line-height: 1.3; }
.prose h3 { margin-block: 1.6em .6em; font-size: 1.25em; font-weight: 500; line-height: 1.6; }

.prose img, .prose picture { margin-block: 2em; }
.prose picture { display: block; }
.prose picture img { margin-block: 0; }

.prose code { color: var(--heading); font-size: .875em; font-weight: 600; }
.prose a code, .prose blockquote code { color: inherit; }

/* Dark in both colour schemes, matching syntax-highlighting.css */
.prose pre {
  margin-block: 1.7em;
  padding: .85em 1.15em;
  overflow-x: auto;
  border-radius: .375rem;
  background: #0d1117;
  color: #c9d1d9;
  font-size: .875em;
  line-height: 1.7;
  tab-size: 4;
}

.prose pre code {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.prose table {
  width: 100%;
  margin-block: 2em;
  border-collapse: collapse;
  font-size: .875em;
  line-height: 1.7;
}

.prose tr { border-bottom: 1px solid var(--border); }
.prose tbody tr:last-child { border-bottom: 0; }
.prose th, .prose td { padding: .55em; text-align: start; vertical-align: baseline; }
.prose th:first-child, .prose td:first-child { padding-inline-start: 0; }
.prose th:last-child, .prose td:last-child { padding-inline-end: 0; }
.prose th { padding-top: 0; color: var(--heading); font-weight: 600; }

.prose hr + *, .prose h2 + *, .prose h3 + * { margin-top: 0; }

/* Hover */
.site-title:hover, .link-accent:hover, .prose a:hover, .excerpt a:hover { color: var(--accent-hover); }
.link-subtle:hover, .link-title:hover, .entry:hover .entry-title { color: var(--accent); }
.youtube:hover { color: #f00; }
.feed:hover { color: #ee802f; }

/* Larger screens */
@media (min-width: 40rem) {
  body { padding: 2rem; }

  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 4rem;
  }

  .site-title { font-size: 1.875rem; }
  .page-title { font-size: 3rem; }

  .entry, .recent-post {
    grid-template-columns: 7rem 1fr;
    align-items: baseline;
    gap: 1.5rem;
  }

  .featured { padding-bottom: 3.5rem; }
  .featured-title { font-size: 2.25rem; }
  .recent { padding-top: 3.5rem; }
}

@media (min-width: 64rem) {
  body { padding-inline: 2.5rem; }

  .post { grid-template-columns: minmax(0, 1fr) 11rem; }
  .post > header { grid-area: 1 / 1; }
  .post > .prose { grid-area: 2 / 1; }

  .post-meta {
    display: block;
    grid-area: 2 / 2;
    position: sticky;
    top: 2rem;
    align-self: start;
  }

  .post-meta-label { display: inline; }

  .post-tags {
    flex-direction: column;
    margin-top: 1.5rem;
  }

  .post-back-aside { display: block; }
  .post-back-footer { display: none; }
}