/* A short letter, not a brochure. One column of warm paper, a serif, and links. */
:root {
  --paper: #f4f5f3;
  --ink: #1c1e1d;
  --muted: #6c716e;
  --rule: #dfe2de;
  --accent: #b4532a;
  --accent-ink: #8f3f1e;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #141615; --ink: #e8eae7; --muted: #9a9f9b; --rule: #2a2d2b; --accent: #e08a62; --accent-ink: #f0a784; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #141615; --ink: #e8eae7; --muted: #9a9f9b; --rule: #2a2d2b; --accent: #e08a62; --accent-ink: #f0a784; color-scheme: dark; }

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-block: clamp(3rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem);
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.1rem + .35vw, 1.3rem);
  line-height: 1.55;
  font-variation-settings: "opsz" 18;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 36rem; margin: 0 auto; }

h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.3rem, 2rem + 2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
p { margin: 0 0 1.25em; text-wrap: pretty; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.intro p:last-child { color: var(--muted); }
section { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); }
.name { font-weight: 500; }
span.name { color: var(--ink); }

.outro { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); }
.outro p { margin-bottom: 0; }

/* Header and footer: the same narrow column, small type, links only. */
.top, .bottom { max-width: 36rem; margin: 0 auto; font-size: .92rem; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.top .me { color: var(--ink); text-decoration: none; font-weight: 500; }
.top nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.top nav a, .bottom a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .bottom a:hover { color: var(--accent-ink); text-decoration: underline; }
.theme { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.3rem 0 -.3rem -.2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; align-self: center; }
.theme:hover { color: var(--accent-ink); }
.theme svg { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.theme.is-dark svg { transform: rotate(180deg); }
.top nav { align-items: baseline; }
.bottom { margin-top: clamp(3rem, 8vh, 5.5rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .6rem; }
.fine { margin: 0; color: var(--muted); }

/* Writing: the list of posts, and the posts themselves. */
.posts { margin: 0; padding: 0; list-style: none; }
.posts li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
.posts time { color: var(--muted); font-size: .92em; font-variant-numeric: tabular-nums; }
.post h1 { margin-bottom: 2rem; }
.post h2 { margin: 2.2rem 0 .8rem; font-size: 1.35em; font-weight: 500; line-height: 1.2; font-variation-settings: "opsz" 36; }
.post .intro .fine { margin-bottom: .8rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .1em .35em; border-radius: .3em; }
pre { margin: 1.4em 0; padding: 1rem 1.2rem; overflow-x: auto; border-radius: .5rem; background: color-mix(in srgb, var(--ink) 6%, transparent); line-height: 1.5; }
pre code { background: none; padding: 0; font-size: .82em; }
blockquote { margin: 1.4em 0; padding-left: 1.2rem; border-left: 2px solid var(--rule); color: var(--muted); font-style: italic; }
.top nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 560px) { .posts li { grid-template-columns: 1fr; gap: .1rem; } }