.

diff --git a/developer/document/style/article_generic.js b/developer/document/style/article_generic.js
index ea8a926..92a8418 100644 (file)
--- a/developer/document/style/article_generic.js
+++ b/developer/document/style/article_generic.js
@@ -1,6 +1,6 @@
 /*
   Sets basic document theme colors and dimensions.
-  Sets width immediately so layout-based pagination is accurate.
+  Groups parameters into semantic dictionaries (layout, typography).
 */
 window.StyleRT = window.StyleRT || {};
 
@@ -8,39 +8,37 @@ window.StyleRT.article_generic = function() {
   const RT = window.StyleRT;
   const theme = RT.active_theme ? RT.active_theme() : {};
 
+  // 1. Theme and Global Flow
   const body = document.body;
-  
-  // 1. Basic Theme Colors
   body.style.backgroundColor = theme.background || 'hsl(0, 0%, 0%)';
   body.style.color = theme.foreground || 'hsl(42, 100%, 80%)';
   body.style.fontFamily = '"Noto Sans JP", sans-serif';
-  
-  // 2. Global Flow Reset
   body.style.display = 'block'; 
   body.style.margin = '0';
   body.style.padding = '0';
 
-  // 3. Dimensions
-  // We apply the width to the body now so that getBoundingClientRect() 
-  // in the paginator reflects the final text wrapping.
-  body.style.maxWidth = '50rem';
+  // 2. Settings: Layout Group
+  RT.layout = {
+    page_height: 1056,
+    page_width: '50rem',
+    page_margin: '4rem auto 6rem auto',
+    page_padding: '3rem'
+  };
+
+  // 3. Settings: Typography Group
+  RT.typography = {
+    orphans: 4,
+    widows: 4,
+    h1_align: 'center'
+  };
+
+  // 4. Apply Dimensions and Alignment
+  body.style.maxWidth = RT.layout.page_width;
   body.style.margin = '0 auto'; 
-  
-  // 4. Centered Headers
-  // We apply this via a quick style injection or direct selection
+
   const h1s = document.querySelectorAll('h1');
   h1s.forEach(h => {
-    h.style.textAlign = 'center';
+    h.style.textAlign = RT.typography.h1_align;
     h.style.width = '100%';
   });
-
-  // 5. Layout Variables
-  // We store the target page height for the paginator to find.
-  RT.page_height = 1056; 
-
-  // Typographic constraints for future line-splitting logic
-  RT.orphans = 4;
-  RT.widows = 4;
-  
-  if (RT.debug) RT.debug.log('style', 'Article generic setup: H1 centered, orphans/widows set to 4.');
 };

diff --git a/developer/document/style/page_css_pn.js b/developer/document/style/page_css_pn.js
index d57365f..3e5dc08 100644 (file)
--- a/developer/document/style/page_css_pn.js
+++ b/developer/document/style/page_css_pn.js
@@ -1,19 +1,21 @@
 /*
   Defines the appearance of the <RT-PAGE> container.
-  Includes a page counter in the bottom-right and typographic constraints.
+  Uses grouped settings from RT.layout and RT.typography.
 */
 window.StyleRT = window.StyleRT || {};
 
 window.StyleRT.page = function() {
   const RT = window.StyleRT;
   const style_id = 'rt-page-styles';
-  const fixed_height = RT.page_height ? `${RT.page_height}px` : '1056px';
+  
+  // Safety fallbacks in case article_generic failed or hasn't run
+  const layout = RT.layout || { page_height: 1056, page_margin: '4rem auto' };
+  const typo = RT.typography || { orphans: 4, widows: 4 };
 
   if (!document.getElementById(style_id)) {
     const style_el = document.createElement('style');
     style_el.id = style_id;
     
-    // We use CSS counters to automatically number the pages
     style_el.textContent = `
       body {
         counter-reset: rt-page-counter;
@@ -21,38 +23,36 @@ window.StyleRT.page = function() {
 
       rt-page {
         display: block;
-        max-width: 50rem;
+        max-width: ${layout.page_width || '50rem'};
         width: 100%;
-        margin: 4rem auto 6rem auto;
-        padding: 3rem;
+        margin: ${layout.page_margin};
+        padding: ${layout.page_padding || '3rem'};
         box-sizing: border-box;
         background-color: hsl(0, 0%, 0%);
         border: 1px solid hsl(42, 100%, 50%);
-        height: ${fixed_height};
+        height: ${layout.page_height}px;
         position: relative;
         filter: drop-shadow(8px 12px 40px hsl(44, 96%, 47%));
         counter-increment: rt-page-counter;
       }
 
-      /* Typographic Constraints */
       rt-page p {
-        orphans: ${RT.orphans || 4};
-        widows: ${RT.widows || 4};
+        orphans: ${typo.orphans};
+        widows: ${typo.widows};
       }
 
-      /* The Page Counter */
+      /* Brightened Page Counter */
       rt-page::after {
         content: "Page " counter(rt-page-counter);
         position: absolute;
         bottom: 1.5rem;
         right: 3rem;
-        font-family: sans-serif;
-        font-size: 0.8rem;
-        color: hsl(42, 100%, 20%); /* Faded gold */
+        font-family: "Noto Sans JP", sans-serif;
+        font-size: 0.9rem;
+        font-weight: bold;
+        color: hsl(42, 100%, 75%); /* Much brighter, high-contrast gold */
       }
     `;
     document.head.appendChild(style_el);
   }
-
-  if (RT.debug) RT.debug.log('style', `Pages numbered and fixed at ${fixed_height}.`);
 };

diff --git a/developer/document/style/paginate_by_element.js b/developer/document/style/paginate_by_element.js
index 0da6ef3..997383b 100644 (file)
--- a/developer/document/style/paginate_by_element.js
+++ b/developer/document/style/paginate_by_element.js
@@ -8,7 +8,7 @@ window.StyleRT = window.StyleRT || {};
 window.StyleRT.paginate_by_element = function() {
   const RT = window.StyleRT;
   const body = document.body;
-  const limit = RT.page_height || 1000; 
+  const limit = RT.layout.page_height || 1000; 
 
   const elements = Array.from(body.children).filter(el => 
     el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE' && el.tagName !== 'RT-PAGE'