pandorga 1.14.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f6585d9644f2c5715b1c18088443f0a17d57f65783b0805899ad2882cc57643
-  data.tar.gz: f749368069fe9166d3f483292abed8f8da5b32b0c5f7c1da0b2e798241f859ed
+  metadata.gz: 96a7bd991685c2ae92de18f572112e692d02b211e134be12f0838247da013ade
+  data.tar.gz: 3f23ff94186ed6931a4f947efd18858cb16908a7db3c294a0eb9d92e244fc6f6
 SHA512:
-  metadata.gz: 81fff53869d080e555aa8cb77e19c8d8882da7855d23786ec01d255ae0e0d47c9b357f26fba11d8ca663dd697778fe7d8f3315bbff59ecdbd64820e90b4cc385
-  data.tar.gz: dba781ffd7ee1879bdd6676d45117a72b3dbdc8582b9c76cf45e04b9757889d36a0345282226602a7d2350398e7eb2b4089b0d7468d0c81185e92d3983cfec3c
+  metadata.gz: 8e924c057f9e70fdbea5e2b5ca40c3499ee18d482ce580ab091ff72e368bd4fc931c5ef7fb4a099155c04328a2ac2d98c93a36d5c3f1c0961e998c3e1a9edeb5
+  data.tar.gz: e8c7c19029b08a5cd20c6f5c109872b40c2d26877ffa8946ae01b6ab5c2d0c53dc6aad0eae0adf65ba23003fca69f18942dc3171e82ce44f7f7513d97c286ec4

data/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 ## [Unreleased]
 
+## [2.0.0] — 2026-10-24
+
+### Added
+
+- Section texts are editable in Studio from `content/pages/headers.yml`: a projects page form (title, kicker, note, home link label and the two projects page banners), a `cta` link label for every page on the home, a `note` for Sources and Network, and the CV section titles, timeline title and Contact label. The Sources, Network and Bibliography home panels show each page's headers title and, under it, its `note`. A field left out keeps the theme default; a field saved empty renders nothing and a hidden heading keeps its default as the region's accessible name. Studio saves an emptied field as `""` (`keep_empty`), and the runtime fills these texts from `pages/headers.json` for content-agnostic shells (PLT-AC-50).
+
+### Changed
+
+- `pandorga new`, getting started and the deploy and upgrade guides pin `gem "pandorga", "~> 2.0"`; `~> 1.3` does not resolve 2.0.0.
+- **Breaking.** The home hero plate is 16:9 at every width. From 1024px the name sets on two lines in a 46% copy column and the photograph takes the rest of the row, as tall as the copy and at least 15rem, with `object-fit: cover`; below 1024px the plate spans the column. The export writes 16:9 `variants/<stem>-{480,960,1440}.jpg` for each hero photograph with the project thumbnail generator and lists only 16:9 variants in `portraits.json`. See docs/upgrading.md (PLT-AC-51).
+- Every page sits on one canvas (`--color-canvas`, from `neutrals.canvas`, else `panel_contrast`) with square 1px hairline cards on the card surface and a 2px accent rule on featured cards. Home bands set the title and "View all" on one row with the note below; band titles, card titles, excerpts and metadata step down below 768px, metadata uses the mono face, and excerpts clamp to 3 lines on phones and 4 from 768px (PLT-AC-49).
+- On phones the featured article opens with its image edge to edge, Rascunhos show three untilted cards (two side by side, the third a landscape card across both columns; the tilt stays from 768px), project posters run edge to edge, and the reading column and its sidebar have no box (PLT-AC-49).
+- The Sources, Network and Bibliography panels open with the title and Open link above the illustration. The top bar sits on the translucent canvas with a hairline, and the theme and menu buttons are bordered squares (PLT-AC-49).
+- Text calls to action ("View all", "Open", "Read", "Repository", "Article") carry the strong highlighter mark instead of an underline (PLT-AC-49).
+
+### Removed
+
+- **Breaking.** `pandorga.home.hero_landscape`, home front matter `hero_landscape`, the `landscape` field of a `portraits.json` entry, the narrow-viewport hero draw and its preload, and the 3:4 hero variants (PLT-AC-51).
+- The radial blur pools, the decorative shards outside the footer, and the frame corners inside cards (PLT-AC-49).
+
+### Fixed
+
+- From 1024px the hero layout rules apply: the base plate rules (`max-width`, `position`, `aspect-ratio`) used to follow them in `home.css` and win on source order (PLT-AC-51).
+- From 1024px to 1279px the top bar no longer runs the section links under the wordmark and the theme and menu buttons. The links stay in the menu until 1280px, and the rail gap is tighter up to 1439px (PLT-AC-49).
+
+## [1.14.1] — 2026-10-20
+
+### Fixed
+
+- Hovered Back, Share, Cite, and reading-size buttons on article pages meet 4.5:1 in the light theme; the green section text on the gray hover mark was 4.48:1 (PLT-AC-46).
+
 ## [1.14.0] — 2026-10-20
 
 ### Changed

data/DESIGN.md

@@ -824,7 +824,7 @@ the sources host line, the network hint and the detail back link all follow.
 | Token | Base | Larger | Line height |
 | :--- | :--- | :--- | :--- |
 | `pageTitle` | 3.625rem | 5.875rem (≥768px) | 0.95 |
-| `homeHeroTitle` | `clamp(var(--type-section), calc(100cqi * 0.92 / 14.5), var(--type-page-lg))` | floor `--type-section-lg` (≥640px) | 1.05 |
+| `homeHeroTitle` | `clamp(var(--type-section), calc(100cqi * 0.92 / 14.5), var(--type-page-lg))` | floor `--type-section-lg` (≥640px); `min(calc(100cqi / var(--hero-name-fit, 8.4)), var(--hero-name-max, 4.5rem))` on two lines (≥1024px) | 1.05 |
 | `pageHeaderTitle` | 2.5rem | 3.5rem (≥768px) | 1.15 → 1.1 |
 | `textTitle` | 2.15rem | 2.65rem (≥768px) | 1.12 |
 | `textTitle` in the dossier | 1.95rem | 2.25rem (≥1024px) | 1.15 |
@@ -836,9 +836,11 @@ The home hero sizes to its copy column through a container query on
 `--type-page-lg`. The floor is the band-title step (`--type-section`, then
 `--type-section-lg` from 640px) so the name meets Articles, Rascunhos, and
 Projects on a phone instead of falling to the card size. Below 768px the
-name may wrap (`white-space: normal`); from 768px it stays one line. The
-given name is `onSurface` and the family name is `primary` on the same
-line. An earlier container-query fit —
+name may wrap (`white-space: normal`); from 768px to 1023px it stays one
+line. From 1024px the copy column is 46% of the row and the name sets on
+two lines, given name over family name, sized so the longer part
+(`--hero-name-fit` em wide) fills the column. The given name is
+`onSurface` and the family name is `primary`. An earlier container-query fit —
 `min(4.875rem, calc(100cqw * 0.96 / 4.5))`, whose `4.5` was the advance of
 `"Hello, I am"` in Lora — remains in `base.css` but reaches no markup.
 
@@ -950,9 +952,13 @@ Letter-spacing in use, by frequency: `0.1em` (12), `0.08em` (10), `0.12em` (7),
   in place; specimen click opens the project. Below 900px the rack is an
   icon strip above the specimen, one equal column per project (up to six)
   so it spans the band, with 1.375rem glyphs. Contract: `PLT-AC-13`–`17` in
-  `templates/portfolio/README.md`. Below 768px the hero portrait runs to the screen edge, pulled
+  `templates/portfolio/README.md`. The hero photograph is one 16:9 plate at
+  every width (`PLT-AC-51`). Below 768px it runs to the screen edge, pulled
   out of the band's gutter by exactly `--gutter-mobile` on each side and losing
-  its side hairlines, which at the edge would read as a frame cut off.
+  its side hairlines, which at the edge would read as a frame cut off. From
+  768px to 1023px it spans the column under the copy. From 1024px it takes
+  the row beside the two-line name, as tall as the copy and at least 15rem,
+  and covers that box like the featured article poster.
 * **Writing index.** Masthead over a hairline, then a `panelContrast` filter
   deck (tag tabs, sort, keyword), then a `panelContrast` lead panel for the
   newest entry, then an archive of `.ledger-row`s under a section banner.
@@ -1091,27 +1097,13 @@ everything else, so the query catches them too.
   Placement, size and hue are set per use by the page stylesheet, never by the
   utility.
 
-  Fifteen uses site-wide, all `aria-hidden`. No panel carries two shards in
-  the same corner or the same hue, and no two panels carry the same pair of
-  corners, which is the whole rule the placement follows:
+  Since `PLT-AC-49` the shards live only in the site footer: the page and
+  card shards competed with the content on the new canvas and were removed.
+  The footer pair is `aria-hidden`; the hero kite is listed for reference:
 
   | Where | Class | Corner | Hue |
   | :--- | :--- | :--- | :--- |
   | Home hero band | `.home-hero-pandorga` (geometric kite & ribbon) | background | `primary` / `secondary` / `tertiary` |
-  | Home hero portrait | `.shard-accent.home-hero-shard` | top-right | `primary` |
-  | Home featured card | `.shard-accent.home-featured-shard` | top-left | `tertiary` |
-  | Home featured card | `.shard-accent-beta.home-featured-shard--beta` | bottom-right | `secondary` |
-  | Home index panel | `.shard-accent.home-index-shard` | bottom-right | `secondary` |
-  | Home index panel | `.shard-accent-beta.home-index-shard--beta` | bottom-left | `primary` |
-  | Writing index lead panel | `.shard-accent.writing-lead-shard` | bottom-left | `primary` |
-  | Writing index lead panel | `.shard-accent-beta.writing-lead-shard--beta` | top-right | `tertiary` |
-  | CV dossier | `.shard-accent.cv-dossier-shard` | top-right | `secondary` |
-  | CV dossier | `.shard-accent-beta.cv-dossier-shard--beta` | bottom-left | `primary` |
-  | Projects lead | `.shard-accent.projects-lead-shard` | top-right | `primary` |
-  | Projects hero | `.shard-accent.projects-hero-shard` | bottom-right | `secondary` |
-  | Rascunhos masthead | `.shard-accent.rascunhos-shard` | top-right | `secondary` |
-  | Sources masthead | `.shard-accent.sources-masthead-shard` | top-right | `secondary` |
-  | Sources foot | `.shard-accent-beta.sources-foot-shard` | bottom-left | `tertiary` |
   | Site footer | `.shard-accent.site-footer-shard` | bottom-right | `secondary` |
   | Site footer | `.shard-accent-beta.site-footer-shard--beta` | bottom-left | `primary` |
 
@@ -1119,13 +1111,6 @@ everything else, so the query catches them too.
   carries both class names, so any media query that repositions the pair has to
   restate the base rule's `auto` offsets on the beta: leave all four set and
   the browser resolves to top and left, and the pair collapses into one corner.
-  And a shard behind an opaque plate is a shard nobody sees, which is why the
-  home featured pair goes around its poster rather than across the card.
-
-  On the writing index the shard was for a long time written to stand down
-  whenever the featured entry carried a thumbnail — and that panel selects the
-  first entry that *has* one, so the condition was always true and the shard
-  never rendered on a built page.
 
   A further shard sits on the detail sidebar heading. It is a `::after`
   pseudo-element, so it cannot take the utility class and re-implements it by

data/_includes/content-runtime/43-blocks.html

@@ -431,9 +431,6 @@
       if (options.className) card.className += ' ' + options.className;
 
       var html = '';
-      if (options.frameCorners) {
-        html += '<span class="ledger-frame-corners" aria-hidden="true"></span>';
-      }
       var poster = renderPosterMedia(fm.thumbnail, name, {
         srcset: fm.thumbnail_srcset,
         sizes: options.sizes || PROJECT_CARD_SIZES

data/_includes/content-runtime/60-fragments.html

@@ -255,6 +255,85 @@
       });
     }
 
+    function headerText(headers, key, field, fallback) {
+      if (!headers || typeof headers !== 'object' || Array.isArray(headers)) return fallback;
+      var section = headers[key];
+      if (!section || typeof section !== 'object' || Array.isArray(section)) return fallback;
+      var val = section[field];
+      if (typeof val !== 'string') return fallback;
+      return val.trim();
+    }
+
+    /* An absent field keeps the built default; an empty one removes the element
+     * and its wrapper, keeping the region's accessible name.
+     */
+    function hydrateHeaderTexts(root) {
+      root = root || document;
+      var elements = Array.prototype.slice.call(
+        root.querySelectorAll('[data-content-header-text]')
+      );
+      if (!elements.length) return Promise.resolve();
+      return loadPageHeaders().then(function (headers) {
+        elements.forEach(function (el) {
+          var attr = el.getAttribute('data-content-header-text') || '';
+          var dot = attr.indexOf('.');
+          var key = dot !== -1 ? attr.substring(0, dot) : attr;
+          var field = dot !== -1 ? attr.substring(dot + 1) : '';
+          var text = headerText(headers, key, field, null);
+          if (text === null) return;
+          if (text !== '') {
+            var next = stripSingleParagraph(parseInlineMarkdown(text));
+            if (el.innerHTML.trim() !== next.trim()) el.innerHTML = next;
+          } else {
+            var tag = String(el.tagName || '').toUpperCase();
+            if (tag >= 'H1' && tag <= 'H6' && tag.length === 2) {
+              var nameEl = el.closest('[data-content-header-name]');
+              if (nameEl && !nameEl.hasAttribute('aria-label') && !nameEl.hasAttribute('aria-labelledby')) {
+                nameEl.setAttribute('aria-label', el.textContent.trim());
+              }
+            }
+            var target = el.closest('[data-content-header-wrap]') || el;
+            var parent = target.parentElement;
+            target.remove();
+            if (parent && parent.hasAttribute('data-content-header-group') && parent.childElementCount === 0) {
+              parent.remove();
+            }
+          }
+        });
+      }).catch(function (error) {
+        console.error(error);
+      });
+    }
+
+    function hydratePanelNotes(root) {
+      root = root || document;
+      var elements = Array.prototype.slice.call(
+        root.querySelectorAll('[data-content-panel-note]')
+      );
+      if (!elements.length) return Promise.resolve();
+      return loadPageHeaders().then(function (headers) {
+        elements.forEach(function (el) {
+          var key = el.getAttribute('data-content-panel-note') || '';
+          var text = headerText(headers, key, 'note', '');
+          if (text) {
+            var next = stripSingleParagraph(parseInlineMarkdown(text));
+            if (el.innerHTML.trim() !== next.trim()) el.innerHTML = next;
+            el.hidden = false;
+            el.classList.remove('hidden');
+          } else {
+            el.remove();
+          }
+        });
+      }).catch(function (error) {
+        console.error(error);
+        elements.forEach(function (el) {
+          if (!el.textContent.trim()) {
+            el.remove();
+          }
+        });
+      });
+    }
+
     function hydratePageHeader(root) {
       if (!root) return Promise.resolve();
       var pageKey = root.getAttribute('data-content-page-header');
@@ -519,9 +598,8 @@
     // Home hero plate. pages/home/portraits.json lists every image in
     // content/media/images/hero/. One entry is chosen per document load.
     // A file that fails to load is skipped. The plate stays black until one
-    // pool file has loaded, and stays black when every entry fails.
-    // At or below 767px the draw uses entries that carry `landscape` (a 16:9
-    // URL). The single data-hero-landscape URL is the fallback when none do.
+    // pool file has loaded, and stays black when every entry fails. The
+    // plate is 16:9 at every width, so one draw serves every viewport.
     function heroPortraitEntries(data) {
       var list = Array.isArray(data) ? data : [];
       var entries = [];
@@ -539,10 +617,6 @@
         var sizes = typeof entry.sizes === 'string' ? entry.sizes.trim() : '';
         if (srcset) record.srcset = srcset;
         if (sizes) record.sizes = sizes;
-        // Optional 16:9 file for the phone plate. Absent, the entry stays a
-        // portrait and the narrow draw skips it.
-        var landscape = typeof entry.landscape === 'string' ? entry.landscape.trim() : '';
-        if (landscape) record.landscape = landscape;
         entries.push(record);
       }
       return entries;
@@ -602,16 +676,6 @@
       });
     }
 
-    function heroLandscapeEntries(entries) {
-      var list = [];
-      var i;
-      var rows = entries || [];
-      for (i = 0; i < rows.length; i++) {
-        if (rows[i] && rows[i].landscape) list.push(rows[i]);
-      }
-      return list;
-    }
-
     function showHeroPortrait(img, entries) {
       var chosen = pickHeroPortrait(entries, Math.random);
       if (!chosen) return Promise.resolve();
@@ -630,141 +694,9 @@
       return next();
     }
 
-    function configuredLandscape(img) {
-      var url = img && img.getAttribute('data-hero-landscape');
-      url = url ? String(url).trim() : '';
-      return url;
-    }
-
-    function heroPlate(img) {
-      var node = img && img.parentElement;
-      while (node) {
-        if (node.classList && node.classList.contains('home-hero-plate')) return node;
-        node = node.parentElement;
-      }
-      return null;
-    }
-
-    function setNarrowSource(img, url) {
-      var picture = img.parentElement;
-      if (!picture || String(picture.tagName).toUpperCase() !== 'PICTURE') return;
-      var source = picture.querySelector('source');
-      if (!url) {
-        if (source) source.removeAttribute('srcset');
-        return;
-      }
-      if (!source) {
-        source = document.createElement('source');
-        source.setAttribute('media', '(max-width: 767px)');
-        picture.insertBefore(source, img);
-      }
-      source.setAttribute('srcset', url);
-    }
-
-    function applyHeroLandscapeFile(img, chosen) {
-      var nextSrc = resolveAssetUrl(chosen && (chosen.landscape || chosen.src));
-      var nextAlt = (chosen && chosen.alt) || '';
-      if (!nextSrc) return Promise.resolve(false);
-      if (img.getAttribute('src') === nextSrc) {
-        img.alt = nextAlt;
-        img.removeAttribute('srcset');
-        img.removeAttribute('sizes');
-        setNarrowSource(img, nextSrc);
-        img.classList.add('is-shown');
-        return Promise.resolve(true);
-      }
-      return new Promise(function (resolve) {
-        var probe = new Image();
-        probe.fetchPriority = 'high';
-        probe.onload = function () {
-          img.alt = nextAlt;
-          img.removeAttribute('srcset');
-          img.removeAttribute('sizes');
-          setNarrowSource(img, nextSrc);
-          img.fetchPriority = 'high';
-          img.src = nextSrc;
-          img.classList.add('is-shown');
-          resolve(true);
-        };
-        probe.onerror = function () {
-          resolve(false);
-        };
-        probe.src = nextSrc;
-      });
-    }
-
-    function showHeroLandscape(img, entries) {
-      var chosen = pickHeroPortrait(entries, Math.random);
-      if (!chosen) return Promise.resolve(false);
-      var start = entries.indexOf(chosen);
-      var ordered = entries.slice(start).concat(entries.slice(0, start));
-      var index = 0;
-      function next() {
-        if (index >= ordered.length) return Promise.resolve(false);
-        var entry = ordered[index];
-        index += 1;
-        return applyHeroLandscapeFile(img, entry).then(function (ok) {
-          if (ok) return true;
-          return next();
-        });
-      }
-      return next();
-    }
-
-    function showConfiguredLandscape(img) {
-      var url = configuredLandscape(img);
-      if (!url) return Promise.resolve(false);
-      var plate = heroPlate(img);
-      if (plate) plate.classList.add('home-hero-plate--landscape');
-      return applyHeroLandscapeFile(img, { landscape: url, alt: '' });
-    }
-
-    function paintNarrowHero(img) {
-      img.classList.remove('is-shown');
-      return loadJson('pages/home/portraits.json').then(function (data) {
-        var entries = heroPortraitEntries(data);
-        var landscapes = heroLandscapeEntries(entries);
-        if (landscapes.length) {
-          var plate = heroPlate(img);
-          if (plate) plate.classList.add('home-hero-plate--landscape');
-          return showHeroLandscape(img, landscapes).then(function (ok) {
-            if (ok) return;
-            return showConfiguredLandscape(img);
-          });
-        }
-        if (configuredLandscape(img)) return showConfiguredLandscape(img);
-        return showHeroPortrait(img, entries);
-      }).catch(function (error) {
-        console.error(error);
-        if (configuredLandscape(img)) return showConfiguredLandscape(img);
-      });
-    }
-
-    function watchHeroFrame(img) {
-      if (!window.matchMedia) return;
-      var mq = window.matchMedia('(max-width: 767px)');
-      if (!mq.addEventListener) return;
-      mq.addEventListener('change', function () {
-        if (mq.matches) {
-          paintNarrowHero(img);
-          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 (window.matchMedia && window.matchMedia('(max-width: 767px)').matches) {
-        return paintNarrowHero(img);
-      }
       return loadJson('pages/home/portraits.json').then(function (data) {
         return showHeroPortrait(img, heroPortraitEntries(data));
       }).catch(function (error) {
@@ -795,6 +727,8 @@
       });
       chain.then(function () {
         hydrateHomeSections();
+        hydrateHeaderTexts(document);
+        hydratePanelNotes(document);
         hydrateBandArt();
         hydrateContacts();
       });

data/_includes/content-runtime/90-bootstrap.html

@@ -26,6 +26,9 @@
       adoptCanonicalDetailUrl: adoptCanonicalDetailUrl,
       productUrl: productUrl,
       projectUrl: projectUrl,
+      loadPageHeaders: loadPageHeaders,
+      headerText: headerText,
+      hydrateHeaderTexts: hydrateHeaderTexts,
       hydratePageHeader: hydratePageHeader,
       hydratePageFragments: hydratePageFragments,
       hydrateContacts: hydrateContacts,

data/_includes/cv/cv-box.html

@@ -4,15 +4,21 @@
   so the shell lives here rather than being retyped five times.
 
   Parameters:
-    title        — section heading (required)
+    title        — section heading; an empty string drops the heading and its rule
+    text_key     — page headers key.field the runtime fills, e.g. "cv.summary_title"
+    label        — default heading, the section's accessible name when title is empty
     content      — pre-captured section body (required)
     id           — anchor id, e.g. "products" for the product back-link
     body_class   — extra classes on the entry column
 {%- endcomment -%}
-<section class="cv-register"{% if include.id %} id="{{ include.id }}"{% endif %}>
+<section class="cv-register"{% if include.id %} id="{{ include.id }}"{% endif %} data-content-header-name{% if include.title == "" %} aria-label="{{ include.label }}"{% endif %}>
   <div class="cv-register-rail">
-    <h2 class="section-title cv-register-title">{{ include.title }}</h2>
-    <span class="cv-register-rule" aria-hidden="true"></span>
+    {%- if include.title != "" -%}
+    <div class="cv-register-head" data-content-header-wrap>
+      <h2 class="section-title cv-register-title"{% if include.text_key %} data-content-header-text="{{ include.text_key }}"{% endif %}>{{ include.title }}</h2>
+      <span class="cv-register-rule" aria-hidden="true"></span>
+    </div>
+    {%- endif -%}
   </div>
   <div class="cv-register-body{% if include.body_class %} {{ include.body_class }}{% endif %}">{{ include.content }}</div>
 </section>

data/_includes/home/band-index.html

@@ -21,21 +21,36 @@
       {%- for panel in band.pages -%}
       {%- assign _panel_page = site.pages | where: "key", panel.key | first -%}
       {%- assign _panel_title = panel.title | default: _panel_page.title | default: panel.key -%}
+      {%- comment -%} Headers win when the key is set; an empty value hides the text (PLT-AC-50). {%- endcomment -%}
+      {%- assign _panel_head = site.data.page_headers[panel.key] -%}
+      {%- assign _panel_default = _panel_title -%}
+      {%- if _panel_head.title != nil -%}{%- assign _panel_title = _panel_head.title | strip -%}{%- endif -%}
+      {%- assign _panel_cta = "Open" -%}
+      {%- if _panel_head.cta != nil -%}{%- assign _panel_cta = _panel_head.cta | strip -%}{%- endif -%}
+      {%- assign _panel_note = _panel_head.note | strip -%}
       {%- assign _panel_path = panel.path | default: _panel_page.url -%}
       {%- assign _art_key = panel.key -%}
       {%- if panel.key == "resources" -%}{%- assign _art_key = "sources" -%}{%- endif -%}
-      <article class="home-index-panel"{% if panel.template == "bibliography" %} id="home-bib-panel"{% endif %}>
-        <span class="shard-accent home-index-shard" aria-hidden="true"></span>
+      <article class="home-index-panel"{% if panel.template == "bibliography" %} id="home-bib-panel"{% endif %} data-content-header-name{% if _panel_title == "" %} aria-label="{{ _panel_default | escape }}"{% endif %}>
+        {%- if _panel_title != "" or _panel_cta != "" -%}
+        <div class="home-index-panel-head" data-content-header-group>
+          {%- if _panel_title != "" -%}
+          <h3 class="home-index-title" data-content-header-text="{{ panel.key }}.title">{{ _panel_title }}</h3>
+          {%- endif -%}
+          {%- if _panel_cta != "" -%}
+          <a class="ledger-cta" href="{{ _panel_path }}" data-content-header-wrap>
+            <span data-content-header-text="{{ panel.key }}.cta">{{ _panel_cta }}</span>
+            <span class="material-symbols-outlined ledger-cta-arrow" aria-hidden="true">chevron_right</span>
+          </a>
+          {%- endif -%}
+        </div>
+        {%- endif -%}
+        <p class="home-index-note font-body" data-content-panel-note="{{ panel.key }}"{% if _panel_note == "" %} hidden{% endif %}>{{ _panel_note }}</p>
         {%- if panel.template == "bibliography" -%}
         <figure class="home-index-plate" id="home-bib-plate" hidden></figure>
         {%- else -%}
         <figure class="home-index-plate" data-content-band-art="{{ _art_key }}" hidden></figure>
         {%- endif -%}
-        <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>
-        </a>
       </article>
       {%- endfor -%}
     </div>

data/_includes/home/band-listing.html

@@ -2,6 +2,7 @@
   One homepage listing band. Expects `band` from site.data.pandorga_home_bands.
   Kicker and note slots are always emitted, prefilled from headers.yml when it
   was read at build time and filled by the runtime otherwise (PLT-AC-42).
+  Link label comes from headers cta; an empty cta hides the link.
   Listing slots are filled by the home layout script from writing_index.json.
 {%- endcomment -%}
 {%- assign _accent = band.accent -%}
@@ -9,7 +10,9 @@
 {%- assign _featured = band.home.featured -%}
 {%- assign _lang = band.language | default: site.pandorga.identity.locale | default: "en" -%}
 {%- assign _path = band.path -%}
+{%- assign _section = site.data.page_headers[band.section_key] -%}
 {%- assign _cta = band.home.cta | default: "View all" -%}
+{%- if _section.cta != nil -%}{%- assign _cta = _section.cta | strip -%}{%- endif -%}
 {%- assign _slot_id = "home-band-" | append: band.key -%}
 <section
   id="home-{{ band.key }}"
@@ -25,7 +28,6 @@
   data-home-language="{{ _lang }}"
 >
   <div class="home-band-inner">
-    {%- assign _section = site.data.page_headers[band.section_key] -%}
     {%- assign _title = band.title -%}
     {%- if _section.title != blank -%}{%- assign _title = _section.title -%}{%- endif -%}
     <div class="ledger-section-banner" data-content-home-section="{{ band.section_key }}">
@@ -34,12 +36,14 @@
         <h2 class="section-title" data-content-section-title>{{ _title }}</h2>
         <p class="home-section-note font-body" data-content-section-note>{{ _section.note }}</p>
       </div>
-      <div class="home-section-aside">
+      {%- if _cta != "" -%}
+      <div class="home-section-aside" data-content-header-wrap>
         <a class="ledger-cta" href="{{ _path }}">
-          <span>{{ _cta }}</span>
+          <span data-content-header-text="{{ band.section_key }}.cta">{{ _cta }}</span>
           <span class="material-symbols-outlined ledger-cta-arrow" aria-hidden="true">chevron_right</span>
         </a>
       </div>
+      {%- endif -%}
     </div>
     {%- if _featured -%}
     <div id="{{ _slot_id }}-featured" data-home-featured-slot data-tag-base="{{ _path }}"></div>

data/_includes/page/timeline-section.html

@@ -2,10 +2,15 @@
 
   <!-- Timeline. The applet owns its own left rail of controls, so it runs as
        a full-width band rather than inside the register's title rail. -->
-  <section class="cv-band" id="timeline-section">
-    <div class="cv-band-head">
-      <h2 class="section-title">Timeline</h2>
+  {%- assign _timeline_head = site.data.page_headers[page.key] -%}
+  {%- assign _timeline_title = "Timeline" -%}
+  {%- if _timeline_head.timeline_title != nil -%}{%- assign _timeline_title = _timeline_head.timeline_title | strip -%}{%- endif -%}
+  <section class="cv-band" id="timeline-section" data-content-header-name{% if _timeline_title == "" %} aria-label="Timeline"{% endif %}>
+    {%- if _timeline_title != "" -%}
+    <div class="cv-band-head" data-content-header-wrap>
+      <h2 class="section-title" data-content-header-text="{{ page.key }}.timeline_title">{{ _timeline_title }}</h2>
     </div>
+    {%- endif -%}
 
     <div class="cv-timeline-grid">
       <div class="cv-timeline-rail">

data/_includes/theme/theme-vars-block.liquid

@@ -87,6 +87,9 @@
     --color-surface-variant: {{ surface_variant_value }};
     --color-surface-dim: {{ ts.surface_dim | default: "#d9d9d9" }};
     --color-panel-contrast: {{ tn.panel_contrast | default: bg_secondary }};
+    /* The page ground every card sits on (PLT-AC-49). A palette may name its
+       own `canvas`; otherwise it is the panel-contrast step. */
+    --color-canvas: {{ tn.canvas | default: tn.panel_contrast | default: bg_secondary }};
     --color-surface-card: {{ tn.surface_card | default: surface_value }};
     --color-surface-card-contrast: {{ tn.surface_card_contrast | default: tn.surface_card | default: surface_value }};
     --color-surface-high: {{ tn.surface_high | default: tn.surface_container_high | default: "#e8e8e8" }};

data/_layouts/articles.html

@@ -344,8 +344,6 @@ layout: shell
       ]);
 
       var html = '<article class="writing-lead' + (thumbnail ? ' writing-lead--illustrated' : '') + '">';
-      html += '<span class="shard-accent writing-lead-shard" aria-hidden="true"></span>';
-      html += '<span class="shard-accent shard-accent-beta writing-lead-shard writing-lead-shard--beta" aria-hidden="true"></span>';
       html += '<div class="writing-lead-inner">';
       html += '<div class="writing-lead-body">';
       html += '<div class="writing-lead-rail">';

data/_layouts/bibliography.html

@@ -4,7 +4,6 @@ layout: shell
 
 <main class="relative max-w-7xl mx-auto px-4 sm:px-8 md:px-16 pt-10 pb-16">
   <div class="bib-masthead">
-    <span class="shard-accent bib-masthead-shard" aria-hidden="true"></span>
     {% include page/page-header.html key=page.key listing_filter=true spacer_class="mb-8"
        header_class="bib-header mb-10 md:mb-12"
        filter_label="Filter"
@@ -19,7 +18,6 @@ layout: shell
       </section>
     </div>
     <div id="bib-pagination" class="bib-pagination"></div>
-    <span class="shard-accent shard-accent-beta bib-foot-shard" aria-hidden="true"></span>
   </section>
 </main>
 

data/_layouts/blog.html

@@ -16,12 +16,7 @@ layout: shell
          default_path="/pages/blog/"
          default_detail="/posts/:slug/" %}>
 
-  {%- comment -%}
-    Masthead. The shard lives here rather than inside the shared page header
-    include, which every listing uses and which no single page may restyle.
-  {%- endcomment -%}
   <div class="rascunhos-masthead" data-rascunhos-masthead>
-    <span class="shard-accent rascunhos-shard" aria-hidden="true"></span>
     {% include page/page-header.html key=page.key
        header_class="rascunhos-header" %}
   </div>