stephen css

print/stephen.css

@@ -1,4 +1,106 @@
 #section-9{
 
-color: red;
+    :root{
+        --color1: #666;
+        --color2: #666; 
+        --color3: #666;
+        --color4: #666;
+        --baseline: 4mm;
+    }
+    @media print{
+        @page{
+            size: 100mm 200mm;
+            bleed: 3mm;
+            marks: crop;
+            margin: 10mm;
+            @bottom{
+              color: var(--color1);
+              font-weight: 600;
+            } 
+        }
+        /* @page:right {margin-left: 20mm;} */
+        /* @page:left {margin-right: 20mm;} */
+    }
+    a{
+      color: inherit;
+      text-decoration: none;
+      word-break: break-all;
+    }
+    .bibliography{
+      font-size: 10px;
+      /* color: var(--color1); */
+      line-height: 3mm;
+      hyphens: auto;
+    }
+    body{
+      font-family: 'Work Sans', 'HK Grotesk', sans-serif;
+      font-weight: 500;
+      font-size: 11px;
+      line-height: var(--baseline);
+      counter-reset: captions;
+    }
+    h1, h2, h3, h4, h5, h6{
+      color: var(--color1);
+      font-size: inherit;
+      margin: 0;
+      /* font-weight: bold;
+      border-top: 3px solid #666;
+      border-bottom: 3px solid #666;
+      padding: 5mm 0;  */
+      break-before: always;
+    }
+    h3, h3 + br{display: none;}
+    p{
+        margin: 0 0 var(--baseline);
+        position: relative;
+        top: 1.2mm;
+    }
+    img{width: 100%;}
+    figcaption{
+      font-size: 0.75em;
+      color: var(--color1);
+      counter-increment: captions;
+      margin: 0.75mm 0 0;
+      line-height: 3mm;
+    }
+    figcaption:before{
+      opacity: 1;
+      content: counter(captions) " ";
+    }
+    figure{
+      margin: 0;
+      break-before: always;
+    }
+    ul, ol{
+      list-style: none;
+      color: var(--color2);
+      margin: 0;
+      padding: 0
+    }
+    /* quote */
+    li{
+      margin: 0 0 var(--baseline);
+      color: var(--color2);
+    }
+    .indent .indent{
+      margin-left: calc(var(--baseline) * 2);
+    }
+    .indent .indent .indent .indent .indent .indent .indent .indent{
+      margin-left: 0;
+    }
+    /* interview */
+    .bullet{
+      margin-left: var(--baseline);
+    }
+    .bullet li{
+      text-indent: calc(-1 * var(--baseline));
+      color: var(--color3);
+    }
+    .bullet .no-indent{text-indent: 0;}
+    .conor li{
+      text-indent: -5.9mm;
+    }
+    /* annotation  */
+    .number li{color: var(--color4);}
+
 }