sectionedFootnotes

css/modules/_footnotes.scss

@@ -1,48 +1,88 @@
-@page {
-    @footnote {
-      float: bottom;
-      footnote-policy: auto;
-    }
-  }
+// @page {
+//     @footnote {
+//       float: bottom;
+//       footnote-policy: auto;
+//     }
+//   }
 
-  .pagedjs_footnote_content{
-  padding-top: calc(var(--baseline)*1);
-  }
+//   .pagedjs_footnote_content{
+//   padding-top: calc(var(--baseline)*1);
+//   }
   
-.inline-note { 
-  float: footnote; 
-  footnote-policy: auto;
-  font-size: 9px;
-  line-height: calc(var(--baseline)*0.8);
-  padding-left: var(--indent);
-  position: relative;
-  // font-weight: 100;
+// .inline-note { 
+//   float: footnote; 
+//   footnote-policy: auto;
+//   font-size: 9px;
+//   line-height: calc(var(--baseline)*0.8);
+//   padding-left: var(--indent);
+//   position: relative;
+//   // font-weight: 100;
 
-  &::marker{
-    display: none;
-    content: "";
-  }
+//   &::marker{
+//     display: none;
+//     content: "";
+//   }
   
-}
+// }
 
 
-[data-counter-note]{
-&::before{
-    content: attr(data-counter-note) ".";
-    position: absolute;
-    // left: calc(var(--indent)*-1);
-    left: 0px;
-  }
-}
+// [data-counter-note]{
+// &::before{
+//     content: attr(data-counter-note) ".";
+//     position: absolute;
+//     left: 0px;
+//   }
+// }
 
-[data-footnote-call]{
-      font-size: 9px;
-}
+// [data-footnote-call]{
+//       font-size: 9px;
+// }
 
 
 .footnote-ref{
   font-family: var(--font-title);
   line-height: 0;
-  font-size: 9px;
+  font-size: var(--fs-small);
   font-weight: 500;
+}
+
+
+#footnotes{
+  break-before: right;
+
+   .title-part{
+        font-family: var(--font-title);
+        font-size: 1.1rem;
+        font-weight: 500;
+        line-height: calc(var(--baseline)*1.2);
+        margin-top: calc(var(--baseline)*2);
+        padding-bottom: calc(var(--baseline)*1);
+        padding-right: 2ch;
+        padding-left: 2ch;
+        text-align: center;
+        text-wrap: balance;
+        &::before{
+           content: attr(data-part-number) ". " 
+        }
+    }
+
+    li{
+      font-size: var(--fs-small);
+
+      // &::marker{
+      //   font-family: var(--font-title);
+      //   font-weight: 500;
+      // }
+    }
+
+    .footnote-back{
+      display: none;
+    }
+
+  
+
+}
+
+[data-id="footnotes"][data-split-from] > :first-child {
+  margin-top: 0;
 }

css/modules/_layout.scss

@@ -9,8 +9,8 @@
         marks: crop;
     }
     @page:left {
-        margin-left: 22mm;
-        margin-right: 22mm;
+        margin-left: 18mm;
+        margin-right: 26mm;
         @bottom-left {
             content: counter(page);
             font-family: var(--font-title);
@@ -24,8 +24,8 @@
         // }
     }
     @page:right {
-        margin-left: 32mm;
-        margin-right: 22mm;
+        margin-left: 26mm;
+        margin-right: 18mm;
         @bottom-right {
             content: counter(page);
             font-family: var(--font-title);
@@ -44,7 +44,7 @@
             transform: rotate(90deg);
             text-align: left;
             position: relative;
-            left: 18mm;
+            left: 14mm;
             padding-left: 5px;
         }
             

css/modules/_text.scss

@@ -39,8 +39,8 @@ ol[type="1"] + p{
 blockquote{
 
     padding-left: calc(var(--indent)*1);
-    font-size: 9px;
-    line-height: calc(var(--baseline)*0.75);
+    font-size: var(--fs-small);
+    // line-height: calc(var(--baseline)*0.75);
     margin-top: calc(var(--baseline)*0.5);
     margin-bottom: calc(var(--baseline)*0.5);
     
@@ -55,12 +55,8 @@ blockquote + ol + p{
 
 
 .these{
-
-    font-family: var(--font-title);
-    // color: red;
-    
+    font-family: var(--font-title);    
     margin-bottom: calc(var(--baseline)*1);
-
 }
 
 

css/modules/_titles.scss

@@ -5,6 +5,7 @@
     h1, h2, h3 , h4{
         break-inside: avoid;
         break-after: avoid;
+        text-wrap: balance;
 
         /* hack for avoiding break-after */
         margin-bottom: calc(var(--baseline)*-3);
@@ -18,6 +19,7 @@
      h5, h6 {
         break-inside: avoid;
         break-after: avoid;
+        text-wrap: balance;
 
         /* hack for avoiding break-after */
         margin-bottom: calc(var(--baseline)*-2);
@@ -70,11 +72,9 @@
         font-weight: 500;
         text-transform: uppercase;
         line-height: calc(var(--baseline)*1.2);
-        // text-align: center;
         position: relative;
         margin-top: calc(var(--baseline)*1 + 6px);
         padding-bottom: calc(var(--baseline)*1);
-        // padding-left: 2ch;
         padding-right: 2ch;
         &::before{
            display: block;

css/modules/_var.scss

@@ -3,6 +3,7 @@
     --font-title: 'Allium Rounded', sans-serif;
     --font-sans: 'Allium Rounded', sans-serif;
     --font-size: 11px;
+    --fs-small: 9.5px;
     --fs-num: 14px;
     --baseline: 16px;