/* Blog: radically minimal. Black, white and one grey. One typeface at one
   size; hierarchy comes from colour and space alone. */

:root {
  --bg: #000;
  --fg: #fff;
  --muted: #6e6e6e;
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--fg); color: var(--bg); }

h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: 500; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

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

.dim { color: var(--muted); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Frame */

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.25rem calc(3rem + env(safe-area-inset-bottom, 0px));
}

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 6rem;
}
.site-name { font-weight: 500; }
.site-header nav { display: flex; gap: 1.25rem; }
.site-header nav a { color: var(--muted); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--fg); }

.site-footer { display: flex; gap: 1.25rem; margin-top: 8rem; color: var(--muted); }
.site-footer a:hover { color: var(--fg); }

/* Sections */

.lede { color: var(--muted); max-width: 30rem; }
.lede a { color: var(--fg); }

.block { margin-top: 4.5rem; }
.block > .dim { margin-bottom: 1.5rem; max-width: 30rem; }
.label { margin-bottom: 1.5rem; color: var(--muted); font-weight: 400; }

/* Post lists */

.posts { padding: 0; list-style: none; }
.posts li + li { margin-top: 0.6rem; }
.posts a { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; }
.posts time { order: 2; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.posts a:hover .title { color: var(--muted); }

/* Subscribe */

.subscribe { display: flex; gap: 1.5rem; align-items: baseline; border-bottom: 1px solid #262626; transition: border-color 0.2s; }
.subscribe:focus-within { border-color: var(--fg); }
.subscribe input, .subscribe button { font: inherit; color: inherit; border: 0; padding: 0.6rem 0; background: none; }
.subscribe input { flex: 1 1 auto; min-width: 0; caret-color: var(--fg); }
.subscribe input::placeholder { color: var(--muted); }
.subscribe input:focus { outline: none; }
.subscribe button { flex: none; cursor: pointer; }
.subscribe button:hover, .subscribe button:focus-visible { color: var(--muted); outline: none; }

/* A post */

.post-head { margin-bottom: 3rem; }
.post-head .meta { color: var(--muted); }

.prose { color: #d6d6d6; }
.prose > * + * { margin-top: 1.25em; }
.prose > h2, .prose > h3 { margin-top: 3em; color: var(--fg); }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.5em; }
.prose strong, .prose em { color: var(--fg); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-color: var(--fg); }

.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--muted); }

.prose blockquote { padding-left: 1.25em; color: var(--fg); border-left: 1px solid var(--muted); }

.prose hr { height: 0; border: 0; margin-block: 3em; }

.prose code, .prose pre { font-family: var(--mono); font-size: 0.9em; }
.prose pre { overflow-x: auto; }
.prose .highlight { background: none; }
.prose figcaption { margin-top: 0.5em; color: var(--muted); }

.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: 0.15rem 1.5rem 0.15rem 0; vertical-align: top; }
.prose th { color: var(--muted); font-weight: 400; padding-bottom: 0.5rem; }

/* About */

.contact { padding: 0; list-style: none; }
.contact li { display: flex; gap: 1.5rem; }
.contact li + li { margin-top: 0.3rem; }
.contact .dim { width: 5rem; flex: none; }
.contact a { overflow-wrap: anywhere; }

/* Narrow screens */

@media (max-width: 520px) {
  .site-header { margin-bottom: 4rem; }
  .posts a { flex-direction: column; gap: 0; }
  .posts li + li { margin-top: 1rem; }
}