/* Area51 — static theme.
   Jekyll-Tufte / LaTeX aesthetic: serif on paper, minimal color, no custom
   fonts, no frameworks. Everything below matches the classes emitted by the
   layouts and by the archived post bodies (b2evo raw HTML passes through
   verbatim, including its own classes: leftmargin, image_block, ...). */

html {
  background: #fff;
}

body {
  margin: 0 auto;
  max-width: 46em;
  padding: 2em 1.2em 2.5em;
  /* Font preference list, no downloads: "Latin Modern Roman" is the LaTeX
     (Computer Modern) font — present on this site's admin machine via
     texlive, so it renders LaTeX-like for the owner; everyone else falls
     through to Georgia/Times exactly as before. */
  font: 17px/1.65 'Latin Modern Roman', 'STIX Two Text', Georgia,
        'Times New Roman', Times, serif;
  color: #161616;
}

/* Skip link: invisible until focused (keyboard users, WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  padding: 0.3em 0.8em;
  z-index: 100;
}
.skip-link:focus { left: 0.5em; top: 0.5em; }

/* --- header / footer ------------------------------------------------- */

/* The rule under the header frames the content the same way the
   footer rule above the footer does (same 1px #ccc as footer and
   .post-nav), and keeps the menu clear of the first heading
   (user feedback, 2026-10-30). */
header {
  padding-bottom: 0.6em;
  margin-bottom: 1.4em;
  border-bottom: 1px solid #ccc;
}

.site-title {
  font-size: 1.7em;
  font-weight: bold;
  text-decoration: none;
  color: #161616;
  letter-spacing: 0.01em;
}

.site-tagline {
  font-style: italic;
  color: #555;
  margin: 0.1em 0 0.8em;
}

nav a {
  color: #161616;
  text-decoration: none;
  font-size: 0.95em;
}
nav a:hover { text-decoration: underline; }
/* The "·" separators live in the header menu only — scoped to
   .nav-menu so they don't leak into .post-nav and .pagination
   (also <nav> elements with adjacent links). */
.nav-menu a + a::before { content: " · "; color: #999; }
/* Language indexes: a visible gap after the menu, then the links. */
.nav-langs { margin-left: 2.2em; }
/* Slim-header pages: the small home link gets the same visible-gap
   treatment, on its right (user decision, 2026-10-29). */
.nav-home { margin-right: 2.2em; }
/* Print-only colophon (baseof.html): invisible on screen. */
.print-foot { display: none; }
/* Category links in the home list and the archive: look like the
   surrounding text, underline only on hover (user decision, 2026-10-29). */
.list-meta a { color: inherit; text-decoration: none; }
.list-meta a:hover { text-decoration: underline; }

footer {
  margin-top: 3em;
  padding-top: 0.8em;
  border-top: 1px solid #ccc;
  font-size: 0.85em;
  color: #555;
}
.footer-links a { color: #555; }
.copyright { margin-top: 0.4em; }

/* --- text ------------------------------------------------------------ */

a { color: #26489e; }

h1 {
  font-size: 1.65em;
  line-height: 1.25;
  margin: 0.2em 0 0.6em;
}
h2 {
  font-size: 1.3em;
  margin: 1.6em 0 0.5em;
}

p { margin: 0.8em 0; }

blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 2px solid #ccc;
  font-style: italic;
  color: #333;
}

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

table {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}
th, td {
  border-bottom: 1px solid #ccc;
  padding: 0.2em 0.6em;
  text-align: left;
}
thead th { border-top: 2px solid #333; }

pre, code {
  /* Same no-download trick: Latin Modern Mono (the LaTeX mono font) where
     installed, Courier New everywhere else. */
  font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;
  font-size: 0.9em;
}
pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 0.8em 1em;
  overflow-x: auto;
}
code { background: #f4f4f4; padding: 0 0.2em; }
pre code { background: none; padding: 0; }

hr { border: 0; border-top: 1px solid #ccc; margin: 2em 0; }

/* --- footnotes (goldmark built-in; new Markdown posts only) ----------- */

.footnotes { font-size: 0.85em; color: #444; }
.footnotes hr { margin: 0.8em 0; }
.footnote-ref, .footnote-backref { text-decoration: none; }

/* --- margin notes (user decision, 2026-10-30; the reference post
    content/margin-note-prototype.md is a draft, not in the build) -----
   The note sits in the page's right gutter, OUTSIDE the 46em column:
   position:absolute removes it from the flow entirely, so the column
   width and every text line are identical with or without notes. The
   note's vertical position is where the <aside> sits in the source.
   The gutter only exists at >= 74em viewports (46em column + 2 x
   ~13.4em); below that the note falls back to an indented block. */

article { position: relative; }
.mnote {
  font-size: 0.85em;
  line-height: 1.5;
  color: #555;
  border-left: 1px solid #ccc;
  padding-left: 0.7em;
  margin: 0.5em 0;
}
@media (min-width: 74em) {
  .mnote {
    position: absolute;
    left: calc(100% + 1.4em);
    width: 11em;
    margin: 0;
  }
}

/* --- post list (home + term pages + search results) ------------------ */

ul.post-list, ul.search-results {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.post-list li, ul.search-results li { margin: 0.9em 0; }
/* Front page only: the title on its own line, the meta under it
   (user decision, 2026-10-29). Term pages keep the compact inline meta;
   the archive puts the date first and the categories on a second line
   (user decision, 2026-11-02). */
.post-list.home > li > .list-meta { display: block; }
.archive-list {
  list-style: none;
  padding: 0;
  margin: 0.4em 0 1.2em;
}
.archive-list li { margin: 0.35em 0; }
/* Archive: date before the title on the first line, the categories on
   the second (user decision, 2026-11-02). */
.archive-list .cats { display: block; margin-top: 0.1em; }
h3 { margin: 1.2em 0 0.3em; }
.list-meta, .search-excerpt {
  color: #666;
  font-size: 0.85em;
}
.list-desc { color: #555; font-style: italic; }

/* --- post page ------------------------------------------------------- */

.post-meta {
  color: #666;
  font-size: 0.85em;
  margin: 0 0 1.2em;
}
.post-tags {
  margin-top: 2em;
  color: #666;
  font-size: 0.85em;
}

/* Chronological prev/next navigation (single.html) */
.post-nav {
  margin-top: 2.5em;
  padding-top: 0.8em;
  border-top: 1px solid #ccc;
  font-size: 0.95em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
.post-nav a { min-width: 0; overflow-wrap: anywhere; }

/* --- comments --------------------------------------------------------- */

#feedbacks {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 2px solid #333;
}
.comment {
  margin: 1.2em 0;
  padding: 0.7em 1em;
  background: #f4f4f4;
  border-left: 3px solid #ccc;
}
.comment-meta {
  margin: 0 0 0.4em;
  font-size: 0.85em;
  color: #666;
}
.comment-meta a { color: #666; }
.comment-body p { margin: 0.5em 0; }
/* Author's <ins> reply, extracted from the visitor's comment by
   extract.py (split_author_reply): the old site rendered <ins> in
   dark red (b2evo base css: ins{color:#a44}). */
.author-reply {
  margin: 0.8em 0 0.2em;
  padding: 0.4em 0.8em;
  border-left: 3px solid #a44;
  background: #faf3f3;
}
.author-reply-who {
  display: block;
  font-style: italic;
  color: #a44;
  font-size: 0.85em;
  margin-bottom: 0.3em;
}
.unpublished {
  color: #a33;
  font-style: italic;
  font-size: 0.85em;
}
.leftmargin {           /* visiglyph avatars from the old site */
  float: left;
  margin: 0.1em 0.6em 0.3em 0;
}

/* b2evo-era image blocks in post bodies */
.image_block {
  text-align: center;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.image_block img { margin-bottom: 0.3em; }

.note {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 0.6em 1em;
}

/* --- search ---------------------------------------------------------- */

#q {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4em 0.6em;
  border: 1px solid #999;
  background: #fff;
}
.search-status {
  color: #666;
  font-size: 0.9em;
  margin: 0.8em 0;
}

/* --- pagination ------------------------------------------------------ */

.pagination {
  margin: 2em 0 0;
  font-size: 0.95em;
}
.pagination a { margin: 0 0.5em; }

/* --- misc ------------------------------------------------------------ */

.notfound { text-align: center; margin-top: 3em; }

/* --- books landing (data/books.toml grid, user decision 2026-10-30) -- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2em 1.5em;
  margin: 1.5em 0;
}
.book-card {
  position: relative;
  display: block;
  padding: 0.3em;
  margin: -0.3em;
}
/* The stretched overlay link makes the whole card clickable; the
   "source on GitHub" sub-link sits above it (z-index). */
.book-card .card-go {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.book-card:hover h3 { text-decoration: underline; }
/* Every cover renders in the same 4:5 box (object-fit: contain,
   letterboxing on the page's own white) so the grid rows align
   despite the source images' different aspect ratios. The 4:5 ratio
   minimizes the padding for this set (covers range 1:1 to 1:1.5);
   change to 3/4 for a more book-spine look. */
.book-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #fff;
  margin: 0 auto;
}
.book-card h3 {
  margin: 0.6em 0 0.1em;
  font-size: 1.05em;
  line-height: 1.3;
}
.book-card p { margin: 0.3em 0; font-size: 0.92em; }
.book-langs { color: #666; font-size: 0.85em; }
.book-src { margin-top: 0.7em; }
.book-src a {
  color: #666;
  font-size: 0.85em;
  position: relative;
  z-index: 2;
}

/* --- print ------------------------------------------------------------
   The site is read and printed as paper: drop the chrome, keep the
   document. Comments stay out (they belong to the web, not the page). */

@media print {
  @page { margin: 1.8cm; }
  body {
    max-width: none;
    padding: 0;
    font-size: 12pt;
    line-height: 1.45;
    background: #fff;
    color: #000;
  }
  /* The header goes to the bottom colophon (.print-foot) so the post
     title is also the top of the printed page (user decision,
     2026-10-29); the browser's own print header shows the URL up top
     when enabled. */
  .skip-link, header, nav, footer, .pagination, .post-nav, .post-tags,
  .search-status, #q, #feedbacks {
    display: none;
  }
  a { color: #000; text-decoration: underline; }
  .print-foot {
    display: block;
    margin-top: 2.5em;
    padding-top: 0.5em;
    border-top: 1px solid #999;
    font-size: 0.85em;
    color: #333;
  }
  .print-foot a { color: #333; word-break: break-all; }
  /* Keep blocks intact across page breaks */
  h1, h2, h3 { page-break-after: avoid; }
  img, blockquote, pre, table, .note, .image_block, .book-card {
    page-break-inside: avoid;
  }
  /* Backgrounds don't print — don't leave half-boxes behind */
  pre, code { background: none; }
  pre { border-color: #999; }
  /* Printing a page is often about the links: show external URLs. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}