pandorga 1.8.1 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03c8db4a237e9092a2f0d9256c118a162476cb1d056fc88518cfeccd60379bed
-  data.tar.gz: e8a2725fbc96d9c02ad55e39dce2c8e98d1eec14f20996ae5636d60f2d54181e
+  metadata.gz: 5ce749863130651664857439b365492b57207e7d0aba994315be703200fe0f48
+  data.tar.gz: 1b8f5293944f8cd27c76ee413f69e02869e9dc1cd6619aa48cfde1daf2355b98
 SHA512:
-  metadata.gz: a4e9108eac5982492245285b4954dc1e43a0ca10534411a8a221af35c5520a5a65c3a0fc9e8700bfc9c27588e41ee332a0204ebb697b9339514128e70b5237d1
-  data.tar.gz: 8ae715831b65d21cf206f071841f6c444f0b99598d93a2917ccaa09f4eecce658e2e93c0b61a75e375afa9b9a9baf0a6f17a47c70584f4ac6c5f656f8a728e75
+  metadata.gz: 157e81581c2e84cf398ab699902f1a3a17023e26b4fdbc27e76cba5013f1f7e2f5609cafe2dc65cf9bad36c9027bdb520d0ab22891324c9dfc63c3aabda76abc
+  data.tar.gz: b016e51119eadedc1ae7b063800580dfa04519cc84f0f9cae4237a4a9e4a356c8d329ac44d8d9da4220e48bab33b68a74c891e59e50a07c947685750d178377f

data/CHANGELOG.md

@@ -1,5 +1,86 @@
 # Changelog
 
+## [1.9.0] — 2026-10-13
+
+### Added
+
+- Optional `pandorga.home.hero_landscape` (home front matter
+  `hero_landscape` overrides it): a 16:9 image for viewports at or below
+  767px, via `<picture>`, shown whole in a 16:9 plate
+
+### Changed
+
+- Without that key the phone hero plate stays 3:4. It no longer cover-crops
+  the portrait into a 4:3 band
+- The hero image keeps `fetchpriority="high"`. A configured landscape file
+  is preloaded on narrow viewports. The portrait probe sets `fetchPriority`
+  to `high`, applies `srcset` before `src`, and the plate draw starts with
+  the other home fetches
+- Home links `tailwind.css` before the icon scripts so that sheet is not
+  held behind parser-blocking script
+
+Text faces still load after the first paint with `display=swap` and the
+metric-matched fallbacks from 1.8.4. One listing shell still serves every
+detail URL.
+
+## [1.8.5] — 2026-10-13
+
+### Fixed
+
+- Home hero `sizes` nudged above the plate width so 1.75–2× DPR picks a
+  sharp 3:4 variant; document that hero variants must be portrait fills
+
+## [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

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

@@ -115,23 +115,35 @@
       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 = '<p class="theorem-head"><span class="theorem-name">' + escapeHtml(name) + '</span>';
+        head = '<span class="theorem-head"><span class="theorem-name">' + escapeHtml(name) + '</span>';
         if (description) {
           head += ' <span class="theorem-description">(' + escapeHtml(description) + ')</span>';
         }
-        head += '.</p>';
+        head += '. </span>';
       }
-      return '<div class="theorem">' + head + '<div class="theorem-body">' + parseInlineMarkdown(inner) + '</div></div>';
+      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 = '<p class="proof-head"><span class="proof-name">Proof</span>.</p>';
-      return '<div class="proof">' + head + '<div class="proof-body">' + parseInlineMarkdown(inner) + '</div></div>';
+      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) {
@@ -184,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) {
@@ -198,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/content-runtime/60-fragments.html

@@ -578,10 +578,13 @@
       }
       return new Promise(function (resolve) {
         var probe = new Image();
+        probe.fetchPriority = 'high';
+        applyHeroPortraitSources(probe, chosen);
         probe.onload = function () {
-          img.src = nextSrc;
           img.alt = nextAlt;
           applyHeroPortraitSources(img, chosen);
+          img.fetchPriority = 'high';
+          img.src = nextSrc;
           img.classList.add('is-shown');
           resolve(true);
         };
@@ -610,9 +613,44 @@
       return next();
     }
 
+    function heroLandscapeActive(img) {
+      var url = img && img.getAttribute('data-hero-landscape');
+      if (!url || !String(url).trim() || !window.matchMedia) return false;
+      return window.matchMedia('(max-width: 767px)').matches;
+    }
+
+    function clearHeroSources(img) {
+      img.removeAttribute('src');
+      img.removeAttribute('srcset');
+      img.removeAttribute('sizes');
+      img.alt = '';
+    }
+
+    function watchHeroFrame(img) {
+      var url = img.getAttribute('data-hero-landscape');
+      if (!url || !String(url).trim() || !window.matchMedia) return;
+      var mq = window.matchMedia('(max-width: 767px)');
+      if (!mq.addEventListener) return;
+      mq.addEventListener('change', function () {
+        if (mq.matches) {
+          clearHeroSources(img);
+          img.classList.add('is-shown');
+          return;
+        }
+        img.classList.remove('is-shown');
+        loadJson('pages/home/portraits.json').then(function (data) {
+          return showHeroPortrait(img, heroPortraitEntries(data));
+        }).catch(function (error) {
+          console.error(error);
+        });
+      });
+    }
+
     function hydrateHeroPortrait() {
       var img = document.querySelector('[data-content-hero-portrait]');
       if (!img) return Promise.resolve();
+      watchHeroFrame(img);
+      if (heroLandscapeActive(img)) return Promise.resolve();
       return loadJson('pages/home/portraits.json').then(function (data) {
         return showHeroPortrait(img, heroPortraitEntries(data));
       }).catch(function (error) {
@@ -621,6 +659,7 @@
     }
 
     function hydratePageFragments() {
+      hydrateHeroPortrait();
       var headers = Array.prototype.slice.call(document.querySelectorAll('[data-content-page-header]'));
       var chain = Promise.resolve();
       headers.forEach(function (el) {
@@ -644,7 +683,6 @@
         hydrateHomeSections();
         hydrateBandArt();
         hydrateContacts();
-        hydrateHeroPortrait();
       });
     }
 

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/_layouts/home.html

@@ -17,6 +17,7 @@ layout: shell
 {%- assign _hero_name = site.pandorga.identity | pandorga_hero_name: site.author, site.title -%}
 {%- assign _cv_page = site.pages | where: "key", "cv" | first -%}
 {%- assign _hero_art = site.pandorga.home.hero_art | default: "page/hero-default.html" -%}
+{%- assign _hero_landscape = page.hero_landscape | default: site.pandorga.home.hero_landscape | default: "" | strip -%}
 {%- assign _home_bands = site.data.pandorga_home_bands -%}
 
 <main class="home-ledger">
@@ -53,8 +54,15 @@ layout: shell
           <span class="shard-accent home-hero-shard" aria-hidden="true"></span>
           <div class="home-hero-plate-wrap">
             <span class="ledger-frame-crosshairs" aria-hidden="true"></span>
-            <figure class="home-hero-plate">
-              <img alt="" width="1200" height="800" fetchpriority="high" data-content-hero-portrait />
+            <figure class="home-hero-plate{% if _hero_landscape != blank %} home-hero-plate--landscape{% endif %}">
+              {%- if _hero_landscape != blank -%}
+              <picture>
+                <source media="(max-width: 767px)" srcset="{{ _hero_landscape | escape }}" />
+                <img alt="" width="1600" height="900" fetchpriority="high" decoding="sync" data-content-hero-portrait data-hero-landscape="{{ _hero_landscape | escape }}" />
+              </picture>
+              {%- else -%}
+              <img alt="" width="960" height="1280" fetchpriority="high" decoding="sync" data-content-hero-portrait />
+              {%- endif -%}
               <span class="ledger-frame-corners" aria-hidden="true"></span>
             </figure>
           </div>

data/_layouts/shell.html

@@ -66,6 +66,10 @@
   {%- endcomment -%}
   <link href="https://fonts.googleapis.com" rel="preconnect" />
   <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+  {%- assign _hero_landscape = page.hero_landscape | default: site.pandorga.home.hero_landscape | default: "" | strip -%}
+  {%- if page.layout == "home" and _hero_landscape != blank -%}
+  <link rel="preload" as="image" href="{{ _hero_landscape | escape }}" fetchpriority="high" media="(max-width: 767px)" />
+  {%- endif -%}
   {% include theme/critical-preload.html %}
   <link rel="stylesheet" href="/assets/css/base.css" />
   <link rel="stylesheet" href="/assets/css/global-link.css" />
@@ -120,6 +124,11 @@
   {%- for _sheet in _ledger -%}
   <link rel="stylesheet" href="/assets/css/ledger/{{ _sheet }}.css" />
   {%- endfor -%}
+  {%- comment -%}
+    Utilities before the icon scripts. Those scripts are parser-blocking,
+    so a sheet after them waits until they finish before the scanner sees it.
+  {%- endcomment -%}
+  <link rel="stylesheet" href="/assets/css/tailwind.css" />
   {% include theme/font-loader.html %}
   {%- comment -%}
     Named icons only. The full variable face is about a megabyte, and a
@@ -194,7 +203,6 @@
   <style>
     :root { --drop-cap-lines: {{ site.drop_cap_lines | default: 2 }}; }
   </style>
-  <link rel="stylesheet" href="/assets/css/tailwind.css" />
 </head>
 
 <body class="bg-background text-on-surface">

data/assets/css/article.css

@@ -1012,8 +1012,9 @@ a.xcite-ref:hover {
    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." and
-   a QED square lands on the last line of the body. */
+   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%;
@@ -1026,7 +1027,6 @@ a.xcite-ref:hover {
 
 .article-content .theorem-head,
 .article-content .proof-head {
-  margin: 0 0 0.5em;
   font-style: normal;
   font-weight: var(--weight-body);
 }
@@ -1046,6 +1046,12 @@ a.xcite-ref:hover {
   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;
@@ -1085,7 +1091,7 @@ a.xcite-ref:hover {
   content: "□";
   float: right;
   margin-left: 0.35em;
-  font-size: inherit;
+  font-size: calc(1em + 2pt);
   line-height: inherit;
   color: var(--color-on-surface);
   pointer-events: none;

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/home.css

@@ -370,8 +370,10 @@
 
 /* ── Portrait plate ──
    Beside the copy on a wide page the plate is portrait (3:4): its height
-   matches the left column and the width is W = 3/4 × H. Edge-to-edge on a
-   phone it is landscape (4:3) from the band width. */
+   matches the left column and the width is W = 3/4 × H. On a phone it stays
+   3:4. A wider box would cover-crop that portrait a second time. When
+   hero_landscape is set, the phone plate is 16:9 and the picture source is
+   that file. */
 .home-hero-plate {
   position: relative;
   z-index: 1;
@@ -389,12 +391,6 @@
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface) 10%, transparent);
 }
 
-@media (max-width: 767px) {
-  .home-hero-plate {
-    aspect-ratio: 4 / 3;
-  }
-}
-
 :root:not([data-theme="dark"]) .home-hero-plate,
 html[data-theme="light"] .home-hero-plate {
   border-width: 1px;
@@ -451,6 +447,13 @@ html[data-theme="light"] .home-hero-plate {
   }
 }
 
+.home-hero-plate picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
 .home-hero-plate img {
   width: 100%;
   height: 100%;
@@ -469,6 +472,21 @@ html[data-theme="light"] .home-hero-plate {
   opacity: 1;
 }
 
+/* 16:9 file in a 16:9 plate. contain shows the whole frame. The image is
+   visible without waiting for the portrait runtime, so it can be the LCP. */
+@media (max-width: 767px) {
+  .home-hero-plate--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  .home-hero-plate--landscape img {
+    object-fit: contain;
+    object-position: center center;
+    opacity: 1;
+    transition: none;
+  }
+}
+
 .home-hero-plate:hover img {
   transform: scale(1.02);
 }
@@ -487,6 +505,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 +1693,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);
@@ -1924,8 +1951,9 @@ html[data-theme="light"] .home-featured .ledger-poster {
    ends flush with the viewport and adds no scrollable width; this must stay
    below 768px, which is where .home-band-inner swaps that token for --gutter.
    The side hairlines go with it: a border pinned to the screen edge reads as a
-   frame cut off rather than as the plate's edge. Orientation still owns the
-   crop; object-fit: cover re-crops the image inside the wider box. */
+   frame cut off rather than as the plate's edge. The plate stays 3:4, the
+   same frame as the portrait file, so cover does not crop it again. A
+   configured hero_landscape switches this query to 16:9 and contain. */
 @media (max-width: 767px) {
   .home-hero-portrait {
     max-width: none;
@@ -1952,8 +1980,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.8.1"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.9.0"
         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/registry/schema.yml

@@ -49,6 +49,9 @@ home:
     hero_art:
       type: string
       notes: Include path for hero decoration (default `page/hero-default.html`)
+    hero_landscape:
+      type: string
+      notes: Optional URL of a 16:9 image used at or below 767px. Home front matter `hero_landscape` overrides this key. Omitted, the phone plate stays 3:4
 
 fonts:
   title: "`pandorga.fonts`"

data/lib/pandorga/version.rb

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

data/scripts/content/hero_portraits.rb

@@ -3,17 +3,38 @@
 # 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.
+# Variants should be 3:4 portrait fills (not landscape width-only resizes):
+# the plate is object-fit cover at 3:4, including on a phone, so a 480×270
+# landscape candidate is too short and looks soft. A separate 16:9 file for
+# narrow viewports is pandorga.home.hero_landscape, not a pool variant.
 
 require "pathname"
 
 module HeroPortraits
   IMAGE_EXTENSIONS = %w[.jpg .jpeg .png .webp .gif].freeze
+  WIDTHS = [480, 960, 1440].freeze
+  # Slightly above the plate CSS width (14/16rem at html 110%) so 1.75–2×
+  # DPR picks the next 3:4 variant instead of a soft 480w. Variants must be
+  # portrait fills; landscape width-only resizes are too short under cover.
+  SIZES = "(max-width: 767px) 100vw, (max-width: 1023px) 18rem, 20rem"
 
   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/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)

data/scripts/test/test-hero-portraits.rb

@@ -23,6 +23,7 @@ require_relative "../content/hero_portraits"
 ROOT = Pathname.new(__dir__).join("..", "..").expand_path
 EXPORT = ROOT.join("scripts/content/export-content-json.rb")
 LAYOUT = ROOT.join("_layouts/home.html")
+SHELL = ROOT.join("_layouts/shell.html")
 HOME_CSS = ROOT.join("assets/css/ledger/home.css")
 RUNTIME = ROOT.join("_includes/content-runtime/60-fragments.html")
 SCHEMA = ROOT.join("studio/schema.yml")
@@ -96,9 +97,28 @@ check!(!layout.include?("profile-monologue"),
        "the deleted shell photograph must not be referenced")
 check!(!ROOT.join("assets/images/profile-monologue.JPG").exist?,
        "profile-monologue.JPG must not exist")
-hero_img = layout[/<img[^>]*data-content-hero-portrait[^>]*>/m]
-check!(hero_img && !hero_img.include?("src=") && hero_img.include?('alt=""'),
-       "the plate starts without a photographic src and keeps an empty alt, got #{hero_img.inspect}")
+hero_imgs = layout.scan(/<img[^>]*data-content-hero-portrait[^>]*>/m)
+check!(hero_imgs.any?, "the plate image is missing")
+hero_imgs.each do |hero_img|
+  check!(!hero_img.include?("src=") && hero_img.include?('alt=""'),
+         "the plate starts without a photographic src and keeps an empty alt, got #{hero_img.inspect}")
+  check!(hero_img.include?('fetchpriority="high"'),
+         "the hero image must request fetchpriority high, got #{hero_img.inspect}")
+end
+check!(layout.include?("page.hero_landscape") && layout.include?("site.pandorga.home.hero_landscape"),
+       "narrow hero reads front matter and pandorga.home.hero_landscape")
+check!(layout.include?('media="(max-width: 767px)"') && layout.include?("<picture>"),
+       "a configured landscape file is a picture source for narrow viewports")
+check!(layout.include?("data-hero-landscape"),
+       "the image carries the landscape URL for the runtime")
+shell = SHELL.read
+check!(shell.include?('rel="preload" as="image"') && shell.include?('fetchpriority="high"') &&
+         shell.include?('media="(max-width: 767px)"') && shell.include?("hero_landscape"),
+       "the shell preloads a configured landscape image on narrow viewports")
+tailwind_at = shell.index('href="/assets/css/tailwind.css"')
+icons_at = shell.index("window.__pandorgaIconsHref")
+check!(tailwind_at && icons_at && tailwind_at < icons_at,
+       "tailwind must be linked before the icon scripts")
 
 home_css = HOME_CSS.read
 check!(home_css.include?("background: black"),
@@ -109,6 +129,14 @@ check!(plate_img&.match?(/opacity:\s*0/) && plate_img.match?(/transition:[^;]*op
 shown = home_css[/^\.home-hero-plate img\.is-shown \{.*?\n\}/m]
 check!(shown&.match?(/opacity:\s*1/),
        "a ready photograph fades to full opacity, got #{shown.inspect}")
+check!(!home_css.include?("aspect-ratio: 4 / 3"),
+       "the phone plate must not cover-crop the portrait into 4:3")
+landscape_plate = home_css[/@media \(max-width: 767px\) \{\s*\.home-hero-plate--landscape \{[^}]*\}/m]
+check!(landscape_plate&.include?("aspect-ratio: 16 / 9"),
+       "a landscape plate is 16:9 on a phone, got #{landscape_plate.inspect}")
+landscape_img = home_css[/\.home-hero-plate--landscape img \{[^}]*\}/m]
+check!(landscape_img&.include?("object-fit: contain") && landscape_img.include?("opacity: 1"),
+       "the 16:9 file is shown whole and can paint without the portrait fade, got #{landscape_img.inspect}")
 
 runtime = RUNTIME.read
 start = runtime.index("function heroPortraitEntries")
@@ -125,6 +153,20 @@ onload = body[/probe\.onload = function \(\) \{.*?\n        \};/m]
 check!(onload&.include?("img.src = nextSrc") && onload.include?("img.alt = nextAlt") &&
          onload.include?("img.classList.add('is-shown')"),
        "src, alt, and the fade-in must be applied together after load, got #{onload.inspect}")
+check!(onload && onload.index("applyHeroPortraitSources") && onload.index("img.src = nextSrc") &&
+         onload.index("applyHeroPortraitSources") < onload.index("img.src = nextSrc"),
+       "srcset must be applied before src so the full file is not the first request")
+check!(body.include?("probe.fetchPriority = 'high'"),
+       "the portrait probe must use fetchPriority high")
+check!(body.include?("heroLandscapeActive") && body.include?("data-hero-landscape"),
+       "a narrow viewport with hero_landscape must not swap in a portrait")
+check!(runtime.include?("hydrateHeroPortrait();"),
+       "hydratePageFragments must draw the plate before the later fragment chain")
+plate_call = runtime.index("function hydratePageFragments")
+later = runtime.index("hydrateHomeSections();", plate_call || 0)
+check!(plate_call && runtime.index("hydrateHeroPortrait();", plate_call) &&
+         runtime.index("hydrateHeroPortrait();", plate_call) < later,
+       "the plate draw must start at the beginning of hydratePageFragments")
 onerror = body[/probe\.onerror = function \(\) \{.*?\n        \};/m]
 check!(onerror && !onerror.include?("img.src") && !onerror.include?("is-shown"),
        "a failed image load must leave the plate black, got #{onerror.inspect}")

data/scripts/validate.sh

@@ -68,6 +68,7 @@ TESTS=(
   scripts/test/test-fonts.rb
   scripts/test/test-css-delivery.rb
   scripts/test/test-discovery.rb
+  scripts/test/test-hero-portraits.rb
 )
 
 failed=0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 1.8.1
+  version: 1.9.0
 platform: ruby
 authors:
 - The Pandorga contributors