pandorga 1.7.6 → 1.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5073aa0e7217490eff99e42008ea7eb10fdd6d5f7218d924d7ede563a77c2f4
-  data.tar.gz: 38b8947ef41f97e1e1c6c6c2d2048fd5a16ebd1a441d4dc6ae62a9b5237582c1
+  metadata.gz: 120307b06e8e2a6083eb4684bef760944c0fa334155262ea202be58493e0cdd6
+  data.tar.gz: e17010ea2587987f38dc6236944c99c4790a380d87fcd994cc1462f5d184bee0
 SHA512:
-  metadata.gz: 73d9948f8662e076b4f652697969ed7da53c108b336efea4b91c497310c7332f3c82f3d4ee854f6630a248c27356d219b6d50ffec70e437b098340a1153b1ee0
-  data.tar.gz: b2dde560408d681b3cfcf3a4f5bc377542d1179b28279a19bbd065b8f7f9d04a994ebe7800a20645a18eb6562c9335d6e785f22f952d6c4b605c4f61f1ad912e
+  metadata.gz: ef13097e5f083e7741ecfddbce6b994b84697f1a5bc593e43cdce93bd41bab6b94da9864555a12908a419d4e4ff0836b2230085f495f30d155810bac87f0ef0b
+  data.tar.gz: 1c0e9c4a2e1f8d3cc6fdf3cd58103261f6271e445629e5f4e661f5d402f3525cc36fe717f1b86204640a0ffaeb25cb5171086645df15bab958781226f5fb2e75

data/CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## [1.8.4] — 2026-10-12
+
+### Fixed
+
+- Metric-matched local fallbacks for Cinzel Decorative, Cinzel, Newsreader,
+  Ancizar Serif, and Marcellus SC so `display=swap` does not reflow the home
+  hero (CLS)
+- Home hero `portraits.json` includes `srcset` / `sizes` when
+  `variants/<stem>-{480,960,1440}.jpg` exist under the hero folder
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
+## [1.8.3] — 2026-10-12
+
+### Fixed
+
+- Detail pages load MathJax only when a TeX block nears the viewport (not on
+  every article open), then typeset visible blocks first; below-fold formulas
+  follow via IntersectionObserver with yields between blocks
+- Listing layouts (articles / blog) no longer pull the MathJax script
+- Long detail bodies mount in batches so the opening can paint before the
+  full DOM lands
+- Figure and cut-in images use `decoding="async"` plus width/height hints
+  with existing `loading="lazy"`
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
+
+## [1.8.2] — 2026-10-12
+
+### Fixed
+
+- Home listing CTAs: more space between the label and its underline
+- Home index panels (Sources / Network / Bibliography): shared plate flex and
+  card-scale titles so the three cards align
+- Articles archive: `random` sort shows **Order: random** (was falling back to
+  last revised)
+- Listing masthead tag lines (Rascunhos, Sources, peers) use body size instead
+  of micro / mono
+- CV contact tiles: quieter badge and name type
+- Dates / meta (`--type-meta`) +2pt; content titles (`--type-title`) +10%;
+  top-bar wordmark +25%
+- Theorem / proof heads sit inline with the opening sentence (no line break
+  after the name / **Proof.**)
+- Proof QED square (`□`) is +2pt over the body size
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
+## [1.8.1] — 2026-10-12
+
+### Fixed
+
+- Theorems are bare (no gray plate); only proofs carry the surface band
+- Proof gray bleeds to the edges of `.text-page-main` while body text stays
+  on the reading measure
+- Proofs prefix **Proof.** from the runtime, like theorem heads — authors
+  no longer write `*Proof.*` in the body
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
+## [1.8.0] — 2026-10-12
+
+### Added
+
+- Theorem and proof Markdown wrappers in the content runtime, same
+  `markdown="1"` contract as `article-note` and `poem`:
+  - `<div class="theorem" name="Corollary 1" description="nadir camera" markdown="1">…</div>`
+    builds the head from `name` / `description` and italicizes the body
+  - `<div class="proof" markdown="1">…</div>` wraps a proof and places a
+    QED square on the last line
+- Full-column styles for `.theorem` and `.proof` in `article.css`
+- Render-parity fixtures `theorem.json` and `proof.json`
+
+No `pandorga:` config keys were added or renamed. Font roles and the
+ledger fallbacks are unchanged.
+
 ## [1.7.6] — 2026-10-12
 
 ### Fixed

data/DESIGN.md

@@ -779,12 +779,12 @@ those tokens — no one-off rem sizes for roles that already have a step.
 | `--type-display-lg` | 3.6515 | ~64 | display-hero |
 | `--type-page-lg` | 2.9015 | ~51 | headline-lg |
 | `--type-section-lg` | 2.1515 | ~38 | headline-md |
-| `--type-title-lg` | 2.4015 | ~42 | detail H1 |
+| `--type-title-lg` | 2.64165 | ~46 | detail H1 |
 | `--type-card` | 1.4015 | ~25 | headline-sm |
 | `--type-prose` | 1.2 | ~21.1 | reading body, under 1024px |
 | `--type-prose` (≥1024px) | 1.25 | ~22 | reading body, desktop |
 | `--type-body` | 1.0758 | ~19 | body-md |
-| `--type-meta` | 0.8125 | ~14 | body-sm |
+| `--type-meta` | calc(0.8125rem + 2pt) | ~16 | body-sm |
 | `--type-label` | 0.8485 | ~15 | label-md |
 | `--type-mono` | 0.8504 | ~15 | notation |
 

data/_includes/content-runtime/20-markdown.html

@@ -109,6 +109,43 @@
       return parts.join('');
     }
 
+    function attrValue(openTag, name) {
+      var re = new RegExp('\\b' + name + '\\s*=\\s*(?:"([^"]*)"|\'([^\']*)\')', 'i');
+      var m = String(openTag || '').match(re);
+      return m ? String(m[1] != null ? m[1] : m[2] || '') : '';
+    }
+
+    /* Put the head inside the first block so "Corollary 1." / "Proof." sit on
+       the same line as the opening sentence (paper style), not above it. */
+    function prependInlineHead(html, head) {
+      var body = String(html || '');
+      var m = body.match(/^(\s*<p\b[^>]*>)/i);
+      if (m) return body.replace(m[1], m[1] + head);
+      return head + body;
+    }
+
+    function renderTheoremHtml(openTag, inner) {
+      var name = attrValue(openTag, 'name').trim();
+      var description = attrValue(openTag, 'description').trim();
+      var head = '';
+      if (name) {
+        head = '<span class="theorem-head"><span class="theorem-name">' + escapeHtml(name) + '</span>';
+        if (description) {
+          head += ' <span class="theorem-description">(' + escapeHtml(description) + ')</span>';
+        }
+        head += '. </span>';
+      }
+      var body = parseInlineMarkdown(inner);
+      if (head) body = prependInlineHead(body, head);
+      return '<div class="theorem"><div class="theorem-body">' + body + '</div></div>';
+    }
+
+    function renderProofHtml(inner) {
+      var head = '<span class="proof-head"><span class="proof-name">Proof</span>. </span>';
+      var body = prependInlineHead(parseInlineMarkdown(inner), head);
+      return '<div class="proof"><div class="proof-body">' + body + '</div></div>';
+    }
+
     function preprocessMarkdownDivs(markdown) {
       var text = String(markdown || '');
       text = text.replace(/<div\s+([^>]*class="[^"]*\barticle-note\b[^"]*"[^>]*)>([\s\S]*?)<\/div>/gi, function (match, openTag, inner) {
@@ -119,6 +156,16 @@
         if (!hasMarkdownAttr(openTag)) return match;
         return renderPoemHtml(inner);
       });
+      // Theorem / proof: same markdown="1" contract as article-note. Without
+      // this pass, CommonMark ends the HTML block at the first blank line.
+      text = text.replace(/<div\s+([^>]*class="[^"]*\btheorem\b[^"]*"[^>]*)>([\s\S]*?)<\/div>/gi, function (match, openTag, inner) {
+        if (!hasMarkdownAttr(openTag)) return match;
+        return renderTheoremHtml(openTag, inner);
+      });
+      text = text.replace(/<div\s+([^>]*class="[^"]*\bproof\b[^"]*"[^>]*)>([\s\S]*?)<\/div>/gi, function (match, openTag, inner) {
+        if (!hasMarkdownAttr(openTag)) return match;
+        return renderProofHtml(inner);
+      });
       return text;
     }
 
@@ -149,7 +196,104 @@
       return html;
     }
 
+    var MATHJAX_SRC = 'https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js';
+    var mathJaxLoadPromise = null;
+
+    function rootHasTeX(root) {
+      var text = (root && root.textContent) || '';
+      return text.indexOf('$') !== -1 || text.indexOf('\\(') !== -1 || text.indexOf('\\[') !== -1;
+    }
+
+    function elementNeedsMath(el) {
+      if (!el || el.nodeType !== 1) return false;
+      if (el.getAttribute('data-math-done') === '1') return false;
+      if (el.querySelector && el.querySelector('mjx-container')) return false;
+      return rootHasTeX(el);
+    }
+
+    function collectMathBlocks(root) {
+      var out = [];
+      if (!root) return out;
+      Array.prototype.forEach.call(root.children || [], function (el) {
+        if (elementNeedsMath(el)) out.push(el);
+      });
+      return out;
+    }
+
+    function blockNearViewport(el, marginPx) {
+      var rect = el.getBoundingClientRect();
+      var vh = window.innerHeight || 800;
+      var margin = typeof marginPx === 'number' ? marginPx : vh;
+      return rect.top < vh + margin && rect.bottom > -margin;
+    }
+
+    function yieldToMain() {
+      return new Promise(function (resolve) {
+        if (typeof window.requestIdleCallback === 'function') {
+          window.requestIdleCallback(function () { resolve(); }, { timeout: 48 });
+        } else {
+          window.setTimeout(resolve, 0);
+        }
+      });
+    }
+
+    function ensureMathJaxConfig() {
+      if (window.MathJax && window.MathJax.tex) return;
+      window.MathJax = {
+        startup: { typeset: false },
+        tex: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          displayMath: [['$$', '$$'], ['\\[', '\\]']]
+        }
+      };
+    }
+
+    function loadMathJaxScript() {
+      if (mathJaxLoadPromise) return mathJaxLoadPromise;
+      ensureMathJaxConfig();
+      if (window.MathJax && typeof window.MathJax.typesetPromise === 'function') {
+        mathJaxLoadPromise = Promise.resolve(window.MathJax);
+        return mathJaxLoadPromise;
+      }
+      mathJaxLoadPromise = new Promise(function (resolve, reject) {
+        var existing = document.getElementById('MathJax-script') ||
+          document.querySelector('script[src*="mathjax"][src*="tex-mml-chtml"]');
+        if (existing) {
+          if (window.MathJax && typeof window.MathJax.typesetPromise === 'function') {
+            resolve(window.MathJax);
+            return;
+          }
+          existing.addEventListener('load', function () { resolve(window.MathJax); });
+          existing.addEventListener('error', reject);
+          return;
+        }
+        var script = document.createElement('script');
+        script.id = 'MathJax-script';
+        script.src = MATHJAX_SRC;
+        script.async = true;
+        script.onload = function () {
+          var mj = window.MathJax;
+          if (mj && mj.startup && mj.startup.promise) {
+            mj.startup.promise.then(function () { resolve(mj); }).catch(reject);
+          } else {
+            resolve(mj);
+          }
+        };
+        script.onerror = function () {
+          reject(new Error('MathJax failed to load'));
+        };
+        document.head.appendChild(script);
+      });
+      return mathJaxLoadPromise;
+    }
+
     async function waitForMathJax() {
+      try {
+        await loadMathJaxScript();
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
       var mj = window.MathJax;
       if (!mj) return false;
       if (mj.startup && mj.startup.promise) {
@@ -163,10 +307,89 @@
       return typeof mj.typesetPromise === 'function';
     }
 
+    async function typesetMathBlock(el) {
+      if (!el || el.getAttribute('data-math-done') === '1') return;
+      if (el.querySelector && el.querySelector('mjx-container')) {
+        el.setAttribute('data-math-done', '1');
+        return;
+      }
+      if (!rootHasTeX(el)) return;
+      if (!(await waitForMathJax())) return;
+      try {
+        await window.MathJax.typesetPromise([el]);
+      } catch (error) {
+        console.error(error);
+        return;
+      }
+      el.setAttribute('data-math-done', '1');
+    }
+
+    function observeMathBlocks(blocks) {
+      if (!blocks.length) return;
+      if (typeof IntersectionObserver === 'undefined') {
+        (async function () {
+          for (var i = 0; i < blocks.length; i++) {
+            await yieldToMain();
+            await typesetMathBlock(blocks[i]);
+          }
+        })();
+        return;
+      }
+      var queue = [];
+      var draining = false;
+
+      async function drain() {
+        if (draining) return;
+        draining = true;
+        while (queue.length) {
+          var el = queue.shift();
+          await typesetMathBlock(el);
+          if (queue.length) await yieldToMain();
+        }
+        draining = false;
+      }
+
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          observer.unobserve(entry.target);
+          queue.push(entry.target);
+          drain();
+        });
+      }, { root: null, rootMargin: '120% 0px', threshold: 0 });
+
+      blocks.forEach(function (el) { observer.observe(el); });
+    }
+
+    /* Load MathJax only when a TeX block is near the viewport. Typeset those
+       blocks first, then the rest as the reader scrolls. Returns after the
+       visible pass so the detail shell can paint without waiting on below-fold
+       formulas. */
     async function typesetMath(root) {
       try {
-        if (!(await waitForMathJax())) return;
-        await window.MathJax.typesetPromise(root ? [root] : undefined);
+        if (!root || !rootHasTeX(root)) return;
+
+        var blocks = collectMathBlocks(root);
+        if (!blocks.length) {
+          if (!(await waitForMathJax())) return;
+          await window.MathJax.typesetPromise([root]);
+          return;
+        }
+
+        var immediate = [];
+        var deferred = [];
+        var margin = (window.innerHeight || 800) * 1.25;
+        blocks.forEach(function (el) {
+          if (blockNearViewport(el, margin)) immediate.push(el);
+          else deferred.push(el);
+        });
+
+        for (var i = 0; i < immediate.length; i++) {
+          await typesetMathBlock(immediate[i]);
+          if (i < immediate.length - 1) await yieldToMain();
+        }
+
+        observeMathBlocks(deferred);
       } catch (error) {
         console.error(error);
       }

data/_includes/content-runtime/30-includes.html

@@ -26,7 +26,7 @@
       var src = resolveAssetUrl(attrs.src);
       var sideClass = attrs.side === 'right' ? ' article-cut-in--right' : '';
       return '<figure class="article-cut-in-plate' + sideClass + '">' +
-        '<img class="article-cut-in' + sideClass + '" src="' + escapeAttr(src) + '" alt="' + escapeAttr(attrs.alt || '') + '" width="120" loading="lazy">' +
+        '<img class="article-cut-in' + sideClass + '" src="' + escapeAttr(src) + '" alt="' + escapeAttr(attrs.alt || '') + '" width="120" loading="lazy" decoding="async">' +
         '</figure>';
     }
 
@@ -36,9 +36,12 @@
       var caption = attrs.caption || '';
       var lbCaption = figureLightboxCaption(caption, attrs.source);
       var lbAttr = lbCaption ? ' data-lightbox-caption="' + escapeAttr(lbCaption) + '"' : '';
+      /* Reserve a 16:9 box until the file paints. Diagrams vary; a stable
+         ratio beats an unsized image for CLS on long articles. */
+      var sizeAttr = ' width="960" height="540"';
       return [
         '<figure class="my-8 mx-auto text-center w-full" style="display:block;margin-left:auto;margin-right:auto;' + width + '">',
-        '<img src="' + escapeAttr(src) + '" alt="' + escapeAttr(attrs.alt || caption) + '" class="figure-lightbox-trigger mx-auto max-w-full h-auto block" loading="lazy" tabindex="0" role="button" aria-label="Enlarge image"' + lbAttr + '>',
+        '<img src="' + escapeAttr(src) + '" alt="' + escapeAttr(attrs.alt || caption) + '" class="figure-lightbox-trigger mx-auto max-w-full h-auto block" loading="lazy" decoding="async"' + sizeAttr + ' tabindex="0" role="button" aria-label="Enlarge image"' + lbAttr + '>',
         caption || attrs.source ? '<figcaption class="mt-3 font-body">' + includeCaptionHtml(caption) + figureSourceHtml(attrs.source) + '</figcaption>' : '',
         '</figure>'
       ].join('');

data/_includes/content-runtime/50-detail.html

@@ -813,12 +813,42 @@
 
       var body = document.createElement('div');
       body.className = 'article-content';
-      body.innerHTML = await renderRichContent(options.bodyMarkdown, fm);
-      applyDropCapClass(body, fm);
+      /* Mount the opening blocks first so title-adjacent prose can paint before
+         the rest of a long article lands in the DOM (mobile LCP / TBT). */
+      var staging = document.createElement('div');
+      staging.innerHTML = await renderRichContent(options.bodyMarkdown, fm);
+      var nodes = Array.prototype.slice.call(staging.childNodes);
       section.appendChild(body);
-
       if (options.mainColumn) options.mainColumn.appendChild(section);
 
+      var firstBatch = 6;
+      var batchSize = 12;
+      var ni = 0;
+      for (; ni < nodes.length && ni < firstBatch; ni++) {
+        body.appendChild(nodes[ni]);
+      }
+      applyDropCapClass(body, fm);
+      await new Promise(function (resolve) {
+        if (typeof window.requestAnimationFrame === 'function') {
+          window.requestAnimationFrame(function () { window.setTimeout(resolve, 0); });
+        } else {
+          window.setTimeout(resolve, 0);
+        }
+      });
+      while (ni < nodes.length) {
+        var end = Math.min(ni + batchSize, nodes.length);
+        for (; ni < end; ni++) body.appendChild(nodes[ni]);
+        if (ni < nodes.length) {
+          await new Promise(function (resolve) {
+            if (typeof window.requestIdleCallback === 'function') {
+              window.requestIdleCallback(function () { resolve(); }, { timeout: 48 });
+            } else {
+              window.setTimeout(resolve, 0);
+            }
+          });
+        }
+      }
+
       await enhanceArticleContent(body, fm);
 
       assignHeadingIds(body);
@@ -885,11 +915,14 @@
 
     async function renderRichContent(markdown, frontMatter) {
       var fm = frontMatter || {};
-      var index = await ensureXciteIndex();
-      var bibIndex = await ensureBibliographyIndex();
+      /* Kick index fetches immediately so they overlap with front-matter strip. */
+      var indexPromise = ensureXciteIndex();
+      var bibPromise = ensureBibliographyIndex();
       var assignPrep = preprocessTranscriptionAssigns(stripFrontMatter(markdown));
       var prepared = assignPrep.text;
       var transcriptionAssigns = assignPrep.assignMap;
+      var index = await indexPromise;
+      var bibIndex = await bibPromise;
       var replacements = [];
       prepared = prepared.replace(/\{%-?\s*include\s+transcription\.html\s+([\s\S]*?)-?%\}/g, function (match, raw) {
         var replacementIndex = replacements.length;

data/_includes/home/band-index.html

@@ -31,7 +31,7 @@
         {%- else -%}
         <figure class="home-index-plate" data-content-band-art="{{ _art_key }}" hidden></figure>
         {%- endif -%}
-        <h3 class="section-title home-index-title">{{ _panel_title }}</h3>
+        <h3 class="home-index-title">{{ _panel_title }}</h3>
         <a class="ledger-cta" href="{{ _panel_path }}">
           <span>Open</span>
           <span class="material-symbols-outlined ledger-cta-arrow" aria-hidden="true">chevron_right</span>

data/_includes/mathjax.html

@@ -1,10 +1,32 @@
-<!-- MathJax configuration for Jekyll with inline math support -->
+<!-- MathJax: config only. The content runtime loads the library on demand when
+     a detail page actually contains TeX, then typesets visible blocks first. -->
 <script>
 window.MathJax = {
-	tex: {
-		inlineMath: [['$', '$'], ['\\(', '\\)']],
-		displayMath: [['$$', '$$'], ['\\[', '\\]']]
-	}
+  startup: { typeset: false },
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']],
+    displayMath: [['$$', '$$'], ['\\[', '\\]']]
+  }
 };
+
+/* Studio / private text layout: typeset once the runtime exists. Public detail
+   pages call typesetMath from enhanceArticleContent instead. */
+(function () {
+  function runStaticMath() {
+    var root = document.querySelector('.article-content');
+    if (!root || !window.ContentRuntime || typeof window.ContentRuntime.typesetMath !== 'function') {
+      return;
+    }
+    var text = root.textContent || '';
+    if (text.indexOf('$') === -1 && text.indexOf('\\(') === -1 && text.indexOf('\\[') === -1) {
+      return;
+    }
+    window.ContentRuntime.typesetMath(root);
+  }
+  if (window.ContentRuntime) {
+    runStaticMath();
+  } else {
+    document.addEventListener('pandorga:runtime', runStaticMath, { once: true });
+  }
+})();
 </script>
-<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js"></script>

data/_layouts/articles.html

@@ -126,8 +126,6 @@ layout: shell
   </div>
 
 </main>
-{% include mathjax.html %}
-
 <script>
   (function bootArticles() {
     'use strict';
@@ -168,7 +166,8 @@ layout: shell
 
     var SORT_LABELS = {
       updated: 'Order: last revised',
-      published: 'Order: date published'
+      published: 'Order: date published',
+      random: 'Order: random'
     };
 
     var allArticles = [];

data/_layouts/blog.html

@@ -90,8 +90,6 @@ layout: shell
   </div>
 
 </main>
-{% include mathjax.html %}
-
 <script>
   (function bootBlog() {
     'use strict';

data/assets/css/article.css

@@ -1007,6 +1007,97 @@ a.xcite-ref:hover {
   margin-bottom: 0;
 }
 
+/* ── Theorem and proof blocks ──
+   Authored as `<div class="theorem" name="…" description="…" markdown="1">`
+   and `<div class="proof" markdown="1">`. Theorems are bare (no plate): the
+   runtime builds the head from name / description and italicizes the body.
+   Proofs sit on a gray band that bleeds to the edges of `.text-page-main`
+   while the text keeps the body measure; the runtime prefixes "Proof." into
+   the first paragraph (same line as the opening sentence) and a QED square
+   lands on the last line of the body. */
+.article-content .theorem {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 1.5em 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--color-on-surface);
+}
+
+.article-content .theorem-head,
+.article-content .proof-head {
+  font-style: normal;
+  font-weight: var(--weight-body);
+}
+
+.article-content .theorem-name,
+.article-content .proof-name {
+  font-weight: var(--weight-emphasis);
+  font-style: normal;
+}
+
+.article-content .theorem-description {
+  font-weight: var(--weight-body);
+  font-style: normal;
+}
+
+.article-content .theorem-body {
+  font-style: italic;
+}
+
+/* Head is injected into the first paragraph; keep it upright against the
+   italic theorem body. */
+.article-content .theorem-body .theorem-head {
+  font-style: normal;
+}
+
+.article-content .theorem-body > :first-child,
+.article-content .proof-body > :first-child {
+  margin-top: 0;
+}
+
+.article-content .theorem-body > :last-child,
+.article-content .proof-body > :last-child {
+  margin-bottom: 0;
+}
+
+.article-content .proof {
+  display: flow-root;
+  box-sizing: border-box;
+  position: relative;
+  width: auto;
+  max-width: none;
+  margin: 1.5em calc(-1 * var(--space-md));
+  padding: 1rem var(--space-md);
+  background: var(--color-surface-container-low);
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--color-on-surface);
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+@media (min-width: 768px) {
+  .article-content .proof {
+    margin-left: calc(-1 * var(--space-2xl));
+    margin-right: calc(-1 * var(--space-2xl));
+    padding-left: var(--space-2xl);
+    padding-right: var(--space-2xl);
+  }
+}
+
+.article-content .proof-body > :last-child::after {
+  content: "□";
+  float: right;
+  margin-left: 0.35em;
+  font-size: calc(1em + 2pt);
+  line-height: inherit;
+  color: var(--color-on-surface);
+  pointer-events: none;
+  user-select: none;
+}
+
 /* ══ Code blocks ══
    A fence used to render as a bare grey box: no indication of what language
    was in it, and nothing to do with it but select the text by hand. It now

data/assets/css/base.css

@@ -1,3 +1,53 @@
+/* ── Metric-matched fallbacks (font-display: swap) ──
+   Local Times/Liberation faces scaled to the web fonts that paint the
+   home hero before the Google kit arrives. Without these, swap CLS on
+   home is ~0.15. Metrics from UPM-normalised average glyph width vs
+   Liberation Serif Regular (Times New Roman metric twin). */
+@font-face {
+  font-family: "Pandorga Title Fallback";
+  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
+  size-adjust: 148.98%;
+  ascent-override: 65.51%;
+  descent-override: 24.97%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Pandorga Cinzel Fallback";
+  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
+  size-adjust: 139.21%;
+  ascent-override: 70.11%;
+  descent-override: 26.72%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Pandorga Body Fallback";
+  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
+  size-adjust: 103.26%;
+  ascent-override: 71.18%;
+  descent-override: 25.66%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Pandorga Ancizar Fallback";
+  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
+  size-adjust: 101.28%;
+  ascent-override: 88.86%;
+  descent-override: 29.62%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Pandorga Label Fallback";
+  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
+  size-adjust: 112.98%;
+  ascent-override: 86.22%;
+  descent-override: 24.76%;
+  line-gap-override: 0%;
+}
+
 /* ── Material Symbols ── */
 /* Doubled class so this beats the Google stylesheet, which arrives later
    and sets font-size: 24px. That late size change moves the hero. */
@@ -122,8 +172,8 @@ html {
   --type-section-lg: 2.1515rem;
 
   /* Content titles — Newsreader Regular 400 */
-  --type-title: 2.0015rem;
-  --type-title-lg: 2.4015rem;
+  --type-title: 2.20165rem;
+  --type-title-lg: 2.64165rem;
   --type-card: 1.4015rem;
   --type-card-lg: 1.5515rem;
 
@@ -140,7 +190,8 @@ html {
   /* Card/row blurbs, standfirsts, project/source copy — same as body. */
   --type-subtitle: var(--type-body);
   --type-dek: 0.9375rem;
-  --type-meta: 0.8125rem;
+  /* Dates, kickers, quiet meta — +2pt over the prior 0.8125rem step. */
+  --type-meta: calc(0.8125rem + 2pt);
 
   /* Chrome — quiet relative to body (tuned for Marcellus SC cap-height to match icons) */
   --type-label: 0.8485rem;
@@ -405,10 +456,13 @@ html body {
   font-variant-numeric: tabular-nums;
 }
 
-/* Masthead tag line under the page H1. */
+/* Masthead tag line under the page H1. Body size so "Channels. Sites." /
+   "Blog pessoal. …" reads with the standfirst, not as micro-label chrome.
+   Beats `.code-technical` when a listing also puts that class on the span. */
 [data-content-header-tags],
-.page-header-tags {
-  font-size: var(--type-dek);
+.page-header-tags,
+[data-content-header-tags].code-technical {
+  font-size: var(--type-body);
   line-height: 1.45;
   letter-spacing: 0.04em;
 }
@@ -950,7 +1004,7 @@ a.ledger-chip:hover {
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
   text-decoration-thickness: 1.5px;
-  text-underline-offset: 0.28em;
+  text-underline-offset: 0.48em;
   text-underline-position: under;
 }
 

data/assets/css/ledger/chrome.css

@@ -43,7 +43,7 @@
 .site-wordmark {
   display: none;
   font-family: var(--font-title);
-  font-size: var(--type-dek);
+  font-size: calc(var(--type-dek) * 1.25);
   line-height: 1;
   white-space: nowrap;
 }

data/assets/css/ledger/cv.css

@@ -137,6 +137,7 @@ html[data-theme="light"] .cv-product {
   margin-top: var(--space-md);
   color: var(--color-on-surface-variant);
   letter-spacing: 0.06em;
+  font-size: var(--type-body);
 }
 
 .cv-dossier-standfirst {
@@ -219,7 +220,19 @@ html[data-theme="light"] .cv-product {
 }
 
 .cv-contacts .group .material-symbols-outlined {
-  font-size: var(--type-card);
+  font-size: var(--type-label-lg);
+}
+
+/* Badge (Network / Code) and name (LinkedIn / GitHub) were inheriting body /
+   nav sizes and reading louder than the dossier. Quiet label register. */
+.cv-contacts .group .marginalia {
+  font-size: var(--type-meta);
+  letter-spacing: 0.06em;
+}
+
+.cv-contacts .group .font-label {
+  font-size: var(--type-label);
+  letter-spacing: 0.03em;
 }
 
 /* ── Section register ──────────────────────────────────────────────────

data/assets/css/ledger/detail.css

@@ -818,9 +818,10 @@ aside:has(> .text-detail-sidebar) {
   font-weight: inherit;
 }
 
-/* ── Theorem / proof / key-takeaways callout ──
-   Authored per article as `<div class="article-note" markdown="1">`; styled
-   here, never injected. Ochre wash + tertiary spine = scannable field note. */
+/* ── Field-note callout ──
+   Authored as `<div class="article-note" markdown="1">`; styled here, never
+   injected. Ochre wash + tertiary spine = scannable field note. Formal
+   theorem / proof blocks use `.theorem` / `.proof` in article.css instead. */
 .article-content .article-note {
   position: relative;
   background: color-mix(in srgb, var(--color-tertiary) 10%, var(--color-panel-contrast));

data/assets/css/ledger/home.css

@@ -487,6 +487,7 @@ html[data-theme="light"] .home-hero-plate {
    vertical tick so each band reads as a ruled plate rather than a soft fade. */
 .home-band:not(.home-band--hero) .ledger-section-banner {
   padding-top: var(--space-lg);
+  padding-bottom: var(--space-sm);
   border-top: 1px solid var(--border-gentle);
   box-shadow: 0 4px 0 -3px var(--border-gentle-faint);
   position: relative;
@@ -1674,20 +1675,28 @@ button.home-project-inventory-row {
   margin-inline: var(--space-lg);
 }
 
+/* Card-scale title, not `.section-title`: that face is for band banners and
+   was oversized once the three index panels sat in one row. Locked here so
+   Sources / Network / Bibliography share one title register. */
 .home-index-title {
   margin: 0;
+  font-family: var(--font-title);
   font-size: var(--type-card);
+  font-weight: var(--weight-display);
+  line-height: 1.2;
+  color: var(--color-on-surface);
+  font-synthesis: none;
+  font-optical-sizing: auto;
 }
 
-@media (min-width: 1024px) {
-  .home-index-title {
-    font-size: var(--type-card-lg);
-  }
-}
-
-/* ── The plate ── */
+/* ── The plate ──
+   Every panel grows its plate so the title + Open row lands on one baseline
+   across Sources, Network, and Bibliography — the bib plate already flexed;
+   the other two used to sit shorter and leave their titles higher. */
 .home-index-plate {
   align-self: stretch;
+  flex: 1 1 auto;
+  min-height: 0;
   margin: 0;
   background: var(--color-background);
   border-bottom: 1px solid var(--border-gentle-subtle);
@@ -1952,8 +1961,6 @@ html[data-theme="light"] .home-featured .ledger-poster {
 #home-bib-panel .home-index-plate {
   display: flex;
   flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
 }
 
 #home-bib-panel .home-index-plate-head {

data/assets/css/ledger/projects.css

@@ -58,6 +58,7 @@
      is set in. */
   color: var(--color-primary);
   letter-spacing: 0.06em;
+  font-size: var(--type-body);
 }
 
 .projects-page .projects-state {

data/assets/css/ledger/writing.css

@@ -37,6 +37,7 @@
      the tag line should follow whatever `.page-accent--*` sets. */
   color: var(--color-primary);
   letter-spacing: 0.06em;
+  font-size: var(--type-body);
 }
 
 /* ══ Featured panel ══

data/lib/pandorga/commands/new.rb

@@ -24,7 +24,7 @@ module Pandorga
 
         gem "pandorga", "~> 1.3"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.7.6"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.8.4"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/fonts.rb

@@ -15,6 +15,15 @@ module Pandorga
     FOLLOW = { subtitle: :body, code: :mono, cv_body: :body }.freeze
     MONO_FALLBACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace"
     FAMILY_NAME = /\A[\p{L}\p{N}][\p{L}\p{N} .+\-]*\z/
+    # Named faces defined in assets/css/base.css with size-adjust / ascent
+    # overrides so display=swap does not reflow the hero (home CLS).
+    METRIC_FALLBACK = {
+      "Cinzel Decorative" => "Pandorga Title Fallback",
+      "Cinzel" => "Pandorga Cinzel Fallback",
+      "Newsreader" => "Pandorga Body Fallback",
+      "Ancizar Serif" => "Pandorga Ancizar Fallback",
+      "Marcellus SC" => "Pandorga Label Fallback"
+    }.freeze
 
     DEFAULTS = {
       title: { family: "Cinzel Decorative", spec: "wght@400;700;900", fallback: "serif" },
@@ -78,8 +87,14 @@ module Pandorga
       face = resolved[role.to_sym]
       return "" unless face
 
-      quoted = face[:family].to_s.empty? ? nil : "'#{escape_css(face[:family])}'"
-      [quoted, face[:fallback].to_s.strip].compact.reject(&:empty?).join(", ")
+      family = face[:family].to_s
+      parts = []
+      parts << "'#{escape_css(family)}'" unless family.empty?
+      metric = METRIC_FALLBACK[family]
+      parts << "'#{escape_css(metric)}'" if metric
+      fallback = face[:fallback].to_s.strip
+      parts << fallback unless fallback.empty?
+      parts.join(", ")
     end
 
     def resolve_role(role, override, theme)

data/lib/pandorga/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Pandorga
-  VERSION = "1.7.6"
+  VERSION = "1.8.4"
 end

data/scripts/content/hero_portraits.rb

@@ -3,17 +3,31 @@
 # The home hero pool is the folder. The content export writes the public
 # paths to pages/home/portraits.json. The author uploads a photograph under
 # content/media/images/hero/ and does not keep a second list.
+# Optional width variants live under variants/ so they are not extra draws.
 
 require "pathname"
 
 module HeroPortraits
   IMAGE_EXTENSIONS = %w[.jpg .jpeg .png .webp .gif].freeze
+  WIDTHS = [480, 960, 1440].freeze
+  SIZES = "(max-width: 767px) 100vw, (max-width: 1023px) 14rem, 16rem"
 
   module_function
 
   def entries(content_root)
-    image_files(Pathname.new(content_root)).map do |file|
-      { "src" => "/media/images/hero/#{file.basename}" }
+    root = Pathname.new(content_root)
+    image_files(root).map do |file|
+      entry = { "src" => "/media/images/hero/#{file.basename}" }
+      stem = file.basename.to_s.sub(/\.[^.]+\z/, "")
+      parts = WIDTHS.filter_map do |width|
+        variant = root.join("media/images/hero/variants/#{stem}-#{width}.jpg")
+        next unless variant.file?
+
+        "/media/images/hero/variants/#{variant.basename} #{width}w"
+      end
+      next entry if parts.empty?
+
+      entry.merge("srcset" => parts.join(", "), "sizes" => SIZES)
     end
   end
 

data/scripts/test/render-parity/proof.json

@@ -0,0 +1,5 @@
+{
+  "name": "proof",
+  "markdown": "<div class=\"proof\" markdown=\"1\">\n\nA short claim with **bold**.\n\n</div>",
+  "selectors": ["proof", "proof-head", "proof-name", "proof-body"]
+}

data/scripts/test/render-parity/run-fixture.mjs

@@ -128,6 +128,25 @@ function preprocessMarkdownDivs(markdown) {
     if (!hasMarkdownAttr(openTag)) return match;
     return `<div class="poem"><p>${inner.trim()}</p></div>`;
   });
+  text = text.replace(/<div\s+([^>]*class="[^"]*\btheorem\b[^"]*"[^>]*)>([\s\S]*?)<\/div>/gi, (match, openTag, inner) => {
+    if (!hasMarkdownAttr(openTag)) return match;
+    const nameMatch = openTag.match(/\bname\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
+    const descMatch = openTag.match(/\bdescription\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
+    const n = nameMatch ? (nameMatch[1] ?? nameMatch[2] ?? '') : '';
+    const d = descMatch ? (descMatch[1] ?? descMatch[2] ?? '') : '';
+    let head = '';
+    if (n) {
+      head = `<p class="theorem-head"><span class="theorem-name">${escapeAttr(n)}</span>`;
+      if (d) head += ` <span class="theorem-description">(${escapeAttr(d)})</span>`;
+      head += '.</p>';
+    }
+    return `<div class="theorem">${head}<div class="theorem-body">${marked.parse(inner.trim())}</div></div>`;
+  });
+  text = text.replace(/<div\s+([^>]*class="[^"]*\bproof\b[^"]*"[^>]*)>([\s\S]*?)<\/div>/gi, (match, openTag, inner) => {
+    if (!hasMarkdownAttr(openTag)) return match;
+    const head = '<p class="proof-head"><span class="proof-name">Proof</span>.</p>';
+    return `<div class="proof">${head}<div class="proof-body">${marked.parse(inner.trim())}</div></div>`;
+  });
   return text;
 }
 

data/scripts/test/render-parity/theorem.json

@@ -0,0 +1,5 @@
+{
+  "name": "theorem",
+  "markdown": "<div class=\"theorem\" name=\"Corollary 1\" description=\"nadir camera\" markdown=\"1\">\n\nLet the camera look straight down.\n\n</div>",
+  "selectors": ["theorem", "theorem-head", "theorem-name", "theorem-description", "theorem-body"]
+}

data/scripts/test/test-examples-build.rb

@@ -152,7 +152,7 @@ end
     warn "FAIL test-examples-build: #{name} home dropped the ledger font request"
     exit 1
   end
-  unless html.include?("--font-title: 'Cinzel Decorative', serif")
+  unless html.include?("--font-title: 'Cinzel Decorative', 'Pandorga Title Fallback', serif")
     warn "FAIL test-examples-build: #{name} home dropped the title face"
     exit 1
   end

data/scripts/test/test-fonts.rb

@@ -28,10 +28,23 @@ from_theme = Pandorga::Fonts.resolve(nil, theme)
 fail!("unset config dropped the ledger faces") unless Pandorga::Fonts.stylesheet_href(bare) == DEFAULT_HREF
 fail!("theme tokens drifted from the ledger faces") unless Pandorga::Fonts.stylesheet_href(from_theme) == DEFAULT_HREF
 
-fail!("title stack dropped Cinzel") unless Pandorga::Fonts.css_stack(from_theme, "title") == "'Cinzel Decorative', serif"
-fail!("body stack dropped the serif fallback") unless Pandorga::Fonts.css_stack(from_theme, "body") == "'Newsreader', Georgia, serif"
+fail!("title stack dropped Cinzel") unless Pandorga::Fonts.css_stack(from_theme, "title") ==
+  "'Cinzel Decorative', 'Pandorga Title Fallback', serif"
+fail!("body stack dropped the serif fallback") unless Pandorga::Fonts.css_stack(from_theme, "body") ==
+  "'Newsreader', 'Pandorga Body Fallback', Georgia, serif"
+fail!("label stack dropped the metric fallback") unless Pandorga::Fonts.css_stack(from_theme, "label") ==
+  "'Marcellus SC', 'Pandorga Label Fallback', serif"
 fail!("mono stack dropped Courier Prime") unless Pandorga::Fonts.css_stack(from_theme, "mono").start_with?("'Courier Prime', ui-monospace")
 
+site_faces = Pandorga::Fonts.resolve(
+  { "title" => "Cinzel", "body" => { "family" => "Ancizar Serif", "weights" => [300, 400, 600] } },
+  theme
+)
+fail!("Cinzel stack missed its metric fallback") unless Pandorga::Fonts.css_stack(site_faces, "title") ==
+  "'Cinzel', 'Pandorga Cinzel Fallback', serif"
+fail!("Ancizar stack missed its metric fallback") unless Pandorga::Fonts.css_stack(site_faces, "body") ==
+  "'Ancizar Serif', 'Pandorga Ancizar Fallback', Georgia, serif"
+
 custom = Pandorga::Fonts.resolve(
   {
     "title" => "Fraunces",
@@ -54,6 +67,7 @@ broken = []
 Dir.glob(ROOT.join("**/*.{css,html,rb,js,mjs,md,liquid,yml}")).each do |path|
   next if path.include?("/studio/assets/")
   next if path.include?("/node_modules/")
+  next if path.include?("/_site/")
   next if path.end_with?("test-fonts.rb")
   text = File.read(path)
   next unless text.include?(token)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 1.7.6
+  version: 1.8.4
 platform: ruby
 authors:
 - The Pandorga contributors
@@ -393,12 +393,14 @@ files:
 - scripts/test/render-parity/ongoing-product.json
 - scripts/test/render-parity/plotly.json
 - scripts/test/render-parity/poem.json
+- scripts/test/render-parity/proof.json
 - scripts/test/render-parity/run-absent-field-checks.mjs
 - scripts/test/render-parity/run-block-fixture.mjs
 - scripts/test/render-parity/run-detail-parity-checks.mjs
 - scripts/test/render-parity/run-field-flow-checks.mjs
 - scripts/test/render-parity/run-fixture.mjs
 - scripts/test/render-parity/selectors.mjs
+- scripts/test/render-parity/theorem.json
 - scripts/test/render-parity/video.json
 - scripts/test/render-parity/youtube-short.json
 - scripts/test/render-parity/youtube.json