Use a transparent lettering-only VDMT homepage wordmark

NOTICE.md

@@ -8,4 +8,4 @@ The built website uses MathJax 3.2.2 (Apache-2.0) for SVG mathematical typesetti
 
 Python build dependencies retain their own licenses: Mistune (BSD-3-Clause), Jinja2 (BSD-3-Clause), PyYAML (MIT), Pillow (HPND), Beautiful Soup (MIT), and Playwright (Apache-2.0). They are development/build dependencies, not copies of the theory.
 
-The VDM wordmark is a resized derivative of the author-supplied branding. The small mark and favicon use official VDM branding: the build requests https://www.vdm.io/VDM.png first and can use the official organization's GitHub avatar if that endpoint rejects acquisition. The selected source and digest are recorded, not silently substituted. Brand assets are excluded from the prose and code licenses; no trademark or endorsement rights are granted.
+The VDM wordmark is a transparent lettering-only derivative of the author-supplied branding, extended with THEORY on the same baseline; original glyphs are reused where available, with matching R/Y forms. The small mark and favicon use official VDM branding: the build requests https://www.vdm.io/VDM.png first and can use the official organization's GitHub avatar if that endpoint rejects acquisition. The selected source and digest are recorded, not silently substituted. Brand assets are excluded from the prose and code licenses; no trademark or endorsement rights are granted.

tests/test_branding.py

@@ -0,0 +1,40 @@
+"""Protect the transparent wordmark asset and its single-line presentation. MIT."""
+from pathlib import Path
+import unittest
+from PIL import Image
+from bs4 import BeautifulSoup
+from jinja2 import Environment, FileSystemLoader
+from scripts.build import Article
+
+ROOT = Path(__file__).resolve().parents[1]
+
+
+class WordmarkTests(unittest.TestCase):
+    def test_png_has_transparent_canvas_and_visible_lettering(self):
+        with Image.open(ROOT / 'web/static/wordmark.png') as image:
+            self.assertEqual(image.format, 'PNG')
+            self.assertGreater(image.width, image.height * 10)
+            alpha = image.convert('RGBA').getchannel('A')
+            self.assertEqual(alpha.getextrema()[0], 0)
+            self.assertGreater(alpha.getextrema()[1], 240)
+            for x, y in ((0, 0), (image.width - 1, 0), (0, image.height - 1), (image.width - 1, image.height - 1)):
+                self.assertEqual(alpha.getpixel((x, y)), 0)
+            histogram = alpha.histogram()
+            self.assertGreater(histogram[0], image.width * image.height // 4)
+            self.assertGreater(sum(histogram[241:]), image.width * image.height // 4)
+
+    def test_homepage_uses_one_image_without_a_separate_caption(self):
+        template = Environment(loader=FileSystemLoader(ROOT / 'web/templates')).get_template('page.html')
+        article = Article('index.md', {'title': 'Home', 'section': 'Overview'}, '', b'', '/', 'index.html')
+        markup = template.render(article=article, config={'title': 'VDMT', 'url': 'https://theory.vdm.io', 'version': '0.1.0'}, sections=[], toc=[], commit='test')
+        wordmark = BeautifulSoup(markup, 'html.parser').select_one('.wordmark')
+        self.assertIsNotNone(wordmark)
+        self.assertEqual(len(wordmark.select('img')), 1)
+        self.assertEqual(wordmark.select_one('img')['src'], '/assets/wordmark.png')
+        self.assertEqual(wordmark.select_one('img')['alt'], 'Vast Development Method Theory')
+        self.assertEqual(wordmark.get_text(strip=True), '')
+        self.assertFalse((ROOT / 'web/static/wordmark.webp').exists())
+
+
+if __name__ == '__main__':
+    unittest.main()

web/static/BRAND-NOTICE.txt

@@ -1,6 +1,10 @@
 VDM branding identifies this official Vast Development Method publication.
-wordmark.webp is a resized derivative of vast_development_method.jpg supplied
-by the publication's originator.
+wordmark.png is a transparent, lettering-only derivative of the originator's
+supplied vast_development_method.jpg. The original VAST DEVELOPMENT METHOD
+lettering is isolated from its decorative background. THEORY is composed on the
+same baseline, reusing the source T/H/E/O glyphs and matching R/Y
+letterforms. No claim is made to have recovered or redistributed the original
+font file. The image contains no background plate or decorative mosaic.
 
 The small mark and favicon are derived from official VDM branding. The build
 first requests https://www.vdm.io/VDM.png. When that endpoint rejects automated

web/static/wordmark.css

@@ -0,0 +1,24 @@
+/* Transparent, lettering-only homepage wordmark. SPDX-License-Identifier: MIT */
+.wordmark {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 4px 0 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.wordmark img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  background: transparent;
+}
+/* Keep the same transparent asset and letterforms when the effective theme
+   changes, including both system changes and the reader's manual override. */
+:root[data-theme="dark"] .wordmark img {
+  filter: brightness(1.16) saturate(.94);
+}

web/templates/page.html

@@ -22,6 +22,7 @@
   window.MathJax = {tex:{inlineMath:[['\\(','\\)']],displayMath:[['$$','$$']],processEscapes:true},svg:{fontCache:'global'},options:{skipHtmlTags:['script','noscript','style','textarea','pre','code']}};
   </script>
   <link rel="stylesheet" href="/assets/site.css">
+  <link rel="stylesheet" href="/assets/wordmark.css">
   <script defer src="/assets/vendor/mathjax/tex-svg.js"></script>
   <script type="module" src="/assets/site.js"></script>
 </head>
@@ -50,7 +51,7 @@
   </aside>
   <main id="main" tabindex="-1">
     <div class="article-meta"><span class="eyebrow">{{ article.meta.section }}</span><span>{{ minutes }} min read · Edition {{ config.version }}</span></div>
-    {% if article.path == 'index.md' %}<div class="wordmark"><img src="/assets/wordmark.webp" width="440" height="112" alt="Vast Development Method"><span>THEORY</span></div>{% endif %}
+    {% if article.path == 'index.md' %}<div class="wordmark"><img src="/assets/wordmark.png" width="1192" height="75" alt="Vast Development Method Theory" decoding="async"></div>{% endif %}
     <div class="article-tools" aria-label="Article formats and sharing"><a href="{{ markdown_url }}">Read Markdown</a><a href="{{ markdown_url }}" download>Download Markdown</a><button type="button" data-copy="{{ canonical }}">Copy link</button><button type="button" data-copy="{{ citation }}">Cite</button><a href="{{ source_url }}">Source</a></div>
     <article class="prose">{{ article.rendered|safe }}</article>
     <div class="evidence-note"><span>Evidence profile</span><strong>{{ article.meta.evidence }}</strong><a href="/foundations/epistemic-status/">How to read a claim</a></div>