wrap intro + add chapterEnd

css/modules/_layout.scss

@@ -11,7 +11,9 @@ $indent: 10mm;
 $unit: calc($content-w/7);
 
 :root{
-    --unit: #{$unit};
+    // --content-w: #{$content-w};
+    // --unit: calc(var(--content-w)/7);
+    --unit: 80px;
 }
 
 
@@ -139,15 +141,6 @@ $unit: calc($content-w/7);
 }
 
 
-#section__content{
-    break-before: right;
-
-}
-
-
-.page-break{
-    break-before: page;
-}
 
 
 #section__content h1 .h1-count{
@@ -159,19 +152,8 @@ $unit: calc($content-w/7);
 }
 
 .chapter{
-    break-before: left;
-}
-
-.intro{
-    color: red;
+    page: chapter;
+    break-before: page;
 }
 
 
-// #section__content{
-//     break-before: left;
-// }
-
-
-// #section__content h1:first-of-type{
-//     break-before: right;
-// }

css/modules/_notes.scss

@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     left: 0;
+    color: blue;
     //   color: red;
 }
 

css/modules/_num-paragraph.scss

@@ -17,11 +17,8 @@ ol[type="1"]{
 
 
 
-ol[type="1"].ol-clone{
-    break-before: column;
-     break-after: avoid;
-     top: 0;
-     left: calc($content-w/2 + $gap/2)
+.intro ol[type="1"]{
+    left: 0px;
 }
 
 

css/modules/_text.scss

@@ -61,16 +61,6 @@ blockquote p{
     padding-left: 2mm;
 }
 
-// blockquote u{
-//     text-decoration: none;
-//     text-transform: uppercase;
-//     font-size: var(--fs-small);
-//     color: red;
-// }
-
-// u{
-//     color: red;
-// }
 
 
 ul{
@@ -79,6 +69,9 @@ ul{
 
 
 
+
+// THESE --------------------------------------------------
+
 .p-these{
     font-weight: 500;
     margin-bottom: calc(var(--baseline)*0.5);
@@ -97,3 +90,29 @@ ul{
     margin-bottom: calc(var(--baseline)*1);
 }
 
+
+
+// INTRO --------------------------------------------------
+
+
+
+
+.has-intro-1-paragraph .intro,
+.has-intro .intro{
+    break-after: right;
+}
+.intro{
+    color: red;
+    p{
+        font-size: var(--fs-intro);
+        padding-left: calc(var(--unit)*1);
+        line-height: 1.4; 
+    }
+}
+
+
+.chapter-end{
+    width: 20px;
+    height: 20px;
+    background-color: green;
+}

css/modules/_titles.scss

@@ -16,18 +16,21 @@
     // }
 
     h1{
-        // break-before: page;
-        break-after: page;
 
-        position: absolute;
-        left: 0;
-        top: 0;
+     
+        // break-before: page;
+        // break-after: page;
+
+        // position: absolute;
+        // left: 0;
+        // top: 0;
 
         height: $content-h;
         // background-color: red;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        // display: none;
     }
 
 

css/modules/_var.scss

@@ -4,8 +4,9 @@
     --font-quote: 'Louize', sans-serif;
     --font-sans: 'Basis Grotesque Pro', sans-serif;
     --font-size: 12px;
-     --fs-medium: 15px;
+    --fs-medium: 15px;
     --fs-small: 9.8px;
+    --fs-intro: 16.5px;
     --baseline: 18px;
     --indent: 26px;
     --fs-num: 12px;

css/style.css

@@ -7,6 +7,7 @@
   --font-size: 12px;
   --fs-medium: 15px;
   --fs-small: 9.8px;
+  --fs-intro: 16.5px;
   --baseline: 18px;
   --indent: 26px;
   --fs-num: 12px;
@@ -33,7 +34,7 @@ body {
 }
 
 :root {
-  --unit: 20.2857142857mm;
+  --unit: 80px;
 }
 
 @media print {
@@ -235,16 +236,6 @@ body {
     }
   }
 }
-#section__content {
-  -moz-column-break-before: right;
-       break-before: right;
-}
-
-.page-break {
-  -moz-column-break-before: page;
-       break-before: page;
-}
-
 #section__content h1 .h1-count {
   string-set: chapterCount content(text);
 }
@@ -254,12 +245,9 @@ body {
 }
 
 .chapter {
-  -moz-column-break-before: left;
-       break-before: left;
-}
-
-.intro {
-  color: red;
+  page: chapter;
+  -moz-column-break-before: page;
+       break-before: page;
 }
 
 sup {
@@ -333,6 +321,27 @@ ul {
   margin-bottom: calc(var(--baseline) * 1);
 }
 
+.has-intro-1-paragraph .intro,
+.has-intro .intro {
+  -moz-column-break-after: right;
+       break-after: right;
+}
+
+.intro {
+  color: red;
+}
+.intro p {
+  font-size: var(--fs-intro);
+  padding-left: calc(var(--unit) * 1);
+  line-height: 1.4;
+}
+
+.chapter-end {
+  width: 20px;
+  height: 20px;
+  background-color: green;
+}
+
 [data-id=section__content] {
   position: relative;
 }
@@ -351,21 +360,11 @@ ol[type="1"]::after {
   opacity: 0.5;
 }
 
-ol[type="1"].ol-clone {
-  -moz-column-break-before: column;
-       break-before: column;
-  -moz-column-break-after: avoid;
-       break-after: avoid;
-  top: 0;
-  left: 73mm;
+.intro ol[type="1"] {
+  left: 0px;
 }
 
 #section__content h1 {
-  -moz-column-break-after: page;
-       break-after: page;
-  position: absolute;
-  left: 0;
-  top: 0;
   height: 215mm;
   display: flex;
   flex-direction: column;
@@ -525,6 +524,7 @@ ol[type="1"].ol-clone {
   position: absolute;
   top: 0;
   left: 0;
+  color: blue;
 }
 
 .body-note {