:root {
  color-scheme: light;
  --ink: #242424;
  --secondary: #545454;
  --link: #245b78;
  --rule: #e3e2df;
  --paper: #fff;
  --code-background: #f5f4f1;
  --selection: #dceaf1;
  --quote-rule: #8a8a84;
  --syntax-keyword: #714063;
  --syntax-string: #285d45;
  --syntax-number: #8a472c;
  --serif: "Merriweather", "Noto Serif SC", serif;
  --mono: "Geist Mono", "Noto Serif SC", monospace;
}

/* Explicit choices override the system preference; CSS also works without JS. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9e5de;
  --secondary: #bcb8b0;
  --link: #99c6dd;
  --rule: #3f403d;
  --paper: #20211f;
  --code-background: #2a2c29;
  --selection: #38596b;
  --quote-rule: #85877e;
  --syntax-keyword: #d9a9ce;
  --syntax-string: #a6cfac;
  --syntax-number: #e5b38e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e9e5de;
    --secondary: #bcb8b0;
    --link: #99c6dd;
    --rule: #3f403d;
    --paper: #20211f;
    --code-background: #2a2c29;
    --selection: #38596b;
    --quote-rule: #85877e;
    --syntax-keyword: #d9a9ce;
    --syntax-string: #a6cfac;
    --syntax-number: #e5b38e;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body { margin: 0; }

.wrapper {
  width: min(100% - 3rem, 44rem);
  margin-inline: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 5px;
  border-radius: 1px;
}

::selection { background: var(--selection); color: var(--ink); }

.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .5rem .75rem;
  background: var(--paper);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 2.75rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.site-header a { color: var(--ink); text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.site-name { font-size: 1.375rem; font-weight: 600; white-space: nowrap; }
.header-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: 1rem; }
.site-header nav a { padding-block: .4rem; }
.site-header [aria-current="page"] { text-decoration: underline; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.75rem;
  padding: .35rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper);
  color: var(--secondary);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); border-color: var(--secondary); }
.theme-toggle svg { flex-shrink: 0; }

main { min-height: 16rem; padding-top: 3.5rem; }
main:focus { outline: none; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; text-wrap: pretty; }
h1 { font-size: 2.5rem; margin: 0; }
.section-title { font-size: 1.375rem; margin-bottom: .75rem; }
.page-header { margin-bottom: 2.5rem; }
.post-meta { font-size: 1rem; color: var(--secondary); margin: 1rem 0 0; }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  display: grid;
  grid-template-columns: 7.75rem 1fr;
  align-items: baseline;
  column-gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}

.post-list time { color: var(--secondary); font-size: .95rem; font-variant-numeric: tabular-nums; }
.post-list a { font-size: 1.35rem; line-height: 1.5; color: var(--ink); text-decoration: none; }
.post-list a:hover { text-decoration: underline; }
.home-writing .post-list a { font-size: 1.1875rem; }
.archive-year + .archive-year { margin-top: 2.75rem; }
.archive-year h2 { font-size: 1.375rem; margin: 0 0 .4rem; }

.prose { font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose pre, .prose table { margin: 0 0 1.5rem; }
.prose h2 { font-size: 1.8rem; margin: 2.75rem 0 1rem; }
.prose h3 { font-size: 1.45rem; margin: 2rem 0 .8rem; }
.prose h4 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
.prose li { margin-bottom: .45rem; }
.prose li > p { margin-bottom: .6rem; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li ul, .prose li ol { margin-bottom: 0; }
.prose strong, .prose b { font-weight: 600; }
.prose blockquote { border-left: 2px solid var(--quote-rule); padding-left: 1.25rem; color: var(--secondary); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.prose iframe { max-width: 100%; }
.prose hr { margin-block: 2.5rem; border: 0; border-top: 1px solid var(--rule); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: .5rem; font-size: 1rem; text-align: center; color: var(--secondary); }

code, pre {
  font-family: var(--mono);
  font-size: .875em;
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.prose :not(pre) > code { background: var(--code-background); padding: .15em .3em; border-radius: 3px; }
.prose pre { font-size: 1rem; overflow-x: auto; padding: 1.1rem 1.25rem; background: var(--code-background); line-height: 1.7; }
.prose pre code { font-size: 1em; }
.prose .highlight { overflow-x: auto; background: var(--code-background); }
.prose .highlight table { display: table; width: 100%; margin: 0; }
.prose .highlight td { border: 0; padding: 0; }
.prose .highlight pre { margin: 0; }
.prose .highlight .gutter { color: var(--secondary); border-right: 1px solid var(--rule); user-select: none; }
.prose .highlight .gutter pre { padding-inline: .8rem; }
.prose .highlight .code { width: 100%; }
.prose .highlight .comment, .prose .highlight .quote, .prose .token.comment { color: var(--secondary); }
.prose .highlight .keyword, .prose .highlight .selector-tag, .prose .token.keyword { color: var(--syntax-keyword); font-weight: 600; }
.prose .highlight .string, .prose .highlight .attr, .prose .token.string { color: var(--syntax-string); }
.prose .highlight .number, .prose .highlight .literal, .prose .token.number, .prose .token.boolean { color: var(--syntax-number); }
.prose .highlight .title, .prose .highlight .function, .prose .token.function, .prose .token.class-name { color: var(--link); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1.05rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .65rem .85rem; text-align: left; }
.prose th { font-weight: 600; }

.table-of-contents { margin: 0 0 2.5rem; padding: .85rem 1rem; border: 1px solid var(--rule); font-size: 1rem; }
.table-of-contents summary { cursor: pointer; }
.table-of-contents nav { margin-top: .85rem; line-height: 1.7; }
.table-of-contents ol { padding-left: 1.5rem; }
.table-of-contents > nav > ol { margin-block: 0; }
.table-of-contents a { text-decoration: none; }
.table-of-contents a:hover { text-decoration: underline; }
.post-tags { margin-top: 2rem; font-size: 1rem; }
.post-navigation { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.5rem; font-size: 1rem; }
.pagination { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 5rem; padding-block: 1.5rem 2.75rem; border-top: 1px solid var(--rule); color: var(--secondary); font-size: .95rem; }
.site-footer div { display: flex; gap: 1.25rem; }
.site-footer a { color: var(--secondary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .site-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1rem; padding-top: 1.75rem; }
  .header-controls { display: contents; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; gap: .25rem 1rem; }
  .theme-toggle { grid-column: 2; grid-row: 1; }
  main { padding-top: 2.5rem; }
  h1 { font-size: 2rem; }
  .post-list li { grid-template-columns: 1fr; gap: .4rem; }
  .post-list a { font-size: 1.25rem; }
  .home-writing .post-list a { font-size: 1.125rem; }
  .prose { font-size: 1rem; line-height: 1.85; }
  .prose h2 { font-size: 1.5rem; }
  .prose h3 { font-size: 1.3rem; }
  .site-footer { margin-top: 3.75rem; }
}

@media print {
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    color-scheme: light;
    --ink: #242424;
    --secondary: #545454;
    --link: #245b78;
    --rule: #e3e2df;
    --paper: #fff;
    --code-background: #f5f4f1;
    --selection: #dceaf1;
    --quote-rule: #8a8a84;
    --syntax-keyword: #714063;
    --syntax-string: #285d45;
    --syntax-number: #8a472c;
  }
  .header-controls, .site-footer, .table-of-contents, .post-navigation, .skip-link { display: none; }
  .wrapper { width: 100%; }
  main { padding-top: 1.5rem; }
  .prose { font-size: 11pt; }
  a { color: inherit; }
  h1, h2, h3 { break-after: avoid; }
  img, pre, blockquote { break-inside: avoid; }
}