/** Video, move to appropriate place? */
.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;
}

/* ########### BASELINE GRID ########### */

/* Alt: draw lines with linear gradients */
/*
.pagedjs_page {
  --color-line-main: rgba(255, 0, 234, 0.25);
  --color-line-minor: rgba(255, 0, 234, 0.125);

  background: repeating-linear-gradient(to bottom,
                transparent 0px, transparent 2.5mm,
                var(--color-line-minor) 2.5mm, var(--color-line-minor) calc(2.5mm + 1px),
                transparent calc(2.5mm + 1px), transparent calc(5mm - 1px),
                var(--color-line-main) calc(5mm - 1px) 0px, var(--color-line-main) 5mm),
              repeating-linear-gradient(to right,
                transparent 0px, transparent 2.5mm,
                var(--color-line-minor) 2.5mm, var(--color-line-minor) calc(2.5mm + 1px),
                transparent calc(2.5mm + 1px), transparent calc(5mm - 1px),
                var(--color-line-main) calc(5mm - 1px) 0px, var(--color-line-main) 5mm);
}
*/

/*

@media screen, pagedjs-ignore {
.pagedjs_page {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5mm" height="5mm" viewBox="0 0 5 5"><rect x="0" y="0" width="5" height="5" fill="white" stroke="pink" stroke-width=".25px" /><line x1="2.5" y1="0" x2="2.5" y2="5" stroke="pink" stroke-width=".25" opacity=".25"/><line x1="0" y1="2.5" x2="5" y2="2.5" stroke="pink" stroke-width=".25" opacity=".25"/></svg>');
    background-size: 5mm 5mm;
    background-repeat: repeat;
}
}

*/


/* ########### VARIABLES ########### */

@font-face {
    font-family: 'Tuffy';
    src: url('https://etherport.org/filer/canonical/1700237980/33/') format('opentype');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'Tuffy';
    src: url('https://etherport.org/filer/canonical/1700237980/32/') format('opentype');
    font-weight: normal;
    font-style: italic;
    }

@font-face {
    font-family: 'Tuffy';
    src: url('https://etherport.org/filer/canonical/1700237980/30/') format('opentype');
    font-weight: bold;
    font-style: normal;
    }

@font-face {
    font-family: 'Tuffy';
    src: url('https://etherport.org/filer/canonical/1700237980/31/') format('opentype');
    font-weight: bold;
    font-style: italic;
    }

@font-face {
    font-family: 'Noto Emoji';
    src: url('https://etherport.org/filer/canonical/1709064312/120/') format('woff2');
    font-weight: regular;
    font-style: normal;
}

:root {
    --font-size: 11pt;
    --font-size-small: 7.5pt;
    --font-size-big: 27.5pt;
    --grid-size: 5mm;
    --grid-size-small: 2.5mm;
    --green: #C7FF00;
    --black: black;
    --margin: 2.5mm;
    --annotationsize: 30mm;
}

/* ########### PAGE 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);
        }
    /* @top-left{
        content: "Screentime Airtime Facetime";
        text-transform: uppercase;
        } */
    margin-right: 40mm;
}

@page :right {
    @bottom-right {
        content: counter(page);
        }
    margin-left: 40mm;
    /* @top-right{
        content: string(title);
        text-transform: uppercase;
        letter-spacing: -.1px;
        } */
}

@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, .toc {
    page: chapter;
}
@page chapter:first {
    margin-top: 7.5mm;
}
@page :first {
    margin-top: 7.5mm;
}
#page-3 .pagedjs_page{
    margin-top: 7.5mm;
}



/* ########### GENERAL TYPOGRAPHY ########### */

*{
    text-wrap: pretty;
    }
    
strong{
    font-weight: normal;
    }

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

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

h1{
    margin: 0;
    margin-top: 1.5mm; /* BASELINE FIX */
    padding-bottom: 43.5mm;
    font-size: var(--font-size-big);
    line-height: 10mm;
    string-set: title content(text);
    }

h2, h3, h4, h5{
    margin: 8.8mm 0 5mm 0;  /* BASELINE FIX, 10mm - 1.2mm */
    padding-bottom: 1.2mm;
    }
    
h5{
    
    margin: 8.8mm 0 0mm 0;  /* BASELINE FIX, 10mm - 1.2mm */
    padding-bottom: 1.2mm;
    }
    
    
    
    
h3, h4{
    font-weight: normal;
    text-transform: uppercase;
    font-size: var(--font-size);
    }
    


/*a {
    color: var(--black);
    text-decoration-thickness: calc(var(--font-size) * .05);
    text-underline-offset: calc(var(--font-size) * .15);
} */

a {
  color: var(--black);
  text-decoration: underline;
	1.   /* background: linear-gradient(to top, white calc(var(--font-size) * .10),
    black calc(var(--font-size) * .10),
    black calc(var(--font-size) * .15),
    white calc(var(--font-size) * .15),
    white 100%); */
}

[data-report="Syllabus"] a{
     word-break: break-all;
     }   
     
[data-chapter="Live-Book @ The Hmm"] p{
     text-indent: 0mm;
     }   

.toc a{
    text-decoration: none;
    }
    
a[data-link-target-type="label"]{
    background: var(--green);
    text-decoration: none;
    }

p{
    margin: 0;
    margin-top: -1.3mm!important; /* BASELINE FIX */
    padding-bottom: 1.3mm; /* BASELINE FIX */
    orphans: 4;
    widows: 4;
    
    hyphens: auto;
    }
    
p + p,
p + figure.elem-float-top + p {
    text-indent: 5mm;
    }

blockquote{
    margin-right: 0;
    margin-left: 5mm;
    }
    
    
    
/* ########### TOC ########### */

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


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

.annotation{
    --font-size: var(--font-size-small);
    font-size: var(--font-size);
    line-height: 3.75mm; /* every 5th line aligns*/
    text-indent: 0;
    orphans: unset;
    widows: unset;
}

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

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

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

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

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

.author, .annotation--author{
    text-transform: uppercase;
    }

.annotation a{
    word-break: break-all;
}
    
.annotation[data-type="reference"]::before{
    content: "⁝";
    color: var(--black);
    }
    
.annotation[data-type="reference"] .annotation--content::before{
    content: "⁝ ";
    color: var(--black);
    }
    

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

.reference--target {
    --font-size: var(--font-size-small);
    font-size: var(--font-size);
    
    text-indent: 0;
    background: var(--green);
    line-height: 1em;
    margin-bottom: .25em;
    display: block;

    position: absolute;
    text-wrap: nowrap;
    white-space: nowrap;
}

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

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






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


figure{
    padding: 0;
    margin: 0;
    line-height: 0;
    page-break-inside: avoid;
}

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

img{
    max-width: 100%;
}

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

figcaption{
    --font-size: var(--font-size-small);
    font-size: var(--font-size);
    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;
    }

figcaption p{
    margin: 0 !important;
    padding: 0;
    page-break-inside: avoid !important;
    }
    
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 */
}


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

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

.front-matter--title h1{
	/* half-title css */
    font-size: var(--font-size);
    text-transform: none;
    width: 145mm;
    margin-left: -40mm;
    text-align: center;
    margin-top: 51.2mm;
}
.front-matter--title h1:after{
	content: "Practicing Hybridity in the Cultural Field";
	display: block;
	margin-top: -5mm;
}

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

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


.toc li:before{
    margin-left: -10mm;
    position: absolute;
    content: var(--content-label);
    }

.toc li:nth-of-type(3),
.toc li:nth-of-type(5),
.toc li:nth-of-type(7),
.toc li:nth-of-type(9){
   --content-label: "⁘";
}
.toc li:nth-of-type(2){
    --content-label: "1";
    }
.toc li:nth-of-type(4){
    --content-label: "2";
    }
.toc li:nth-of-type(6){
    --content-label: "3";
    }
.toc li:nth-of-type(8){
    --content-label: "4";
    }
.toc li:nth-of-type(10){
    --content-label: "5";
    }
.toc li:nth-of-type(11){
    --content-label: "6";
    }
.toc li:nth-of-type(12){
    --content-label: "7";
    }

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

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


.indexes ul{
    list-style-type: none;
    padding-left: 0;
    }
    
.indexes li{
	padding-left: 0;
    }
    
.index-term{
	position: absolute;
}

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

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

.indexes{
  break-before: right;
}

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


/* ########### CUSTOM TITLES ########### */

.chapter h1:before{
    margin-left: -30mm;
    position: absolute;
    }

#sound-and-temporality:before{
    content: "1";
    }
    
#hybrid-trains-of-thought:before{
    content: "⁘";
    }
#thresholds-of-access:before{
    content: "2";
    }
#talkshop-mumories-living-archives{
    content: "⁘";
    }
#interaction-and-activation{
    content: "3";
    }
#introducing-etherportorg{
    content: "⁘";
    }
#forms-of-hybridity{
    content: "4";
    }
#xpub-special-issue-protocols{
    content: "⁘";
    }
#participatory-livecasting{
    }
#online-critical-reflection-a-fable-from-the-past{
    }
#a-living-archive-is-also-a-dying-archive{
    }







/* ########### 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-chapter="Introduction: Hybrid Culture in a Changing World"] p:nth-of-type(3) {
    letter-spacing: -0.012em;
}


[data-chapter="Colophon"] img {
    
    padding-top: 2em;
    max-width: 40mm;
    }
  
/* ########### PRINT PLATES ########### */

.generator--wrapped-emoji
 {
  font-family: "Noto Emoji", "Tuffy";
  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;
}



/**  GREEN */

body[data-plate="green"] .pagedjs_pagebox > div * {
  visibility: hidden;
}

body[data-plate="green"] .pagedjs_pagebox > div  a[data-link-target-type="label"],
body[data-plate="green"] .pagedjs_pagebox > div .reference--target {
  visibility: visible;
  color: transparent;
  background: black;
}

body[data-plate="green"] .front-matter li a {
    visibility: hidden;
}


/** BROWN */

body[data-plate="brown"] .pagedjs_pagebox > div a[data-link-target-type="label"],
body[data-plate="brown"] .pagedjs_pagebox > div .reference--target {
  background: transparent;
}