/** Video insert **/

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {
    display: none
}

.video.video--vimeo {}

:root {
  --font-size: 18px;
  --line-height: 25px;
  --font-size-small: 16px;
  --line-height-small: 18px;
  --font-size--header: 50px;
  --line-height--header: 45px;
  --header-height: 9vh;
  --font-size--h1: 36px;
  --font-size--h2: 28px;
  --line-height--h2: 35px;
  --body-font: 'Amiamie Regular';
  --custom-font: 'Tactical Media Type';
  --italic-font: 'Amiamie Italic';
  --bold-font: 'Amiamie Black';
  --main-color: #747B4D;
  --accent-color: #00FF00;
  --link-color--visited: var(--main-color);
  --link-color--hover: var(--main-color);
  --link-background--hover: var(--accent-color);
  --body-background-color: #F0F0F0;
  --line-color: var(--accent-color);
  --margin-top: 1vh;
  --margin-left: 1vw;
  --margin-right: 1vw;
  --sidebar-width: 25vw;
  --annotationsize: 20vw;
}

* {
box-sizing: border-box;
}

html { 
    overflow-x: hidden; 
}

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

body {
  display: grid;
}




/**HEADLINES / TYPOGRAPHY**/

h1 {
 font-family: var(--custom-font);
 font-size: var(--font-size--h1);
 line-height: var(--line-height--header);
 text-transform: uppercase;
 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;
}

h1 p {
    margin: 0;
    }

/**sticky paragraph headlines**/
h2 {
 font-family: var(--custom-font);
 line-height: var(--line-height--h2);
 font-size: var(--font-size--h2);
 text-transform: uppercase;
 margin: calc(3*var(--line-height)) 0 0 0;
 text-align: center;
 padding-bottom: 12px;
 width: 100%;
 background-color: var(--body-background-color);
 border-bottom: 1px var(--line-color) solid;
 z-index: 1;

}

/**sub-headlines inside the text**/
h3 {
 font-family: var(--custom-font);
 font-size: var(--font-size);
 line-height: var(--line-height);
 text-align: center;
 border-bottom: 1px solid var(--accent-color);
  -webkit-text-stroke: 1px var(--main-color);
}

/**sub headline under title**/
h4 {
 font-family: var(--custom-font);
 font-size: var(--font-size--h2);
 margin: var(--line-height) 0 0 0;
  text-align: center;
  text-transform: uppercase;
    }

/**author name**/
h5 {
 font-family: var(--bold-font);
 font-size: var(--font-size-small);
 margin: var(--line-height) 0 var(--line-height) 0;
text-align: center;
color: var(--accent-color);
}

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

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

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



/** IMAGES & CAPTIONS **/

figcaption p {
    padding: 0 10px 0 10px;
    font-size: var(--font-size-small);
    color: var(--accent-color);
    line-height: var(--line-height);
    margin: calc(0.5 * var(--line-height)) 0 calc(0.5 * var(--line-height)) 0;
    text-align: center;
 }

figure {
    padding: 0;
    max-width: 100%;
    margin: 0 10px 0 10px
    line-height: 0;
    page-break-inside: avoid;
}

figure > img {
    margin: 0;
}

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

main img{
    width: 96%;
    max-height: 70vh;
    object-fit: contain;
    margin-left: 2%;
    }

main figure {
    width: 100%;

    margin: 0;
    }



/************************* FOOTNOTES ***************************/

.footnote {
    font-size: 14px;
    line-height: var(--line-height-small);
    margin-top: var(--line-height);
}

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

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

.footnote ol {
    padding: 0;
    margin: var(--line-height-small) 1vw var(--line-height-small) 1vw;
} 

hr {
    border: 0.5px var(--accent-color) solid;
}

li > p {
    text-align: left;
    text-justify: none;
}

.footnote-ref {
    color: var(--accent-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    text-decoration: none;
}

sup {
   vertical-align: top; 
   font-size: var(--font-size-small);
   font-family: var(--bold-font);
}

sup::before {
    content: '(';
    color: var(--accent-color);
    font-family: var(--bold-font);
    }

sup::after {
    content: ')';
    color: var(--accent-color);
    font-family: var(--bold-font);
    }





/** LINKS **/

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

p a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: dotted;
    text-decoration-color: var(--accent-color);
}

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

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


/**HEADER**/

header {
  margin-bottom: 0;
  width: 100%;
  z-index: 100;
  transform: none;
  overflow: visible;
  height: var(--header-height);
}

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

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

.navbar--index {
  font-family: var(--custom-font);
  font-size: var(--font-size--header);
  line-height: calc(2*(var(--line-height--header)));
  text-decoration: none;
  text-transform: uppercase;
  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-color: var(--body-background-color); 
  z-index: 4;
}

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



/**SIDE NAVIGATION**/

nav {
font-size: var(--font-size-small);
}

#nav {
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: var(--margin-left);
  width: 100vw;
  max-width: var(--sidebar-width);
  padding-top: 0vh;
}

nav ul {
overflow-y: auto;
max-height: 100%;
margin: 0;
  padding: 0;
  padding: 0;
  list-style-type: none;
  align-items: baseline;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}

nav ul::-webkit-scrollbar {
display: none;
}

ul {
  flex-direction: column;
}

li p {
    margin: 0;
    }

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

.navbar--chapter--foreword {
    margin-top: 10vh;
    }

.navbar--chapter--previously-published-inc-etherport {
    margin-bottom: 5vh;
    }

.navbar--chapter--broadcasting-resistance, 
.navbar--chapter--rewiring-against-the-giants,
.navbar--chapter--frequencies-for-better-futures,
.navbar--chapter--tactical-media-repository,
.navbar--chapter--appendix {
  padding-top: 1vh;
  font-family: var(--custom-font);
  color: var(--accent-color);
}

.navbar--chapter--broadcasting-resistance > a{
    pointer-events: none;
*  cursor: default;
*}

.navbar--chapter--rewiring-against-the-giants > a{
    pointer-events: none;
*  cursor: default;
*}

.navbar--chapter--frequencies-for-better-futures > a{
    pointer-events: none;
*  cursor: default;
*}

.navbar--chapter--tactical-media-repository > a {
    pointer-events: none;
*  cursor: default;
*}

.navbar--chapter--appendix > a {
    pointer-events: none;
*  cursor: default;
*}


/**INDEX PAGE**/

.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: 50vw;
    width: calc(100vw - (var(--sidebar-width) - var(--margin-left) - var(--margin-left)));
    margin: 12vh auto 1vw 35vw;
    line-height: 1.2;
    font-size: var(--font-size);
}






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

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

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

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}


[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(--body-font);
}
 
.link-source {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 85%;
}

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: var(--accent-color);
}
 
.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;
    text-decoration-style: dotted;
}
 
.tag--citation {
    background-color: beige;
}
 
b {
    border: solid var(--main-color) 2px;
}

img {
    max-width: 100%;
}


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

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

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

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}






@media only screen and (max-width: 800px) {
  
  /* Mobile Header */
  header {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .navbar--index {
    font-size: var(--font-size--h1);
    line-height: var(--line-height--header);
    width: 100vw;
    text-align: left;
    margin: 0;
    padding-right: 30vw;
    padding-left: 3vw;
  }

  .navbar--print {
    font-size: var(--font-size--h1);
    line-height: var(--line-height--header);
    right: 1vw;
    color: var(--accent-color);
  }

  header a {
    padding-bottom: 2vh;
  }

  /* Mobile Navigation */
  #nav {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 96vw;
    width: 96vw;
    margin: 0 2vw 0 2vw;
    padding-top: 14vh;
    padding-bottom: 5vh;
    font-size: var(--font-size);
    text-align: center;
  }
  
nav ul {
    overflow: visible;
}

  nav > ul {
    text-align: center;
    display: block;
  }

  .navbar--labels,
  #nav--sub {
    display: none;
  }

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

  /* Mobile Main Content */
  main {
    max-width: 98vw;
    width: 98vw;
    margin: 0;
    margin-top: 175vh;
    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%;
  }

  /* Mobile Typography */
  h1 {
    top: calc((2.18*(var(--line-height--header))));
    font-size: var(--font-size--h1);
    padding-top: calc(0.4*var(--line-height--header));
    padding-bottom: 5px;
    margin-top: 10vh;
  }

  h4 {
    padding-top: 1vh;
    font-size: var(--font-size--h2);
    padding-bottom: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h5 {
    margin: 1vh 1vw 1vh 1vw;
    text-transform: uppercase;
  }

  /* Mobile Annotations */
  .reference--target {
    display: none;
  }

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

  /* Mobile Index & Colophon */
  .index main {
  }

  .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;
  }

}