/* Engineering layout: grayscale surfaces, colored syntax and callouts. */
:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #292929;
  --muted: #686868;
  --line: #d5d5d5;
  --accent: #383838;
  --code-paper: #f0f0f0;
  --code-border: #999;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.85 var(--mono);
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.shell { max-width: 860px; margin: auto; padding: 0 32px; }
header { padding: 38px 0 22px; border-bottom: 1px dashed var(--line); }
.brand { color: var(--ink); font-size: 23px; font-weight: 550; letter-spacing: -.04em; text-decoration: none; }
.brand-icon { width: 32px; height: 32px; margin-right: 10px; image-rendering: pixelated; vertical-align: middle; }
nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 13px; }
nav a { padding-bottom: 2px; text-decoration: none; }
nav a[aria-current=page] { text-decoration: underline; }
main { padding: 28px 0 65px; }
h1, h2, h3 { font-family: inherit; font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: 23px; line-height: 1.35; margin: 0 0 18px; }
h2 { font-size: 19px; line-height: 1.4; margin: 48px 0 20px; }
h3 { font-size: 17px; line-height: 1.2; margin: 30px 0 16px; }
p { margin: 0 0 22px; }
.prose { max-width: 73ch; }
.prose ul, .prose ol { padding-left: 1.6em; }
.prose li > ul, .prose li > ol { margin: 6px 0; }
.prose li { margin: 4px 0; }
article.prose { line-height: 1.9; }
main > .prose > h2:first-child, main > .archive-year:first-child { margin-top: 0; }
.home-writing { margin-top: 30px; }
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 14px 0; }
.posts a { display: block; }
.posts time { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.posts p { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.archive-year { margin-top: 36px; color: var(--muted); }
.archive-link { margin-top: 24px; font-size: 14px; }
.post-meta { font-size: 12px; color: var(--muted); margin: 0 0 30px; }
.back { display: inline-block; margin-top: 50px; font-size: 12px; }
.empty { color: var(--muted); }
footer { border-top: 1px dashed var(--line); padding: 25px 0 38px; font-size: 13px; color: var(--muted); }
.social { display: flex; gap: 18px; flex-wrap: wrap; }
blockquote { border-left: 2px solid var(--code-border); margin: 28px 0; padding: 2px 0 2px 24px; color: var(--muted); font-size: 14px; }
blockquote p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Code and media. */
.code-block { margin: 28px 0; }
.code-label { color: var(--muted); font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
pre { overflow-x: auto; background: var(--code-paper); border: 1px solid var(--line); border-left: 2px solid var(--code-border); padding: 18px; font-size: 14px; line-height: 1.6; }
.code-block pre { margin: 0; }
code { font-family: var(--mono); font-size: .88em; }
p code, li code { background: var(--code-paper); padding: 2px 5px; }
.tok-keyword { color: #70429a; }
.tok-string { color: #245c45; }
.tok-number { color: #944718; }
.tok-comment { color: #616b79; font-style: italic; }
.tok-builtin { color: #235f91; }
mark { background: #f5e7a5; color: var(--ink); padding: .05em .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.highlight-blue { background: #d4e5fb; }
.highlight-green { background: #dcecd5; }
.highlight-red { background: #f6d8d8; }
.highlight-yellow { background: #f5e7a5; }
.text-underline { text-decoration: underline; text-underline-offset: 3px; }
.text-blue { color: #315e91; }
.text-green { color: #326344; }
.text-red { color: #a13939; }
.prose img { max-width: 100%; height: auto; margin: 12px 0; filter: grayscale(1); }
figure { margin: 30px 0; }
video { display: block; width: 100%; max-height: 70vh; background: #171717; }
figcaption { font-size: 14px; color: var(--muted); margin-top: 9px; }
.equation { overflow-x: auto; padding: 18px 0; margin: 20px 0; }
.skip { position: absolute; top: -80px; }
.skip:focus { top: 8px; background: var(--paper); padding: 8px; }

@media (max-width: 560px) {
  .shell { padding: 0 22px; }
  nav { gap: 12px 22px; }
  .posts li { gap: 3px; }
}
@media print {
  body { background: white; color: black; }
  .shell { max-width: none; padding: 0; }
  header, footer, .skip { display: none; }
  main { padding: 0; }
  .prose { max-width: none; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a, [class^="tok-"] { color: black; }
}

.callout {
  --callout-ink: #315e91;
  --callout-paper: #eef4fb;
  --callout-line: #779cc7;
  margin: 28px 0;
  padding: 16px 20px;
  background: var(--callout-paper);
  border-left: 3px solid var(--callout-line);
  color: var(--ink);
  font-size: .95em;
  line-height: 1.75;
}
.callout-tip { --callout-ink: #326344; --callout-paper: #eef5ec; --callout-line: #7c9f76; }
.callout-remark { --callout-ink: #805b13; --callout-paper: #faf4e3; --callout-line: #b69a4d; }
.callout-important { --callout-ink: #934630; --callout-paper: #fbefe9; --callout-line: #c08c77; }
.callout-title { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--callout-ink); margin: 0 0 9px; }
.callout-subtitle { font-weight: 400; letter-spacing: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body > :first-child { margin-top: 0; }
.callout-body p { font-size: inherit; line-height: inherit; }
.callout-body .code-block { margin: 16px 0; }
@media (max-width: 560px) { .callout { padding: 14px 16px; } }
@media print { .callout { background: white; border-color: #777; } .callout-title { color: black; } }