/*
 * Structure shared by every theme: the grid, the lists, overflow, and how code
 * tokens map onto colours. Themes (static/themes/*.css) set the look through the
 * custom properties below and whatever selectors they like on top.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body, system-ui, sans-serif);
}

.page {
  max-width: var(--page-width, 1040px);
  margin: 0 auto;
  padding: 0 16px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 240px);
  gap: var(--gap, 56px);
}

@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

main { min-width: 0; }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }

.projects, .post-list { list-style: none; margin: 0; padding: 0; }

.post-body img { max-width: 100%; height: auto; }
.post-body table { border-collapse: collapse; display: block; overflow-x: auto; }

pre { overflow-x: auto; }
pre code { display: block; }

code, pre, kbd { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }

/* highlight.js tokens; no hljs stylesheet is loaded, the theme's variables colour them. */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-doctag { color: var(--tk-keyword); }
.hljs-string, .hljs-regexp, .hljs-symbol, .hljs-template-variable { color: var(--tk-string); }
.hljs-comment, .hljs-quote { color: var(--tk-comment); font-style: italic; }
.hljs-title, .hljs-section, .hljs-attr, .hljs-name { color: var(--tk-title); }
.hljs-type, .hljs-title.class_, .hljs-class .hljs-title { color: var(--tk-type); }
.hljs-number, .hljs-literal, .hljs-variable { color: var(--tk-number); }
.hljs-meta, .hljs-params, .hljs-subst { color: var(--tk-meta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Off unless a theme with a light palette turns it on. */
.theme-toggle { display: none; }