/* Light is the default. Dark is opt-in via the toggle, which sets data-theme="dark" on and remembers the choice. */ :root { --bg: #fffffc; --fg: #111110; --muted: #6f6f6a; --rule: #e2e2dc; --code: #f2f2ec; color-scheme: light; /* Code listings are the one place the site spends colour. These are fixed, not theme-derived: the block stays dark on a light page, like an embedded terminal. Palette follows VS Code Dark+. */ --c-bg: #1b1b19; --c-fg: #d4d4d4; --c-rule: #303030; --c-gutter: #6e7681; --c-comment: #6a9955; --c-keyword: #569cd6; --c-string: #ce9178; --c-number: #b5cea8; --c-function: #dcdcaa; --c-ident: #9cdcfe; } :root[data-theme="dark"] { --bg: #12120f; --fg: #e6e6df; --muted: #8d8d85; --rule: #2b2b26; --code: #1c1c18; color-scheme: dark; } * { box-sizing: border-box; } body { max-width: 36rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; background: var(--bg); color: var(--fg); font: 1.0625rem/1.65 Georgia, "Times New Roman", Times, serif; -webkit-text-size-adjust: 100%; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { background: var(--fg); color: var(--bg); text-decoration: none; } /* masthead */ .masthead { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 3rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); } /* Stage for the figure that lives on the rule. Out of flow, never clickable. */ .walker { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; } .walker svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 44px; overflow: visible; } .sitename { text-decoration: none; } .sitename:hover { background: none; color: inherit; text-decoration: underline; } .masthead nav { display: flex; align-items: baseline; gap: 0.9rem; font-size: 0.875rem; color: var(--muted); } .masthead nav a { color: var(--muted); } .theme { display: none; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; } .js .theme { display: block; } .theme:hover { color: var(--fg); } /* index */ .tagline { margin: 0 0 2.5rem; color: var(--muted); } .posts { list-style: none; margin: 0; padding: 0; } .posts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1rem; padding: 0.45rem 0; } .posts time { color: var(--muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; } /* article */ article h1 { margin: 0; font-size: 1.875rem; font-weight: normal; line-height: 1.2; letter-spacing: -0.01em; } .meta { margin: 0.5rem 0 2.5rem; color: var(--muted); font-size: 0.9375rem; } /* Section headings invert to a solid bar. fit-content keeps the bar hugging the words instead of slabbing the whole column, and the fg/bg pair means the bar flips with the theme rather than being pinned to literal black. */ article h2 { width: fit-content; max-width: 100%; margin: 3.25rem 0 1.1rem; padding: 0.28rem 0.65rem 0.34rem; background: var(--fg); color: var(--bg); font-size: 1.375rem; font-weight: normal; line-height: 1.3; } article h3 { margin: 2.25rem 0 0.6rem; padding-left: 0.65rem; border-left: 3px solid var(--fg); font-size: 1.1875rem; font-weight: normal; font-style: italic; } article p, article ul, article ol { margin: 0 0 1.25rem; } article li { margin-bottom: 0.35rem; } blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--muted); font-style: italic; } /* code */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.875em; } :not(pre) > code { padding: 0.1em 0.32em; background: var(--code); } pre { position: relative; margin: 1.75rem 0; background: var(--c-bg); border: 1px solid var(--c-rule); color: var(--c-fg); } /* The scrolls, not the 
, so the language tab stays put. */
pre code {
  display: block;
  padding: 1.5rem 1.1rem 0.95rem;
  overflow-x: auto;
  color: var(--c-fg);
  font-size: 0.8125rem;
  line-height: 1.7;
  tab-size: 2;
  counter-reset: line;
}

/* Title bar, with the traffic lights an editor window would have. */
pre::before {
  content: attr(data-lang);
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.7rem;
  padding: 0 0.7rem 0 3.4rem;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-gutter);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

pre::after {
  content: "";
  position: absolute;
  top: 0.62rem;
  left: 0.75rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #3d3d3a;
  box-shadow: 0.72rem 0 0 #3d3d3a, 1.44rem 0 0 #3d3d3a;
}

/* Gutter numbers are generated content, so copying the block copies only code. */
pre .l {
  display: block;
  counter-increment: line;
}

pre .l::before {
  content: counter(line);
  position: sticky;
  left: 0;
  display: inline-block;
  width: 1.75em;
  margin-right: 1.35em;
  background: var(--c-bg);
  color: var(--c-gutter);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

pre .t-c { color: var(--c-comment); font-style: italic; }
pre .t-k { color: var(--c-keyword); }
pre .t-s { color: var(--c-string); }
pre .t-n { color: var(--c-number); }
pre .t-f { color: var(--c-function); }
pre .t-i { color: var(--c-ident); }
pre .t-p { color: var(--c-fg); }

hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--rule); }

/* media */

img, canvas, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 2rem 0; }
figure img, figure canvas, figure svg, figure video { width: 100%; }

figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

canvas[data-sketch] { width: 100%; }

/* Break visuals out of the text column: class="wide" on a figure or div. */
.wide {
  width: min(52rem, calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.grid figure { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
th { font-weight: normal; color: var(--muted); }

.back { margin-top: 3rem; font-size: 0.9375rem; }

footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 30rem) {
  body { padding-top: 2.5rem; }
  .posts li { grid-template-columns: 1fr; gap: 0; padding: 0.6rem 0; }
  .posts time { display: block; }
}

/* subscribe card

   Corner card, not a modal: the article stays readable and scrollable behind
   it. The border is var(--fg) rather than var(--rule) because this is the one
   element on the site that has to lift off the page, and the shadow alone does
   nothing in dark mode. */

.sub {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  width: min(21rem, calc(100vw - 2.5rem));
  padding: 1.15rem 1.25rem 1.05rem;
  background: var(--bg);
  border: 1px solid var(--fg);
  box-shadow: 0 2px 26px rgb(0 0 0 / 9%);
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 240ms cubic-bezier(.4, 0, .2, 1), transform 240ms cubic-bezier(.4, 0, .2, 1);
}

.sub.is-open { opacity: 1; transform: none; }

.sub h2 {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: normal;
  line-height: 1.3;
}

.sub .sub-body { margin: 0 0 0.85rem; color: var(--muted); }

.sub form { display: flex; gap: 0.4rem; }

.sub input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  background: var(--code);
  border: 1px solid var(--rule);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
}

.sub input[type="email"]:focus-visible { outline: 2px solid var(--fg); outline-offset: -1px; }
.sub input[type="email"]:disabled { opacity: 0.6; }

.sub .sub-go {
  padding: 0.4rem 0.75rem;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: var(--bg);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.sub .sub-go:hover:not(:disabled) { background: var(--bg); color: var(--fg); }
.sub .sub-go:disabled { cursor: default; opacity: 0.55; }

.sub .sub-alt { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.8125rem; }

/* Empty until there is something to announce, so it takes no room. */
.sub .sub-msg { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.sub .sub-msg:not(:empty) { margin-top: 0.55rem; }
.sub.is-done .sub-msg { color: var(--fg); }
.sub.is-done form, .sub.is-done .sub-alt { display: none; }

.sub .sub-x {
  margin-top: 0.7rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sub .sub-x:hover { color: var(--fg); }

/* Off-screen but still read aloud, and still focusable by the input's label. */
.sub .sub-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sub .sub-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 30rem) {
  .sub {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-width: 1px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub { transition: none; }
}