/* ═══════════════════════════════════════════════════════════════════════
   blog.css — reading theme for the blog section (blog.html + posts/*).
   Loaded after each page's own <style>, so it restyles the existing
   markup without changing it. Prose moves to Source Serif 4; everything
   that belongs to the terminal (boot lines, title bar, line numbers, meta,
   tags, contents, citations, bibtex, share link, prompt) stays in IBM Plex
   Mono. The site's scanlines run over the whole page, sheet included.
   Remove the <link> to this file to get the old look back.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,600&display=swap');

/* ── reader colours (dark is the site default; light via data-theme) ── */
:root {
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;
  --r-paper:   #121212;
  --r-bar:     #151515;
  --r-rule:    #262626;
  --r-text:    #cfcfcf;
  --r-bright:  #ececec;
  --r-muted:   #8a8a8a;
  --r-link:    #7eb8f7;
  --r-mark:    #f0a060;
  --r-mark-ink:#f0a060;
  --r-ice:     #15202c;
  --r-ice-2:   #1d2d3e;
  --r-ice-ink: #8fc2f8;
  --r-callout: color-mix(in srgb, #f0a060 9%, #151515);
}
[data-theme="light"] {
  --r-paper:   #fffdf9;
  --r-bar:     #f2efe9;
  --r-rule:    #e5e0d6;
  --r-text:    #34312c;
  --r-bright:  #221f1b;
  --r-muted:   #7c776d;
  --r-link:    #2777d2;
  --r-mark:    #eb6600;
  --r-mark-ink:#b55200;
  --r-ice:     #e4eefa;
  --r-ice-2:   #cfe2f7;
  --r-ice-ink: #2f6db5;
  --r-callout: color-mix(in srgb, #eb6600 9%, #f2efe9);
}

/* The site's scanline overlay (terminal.css, body::after) runs over the
   whole page, the sheet included, as on the original site. */
::selection { background: var(--r-ice-2); }


/* ═══════════════════════════════ POST PAGES */

/* Page: the original margins (sheet: 804px), boot lines and `$ less` line. */
main:has(.article-frame) { max-width: 860px; padding: 32px 28px 80px; position: relative; }

/* The sheet */
main .article-frame {
  position: relative;
  margin-top: 4px;
  background: var(--r-paper);
  border: 1px solid var(--r-rule);
  border-radius: 8px;
  overflow: hidden;
}
main .article-frame .article-titlebar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--r-bar);
  border-bottom: 1px solid var(--r-rule);
}
/* the filename is already on the `$ less` line above, so the bar shows only
   the window buttons and the line count */
main .article-frame .article-filename { display: none; }
main .article-frame .article-lines { margin-left: auto; font-size: 11px; color: var(--dim); white-space: nowrap; }

/* Line-number gutter (filled by each post's own script); not on phones */
main .article-frame .article-body { display: flex; }
main .article-frame .line-nums { padding: 44px 0 56px; border-right: 1px solid var(--r-rule); }
@media (max-width: 640px) { main .article-frame .line-nums { display: none; } }

/* Prose */
main .article-frame .article-content {
  --pad: clamp(20px, 4.5vw, 58px);
  padding: 44px var(--pad) 56px;
  flex: 1; min-width: 0;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--r-text);
}
main .article-frame .article-content p { margin: 0 0 1.1em; }
main .article-frame .article-content p:last-child { margin-bottom: 0; }
main .article-frame .article-content strong,
main .article-frame .article-content b { font-weight: 600; color: var(--r-bright); }
main .article-frame .article-content p .runin { font-weight: 600; color: var(--r-bright); }
main .article-frame .article-content code {
  font-family: var(--mono); font-size: .8em;
  background: var(--r-bar); padding: 1px 5px; border-radius: 3px;
}

/* Title, meta, keyword tags */
main .article-frame .article-header {
  margin: 0 0 40px; padding: 0 0 32px;
  border-bottom: 1px solid var(--r-rule);
}
main .article-frame .article-title {
  font-family: var(--serif); font-weight: 600;
  font-size: 34px; line-height: 1.14; letter-spacing: -0.012em;
  color: var(--r-bright); margin: 0 0 18px;
  text-wrap: balance;
}
main .article-frame .article-meta { font-family: var(--mono); gap: 6px 22px; line-height: 1.6; }
main .article-frame .meta-item { font-size: 12px; letter-spacing: 0; color: var(--r-muted); }
main .article-frame .meta-item .val { color: var(--accent2); }   /* author, date: accent orange, as before */
main .article-frame .meta-item .val a { color: var(--r-link); }
main .article-frame .tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.4;
}
main .article-frame .tags span { background: var(--r-ice); color: var(--r-ice-ink); padding: 3px 9px; border-radius: 999px; }

/* Section headings */
main .article-frame .article-content h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 19.5px; line-height: 1.28; letter-spacing: 0;
  color: var(--r-bright);
  margin: 2.1em 0 .8em; padding: 0 0 .4em; border: 0; border-bottom: 1px solid var(--r-rule);
  text-wrap: balance;
  scroll-margin-top: 24px;
}
main .article-frame .article-content h2::before {
  content: "## "; font-family: var(--mono); font-weight: 400;
  font-size: .62em; color: var(--r-mark); vertical-align: .15em;
}

/* Callouts */
main .article-frame .note {
  margin: 1.9em 0; padding: 18px 22px;
  background: var(--r-callout);
  border-left: 3px solid var(--r-mark);
  border-radius: 0 4px 4px 0;
  color: var(--r-text);
  font-size: 14px; line-height: 1.66;
}
main .article-frame .note .note-src {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0;
  color: var(--r-mark-ink);
}
main .article-frame .note sup,
main .article-frame .article-content sup { font-family: var(--mono); font-size: .68em; line-height: 0; color: var(--r-muted); }

/* Citations */
main .article-frame a.cite {
  font-family: var(--mono); font-size: .74em;
  background: var(--r-ice); color: var(--r-ice-ink);
  padding: 1px 5px; border-radius: 4px;
  text-decoration: none; white-space: nowrap; vertical-align: .08em;
}
main .article-frame a.cite:hover { background: var(--r-ice-2); text-decoration: none; }

/* References */
main .article-frame .refs li {
  font-family: var(--serif); font-size: 12.5px; line-height: 1.6;
  color: var(--r-muted);
  padding-left: 40px; text-indent: -40px; margin-bottom: 10px;
}
main .article-frame .refs .rn { width: 40px; font-family: var(--mono); font-size: 12px; color: var(--r-ice-ink); }
main .article-frame .refs a { color: var(--accent2); }   /* orange, as on the original site */

/* Figures: captions use the reading font, sized with the body text. The
   HTML charts keep their own sizes. (The recursive-self-inflation chart
   videos are rendered with the same font, on the sheet's paper colour.) */
main .article-frame .fig { margin: 30px 0 32px; }
main .article-frame .fig video { background: var(--r-paper); }
main .article-frame .fig figcaption { font-family: var(--serif); font-size: 13px; line-height: 1.55; letter-spacing: 0; color: var(--r-muted); }
main .article-frame .fig figcaption::before { font-family: var(--mono); font-size: 12px; }
main .article-frame .bars,
main .article-frame .statgrid,
main .article-frame table { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
main .article-frame .bars { padding: 16px 18px 14px; }
main .article-frame .bars-title { font-size: 13px; letter-spacing: 0.06em; font-weight: 600; }
main .article-frame .bars-lead  { font-size: 14px; line-height: 1.6; }
main .article-frame .bars-sub   { font-size: 12px; letter-spacing: 0.06em; }
main .article-frame .bars-foot  { font-size: 13px; line-height: 1.55; }
main .article-frame .barrow     { font-size: 13px; grid-template-columns: 224px 1fr 56px; }
main .article-frame .stackbar   { height: 28px; }
main .article-frame .stackbar b { font-size: 10.5px; font-weight: 600; }
main .article-frame .legend     { font-size: 13px; }
main .article-frame .legend b   { font-weight: 600; }
main .article-frame .ptable     { font-size: 13px; }
main .article-frame .ptable th  { font-size: 12px; letter-spacing: 0.04em; }
main .article-frame .stat-n     { font-size: 22px; font-weight: 600; }
main .article-frame .stat-l     { font-size: 13px; }

/* Citation block */
main .article-frame .bib-cmd { margin-top: 40px; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--r-muted); }
main .article-frame .bib-cmd .dollar { color: var(--green, var(--accent)); }   /* green, as before */
main .article-frame pre.bib {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  background: var(--r-ice); color: var(--r-text);
  border: 0; border-radius: 3px; padding: 14px 16px;
  /* wrap instead of scrolling: a horizontal scrollbar drew a gray bar under the box */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible;
}
main .article-frame pre.bib { max-width: none; }

/* Below the sheet: the share link in its shaded box, one rule, prev/next, the prompt */
main:has(.article-frame) .share-row { margin-top: 16px; font-size: 11.5px; letter-spacing: 0; }
main:has(.article-frame) .share-row code { background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; color: var(--muted); }
main:has(.article-frame) .article-nav {
  margin-top: 14px; padding-top: 18px;
  border-top: 1px solid var(--r-rule);
  font-size: 12px; letter-spacing: 0;
}
@media (min-width: 641px) {
  main:has(.article-frame) .article-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: start; line-height: 1.55; }
  main:has(.article-frame) .article-nav > span:nth-child(2) { white-space: nowrap; }
  main:has(.article-frame) .article-nav > span:last-child { text-align: right; }
}
main:has(.article-frame) .terminal-prompt { border-top: 0; margin-top: 26px; padding-top: 0; }
main:has(.article-frame) .terminal-prompt .ps1,
main:has(.article-frame) .t-input,
main:has(.article-frame) .t-response { font-size: 12px; }


/* ── contents: `$ ls sections/` (built by blog.js when a post has 2+ sections) ── */
.toc, .mtoc { display: none; }
.toc .toc-in { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.toc .ls { color: var(--r-muted); margin: 0 0 12px; }
.toc .ls .ps, .mtoc summary .ps { color: var(--r-ice-ink); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--r-rule); }
.toc li a {
  display: block; padding: 6px 10px 6px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--r-muted); text-decoration: none;
}
.toc li a:hover { color: var(--r-bright); }
.toc li a.on { color: var(--r-ice-ink); border-left-color: var(--r-ice-ink); background: var(--r-ice); border-radius: 0 4px 4px 0; }

/* Wide screens: list to the left of the sheet; the sheet shifts right when space is tight */
@media (min-width: 1200px) {
  html.has-toc main:has(.article-frame) { margin-left: max(246px, calc((100% - 860px) / 2)); margin-right: auto; }
  .toc { display: block; position: absolute; top: 32px; bottom: 0; right: calc(100% + 12px); width: 210px; }
  .toc .toc-in { position: sticky; top: 32px; padding-top: 56px; }
}

/* Medium screens: a collapsed `$ ls sections/` box under the meta. Phones: none. */
@media (min-width: 641px) and (max-width: 1199px) {
  main .article-frame .mtoc {
    display: block; margin: 22px 0 0;
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
    background: var(--r-ice); border: 1px solid var(--r-ice-2); border-radius: 4px;
  }
  .mtoc summary { cursor: pointer; padding: 10px 14px; color: var(--r-muted); list-style: none; }
  .mtoc summary::-webkit-details-marker { display: none; }
  .mtoc[open] summary { border-bottom: 1px solid var(--r-ice-2); }
  .mtoc ol { list-style: none; margin: 0; padding: 6px 14px 10px; }
  .mtoc li a { display: block; padding: 5px 0; color: var(--r-ice-ink); text-decoration: none; }
}

/* Phones */
@media (max-width: 640px) {
  main:has(.article-frame) { padding: 20px 0 60px; }
  main:has(.article-frame) > :not(.article-frame):not(.toc) { margin-left: 18px; margin-right: 18px; }
  main .article-frame { border-radius: 0; border-left: 0; border-right: 0; }
  main .article-frame .article-filename { margin-right: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main .article-frame .article-content { --pad: 18px; padding: 30px 18px 36px; font-size: 15px; line-height: 1.65; }
  main .article-frame .article-title { font-size: 25.5px; }
  main .article-frame .article-header { margin-bottom: 28px; padding-bottom: 24px; }
  main .article-frame .article-content h2 { font-size: 18px; }
  main .article-frame .note { font-size: 13.5px; padding: 14px 16px; }
  main .article-frame .refs li { font-size: 12px; }
  main .article-frame pre.bib { font-size: 11px; padding: 12px; }
  main .article-frame .fig figcaption { font-size: 12.5px; }
  main .article-frame .bars { padding: 14px 14px 12px; }
  main .article-frame .barrow { font-size: 13px; grid-template-columns: 112px 1fr 48px; }
  main .article-frame .ptable { font-size: 12.5px; }
  main .article-frame .stackbar b { font-size: 9px; }
  main .article-frame .ptable th { font-size: 10.5px; }
}


/* ═══════════════════════════════ BLOG INDEX (blog.html) */
.soon-entry { align-items: baseline; padding: 16px 18px; }
.soon-entry .soon-title { font-family: var(--serif); font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.003em; }
.soon-entry .soon-idx,
.soon-entry .soon-tag { font-size: 11.5px; }
@media (max-width: 600px) {
  .soon-entry { flex-wrap: wrap; gap: 4px 14px; }
  .soon-entry .soon-title { font-size: 14.5px; flex: 1 1 0; min-width: 0; }
  .soon-entry .soon-tag { flex-basis: 100%; padding-left: 38px; }   /* date on its own line, under the title */
}

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