wrap intro + add chapterEnd

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 {