Checkpoint line-grid renderer state

public/css/style.css

@@ -116,6 +116,9 @@ body.switched {
     --book-width: 2727px;
     --book-height: 1691px;
     --book-scale: 1;
+    --page-line-count: 25;
+    --story-line-height: calc((var(--book-height) * 0.85) / var(--page-line-count));
+    --story-font-size: calc(var(--story-line-height) / 1.45);
     font-size: calc(var(--book-height)/(34 * 1.5));
     --img-aspect-ratio: 1.613;
     --aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));  
@@ -403,7 +406,6 @@ ol.choice {
     padding: 0 3rem 1rem 1rem;
     /* border: 1px dotted rgba(200,200,200,1); */
     overflow: visible;
-    overflow-y: auto;
     opacity: 0.95;
     mix-blend-mode: darken;
 }
@@ -415,7 +417,8 @@ ol.choice {
     text-align: justify;
     text-justify: inter-word;
     margin-bottom: 0;
-    line-height: 1.5;
+    font-size: var(--story-font-size);
+    line-height: var(--story-line-height);
     will-change: transform;
     transform: translateY(0);
 }
@@ -485,6 +488,7 @@ ol.choice {
 
 #page_left {
     left: 11.5%;
+    overflow-y: auto;
 }
 
 #page_right {
@@ -938,17 +942,18 @@ html[data-process-state="playing-ready"] * {
 #story p {
   text-align: justify;
   text-justify: inter-word;
-  margin-bottom: 1.2em;
-  line-height: 1.45;
+  font-size: var(--story-font-size);
+  margin: 0;
+  line-height: var(--story-line-height);
 }
 
 #story p.story-chapter-heading {
   position: relative;
   height: auto;
   text-align: center;
-  font-size: 1.2rem;
+  font-size: var(--story-font-size);
   font-style: italic;
-  line-height: 1.45;
+  line-height: var(--story-line-height);
 }
 
 #story p.story-section-heading {
@@ -956,7 +961,7 @@ html[data-process-state="playing-ready"] * {
   height: auto;
   text-align: center;
   font-style: normal;
-  line-height: 1.45;
+  line-height: var(--story-line-height);
 }
 
 /* Typography for word elements in rendered paragraphs */