/* Paper and ink. The same typographic family as the reading list this blog
   keeps writing about — Bebas for headings, Spectral for prose, JetBrains Mono
   for anything a machine said — but its own layout: one column, long measure,
   nothing that moves. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Spectral:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --ink: #111014;
  --paper: #e8e3d7;
  --card: #efeade;
  --blood: #8f2d2d;
  --brass: #b07d3c;
  --dust: #6b6456;
  --line: #c3bba7;
}

/* An explicit dark palette, because a reader on a dark system should not be
   handed a page the colour of a lightbulb. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e1d5;
    --paper: #16151a;
    --card: #1d1c22;
    --blood: #c86a6a;
    --brass: #c99a54;
    --dust: #918a7a;
    --line: #35323c;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  padding: 48px 20px 80px;
  -webkit-font-smoothing: antialiased;
}

main, .masthead, footer { max-width: 46rem; margin: 0 auto; }

/* --- masthead --- */
.masthead { border-bottom: 3px solid var(--ink); padding-bottom: 16px; margin-bottom: 40px; }
.wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 8vw, 62px);
  letter-spacing: .02em;
  line-height: .95;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.tagline { color: var(--dust); font-style: italic; font-size: 15px; margin-top: 6px; }

/* --- archive --- */
.archive { list-style: none; }
.archive li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.archive time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dust);
  display: block;
  margin-bottom: 4px;
}
.archive a { font-size: 22px; font-weight: 600; color: var(--ink); text-decoration: none; }
.archive a:hover { color: var(--blood); }
.archive .summary { display: block; color: var(--dust); font-size: 15px; margin-top: 3px; }
.empty { color: var(--dust); font-style: italic; }

/* --- post --- */
.post h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.02;
  letter-spacing: .01em;
  font-weight: 400;
}
.post .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dust);
  margin: 10px 0 34px;
}
.draft { color: var(--blood); }

.post h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: .02em;
  font-weight: 400;
  margin: 44px 0 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 5px;
}
.post h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0 8px;
}
.post p, .post ul, .post ol, .post blockquote, .post pre, .post table { margin-bottom: 20px; }
.post ul, .post ol { padding-left: 1.3em; }
.post li { margin-bottom: 6px; }
.post a { color: var(--blood); text-underline-offset: 2px; }
.post strong { font-weight: 600; }
.post hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

.post blockquote {
  border-left: 3px solid var(--blood);
  background: var(--card);
  padding: 12px 18px;
  font-style: italic;
  color: var(--dust);
}
.post blockquote p:last-child { margin-bottom: 0; }

/* Code is something a machine said; it gets the mono face and a container that
   scrolls on its own rather than making the page scroll sideways. */
.post code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
.post pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 3px;
  padding: 14px 16px;
  overflow-x: auto;
}
.post pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.5; }

/* --- syntax highlighting ---
   Written in this site's palette rather than imported from a stock theme, so a
   code block reads as part of the page instead of a screenshot of someone
   else's editor. Highlighting is baked in at build time; nothing here runs.

   Deliberately few colours. Keywords and strings carry most of the meaning at
   a glance, comments recede, and everything else stays ink — a rainbow costs
   more attention than it repays in prose. */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag,
.hljs-name, .hljs-strong { color: var(--blood); font-weight: 600; }

.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute,
.hljs-meta .hljs-string { color: var(--brass); }

.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--dust); font-style: italic; }

.hljs-title, .hljs-title.function_, .hljs-class .hljs-title,
.hljs-type, .hljs-built_in { color: var(--ink); font-weight: 600; }

.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable,
.hljs-attr, .hljs-selector-attr, .hljs-selector-pseudo { color: var(--dust); }

.hljs-meta, .hljs-params, .hljs-punctuation, .hljs-operator,
.hljs-selector-id, .hljs-selector-class { color: var(--ink); }

.hljs-emphasis { font-style: italic; }

.post table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.post th, .post td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.post th { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.post img { max-width: 100%; height: auto; }

/* --- footer --- */
footer {
  margin-top: 60px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dust);
}
footer a { color: var(--dust); }