/** Video, move to appropriate place? */
.video--wrapper.video--vimeo--wrapper {
    /* wrapper around video */
}

.video--thumbnail.video--vimeo--thumbnail {
   /* Thumbnail of video for print */
   display:none
}

.video.video--vimeo {
   /* Video itself */
   display: none;
}

/**GENERAL**/

:root {
  --font-size: 11pt;
  --line-height: 12pt;
  --font-size-small: 7.5pt;
  --line-height-small: 8pt;
  --font-size--header: 27.5pt;
  --line-height--header: calc(2 * var(--line-height));
  --font-size--expub-font: 16pt;
  --font-size--expub-small: 9pt;
  --body-font: 'Junicode Regular';
  --header-font: 'Junicode Regular Condensed';
  --italic-font: 'Junicode Italic';
  --expub-font: 'Junicode Expub';
  --link-color: var(--black);
  --link-color--visited: var(--black);
  --grid-size: 5mm;
  --grid-size-small: 2.5mm;
  --black: #461704;
  --margin: 2.5mm;
  --annotationsize: 30mm;
  --expub-red: #e84d0e;
  --line-color: var(--black);
  --annotation-size: 30mm;
}


/* LAYOUT */
@page {
    size: 145mm 210mm;
    marks: crop;
    margin: 7.5mm;
    margin-bottom: 23.8mm;/* BASELINE FIX, 25mm - 1.2mm */
}

@page {
    @bottom-left {
        margin-bottom: 8.8mm; /* BASELINE FIX, 10mm - 1.2mm */
        align-items: flex-end;
    }
    @bottom-right {
        margin-bottom: 8.8mm; /* BASELINE FIX, 10mm - 1.2mm */
        align-items: flex-end;
    }
}

@page :left {
    @bottom-left {
        content: counter(page);
        font-size: var(--font-size-small);
        }
    @bottom-right  {
        content: string(title);
        text-transform: uppercase;
        font-size: var(--font-size-small);
    }
    margin-right: 40mm;
}

@page :right {
    @bottom-right {
        content: counter(page);
        font-size: var(--font-size-small);
    }
    @bottom-left {
        content: string(title);
        text-transform: uppercase;
        font-size: var(--font-size-small);
    }
    margin-left: 40mm;
}

@page cover {
    @bottom-center {
        content: "";
    }
}

.pagedjs_blank_page .pagedjs_margin-bottom, 
.pagedjs_blank_page .pagedjs_margin-top-left, 
.pagedjs_blank_page .pagedjs_margin-top-right{
    display: none; /* no page numbers on empty pages */
    }

.chapter {
    page: chapter;
}

/*@page chapter:first {
    margin-top: 7.5mm;
}
@page :first {
    margin-top: 7.5mm;
}

#page-3 .pagedjs_page{
    margin-top: 7.5mm;
}*/


/*   TYPOGRAPHY      */

body {
  font-family: var(--body-font);
  font-size: var(--font-size);
  line-height: var(--line-height);  
  color: var(--black);
}

*{

    }

h1, h2, h3, h4, h5, h5 {
    font-weight: normal;
    font-size: 1em;
    page-break-after: avoid;
}

/**BIG headline**/
h1 {
 font-family: var(--expub-font);
 font-size: var(--font-size--expub-small);
 line-height: 4mm;
 margin: 0;
 margin-top: 1.5mm;
 margin-bottom: 43.5mm;
 string-set: title content(text);
  text-align: center;
  border-bottom: 1px var(--line-color) solid;
}

/**sub-headlines below the main title, e.g. date & time**/
h2 {
 font-family: var(--expub-font);
 font-size: var(--font-size-small);
 margin: calc(2*var(--line-height)) 0 0 0;
  text-align: center;
  }


/**quotes**/
h3 {
 font-family: var(--italic-font);
 font-size: var(--font-size);
margin: 4pt 0 var(--line-height) 4vw;
 line-height: var(--line-height);
 text-align: left;
    }


/**headlines inside the text, e.g. Introductions, How, What...**/
h4 {
 font-family: var(--expub-font);
 font-size: var(--font-size--expub-small);
/* line-height: var(--line-height--header);*/
 margin: calc(2*var(--line-height)) 0 var(--line-height) 0;
 text-align: center;
 padding-top: calc(0.3*var(--line-height--header));
 padding-bottom: 5px;
 width: 100%;
 /*border-bottom: 1px var(--line-color) solid;*/
}

/**small & bold text, e.g. notes, date & time**/
h5 {
 font-family: var(--italic-font);
 font-size: var(--font-size-small);
 margin: 0 0 var(--line-height) 0;
text-align: center;
}

h5 a {
    color: var(--expub-red);
}

.footnote {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.footnote li {
    margin-bottom: var(--line-height-small);
}

.footnote-ref {
    color: var(--expub-red);
    font-size: var(--font-size-small);
    text-decoration: none;
}


strong{
    font-weight: normal;
}

em {
	font-family: var(--italic-font);
	font-style: normal;
}

p {
    margin: 0;
    margin-top: -1.3mm!important;
    padding-bottom: 1.3mm;
    color: var(--black);
    text-align: justify;
    text-justify: inter-word;
    word-spacing: -1px;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
   /* orphans: 4;
    widows: 4;*/
}

p + p,
p + figure.elem-float-top + p {
    text-indent: 5mm;
}

blockquote{
    margin-right: 0;
    margin-left: 5mm;
}

.author{
    text-transform: uppercase;
    color: var(--expub-red);
}

.timecode {
	vertical-align: super;
	/**text-transform: full-width;**/
	font-size: var(--font-size-small);
	font-family: var(--italic-font);
	 color: var(--expub-red);
}

.chapter h1 {
 margin-top: 43.5mm;
 margin-bottom: 1.5mm;
 }


/*LINKS*/

a {
  color: var(--expub-red);
    font-variant: small-caps;
    text-transform: lowercase;
    text-decoration: none;
}

p a {
    color: var(--expub-red);
    font-variant: small-caps;
    text-transform: lowercase;
    text-decoration: none;
}

pre {
    line-wrap: pre-wrap;
}

a:visited {
  color: var(--link-color--visited);
}

a[data-link-target-type="label"]{
    /*text-decoration: underline wavy 0.5px var(--expub-red);*/
    }

a[data-reference][data-label] {
  color: var(--expub-red);
  font-family: var(--italic-font);
    font-variant: normal;
    text-transform: none;
    /*text-decoration: underline wavy 0.5px var(--expub-red);*/
}

/*a[data-reference][data-label] .reference--label--inline {
  text-decoration: underline;
  text-decoration-style: dotted;
}*/

.front-matter li a{
    background: none;
    }


/* ########### ANNOTATIONS / ########### */

.annotation{
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--expub-red);
    text-align: center;
    text-indent: 0;
    orphans: unset;
    widows: unset;
}

.annotation a{
    font-size: var(--font-size-small);
    text-transform: uppercase;
}

.author, .annotation--author{
    text-transform: uppercase;
    font-family: var(--italic-font);
    }

.annotation a{
    word-break: break-all;
}

.annotation[data-type="annotation"]::before{
    content: "*";
    color: var(--expub-red);
    font-size: var(--font-size);
    }


.annotation[data-type="annotation"] .annotation--content::before{
    content: "*";
    color: var(--expub-red);
    font-size: var(--font-size-small);
}

.annotation[data-type="annotation"] .annotation--content::after{
    content: "";
    color: var(--expub-red);
    font-size: var(--font-size-small);
}

.annotation[data-type="annotation"] .annotation--author::after{
    content: ":";
    color: var(--expub-red);
    font-family: var(--italic-font);
}

.annotation--content {
  position: absolute;
  width: var(--annotation-size);
}

.pagedjs_right_page .annotation--content{
  right: 100mm;
}

.pagedjs_left_page .annotation--content{
    left: 100mm;
}

figcaption .annotation{
    font-size: 1em;  /* small fix for figcaptions */
    }


/*REFERENCEs*/

.annotation[data-type="reference"]::before{
    content: "*";
    color: var(--expub-red);
    font-size: var(--font-size);
    }

.annotation[data-type="reference"] .annotation--content::before{
    content: "*";
    color: var(--expub-red);
    font-size: var(--font-size-small);
    }


/* ########### TAGS ########### */

.reference--target {
    font-size: var(--font-size-small);
    font-family: var(--italic-font);
    line-height: var(--line-height);
    color: var(--expub-red);
    text-indent: 0;
    text-align: center;
    display: inline;
    margin-bottom: .25em;
    position: absolute;
    text-wrap: nowrap;
    white-space: nowrap;
    width: 29mm;
}

.pagedjs_right_page .reference--target {
    left: -32.5mm;
}

.pagedjs_left_page .reference--target {
    left: 100mm;
}

/* ########### URL's ###########*/

/** Select all links which aren't references, nor are internal links */

[data-printed-url] {
    position: absolute;
    font-size: var(--font-size-small);
    color: var(--expub-red);
    font-family: var(--italic-font);
    line-height: var(--line-height-small);
    text-indent: 0;
    text-align: center;
    text-align-last: center;
    display: inline;
    margin-bottom: .25em;
    width: 29mm;
    right: -32.5mm;
}

/*LINK DECORATION*/
.pagedjs_right_page [data-printed-url] {
    right: initial;
    left: -32.5mm;
    font-variant: small-caps;
    text-transform: lowercase;
    font-family: var(--body-font);
}

/**
 Possibility to insert marker for the link in text
a:not([data-reference]):not([href^="#"])::after {
    content: "⊛";
    font-size: 80%;
}
*/


/* ########### IMAGES ########### */


figure{
    padding: 0;
    max-width: 90%;
    margin: auto;
    line-height: 0;
    page-break-inside: avoid;
}

figure > img {
    margin: 0;
}

p+figure{
/*     padding-top: 2.5mm; */
    }

img {
  max-width: 90%;
  margin: calc(.5 * var(--line-height)) var(--line-height) calc(.5 * var(--line-height)) 0;
  break-inside: avoid;
}

/** Gijs: Portrait images seem to break flow */    
figure img {
    max-height: 120mm;
}

figcaption{
    font-size: var(--font-size-small);
    line-height: 3.75mm; /* every 5th line aligns*/
    margin-bottom: 2.5mm;
    margin-top: 1.5mm; /* Minimal distance between figcaption and image */
    /*padding-bottom: 1.75mm; *//* BASELINE FIX, but i'm not sure why it's necessary lol */
    page-break-inside: avoid !important;
    text-align: center;
    }

figcaption p{
    margin: 0 !important;
    padding: 0;
    page-break-inside: avoid !important;
    text-align: center;
    }

figcaption a[data-link-target-type="label"] span{
    font-size: 1em;
    }

.video--thumbnail.video--vimeo--thumbnail {
    line-height: 0; /* small fix for video thumbnails which otherwise have a small margin at the bottom */
}


/* ########### CONTENT ########### */

.chapter > *:first-child:not(h1, figure) {
    margin-top: -1.3mm!important; /* BASELINE FIX */
}

.front-matter--introduction, .chapter, .toc{
    page-break-before: right;
    }

@page :first{
    @bottom-left {
        content: "";
    }
    @bottom-right {
        content: "";
    }
}

.front-matter--title h1{
	/* half-title css */
    font-family: var(--body-font);
    font-size: var(--font-size);
    padding-bottom: 4pt;
    line-height: 34pt;
    text-transform: none;
    width: 155mm;
    margin-left: -45mm;
    text-align: center;
    margin-top: 51.2mm;
}

.front-matter--title h1:after{
	content: "";
	display: block;
	margin-top: -5mm;
}

.front-matter--introduction {
    margin-top: 20vh;
}

.front-matter--introduction h1 {
    display: none;
    }



/*TABLE OF CONTENTS*/

.pagedjs_margin-content h1 {
    display: none;
    }

.toc ul{
    text-transform: uppercase;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 10vh;
/*    margin-top: -1.2mm!important; /* BASELINE FIX */ */
    padding-bottom: 1.2mm; /* BASELINE FIX */
    }

.toc ul a::after {
  content: target-counter(attr(href), page);
  float: right;
}

.toc ul a {
  color: inherit;
  text-decoration: none;
}

/*#page-5 {
    @bottom-left {
        content: "";
       }
}*/


/* ########### HIDE STUFF ########### */


.indexes ul{
    list-style-type: none;
    padding-left: 0;
    }

.indexes li{
	padding-left: 0;
    }

.index-term{
	position: absolute;
	padding-right: 40px;
	width: var(--pagedjs-margin-left);
}

.pagedjs_right_page .index-term {
	left: -30mm;
}

.pagedjs_left_page .index-term{
	right: -30mm;
}

.indexes{
  break-before: right;
  font-size: var(--font-size-small);
}

/* Set width on index entries to make sure they claim space while chunking*/
.index-entry {
    min-width: 3.25ch;
    display: inline-block;
}

/* Reset it when there is content. */
.index-entry[style] {
    min-width: initial;
    display: initial;
}

.index-entry::after {
  content: target-counter(attr(data-link-id), page) ", ";
}

.index-entry.generator--index--last-entry::after {
  content: target-counter(attr(data-link-id), page);
}


/* ########### MICRO Type ########### */



[data-page-number="1"] p{
    letter-spacing: -.018em;
}
/*[data-page-number="6"] p {
    letter-spacing: -0.012em;
}*/

[data-page-number="9"] p{
    letter-spacing: -0.012em;
}

[data-page-number="6"] .pagedjs_page_content p:nth-of-type(2) {
    letter-spacing: -0.012em;
}


[data-content-model="colophon"], u {
    color: var(--expub-red);
    font-family: var(--italic-font);
    font-size: var(--font-size-small);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0mm;
}

[data-content-model="colophon"], p {
    color: var(--black);
    font-family: var(--body-font);
    text-transform: none;
    text-indent: 0mm;
}

[data-content-model="colophon"] img {
    width: 20%;
    max-height: 10vh;
    object-fit: contain;
    margin-left: 0;
    mix-blend-mode: multiply;
    background: var(--offwhite);
}

[data-chapter="Colophon"] img {
    width: 50%;
    max-height: 10vh;
    }







/* ########### PRINT PLATES ########### */

.generator--wrapped-emoji {
  font-family: "Junicode Regular", "Junicode Regular Condensed", "Junicode Expub", "Junicode Italic";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html, body[data-plate] {
  background: transparent !important;
}

body p {
  /* Reset orphans and widows to avoid weird break in margin notes */
  widows: unset;
  orphans: unset;
}



/** Video insert */
.video--wrapper.video--vimeo--wrapper {
    /* wrapper around video */
}

.video--thumbnail.video--vimeo--thumbnail {
   /* Thumbnail of video for print */
}

.video.video--vimeo {
   /* Video itself */
   display: none;
}