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

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

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

/** GENERAL **/
:root {
  --font-size: 9pt;
  --line-height: 11pt;
  --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: 'Regrade Regular';
  --header-font: 'Regrade Bold';
  --italic-font: 'Regrade Italic';
  --expub-font: 'Mattone Black';
  --link-color: var(--black);
  --link-color--visited: var(--black);
  --grid-size: 5mm;
  --grid-size-small: 2.5mm;
  --black: #1a1a1a;
  --margin: 2.5mm;
  --annotation-size: 30mm;
  --annotationsize: 30mm;
  --expub-red: #71cc51;
  --line-color: #0044ff;
}

/* LAYOUT */
@page {
  size: 148mm 210mm;
marks: none;
  margin: 13mm;
  margin-bottom: 23.8mm; /* BASELINE FIX */
}

@page {
  @bottom-left {
    margin-bottom: 8.8mm; /* BASELINE FIX */
    align-items: flex-end;
  }
  @bottom-right {
    margin-bottom: 8.8mm; /* BASELINE FIX */
    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: 32mm;
  background: linear-gradient(
  to left in oklab,
  #ffffff 0%,
  #ffffff 2%);
   bleed: 5mm;
}

@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: 32mm;
background: linear-gradient(
  to right in oklab,
  #ffffff 0%,
  #ffffff 2%);
    bleed: 5mm;
}

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

@page fullimage {
  margin: 0;
  background: none;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
  @top-left { content: none; }
  @top-right { content: none; }
  
}

@page spreadimage {
  size: 296mm 210mm; /* two facing A5 pages side-by-side */
  margin: 0;
  background: none;

  @bottom-left { content: none; }
  @bottom-right { content: none; }
  @top-left { content: none; }
  @top-right { content: none; }
}

/* FULL PAGE IMAGES */
@media print {
  img[alt="left-full"],
  img[alt="right-full"] {
    column-span: all;
    display: block;
    width: calc(100% + 15mm);
    max-width: none;
    height: auto;
    page-break-before: always;
  }

  img[alt="left-full"] {
    margin-left: -7.5mm;
    margin-right: -20mm;
  }

  img[alt="right-full"] {
    margin-left: -20mm;
    margin-right: -7.5mm;
  }
}

@media print {
  img[alt="full-bleed-left"],
  img[alt="full-bleed-right"] {
    page: fullimage;
    break-before: page;
    display: block;
    width: 148mm;
    height: 210mm;
    object-fit: cover;
    margin: 0;
  } 
  img[alt="full-bleed-left"] {
    break-before: left;
  }
  
  img[alt="full-bleed-right"] {
    break-before: right;
  }
}
  
@media print {
  .full-bleed-wrapper {
    page: fullimage;
    break-before: page;
    margin: 0;
    padding: 0;
  }
  
  .full-bleed-wrapper img {
    width: 148mm;
    height: 210mm;
    object-fit: cover;
    display: block;
  }
  
  img[alt="full-bleed-left"],
  .full-bleed-wrapper:has(img[alt="full-bleed-left"]) {
    break-before: left;
  }
  
  img[alt="full-bleed-right"],
  .full-bleed-wrapper:has(img[alt="full-bleed-right"]) {
    break-before: right;
  }
}

@media print {
  .spread-image {
    page: spreadimage;
    break-before: page;
    margin: 0;
    padding: 0;
  }

  .spread-image img {
    display: block;
    width: 296mm;   /* full spread width */
    height: 210mm;  /* full page height */
    object-fit: cover;
    transform: translate(-50%, -50%) rotate(90deg);
    margin: 0;
  }
}
@media screen {
  .pagedjs_page.spread-page {
    width: 296mm !important;
    height: 210mm !important;
  }
  .pagedjs_page.spread-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(90deg);
  }
}

@media print {
  .no-print {
    display: none !important;
    page-break-before: avoid;
    page-break-after: avoid;
    margin: 0;
    padding: 0;
  }
}

@media print {
  .pagebreak-before {
    break-before: page;
  }
  .pagebreak-after {
    break-after: page;
  }
}


/* COLUMNS */
.pagedjs_pages .column-layout {
  columns: 2;
  column-fill: auto;
  column-gap: 1.5em;
}

.pagedjs_pages .column-layout img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0.5em 0;
}

.pagedjs_blank_page .pagedjs_margin-bottom,
.pagedjs_blank_page .pagedjs_margin-top-left,
.pagedjs_blank_page .pagedjs_margin-top-right {
  display: none;
}

.chapter {
  page: chapter;
}

/* 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;
}

b, strong {
  font-family: var(--header-font);
  font-weight: 900;
  color: var(--black);
}
 
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: 17mm;
 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(--expub-red);
}
 
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: 80mm;
}
 
.pagedjs_left_page .annotation--content{
    left: 80mm;
}
 
figcaption .annotation{
    font-size: 1em;  /* small fix for figcaptions */
    }
    
/*REFERENCEs*/
 
.annotation[data-type="reference"]::before{
    content: "*";
    color: var(--line-color);
    font-size: var(--font-size);
    }
 
.annotation[data-type="reference"] .annotation--content::before{
    content: "*";
    color: var(--line-color);
    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(--line-color);
    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: -26mm;
}
 
.pagedjs_left_page .reference--target {
    left: 100mm;
}
 
/* ########### URL's ###########*/
 
 
[data-printed-url] {
    position: absolute;
    font-size: var(--font-size-small);
    color: var(--line-color);
    font-family: var(--italic-font);
    line-height: var(--line-height-small);
    text-indent: 0;
    text-align: center;
    text-align-last: center;
     display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 2mm !important;
    margin-bottom: .25em;
    width: 18mm;
    right: -20.5mm;
}
 
/*LINK DECORATION*/
.pagedjs_right_page [data-printed-url] {
    right: initial;
    left: -20.5mm;
    font-variant: small-caps;
    text-transform: lowercase;
    font-family: var(--body-font);
}
 


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

figure img {
  max-height: 120mm;
}

figcaption {
  font-size: var(--font-size-small);
  line-height: 3.75mm;
  margin: 1.5mm 0 2.5mm 0;
  page-break-inside: avoid !important;
  text-align: center;
}

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

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

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

/* First page footer */
@page :first {
  @bottom-left { content: ""; }
  @bottom-right { content: ""; }
}

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

/* TOC */
.toc ul {
  text-transform: uppercase;
  list-style: none;
  font-size: 15px;
  margin: 0;
  padding: 0;
  padding-top: 1vh;
  /* margin-top: -2mm!important; BASELINE FIX */
  padding-bottom: 2mm; /* BASELINE FIX */
  
  /* Add these lines for bold and bigger spacing */
  font-weight: bold;
  line-height: 1.3; /* Adjust this value as needed */
  font-family: var(--body-font);
      }

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

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

/* COLOPHON */
[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 {
  widows: unset;
  orphans: unset;
}