Tune layout scale per impeccable layout rubric

Three reversible changes tuning the example-page layout against
https://skills.sh/pbakaus/impeccable/layout:

  #1 h1 clamp 5.75rem → 3.75rem (vw scaling 7 → 4.5). Affects all
     151 pages with an h1. Short titles like "Hello World" stop
     swallowing the viewport while long titles remain readable.

  #5 Notes section downweighted from <h2>Notes</h2> to an eyebrow,
     so it reads as a tail of the walkthrough rather than a peer
     of "Run the complete example". Playground h2 bumped to match
     its rank as the page's second major beat. Affects all 109
     example pages.

  #6 .cell-banner--1 (108 examples + 3 prototypes) gains a
     margin-block of var(--space-6) and figcaption max-width of
     42ch, so single-figure banners breathe and captions
     constrain to a comfortable measure.

All 39 tests pass; SEO/cache lint clears 110 pages.

Author: claude

public/prototyping/layout-banner-pair.html

@@ -70,8 +70,8 @@ <h1>Mutability</h1>
 print(ordered)
 print(numbers)</code></pre></div><div class="cell-output"><p class="cell-label">Output</p><pre><code>[1, 2, 3]
 [3, 1, 2]</code></pre></div></div></section></section>
-  <h2>Notes</h2>
-  <ul><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
+  <p class="eyebrow">Notes</p>
+  <ul class="notes-list"><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
   <section class="playground" aria-label="Editable runnable example">
     <h2>Run the complete example</h2>
     <div class="runner-grid">

public/prototyping/layout-banner-single.html

@@ -70,8 +70,8 @@ <h1>Mutability</h1>
 print(ordered)
 print(numbers)</code></pre></div><div class="cell-output"><p class="cell-label">Output</p><pre><code>[1, 2, 3]
 [3, 1, 2]</code></pre></div></div></section></section>
-  <h2>Notes</h2>
-  <ul><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
+  <p class="eyebrow">Notes</p>
+  <ul class="notes-list"><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
   <section class="playground" aria-label="Editable runnable example">
     <h2>Run the complete example</h2>
     <div class="runner-grid">

public/prototyping/layout-banner-trio.html

@@ -70,8 +70,8 @@ <h1>Mutability</h1>
 print(ordered)
 print(numbers)</code></pre></div><div class="cell-output"><p class="cell-label">Output</p><pre><code>[1, 2, 3]
 [3, 1, 2]</code></pre></div></div></section><div class="cell-banner cell-banner--1"><figure><svg viewBox="0 0 220 185" width="220" height="185" xmlns="http://www.w3.org/2000/svg"><text x="0" y="12" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">TUPLE — FROZEN</text><rect x="0" y="18" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="34.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="48" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="64.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="30" x2="80.03839178306819" y2="42.331318020349656" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 78.57091899120806,44.71596130712238 81.50586457492832,39.946674733576934" fill="#521000"/><line x1="60" y1="60" x2="79.83670230054477" y2="49.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 81.16418180504282,51.784017841027215 78.50922279604673,46.85337968146303" fill="#521000"/><rect x="88" y="32" width="110" height="28" fill="rgba(82, 16, 0, 0.05)" stroke="#521000" stroke-width="1.0"/><text x="143.0" y="50.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">("python",)</text><text x="0" y="100" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">NO .APPEND</text><rect x="0" y="108" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="124.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="138" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="154.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="120" x2="80.03839178306819" y2="132.33131802034967" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 78.57091899120806,134.7159613071224 81.50586457492832,129.94667473357694" fill="#521000"/><line x1="60" y1="150" x2="79.83670230054477" y2="139.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 81.16418180504282,141.7840178410272 78.50922279604673,136.85337968146303" fill="#521000"/><rect x="88" y="122" width="110" height="28" fill="rgba(82, 16, 0, 0.05)" stroke="#521000" stroke-width="1.0"/><text x="143.0" y="140.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">("python",)</text><text x="150" y="170" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="9" fill="rgba(82, 16, 0, 0.7)" text-anchor="middle">tuples raise AttributeError</text></svg><figcaption>When in doubt, reach for the immutable shape.</figcaption></figure></div></section>
-  <h2>Notes</h2>
-  <ul><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
+  <p class="eyebrow">Notes</p>
+  <ul class="notes-list"><li>Lists and dictionaries are mutable; strings and tuples are immutable.</li><li>Aliasing is useful, but copy mutable containers when independent changes are needed.</li><li>Pay attention to whether an operation mutates in place or returns a new value.</li></ul>
   <section class="playground" aria-label="Editable runnable example">
     <h2>Run the complete example</h2>
     <div class="runner-grid">

public/site.3611579bfe10.css public/site.2971e784afe0.csspublic/site.3611579bfe10.css renamed to public/site.2971e784afe0.css

@@ -108,8 +108,8 @@ def render_article(example: dict, *, banners: dict[str, str] | None = None) -> s
     <p class="meta">{html.escape(example['summary'])}</p>
   </section>
   <section class="literate-program" aria-label="Annotated code walkthrough">{walkthrough}</section>
-  <h2>Notes</h2>
-  <ul>{notes}</ul>
+  <p class="eyebrow">Notes</p>
+  <ul class="notes-list">{notes}</ul>
   <section class="playground" aria-label="Editable runnable example">
     <h2>Run the complete example</h2>
     <div class="runner-grid">

public/site.css

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.3611579bfe10.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '1b40559f6f00'
+ASSET_PATHS = {'SITE_CSS': '/site.2971e784afe0.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = '5cdfaecba715'

scripts/build_prototypes.py

@@ -6,8 +6,8 @@ <h1>__TITLE__</h1>
     <p class="meta">__SUMMARY__</p>
   </section>
   <section class="literate-program" aria-label="Annotated code walkthrough">__WALKTHROUGH__</section>
-  <h2>Notes</h2>
-  <ul>__NOTES__</ul>
+  <p class="eyebrow">Notes</p>
+  <ul class="notes-list">__NOTES__</ul>
   __SEE_ALSO__
   <nav class="example-nav" aria-label="Example navigation">__PREVIOUS_LINK____NEXT_LINK__</nav>
   <section class="playground" aria-label="Editable runnable example">