@media print {



:root {
font-size: 9.5pt;
line-height: 11pt;
--font-size-print: 9.5pt;
--line-height-print: 11pt;
--font-size-small-print: 8pt;
}

@page {
    size: 110mm 180mm;
    margin: 10mm 8mm 12mm 8mm;
 bleed: 3mm;
 marks: crop;
}

@page:right { 
    margin-left: 12mm;
   @bottom-right-corner {
       content:  counter(page);
    font-family: Compagnon;
font-size: var(--font-size-small-print);
    }
  @bottom-left {
    content: string(title);
    font-family: Compagnon;
font-size: var(--font-size-small-print);
  }
}

@page:left { 
    
    margin-right: 11mm;
    @bottom-left-corner {
        content:  counter(page);
    font-family: Compagnon;
    
font-size: var(--font-size-small-print);

    }
  @bottom-right {
    content: "Futurology of Cooperation";
    font-family: Compagnon;
font-size: var(--font-size-small-print);
  }
}

.page-right{
  /*break-before: right;*/
}

h4#why-futures,
.about.nl h2#copyleft-right,
.sensory.en h2#testimonies,
.nightwalk.en h2#protocol,
.axes.nl h2#protocol,
.tirer.fr h2#protocol,
.intense.en h2#protocol,
.intense.nl h2#protocol,
.intergenerational.nl h2#protocol,
.expert.en h2#protocol,
.rebaptising.nl h2#credits,
.turn.nl h2#testimonies,
.dot.fr h2#testimonies,
.costumes.fr h2#testimonies,
.outdoors.en h2#protocol,
.outdoors.fr h2#protocol {
 break-before: page;
 }
header.shy h2 {
     break-before: avoid !important;

    }


html, body, p, ol, ul {
      font-size: var(--font-size-print);
      line-height: var(--line-height-print);
}

p {
  orphans: 2;
  widows: 2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
header:not(.phases) h2,
.exercises header h2 {
font-size: 4rem;
line-height: 3.5rem;
  string-set: title content(text);
break-before: page;
letter-spacing: -.1rem;
word-spacing: -0.5rem;
font-family: "Bengal";
margin-bottom: calc(1.5 * var(--line-height-print));
}

.scanning img.diagram {
 margin-bottom: calc(0.5 * var(--line-height-print));
}

.exercises .printFolder--pad--content section > h2:first-child {
  margin-top: 0;
}

.exercises .printFolder--pad--content section > blockquote:first-child {
  margin-top: 0;
}
.about-futuring .printFolder--pad--content section > blockquote p:first-child,
.exercises .printFolder--pad--content section > blockquote p:first-child {
  margin-top: 0;
}
.colophon .printFolder--pad--content section > p:first-child,
.about-futuring .printFolder--pad--content section > p:first-child,
.exercises .printFolder--pad--content section > p:first-child {
  margin-top: 0;
  display: block;
}

.exercises .printFolder--pad--content section > h3:first-child {
  margin-top: 0;
}
.about-futuring .printFolder--pad--content section > h4:first-child {
  margin-top: 0 !important;
}
.exercises .printFolder--pad--content section > h5:first-child {
  margin-top: 0 !important;
}

.exercises .printFolder--pad--content section > ul:first-child {
  margin-top: 0;
  display: inline-block;
}
.metapages .printFolder--pad--content section > p:first-child {
  margin-top: 0;
}
.metapages .printFolder--pad--content section > h2:first-child {
  margin-top: 0;
}
.metapages .printFolder--pad--content section > h3:first-child {
  margin-top: 0;
}
h2 {
    margin-top: calc(2 * var(--line-height-print));
margin-bottom: var(--line-height-print);
    }
    
h3 {
        
    margin-top: calc(1.5 * var(--line-height-print));
margin-bottom: var(--line-height-print);
        }
h4 {
  margin-top: var(--line-height-print);

}

ul {
    margin: 0;
    }
 li {
font-size: var(--font-size-print);
margin-left: 1.1em;
    }

.colophon dd {
        padding-left: 1.1em !important;
        font-family: Compagnon;
        margin-left: 0;

    }
li::before {
    content: "— " ;
    margin-left: -1.1em;
    }
a.print-only {
    font-family: Compagnon;
    font-weight: normal;
    }
a.print-only::after  {
    content: target-counter(attr(href), page);
    font-family: Compagnon;
    }
    
.print-only {
        display: initial;
    }
/* -------------------------general---------------------------------------*/

.howto .first blockquote > blockquote h2 {
font-size: 1.7rem;
position: relative;
border: 3px double black;
border-radius: 8px;
min-height: min-content;
max-height: min-content;
display: flex;
flex-direction: column;
font-family: frizquad;
padding: 10px 3px;
margin-right: 10px;
align-items: center;
width: min-content;
float: left;
margin-bottom: 0;
}
.howto .first blockquote > blockquote h2::before {
content: "Phase";
font-size: 0.55rem;
font-family: "Optimum";
text-transform: uppercase;
letter-spacing: 1.5px;
top: 1px;
margin-bottom: 14px;
text-align: center;
width: auto;
line-height: 0;
margin-top: 0px;
}
.nl.howto .first blockquote > blockquote h2::before { 
    
content: "Fase";
    }
.first.phase-tools blockquote>blockquote h2::after {
 background-image: url(static/svg/window.svg);
}
.first.phase-effects blockquote>blockquote h2::after {
 background-image: url(static/svg/wild.svg);
}
.first.phase-tools blockquote>blockquote h2::before {
content: "Tools";
}
.first.phase-effects blockquote>blockquote h2::before {
content: "Effects";
}
.nl.howto .first blockquote > blockquote h2 {
padding: 10px 7px;
    }
.howto .first h3 {
  margin: 0;
    margin-bottom: 0px;
  padding: 0;
  font-size: 1rem;
  line-height: var(--line-height-print);
padding-top: 0.4em;
}
.howto .first {
  flex-direction: row-reverse;
  width: 100%;
    margin-bottom: 0;
    flex-direction: inherit;
}
.howto .first h2#5{
margin-bottom: var(--line-height-print);
}

.howto .first blockquote {
  width: 150px;
float: left;
margin-top: var(--line-height-print);
margin-right: 20px;
margin-left: 0;
margin-bottom: 0;
}
.howto .first blockquote blockquote {
  width: 150px;
float: none;
margin: 0;

}
/* -------------------------TOC---------------------------------------*/

.toc li::before {
    content: " " ;
    }
.toc svg {
  width: 23px;
  height: calc(1.4 * var(--line-height));
}
.toc path,
.toc circle,
.toc line{
      stroke-width: .65px !important;
    }
.toc li span {
    position: absolute;
    width: 100px;
height: var(--line-height);
margin-top:-4px;
    }
.toc a::after {
    content: target-counter(attr(href), page);
  margin-left: 23px;
  font-family: Compagnon;
  text-align: right;
position: absolute;
right: 0;
}

h1.book-title {
  font-size: 4em;
  line-height: 2em;
  text-align: center;
  text-transform: uppercase;
  margin: auto;
    margin-top: auto;
  margin-top: 2em;
    font-family: Bengal;
}
h2.book-title {
     margin-top: 2em;
padding: 1px 6rem;
text-align: center;
font-size: 2rem;
line-height: 1;
    break-after: page;

}
ul.toc {
    
    break-before: page;
    }
.toc h3 {
  font-size: 3.2rem;
  line-height: 0.9em;
    margin-bottom: 2rem;
}
.toc h3:first-of-type {
    margin-top: 0;
    }
.toc .exercises a {
  font-family: Bengal;
  font-size: 0.9rem;
}
.toc .exercises {
  padding-left: 2.2em;
}

.toc li.phases::before {

  font-family: Bengal;
  border: 1px solid black;
  border-radius: 5px;
  width: 20px;
  padding: 2px 3px;
}
.toc li.phase1::before {
  content: "1";
    }
.toc li.phase2::before {
  content: "2";
    }
.toc li.phase3::before {
  content: "3";
    }
.toc li.phase4::before {
  content: "4";
    }
.toc li.phase5::before {
  content: "5";
    }
.toc li.tools::before {
  content: "6";
    }
.toc li.effects::before {
  content: "7";
    }
.toc .phases {
  margin-top: var(--line-height);
  margin-left: -5px;
}
.toc .about-futuring {
  margin-top: var(--line-height);
    }
/* -------------------------EXERCISES---------------------------------------*/
h2#use,
h2#gebruik {
 display: none;
     }

[data-id="use"] + p,
[data-id="gebruik"] + p {
font-weight: bold;
     }
[data-type="exercises"] h2:not(#use),
[data-type="exercises"] h2:not(#gebruik) {
    margin-top: calc(2 * var(--line-height-print));
margin-bottom: var(--line-height-print);
    }

.exercises  header span {
  position: absolute;
  top: -8mm;
  right: 0mm;
  transform: scale(0.5);
  stroke-width: 2mm !important;
}
[data-type="exercises"] header.exercises h2 {
  margin-top: 0;
  position: relative;
}
.exercises h2{
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
}
.metadata dl {
  break-inside: avoid;
    }
.metadata dt {
  font-family: "Compagnon";
  font-size: 0.8rem;
  text-transform: uppercase;
  clear: both;
  padding: 0;
  letter-spacing: 0.2rem;
}
div.metadata {
    display:none;
    }
.exercises div.metadata {
display: block;
  column-count: 2;
  padding: 0;
border: 0px solid black;
border-radius: 1rem;
margin: 0;
margin-bottom: calc(2 * var(--line-height-print));
position: relative;
float: none;
}
.metadata dt {
  font-family: "Compagnon";
  font-size: 0.8rem;
  text-transform: uppercase;
  clear: both;
  padding: 0;
  letter-spacing: 0.2rem;
  margin: 0;
}

.metadata dd {
  font-size: 1rem;
  line-height: initial;
  padding: 0;
  padding-bottom:.5rem;
  }
/* -------------------------PHASES---------------------------------------*/

.first blockquote > blockquote h2 {
    width: min-content;
font-size: 4em;
margin-bottom: 34px;
min-height: 115px;
float: none;
}
 
.phases .first blockquote:first-child {
    
    break-before: right;
    }
.phases h3 {
  font-size: 3.2rem;
  line-height: 0.9em;
  
    break-after: page;
    
    margin-bottom: 2rem;
}
.first h3#effects {
    display: flex;
    flex-direction: column;
    align-items: left  !important;
}
header.phases h2 {
  display: none;
}
.phases blockquote {
  display: initial;
}
.phases .first blockquote:not(:last-of-type) {
  display: flex;
}
.phases .first blockquote blockquote{
  display: initial;
}
.first blockquote {
  flex: 0 1 100%;
  margin: 0;
  padding: 0;
}
.exercices > blockquote {
  max-width: 10%;
  width: 10%;
}