fix(renderer-css): give each section its own grid in print for break-inside: avoid

Sections had an inline style="display: contents" which made break-inside:
avoid via ::part() ineffective — inline styles outrank external ::part()
rules, so the constraint was silently ignored.

Remove the redundant inline style (the CSS already sets display:contents).
Add a @media print block that promotes song-grid to display:block and each
section to its own CSS grid (using the same inherited --beat-cols /
--min-beat-width variables), with break-inside: avoid. Rows continue to
use subgrid, now referencing the section grid rather than song-grid.

Author: nelstrom

packages/grigson/src/renderers/html.test.ts

@@ -626,10 +626,9 @@ describe('HtmlRenderer', () => {
   });
 
   describe('section structure', () => {
-    it('section element has part="section" and display:contents style', () => {
+    it('section element has part="section"', () => {
       const html = renderer.render(parseSong('[Verse]\n| C |\n'));
       expect(html).toContain('part="section"');
-      expect(html).toContain('display: contents');
     });
 
     it('section label is rendered inside section element', () => {

packages/grigson/src/renderers/html.ts

@@ -729,7 +729,7 @@ export class HtmlRenderer implements GrigsonRenderer {
     html += `<div part="song-grid">`;
 
     for (const section of source.sections) {
-      html += `<section part="section" style="display: contents">`;
+      html += `<section part="section">`;
 
       if (section.label !== null) {
         html += `<h2 part="section-label">${section.label}</h2>`;

packages/grigson/src/renderers/renderer-css.ts

@@ -350,5 +350,22 @@ export function getRendererStyles(typeface: string = 'sans'): string {
         font-size: var(--grigson-simile-font-size);
         transform: translateY(var(--grigson-simile-offset));
       }
+
+      /* ── Print: give each section its own grid so break-inside: avoid works ── */
+      @media print {
+        [part="song-grid"] {
+          display: block;
+        }
+        [part="section"] {
+          display: grid;
+          grid-template-columns: auto repeat(var(--beat-cols), minmax(var(--min-beat-width), 1fr) auto);
+          row-gap: var(--grigson-row-gap);
+          break-inside: avoid;
+          margin-bottom: var(--grigson-section-gap);
+        }
+        [part="section-label"] {
+          margin-top: 0;
+        }
+      }
     `;
 }