/* Jon Sykes: generated from design-system/tokens.json */
:root, [data-theme="light"] {
  --canvas: #edf0f3;
  --paper: #ffffff;
  --paper-sunk: #f4f4f4;
  --ink: #111111;
  --ink-soft: #333333;
  --ink-muted: #6b6b6b;
  --rule: #1a1a1a;
  --leader: #3d3d3d;
  --link: var(--ink);
  --selection: #e2e2e2;
}
[data-theme="dark"] {
  --canvas: #0a0a0a;
  --paper: #161616;
  --paper-sunk: #222222;
  --ink: #ececec;
  --ink-soft: #cfcfcf;
  --ink-muted: #9a9a9a;
  --rule: #d4d4d4;
  --leader: #6e6e6e;
  --selection: #333333;
}
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-round: 50%;
  --measure: 600px;
  --hairline: 1px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
html, body { margin: 0; min-height: 100%; background: var(--canvas); }

/* Jon Sykes — component styles. CSS only, no script. Every value is a token from tokens.css. */

/* Page — grey canvas, nav on it, one white sheet below */
.js-page {
  box-sizing: border-box;
  min-height: 100%;
  padding: var(--space-2) var(--space-3) var(--space-4);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
.js-page ::selection { background: var(--selection); }
.js-page a { color: var(--link); text-decoration: none; }
.js-page a:hover { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; }
.js-page a:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: 3px; }

.js-sheet {
  box-sizing: border-box;
  max-width: calc(var(--measure) + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-none);
}
.js-sheet > :first-child { margin-top: 0; }
.js-sheet > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .js-page { padding-left: 0; padding-right: 0; }
  .js-sheet { padding: var(--space-3); }
}

/* Rule — the structural hairline */
.js-rule { border: 0; border-top: var(--hairline) solid var(--rule); margin: var(--space-4) 0; }

/* Nav — small uppercase words, right-aligned on the canvas; the current page is underlined */
.js-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2);
  max-width: calc(var(--measure) + 2 * var(--space-4)); margin: 0 auto var(--space-2); padding: 0; list-style: none;
  font-size: 11px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.js-nav a[aria-current="page"],
.js-nav a[aria-current="page"]:hover { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; }
@media (max-width: 600px) { .js-nav { padding: 0 var(--space-3); } }

/* PostFeed — the home page: title, long date, one-line summary. The title is underlined on hover only */
.js-feed { list-style: none; margin: 0; padding: 0; }
.js-feed li + li { margin-top: var(--space-4); }
.js-feed h2 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.js-feed time { display: block; margin: 0 0 var(--space-1); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.js-feed p { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }

/* PostList — the dense archive: title, leader line, ISO date */
.js-list { list-style: none; margin: 0; padding: 0; }
.js-list li { display: flex; align-items: center; }
.js-list li + li { margin-top: var(--space-1); }
.js-list a { flex: 0 1 auto; }
.js-list .js-leader { flex: 1 1 auto; min-width: var(--space-4); height: 0;
  border-top: var(--hairline) solid var(--leader); margin: 0 var(--space-3) 0 var(--space-1); }
.js-list time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.js-list-year { margin: var(--space-4) 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 400; }

/* Prose — a post */
.js-prose { font-size: 15px; line-height: 24px; }
.js-prose h1 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.js-prose h2 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.js-prose p, .js-prose ul, .js-prose ol, .js-prose pre { margin: 0 0 var(--space-2); }
.js-prose a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; }
.js-prose .js-meta { margin: 0 0 var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.js-prose code { font-family: var(--font-mono); font-size: 13px; background: var(--paper-sunk); border-radius: var(--radius-sm); padding: 1px 4px; }
.js-prose pre { background: var(--paper-sunk); border-radius: var(--radius-sm); padding: var(--space-2); overflow-x: auto; line-height: 20px; }
.js-prose pre code { padding: 0; background: none; }
.js-prose img { display: block; max-width: 100%; border-radius: var(--radius-none); }
.js-prose blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-2); border-left: var(--hairline) solid var(--rule); color: var(--ink-muted); }

/* Footer — the year, then the feed as the one icon on the site: a 1px stroke at text size */
.js-footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.js-feed-link { display: block; margin: calc(-1 * var(--space-1)); padding: var(--space-1); }
.js-feed-link svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: var(--hairline); }
.js-feed-link svg * { vector-effect: non-scaling-stroke; }

/* ThemeToggle — "Light / Dark" in words; the current mode is underlined, like the current page */
.js-mode { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-muted); }
.js-mode button { all: unset; cursor: pointer; color: var(--link); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.js-mode button:hover { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; }
.js-mode button[aria-pressed="true"],
.js-mode button[aria-pressed="true"]:hover { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; cursor: default; }
.js-mode button:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: 3px; }

/* Byline — date and tags under a post title */
.js-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.js-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.js-tags a { color: var(--ink-muted); }
.js-tags a::before { content: "#"; }
.js-tags a:hover { color: var(--ink); }
.js-prose .js-tags a { text-decoration: none; }
.js-prose .js-tags a:hover { text-decoration: underline; }

/* Additions the design system doesn't cover. Tokens only, using its js- prefix.
   Sizes match the type styles of the same role in design-system/tokens.json. */

/* A post's sub header: the feed-summary style, between the title and byline. */
.js-subtitle { margin: 0 0 var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-soft); }

/* A page title above a list. */
.js-heading + .js-list { margin-top: var(--space-3); }

/* The link from the home feed to the archive. */
.js-more { margin: var(--space-3) 0 0; font-size: 13px; line-height: 20px; }

/* The home page's heading: there for screen readers, hidden because the design has no hero. */
.js-visually-hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A pale hairline around images in posts. */
.js-prose img { box-sizing: border-box; border: var(--hairline) solid var(--selection); }