*


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

/**GENERAL**/

:root {
  --font-size: 21px;
  --line-height: 25px;
  --line-height--h4: 35px;
  --font-size-small: 17px;
  --header-height: 2;
  --font-size--h1: 28px;
  --font-size--header: 62px;
  --line-height--header: 52px;
  --body-font: 'Junicode Regular';
  --header-font: 'Junicode Regular Condensed';
  --italic-font: 'Junicode Italic';
  --expub-font: 'Junicode Expub';
  --link-color--visited: #461704;
  --link-color--hover: #461704;
  --link-background--hover: #e84d0e;
  --expub-red: #e84d0e;
  --black: #461704;
  --line-color: #461704;
  --body-background-color: #F0F0F0;
  --internet-blue: #f6b89f;
  --margin-top: 1vh;
  --margin-left: 1vw;
  --margin-right: 1vw;
  --sidebar-width: 20vw;
  --annotationsize: 20vw;
}

* {
box-sizing: border-box;
}
 
body, html {
	padding: 0;
	margin: 0;
	font-size: var(--font-size);
	line-height: var(--line-height);  
	font-family: var(--body-font);
	background: var(--body-background-color);
	color: var(--black);
}

body {
  display: grid;
}




/**HEADLINES / TYPOGRAPHY**/

/**BIG headline**/
h1 {
 font-family: var(--expub-font);
 font-size: var(--font-size--h1);
 line-height: var(--line-height--header);
 margin: 0;
 margin-top: 4vh;
 padding-top: calc(0.5*var(--line-height));
 text-align: center;
*position: -webkit-sticky;
 position: sticky;
 top: calc((2*(var(--line-height--header))) + 11.5px);
 width: 100%;
 background-color: var(--body-background-color);
 border-bottom: 1px var(--line-color) solid;
 z-index: 2;
}

/**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-left: 4vw;
 line-height: var(--line-height);
 text-align: left;
}

/**headlines inside the text, e.g. Introductions, How, What...**/
h4 {
 font-family: var(--expub-font);
 line-height: var(--line-height--h4);
 font-size: 18px;
 margin: calc(3*var(--line-height)) 0 0 0;
 text-align: center;
*position: -webkit-sticky;
 position: sticky;
 top: calc(3*var(--line-height--header) + (0.5*var(--line-height)) + 12px);
 padding-top: calc(0.3*var(--line-height--header));
 padding-bottom: 12px;
 width: 100%;
 background-color: var(--body-background-color);
 border-bottom: 1px var(--line-color) solid;
 z-index: 1;
}

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

/**type of page, e.g. report**/
h6 {
    display: none;
}

figcaption {
 font-family: var(--italic-font);
 font-size: var(--font-size-small);
 text-align: center;
 }

figcaption p {
margin: 0 1vw 4vh 1vw;
}

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

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

.footnote-ref, .footnote-backref {
    color: var(--expub-red);
    text-decoration: none;
}

.footnote-backref

p {
	margin-left: 1vw;
	margin-right: 1vw;
}

p a {
    color: var(--black);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: dotted;
    text-decoration-color: var(--expub-red);
}

a {
    color: var(--black);
    text-decoration: none;
    background-color: none;
}

a:hover {
    color: var(--link-color--hover);
    background-color: var (--link-background--hover);
    text-decoration: none;
}

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

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

/**HEADER**/

header {
	display: flex;
	vertical-align: baseline;
	margin-bottom: 10vh;
	grid-column-end: span 2;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.navbar--index a, .navbar--print a {
    padding-bottom: 2vh;
    }

 
.navbar--organisation, .navbar--reports, .navbar--pages {
	display: none;
}

.navbar--index {
	font-family: var(--expub-font);
	font-size: var(--font-size--header);
	line-height: calc(2*(var(--line-height--header)));
	text-decoration: none;
	text-transform: lowercase;
	border-bottom: 1px solid var(--line-color);
	position: fixed;
	top: 0;
	left: 0;
	padding-top: var(--margin-top);
	padding-left: var(--margin-left);
	padding-bottom: 0;
	width: 100vw;
	background: var(--body-background-color);
	z-index: 4;
	}

.navbar--print {
	font-family: var(--expub-font);
	font-size: var(--font-size--header);
	line-height: calc(2*(var(--line-height--header)));
	position: fixed;
	top: 0;
	right: 0;
	padding-top: var(--margin-top);
	padding-right: var(--margin-right);
	z-index: 6;
}

.navbar--chapter {
    line-height: 16px;
	text-transform: uppercase;
	margin-bottom: 1vh;
}

nav {
	max-width: 22vw;
	position: fixed;
	top: 3vh;
	left: var(--margin-left);
	padding-top: 10vh;
	/*bottom: 1vh;*/
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: var(--font-size-small);
 /* Hide scrollbar */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

nav::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Opera */
}

ul {
	flex-direction: column;
}
 
nav ul {
  list-style-type: none;
  display: flex;
  align-items: baseline;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 20px;
}

.navbar--labels {
	text-transform: uppercase;
	margin-top: 1vh;
}

.navbar--labels > a {
	color: transparent;
	pointer-events: none;
}

.navbar--labels > a::before {
	content: 'TAGS';
	color: var(--black);
}

.navbar--labels--subnav {
	padding-left: 1.5vw;
	text-transform: lowercase;
	font-family: var(--italic-font);
	letter-spacing: 0px;
	list-style: circle;

}

.navbar--chapter--conversations, .navbar--chapter--timeline, .navbar--chapter--colophon {
    font-family: var(--italic-font);
    text-transform: none;
}


.navbar--chapter--conversations, .navbar--chapter--timeline {
	padding-top: 1vh;
}

/**INDEX PAGE**/


.index {
    background-image: linear-gradient(#F0F0F0 20%, #e84d0e 100%);
	background-attachment: fixed;
	height: 100%;
}

.index h1 {
	display: none;
}

.index h4 {
 font-size: var(--font-size--h1);
 line-height: var(--line-height--header);
 margin: 0;
 padding-top: calc(0.5*var(--line-height--header));
 top: calc((2*(var(--line-height--header))) + 11px);
}

.index h5 {
    margin-top: 3vh;
}

.etherport--labels {
	display: none;
}

/**MAIN**/
 
main {
    max-width: 58vw;
    width: calc(100vw - (var(--sidebar-width) - var(--margin-left) - var(--margin-left)));
    margin: 12vh auto 1vw 25vw;
    line-height: 1.2;
    font-size: var(--font-size);

/**
  position: relative;
  width: 50vw;
  margin-top: calc(2*var(--line-height--header) + 1ch);
  margin-left: 25vw;**/
}


main img{
    width: 96%;
    max-height: 80vh;
    object-fit: contain;
    margin-left: 2%;
    mix-blend-mode: mulitply;
    background: var(--offwhite);
    }

main figure {
    width: 100%;
    max-height: 80vh;
    margin: 0;
    }



/** References which aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: wavy;
    text-decoration-color: var(--expub-red);
}

[data-link-target-type="label"]:hover {
    color: var(--black);
    background: var(--link-background--hover);
    text-decoration: none;
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 25ch;
  margin-right: -30ch;
  margin-bottom: 0;
  clear: right;
  text-decoration: none;
  color: var(--expub-red);
  font-size: var(--font-size-small);
  font-family: var(--italic-font);
}

[data-link-target-type="label"]:hover .reference--target {
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline wavy var(--expub-red);
    text-decoration-thickness: 1px;
}
 
[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family:var(--expub-font);
}
 

/** LABEL PAGE **/

.page--label .inline-reference{
    color: var(--expub-red);
}

.link-source {
 font-family: var(--italic-font);
 font-size: var(--font-size-small);
 margin: 0 0 var(--line-height) 0;
text-align: left;
}

.label--link-count {
text-transform: uppercase;
 font-size: var(--font-size-small);
 text-align: center;
}

[data-link-marked="true"] .reference--target {
display: none;
    }

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}

/** Hide elements which were marked as instructions in the pad */
.instruction {
    display: none;
}
 
.tag--question {
  font-size: 110%;
  color: green;
}
 
.tag--important  {
    text-decoration-line: underline;
    text-decoration-style: double;
}
 
.tag--trouble {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}
 
.tag--commentary {
    text-decoration-line: underline wavy var(--expub-red);
    text-decoration-thickness: 1px;
}
 
.tag--citation {
    background-color: beige;
}
 
b {
    border: solid var(--black) 2px;
}


/**ANNOTATIONS**/

.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--author{
    text-transform: uppercase;
    color: var(--expub-red);
    font-family: var(--italic-font);
    }

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

main .annotation--content{
	font-size: var(--font-size-small);
	float: right;
	width: 25ch;
	margin-right: -30ch;
	margin-bottom: var(--margin-left);
	clear: both;
	color: var(--expub-red);
}

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

.reference--target{
    font-size: 20px;
    float: right;
    margin-left: 1vw;
    margin-right: -25vw;
    width: 10vw;
    color: var(--expub-red);
    margin-bottom: 0px;
    /*clear: left;*/
    }

a:has(.reference--label--inline){
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: wavy;
    text-decoration-color: var(--expub-red);
    }

/**a:has(.reference--label--inline):hover *{
    text-decoration: underline !important;
    }**/

main .annotation a{
    color: var(--expub-red);
    display inline;
    margin-right: 0px;
    margin-bottom: 0px;
    }


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



/**LABELS**/

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

.timecode {
	vertical-align: super;
	font-size: 16px;
	font-family: var(--italic-font);
	 color: var(--expub-red);
	}

.caption {
 font-family: var(--italic-font);
 font-size: var(--font-size-small);
text-align: center;
}

.object--labels-list--end {
    display: none;
    }


/**FOOTER**/
 
footer {
    margin-top: 5vh;
    font-family: var(--expub-font);
}

footer ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    gap: 1em;
}

footer a{
    text-decoration: none;
}

.footer--content {
    
}


/**COLOPHON**/
[data-content-model="colophon"], u {
    color: var(--expub-red);
    font-family: var(--italic-font);
    text-decoration: none;
    text-transform: uppercase;
	font-size: 16px;
}

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

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



 
/**MEDIA QUERIES**/

@media only screen and (max-width: 800px) {
	
	/**HEADER**/
	
header {
	position: absolute;
	height: 8%;
}

.navbar--index {
	font-size: calc(var(--font-size--header)/2);
	line-height: calc(1*var(--line-height--header));
	width: 100vw;
	text-align: left;
	margin: 0;
}
	
.navbar--print {
	font-size: calc(var(--font-size--header)/2);;
	line-height: var(--line-height--header);
	right: 1vw;
	border-bottom: 1px solid var(--line-color);
}

header a {
    padding-bottom: 2vh;
    }
	

	/**MENU**/
	
nav {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 98vw;
	width: 98vw;
	margin: 0;
	padding-top: 10vh;
	overflow: visible;
	font-size: var(--font-size);
	text-align: center;
}
	
nav > ul {
	text-align: center;
	display: block;
}
	
.navbar--labels{
	display: none;
}

.navbar--chapter {
     line-height: 20px;
	margin-bottom: 1.1vh;
}

.navbar--chapter--conversations, .navbar--chapter--timeline {
	padding-top: 1vh;
}
	
	
	/**MAIN**/
	
main {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    margin-top: 80vh;
    line-height: 1.3;
    font-size: var(--font-size);
}

main p {
	padding-left: 2vw;
	padding-right: 2vw;
}

main img{
    width: 98%;
    max-height: 60vh;
    margin-left: 1%;
    }

main figure {
    width: 98%;
    margin-left: 1%;
    max-height: 60vh;
    }


/**TYPOGRAPHY**/

h1 {
 top: calc((0.7*(var(--line-height--header))));
 font-size: var(--font-size);
 padding-top: var(--line-height);
}

h4 {
 margin-top: 5vh;
 top: calc(2*var(--line-height--header));
 font-size: 12px;
 padding-bottom: 3px;
 height: calc(3.5*var(--line-height));
display: flex;
justify-content: center;
align-items: center;
}

h5 {
 margin: 0 1vw 0 1vw;
 text-transform: uppercase;
 color: var(--expub-red);
}

[data-content-model="manifesting-expanded-publishing"] h4 {
 top: calc(3*var(--line-height--header));
}

/**ANNOTATIONS**/

.reference--target{
	display: none;
}

main .annotation--content{
	font-size: var(--font-size-small);
	color: var(--expub-red);
	display: block;
	float: none;
	width: 80vw;
	margin: 0 0 0 5vw;
	text-align: center;
}


/**INDEX & COLOPHON**/

.index {
	background-image: linear-gradient(#e84d0e 20%, #f0f0f0 100%);
	background-attachment: scroll;
	height: 80vh;
}

.index main {
    margin-top: 80vh;
}

.index h4 {
 top: calc(1.5*(var(--line-height)) + 9px);
 font-size: var(--font-size);
 padding-bottom: 8px;
  margin: 0;
display: block;
height: auto;
}

[data-content-model="colophon"] img {
width: 70%;
margin: auto;
padding-top: 5vh;
display: flex;
align-items: center;
max-height: 20vh;
}


}