pandorga 1.14.0 → 2.0.0

data/_layouts/cv.html

@@ -1,12 +1,24 @@
 ---
 layout: shell
 ---
+{%- comment -%} Section titles from the page headers: absent keeps the default, empty hides it (PLT-AC-50). {%- endcomment -%}
+{%- assign _cv_head = site.data.page_headers[page.key] -%}
+{%- assign _summary_title = "Summary" -%}
+{%- if _cv_head.summary_title != nil -%}{%- assign _summary_title = _cv_head.summary_title | strip -%}{%- endif -%}
+{%- assign _experience_title = "Experience" -%}
+{%- if _cv_head.experience_title != nil -%}{%- assign _experience_title = _cv_head.experience_title | strip -%}{%- endif -%}
+{%- assign _products_title = "Products" -%}
+{%- if _cv_head.products_title != nil -%}{%- assign _products_title = _cv_head.products_title | strip -%}{%- endif -%}
+{%- assign _education_title = "Education" -%}
+{%- if _cv_head.education_title != nil -%}{%- assign _education_title = _cv_head.education_title | strip -%}{%- endif -%}
+{%- assign _languages_title = "Languages" -%}
+{%- if _cv_head.languages_title != nil -%}{%- assign _languages_title = _cv_head.languages_title | strip -%}{%- endif -%}
+{%- assign _contact_label = "Contact" -%}
+{%- if _cv_head.contact_label != nil -%}{%- assign _contact_label = _cv_head.contact_label | strip -%}{%- endif -%}
 
 <main class="cv-page{% if page.accent and page.accent != 'blue' %} page-accent--{{ page.accent }}{% endif %} max-w-7xl mx-auto px-4 sm:px-8 md:px-16 pt-10 pb-16 min-h-screen">
     <div id="cv-page-header">
         <div class="cv-dossier">
-            <span class="shard-accent cv-dossier-shard" aria-hidden="true"></span>
-            <span class="shard-accent shard-accent-beta cv-dossier-shard cv-dossier-shard--beta" aria-hidden="true"></span>
             <div class="cv-dossier-inner">
                 {% include page/page-header.html
                     key=page.key
@@ -15,7 +27,9 @@ layout: shell
                     standfirst_class="cv-dossier-standfirst font-body hidden" %}
                 <div class="cv-dossier-aside">
                     <div class="cv-contact-cta" id="contact">
-                        <span class="cv-contact-cta-label">Contact</span>
+                        {%- if _contact_label != "" -%}
+                        <span class="cv-contact-cta-label" data-content-header-text="{{ page.key }}.contact_label">{{ _contact_label }}</span>
+                        {%- endif -%}
                         {% include page/professional-connections.html wrapper_class="cv-contacts" %}
                     </div>
                 </div>
@@ -32,7 +46,8 @@ layout: shell
         {% capture cv_summary %}
         <div class="cv-summary font-body" data-content-fragment="cv/summary" data-content-quiet></div>
         {% endcapture %}
-        {% include cv/cv-box.html id="summary" title="Summary" content=cv_summary %}
+        {%- capture _summary_title_key -%}{{ page.key }}.summary_title{%- endcapture -%}
+        {% include cv/cv-box.html id="summary" title=_summary_title text_key=_summary_title_key label="Summary" content=cv_summary %}
 
         {% capture cv_experience %}
         <div id="cv-experience-list" class="cv-entry-stack" data-content-reserve aria-busy="true">
@@ -41,7 +56,8 @@ layout: shell
             <span class="cv-reserve-card" aria-hidden="true"></span>
         </div>
         {% endcapture %}
-        {% include cv/cv-box.html id="experience" title="Experience" content=cv_experience %}
+        {%- capture _experience_title_key -%}{{ page.key }}.experience_title{%- endcapture -%}
+        {% include cv/cv-box.html id="experience" title=_experience_title text_key=_experience_title_key label="Experience" content=cv_experience %}
 
         {% capture cv_products %}
         <div id="cv-products-grid" class="cv-product-grid" data-content-reserve aria-busy="true">
@@ -50,7 +66,8 @@ layout: shell
             <span class="cv-reserve-card" aria-hidden="true"></span>
         </div>
         {% endcapture %}
-        {% include cv/cv-box.html id="products" title="Products" content=cv_products %}
+        {%- capture _products_title_key -%}{{ page.key }}.products_title{%- endcapture -%}
+        {% include cv/cv-box.html id="products" title=_products_title text_key=_products_title_key label="Products" content=cv_products %}
 
         {% capture cv_education %}
         <div id="cv-education-list" class="cv-entry-stack" data-content-reserve aria-busy="true">
@@ -58,7 +75,8 @@ layout: shell
             <span class="cv-reserve-card" aria-hidden="true"></span>
         </div>
         {% endcapture %}
-        {% include cv/cv-box.html id="education" title="Education" content=cv_education %}
+        {%- capture _education_title_key -%}{{ page.key }}.education_title{%- endcapture -%}
+        {% include cv/cv-box.html id="education" title=_education_title text_key=_education_title_key label="Education" content=cv_education %}
 
         {% capture cv_languages %}
         <div id="cv-languages-list" class="cv-language-list" data-content-reserve aria-busy="true">
@@ -66,7 +84,8 @@ layout: shell
             <span class="cv-reserve-card" aria-hidden="true"></span>
         </div>
         {% endcapture %}
-        {% include cv/cv-box.html id="languages" title="Languages" content=cv_languages %}
+        {%- capture _languages_title_key -%}{{ page.key }}.languages_title{%- endcapture -%}
+        {% include cv/cv-box.html id="languages" title=_languages_title text_key=_languages_title_key label="Languages" content=cv_languages %}
 
         {% include page/timeline-section.html %}
     </div>

data/_layouts/home.html

@@ -17,7 +17,6 @@ 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">
@@ -51,18 +50,10 @@ layout: shell
           </div>
         </div>
         <div class="home-hero-portrait">
-          <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{% 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 -%}
+            <figure class="home-hero-plate">
+              <img alt="" width="1600" height="900" fetchpriority="high" decoding="sync" data-content-hero-portrait />
               <span class="ledger-frame-corners" aria-hidden="true"></span>
             </figure>
           </div>
@@ -173,8 +164,6 @@ layout: shell
       var chips = runtime.renderTagChips(entry.tags, { hrefFor: tagHref });
       var cta = runtime.renderCtaLink(href, 'Read', { className: 'home-featured-cta' });
       wrap.innerHTML = [
-        '<span class="shard-accent home-featured-shard" aria-hidden="true"></span>',
-        '<span class="shard-accent shard-accent-beta home-featured-shard home-featured-shard--beta" aria-hidden="true"></span>',
         '<div class="home-featured-lead">',
         '<div class="home-featured-rail">',
         '<span class="ledger-chip home-featured-badge">Featured</span>',

data/_layouts/projects.html

@@ -96,6 +96,12 @@ layout: shell
       runtime.slugFromDetailPattern(window.location.pathname, detailPattern);
     var selectedTag = (params.get('tag') || '').trim();
 
+    /* Section banner texts come from the page headers; a failed fetch keeps
+       the defaults (PLT-AC-50). */
+    var PAGE_KEY = {{ page.key | default: "projects" | jsonify }};
+    var headers = {};
+    var headersReady = runtime.loadPageHeaders().then(function (h) { headers = h || {}; }).catch(function () {});
+
     function entryUrl(slug) {
       return runtime.detailUrl(detailPattern, slug);
     }
@@ -235,7 +241,6 @@ layout: shell
       var line = ledgerLine(fm, 'ledger-system-icon');
 
       var html = '<article class="projects-lead">';
-      html += '<span class="shard-accent projects-lead-shard" aria-hidden="true"></span>';
       /* The plate links to the same place as the title beside it. It is out of
          the tab order so keyboard users are not made to pass the same
          destination twice, but it keeps its accessible name — the poster's alt
@@ -312,8 +317,11 @@ layout: shell
         reposRoot.innerHTML = '';
         return;
       }
-      var html = '<section class="projects-repos">';
-      html += runtime.renderSectionBanner({ kicker: 'Open source', title: 'Repositories' });
+      var reposKicker = runtime.headerText(headers, PAGE_KEY, 'repositories_kicker', 'Open source');
+      var reposTitle = runtime.headerText(headers, PAGE_KEY, 'repositories_title', 'Repositories');
+      /* Without its banner the list keeps its name for assistive tech. */
+      var html = reposTitle ? '<section class="projects-repos">' : '<section class="projects-repos" aria-label="Repositories">';
+      html += runtime.renderSectionBanner({ kicker: reposKicker, title: reposTitle });
       html += '<div class="projects-repo-list">';
       rows.forEach(function (item) {
         var fm = item.front_matter || {};
@@ -393,10 +401,9 @@ layout: shell
         var featured = runtime.pickFeatured(ordered, FEATURED_PICK) || visible[0];
         renderLead(featured);
         rest = visible.filter(function (item) { return item.slug !== featured.slug; });
-        bannerRoot.innerHTML = runtime.renderSectionBanner({
-          kicker: 'Index',
-          title: 'Other projects'
-        });
+        var othersKicker = runtime.headerText(headers, PAGE_KEY, 'others_kicker', 'Index');
+        var othersTitle = runtime.headerText(headers, PAGE_KEY, 'others_title', 'Other projects');
+        bannerRoot.innerHTML = runtime.renderSectionBanner({ kicker: othersKicker, title: othersTitle });
       }
 
       rest.forEach(function (item) { grid.appendChild(renderCard(item)); });
@@ -416,7 +423,6 @@ layout: shell
       var line = ledgerLine(fm, 'projects-hero-icon');
 
       var html = '<header class="projects-hero">';
-      html += '<span class="shard-accent projects-hero-shard" aria-hidden="true"></span>';
       html += '<div class="projects-hero-body">';
       if (line) html += line;
       var chips = runtime.renderTagChips(fm.tags, { hrefFor: tagHref });
@@ -522,7 +528,9 @@ layout: shell
 
     function loadListing() {
       showListing();
-      runtime.loadWritingIndex(collection).then(renderListing).catch(function (error) {
+      Promise.all([runtime.loadWritingIndex(collection), headersReady]).then(function (results) {
+        renderListing(results[0]);
+      }).catch(function (error) {
         console.error(error);
         state.textContent = 'Projects could not be loaded right now.';
         state.classList.remove('hidden');

data/_layouts/resources.html

@@ -6,15 +6,7 @@ layout: shell
       {% include page/listing-runtime-attrs.html
          default_collection="resources"
          default_path="/pages/sources/" %}>
-  {%- comment -%}
-    The shards live here rather than inside the shared page header include,
-    which every listing uses and which no single page may restyle — the same
-    arrangement /pages/blog/ uses for its masthead. They bracket the grid
-    rather than sitting on it: a page of many small cards has no one panel to
-    accent, so the accent goes on the space above and below the run.
-  {%- endcomment -%}
   <div class="sources-masthead">
-    <span class="shard-accent sources-masthead-shard" aria-hidden="true"></span>
     {% include page/page-header.html key=page.key listing_filter=true spacer_class="mb-8"
        header_class="sources-header mb-10 md:mb-12"
        filter_label="Filter"
@@ -29,7 +21,6 @@ layout: shell
       </section>
     </div>
     <div id="resource-pagination" class="source-pagination"></div>
-    <span class="shard-accent shard-accent-beta sources-foot-shard" aria-hidden="true"></span>
   </section>
 </main>
 

data/_layouts/shell.html

@@ -66,10 +66,6 @@
   {%- 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" />
@@ -220,7 +216,7 @@
   {% assign _all_pages = site.pages %}
 
   <!-- TopNavBar. The bar is the banner landmark. The section links are the only nav inside it. -->
-  <header class="sticky top-0 z-50 bg-surface">
+  <header class="site-topbar sticky top-0 z-50">
     <div class="flex justify-between items-center w-full px-6 sm:px-8 md:px-10 pt-5 pb-3.5 leading-none max-w-7xl mx-auto">
       <div class="flex items-center gap-3 sm:gap-4 min-w-0">
         <a href="/" aria-label="{% if _home_label != blank %}{{ _home_label }} – Home{% else %}Home{% endif %}" class="shrink-0 inline-flex items-center gap-3 site-wordmark-link">
@@ -285,8 +281,6 @@
       </div>
       </div>
     </div>
-    <!-- Tonal separator — "No-Line" design rule: background-color shift instead of a CSS border -->
-    <div class="bg-surface-container-low h-[1px]"></div>
   </header>
   <script>
     (function () {

data/assets/css/article.css

@@ -17,8 +17,8 @@
 /* Detail pages: title in left third; body starts aligned with the title */
 .text-page-main {
   align-self: start;
-  background-color: var(--color-background);
-  border: 1.5px solid var(--border-ink);
+  background-color: var(--color-surface-card);
+  border: 1px solid var(--border-ink);
   border-radius: var(--radius-card);
   padding: var(--space-md);
   width: 100%;
@@ -106,6 +106,14 @@
    overflow apply. `[jax]` stays ahead of MathJax's own container rule.
    Desktop stays inline. Do not put this overflow on html or body. */
 @media (max-width: 767px) {
+
+  /* Reading view without a box on phones */
+  .text-page-main {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+  }
+
   .article-content mjx-container:not([display="true"]),
   .article-content mjx-container[jax]:not([display="true"]) {
     display: inline-block;

data/assets/css/base.css

@@ -170,12 +170,15 @@ html {
   --type-page-lg: 2.9015rem;
   --type-section: 1.9015rem;
   --type-section-lg: 2.1515rem;
+  /* Phone steps for home band titles and card titles (PLT-AC-49). */
+  --type-section-sm: 1.375rem;
 
   /* Content titles — Newsreader Regular 400 */
   --type-title: 2.20165rem;
   --type-title-lg: 2.64165rem;
   --type-card: 1.4015rem;
   --type-card-lg: 1.5515rem;
+  --type-card-sm: 1.1875rem;
 
   /* Reading + UI — Newsreader Light 300.
      Default reading size is 1.2rem below 1024px and 1.25rem from there.
@@ -231,7 +234,7 @@ html body {
   font-family: var(--font-body);
   font-size: var(--font-size-body);
   font-weight: var(--weight-body);
-  background-color: var(--color-background);
+  background-color: var(--color-canvas);
   /* Quiet square grid on both palettes; only --color-background changes. */
   background-image:
     linear-gradient(color-mix(in srgb, var(--color-outline) 4%, transparent) 1px, transparent 1px),
@@ -397,6 +400,8 @@ html[data-theme="light"] {
   --mark-quiet-b: 9%;
   --mark-quiet-c: 3%;
   --facet-ink-mix: 82%;
+  /* Detail actions: green section primary on the gray hover mark was 4.48:1 at 82%. */
+  --action-ink-mix: 74%;
   --mk-angle: 104deg;
   --mk-s0: 0.9%;
   --mk-s1: 2.6%;
@@ -424,6 +429,7 @@ html[data-theme="dark"] {
   --mark-quiet-c: 3%;
   /* Not 100%: the YouTube red facet was 4.24:1 on its own dark mark. */
   --facet-ink-mix: 85%;
+  --action-ink-mix: 85%;
 }
 
 /* Shared mark foundation */
@@ -434,6 +440,7 @@ html[data-theme="dark"] {
 .source-facet,
 .bib-facet,
 :is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt),
+.ledger-cta:where(:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt)),
 :is(.detail-action, .detail-type-size-trigger, .article-related-section-pill, .listing-filter-trigger) {
   --mark-ink: var(--color-primary);
   --mark-1: var(--mark-a);
@@ -534,6 +541,19 @@ html[data-theme="dark"] {
   font-optical-sizing: auto;
 }
 
+.card-title,
+.ledger-card-title {
+  font-weight: var(--weight-emphasis);
+}
+
+@media (max-width: 767px) {
+  .card-title,
+  .ledger-card-title {
+    font-size: var(--type-card-sm);
+    line-height: 1.25;
+  }
+}
+
 /* Label-face meta on CV identity lines, etc. */
 .card-meta {
   font-family: var(--font-label);
@@ -568,8 +588,7 @@ html[data-theme="dark"] {
   letter-spacing: 0.04em;
 }
 
-/* Dates, kickers, section notes — body face at meta size. */
-.ledger-meta,
+/* Kickers, section notes — body face at meta size. */
 .ledger-kicker,
 .ledger-section-note {
   font-family: var(--font-body);
@@ -1035,14 +1054,19 @@ a.ledger-chip:hover {
 
 /* Dates live here. The chips and language pills inside the strip set their
    own uppercase, so the strip itself leaves case alone — running small caps
-   over a date is heavier than the date deserves. */
+   over a date is heavier than the date deserves. Meta uses mono face. */
 .ledger-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-sm);
   color: var(--color-on-surface-variant);
-  letter-spacing: 0.04em;
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-body);
+  line-height: 1.45;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
 }
 
 /* A separator is ink, not a border. --color-outline-variant is tuned for
@@ -1071,17 +1095,6 @@ a.ledger-chip:hover {
   line-height: 1;
 }
 
-/* Text CTAs carry a gentle accent underline so the clickable cue is not the
-   same gesture as the marker wash on titles. Emphasis buttons carry a
-   strong mark instead. */
-.ledger-cta:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon) {
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
-  text-decoration-thickness: 1.5px;
-  text-underline-offset: 0.48em;
-  text-underline-position: under;
-}
-
 .ledger-cta-icon,
 .ledger-cta-arrow {
   display: inline-flex;
@@ -1092,12 +1105,21 @@ a.ledger-chip:hover {
   text-decoration: none;
 }
 
-.ledger-cta:hover {
-  color: var(--color-link-hover);
+/* Plain text CTAs carry the strong highlighter mark without an underline. */
+.ledger-cta:where(:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt)) {
+  --mark-1: var(--mark-strong-a);
+  --mark-2: var(--mark-strong-b);
+  --mark-3: var(--mark-strong-c);
+  padding: 0.2rem 0.45rem;
+  text-decoration: none;
+  color: color-mix(in srgb, var(--color-primary) var(--action-ink-mix), var(--color-on-surface));
 }
 
-.ledger-cta:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt):hover>span:not(.ledger-cta-arrow):not(.ledger-cta-icon) {
-  text-decoration-color: color-mix(in srgb, var(--color-link-hover) 75%, transparent);
+.ledger-cta:where(:not(.ledger-cta--emphasis):not(.ledger-cta--emphasis-alt)):hover {
+  --mark-1: var(--mark-hover-a);
+  --mark-2: var(--mark-hover-b);
+  --mark-3: var(--mark-hover-c);
+  color: color-mix(in srgb, var(--color-primary) var(--action-ink-mix), var(--color-on-surface));
 }
 
 /* Pill read-more only. The box is the affordance, so the label line would
@@ -1248,21 +1270,11 @@ a.ledger-chip:hover {
   display: flex;
   flex-direction: column;
   background: var(--color-surface-card);
-  border: 1.5px solid var(--border-ink);
+  border: 1px solid var(--border-ink);
   border-radius: var(--radius-card);
   transition: background-color var(--motion-duration-fast) var(--motion-ease-default), border-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
-/* Light paper: match the CV disclaimer edge — 1px outline hairline, not the
-   1.5px ink frame dark mode needs for faint canvas borders. */
-:root:not([data-theme="dark"]) .ledger-card,
-:root:not([data-theme="dark"]) .ledger-system-card,
-html[data-theme="light"] .ledger-card,
-html[data-theme="light"] .ledger-system-card {
-  border-width: 1px;
-  border-color: var(--border-ink);
-}
-
 /* Drafting corner brackets — four L-corners, no labels. Pure decoration.
    Outline ink (not primary): the corners are drafting marks on the plate,
    same register as `.ledger-frame-crosshairs`, not a brand accent. */
@@ -1320,19 +1332,6 @@ html[data-theme="light"] .ledger-system-card {
   border-color: color-mix(in srgb, var(--color-primary) 10%, var(--border-ink));
 }
 
-/* Cards and rows sitting on contrast bands keep the same transparent rest
-   as the canvas cards; hover steps to surface-high-contrast. */
-.home-band--contrast .ledger-card,
-.home-band--contrast .ledger-row,
-.home-band--contrast .home-index-panel {
-  background: var(--color-surface-card-contrast);
-}
-
-.home-band--contrast .ledger-card:hover,
-.home-band--contrast .ledger-row:hover,
-.home-band--contrast .home-index-panel:hover {
-  background: var(--color-surface-high-contrast);
-}
 
 /* A project card used to end in a "Details" link pointing at the same place
    its own title points at, which is a second copy of the destination the
@@ -1368,8 +1367,33 @@ html[data-theme="light"] .ledger-system-card {
   flex: 1;
 }
 
+@media (max-width: 767px) {
+  .ledger-card-body,
+  .ledger-system-card {
+    padding: var(--space-md);
+  }
+}
+
 .ledger-card-copy {
   flex: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .ledger-card-copy {
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+  }
+}
+
+@media (max-width: 767px) {
+  .ledger-card-copy {
+    font-size: var(--type-dek);
+  }
 }
 
 .ledger-card-foot {

data/assets/css/ledger/bibliography.css

@@ -16,14 +16,6 @@
   opacity: 0.85;
 }
 
-.bib-masthead-shard {
-  top: calc(-1 * var(--space-2xl));
-  right: calc(-1 * var(--space-xl));
-  width: 16rem;
-  height: 9rem;
-  background: var(--color-secondary);
-}
-
 .bib-body {
   position: relative;
 }
@@ -34,29 +26,6 @@
   z-index: 1;
 }
 
-.bib-foot-shard {
-  left: calc(-1 * var(--space-xl));
-  bottom: calc(-1 * var(--space-lg));
-  width: 14rem;
-  height: 8rem;
-  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
-}
-
-@media (max-width: 1023px) {
-  .bib-masthead-shard {
-    top: calc(-1 * var(--space-xl));
-    right: calc(-1 * var(--space-lg));
-    width: 12rem;
-    height: 8rem;
-  }
-
-  .bib-foot-shard {
-    left: calc(-1 * var(--space-lg));
-    width: 10rem;
-    height: 7rem;
-  }
-}
-
 .bib-hidden {
   display: none !important;
 }

data/assets/css/ledger/chrome.css

@@ -29,6 +29,45 @@
   outline: none;
 }
 
+/* Translucent top bar over canvas ground. */
+.site-topbar {
+  background-color: color-mix(in srgb, var(--color-canvas) 92%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-gentle-divider);
+}
+
+/* Boxed controls for theme and mobile menu toggles. */
+#theme-toggle-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--color-outline-variant);
+  background-color: var(--color-surface-card);
+  color: var(--color-on-surface);
+  border-radius: var(--radius-card);
+}
+
+#mobile-menu-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--color-outline-variant);
+  background-color: var(--color-surface-card);
+  color: var(--color-on-surface);
+  border-radius: var(--radius-card);
+}
+
+#theme-toggle-btn:hover,
+#theme-toggle-btn:focus-visible {
+  color: var(--color-primary);
+  border-color: var(--color-outline);
+}
+
+#mobile-menu-btn:hover,
+#mobile-menu-btn:focus-visible {
+  color: var(--color-primary);
+  border-color: var(--color-outline);
+}
+
 .site-wordmark-link {
   display: inline-flex;
   align-items: center;
@@ -99,8 +138,10 @@
 }
 
 /* The rail needs room for six labels before it earns its place; below that
-   the Explore menu carries the same links. */
-@media (min-width: 1024px) {
+   the Explore menu carries the same links. At 1024px and 1240px the six
+   labels ran under the wordmark on the left and the controls on the right,
+   so the rail starts at 1280px (PLT-AC-49 item 14). */
+@media (min-width: 1280px) {
   .site-rail {
     display: flex;
   }
@@ -110,6 +151,14 @@
   }
 }
 
+/* Between 1280px and 1439px the bar is only just wide enough; the tighter
+   gap keeps clear space beside the wordmark and the controls. */
+@media (min-width: 1280px) and (max-width: 1439px) {
+  .site-rail {
+    gap: var(--space-sm);
+  }
+}
+
 /* Theme (and Explore on narrow viewports) share the rail's label size. */
 #theme-toggle .marginalia,
 #mobile-menu-btn .marginalia,

data/assets/css/ledger/cv.css

@@ -62,46 +62,6 @@ html[data-theme="light"] .cv-product {
   }
 }
 
-.cv-dossier-shard {
-  top: -4rem;
-  right: -3rem;
-  width: 16rem;
-  height: 16rem;
-  background: var(--color-secondary);
-}
-
-.cv-dossier-shard--beta {
-  top: auto;
-  right: auto;
-  left: -3rem;
-  bottom: -4rem;
-  width: 12rem;
-  height: 12rem;
-  background: var(--color-primary);
-}
-
-/* A shard is a corner accent. Between the 640px suppression breakpoint and the
-   desktop layout the panel is narrow enough that a 16rem shard stops being a
-   corner and starts crossing the title — "Curriculum Vitæ" was reading over a
-   tonal step at 768px. Same correction on the writing lead and the rascunhos
-   masthead, which had the same collision. */
-@media (max-width: 1023px) {
-  .cv-dossier-shard {
-    top: -2.5rem;
-    right: -2rem;
-    width: 9rem;
-    height: 9rem;
-  }
-
-  .cv-dossier-shard--beta {
-    top: auto;
-    left: -2rem;
-    bottom: -2.5rem;
-    width: 7rem;
-    height: 7rem;
-  }
-}
-
 .cv-dossier-inner {
   position: relative;
   z-index: 1;