/** Video insert **/

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

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

.video.video--vimeo {}

:root {
  --font-size: 24px;
  --line-height: 26px;
  --header-height: 1.2;
  --font-size--header: 45px;
  --font-size--subheader: 25px;
  --font-size--author: 20px;
  --font-style--header: regular;
  --line-height--header: 50px;
  --line-height--subheader: 30px;
  --body-font: "MinionPro-Regular";
  --header-font: "BrutalistMono";
  --highlight-font: "MinionPro-Regular";
  --link-color: #70a2d6;
  --link-color--visited: #70a2d6;
  --link-color--hover: #70a2d6;
  --highlight-color: #153d6d;
  --body-background-color: #f8f8f6;
}

html::before {
  content: '';
  background: var(--highlight-color);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0px;
  width: 20px;
}

html {
  background: var(--body-background-color);
}

html, body {
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
  background: var(--body-background-color);
  color: #153d6d;
}

body {
max-width: 110ch;              /* wider overall canvas */
  margin: calc(2 * var(--line-height)) auto;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 4fr 1fr; /* wider text column */
  padding-left: 6ch;             /* reclaim horizontal space */
  column-gap: calc(2 * var(--line-height));
}

h1 {
 font-family: var(--header-font);
 font-style: var(--font-style--header);
 font-size: var(--font-size--header);
 color: #153d6d;
 line-height: var(--line-height--header);
 margin: 0 0 calc(1.5 * var(--line-height)) 0
}

h2 {
 font-family: var(--header-font);
 font-style: var(--font-style--header);
 font-size: var(--font-size--subheader);
 color: #735923;
 line-height: var( --line-height--subheader);
 margin-bottom: calc(0 * var(--line-height)) 0 0 0;
}

h3 {
  font-family: var(--highlight-font);
  font-size: 0.85em;
  line-height: 1.2;
  margin-top: calc(0.75 * var(--line-height));
}

h4, h5, h6 {
margin: var(--line-height) 0 0 0;
 font-style: var(--font-style--header);
}

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

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

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

/* ############  LAYOUT ########### */

figure{
    margin: var(--margin);
    margin-right: 0px;
    margin-left: 4em;
    border: 0;
    display: flex;
    flex-direction: column;
    }

figcaption{
    font-size: var(--font-size-small);
    background: var(--offwhite);
    padding-top: var(--margin);
    }

figcaption p{
    margin: 0px;
    }

main img{
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    mix-blend-mode: mulitply;
    background: var(--offwhite);
    }
    
/* ########### MENU ########### */

header {
  display: flex;
  vertical-align: baseline;
  margin: 2em 0;
  margin-bottom: 6em;
  grid-column-end: span 2;
}
 
nav ul {
  list-style-type: none;
  /*display: flex;*/ /* Disable flex to make it a vertical list. */
  align-items: baseline;
  margin: 0;
  padding: 0;
}
 
nav ul li {
  margin: 0 2ch 0 0;
}

/* Hide unnecessary links */
li.navbar--labels,
li.navbar--reports,
li.navbar--pages
{
  display: none;
}

.navbar--organisation {
    margin-left: -100px;
    margin-bottom: 2em;
}

.navbar--organisation a::before {
        content: url(https://etherport.org/media/filer_public/b2/9f/b29f3d8e-398f-4cad-8a74-c74bf1baba93/feature_image_letter_mask_awaw_outline.svg); 
        display: block;
        width: 200px;
}

.navbar--organisation a {
    color: transparent;
}

.navbar--index {
    font-family: var(--header-font); 
    color: var(--highlight-color);
    margin-bottom: 1em
}

.navbar--chapter {
    font-family: var(--highlight-font); 
    color: var(--link-color);
    text-decoration: none
}


/* Position print button. Slightly adjust the grid. */

.navbar--print a::before {
   content: url(https://etherport.org/media/filer_public/68/76/68762ff0-8b37-4503-a41d-5c077632588a/feature_image_letter_mask_awaw_outline_p-02.svg); 
    display: block;
    width: 90px;
}

.navbar--print {
    position: absolute;
    top: 0px;
    left: calc(100% + 2 * var(--line-height));
}

.navbar--print a {
    color: transparent;
}

/* Make header relative and only one column wide to align
    print button with label list. */
header {
    position: relative;
    grid-column-end: span 1;
}

/* Make sure main starts on column 1 now that header is not
    covering both columns. */
main {
    grid-column: 1;
}

.navbar--reports--subnav,
.navbar--pages--subnav,
.navbar--labels--subnav
{
  display: none;
}
 
 
/** Adjust label listing,  */
 
.etherport--labels ul {
  list-style-type: none;
  padding: 0;
  font-family: var(--highlight-font);
}

main {
  position: relative;
}
 
/** 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;
    font-weight: normal
}

[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;
  font-family: var(--highlight-font);
  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: solid;
}

 
[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; */ to not place it on the side
  width: 100ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 75%;
  font-family: var(--highlight-font);
}

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


.going-hybrid--labels ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.going-hybrid--labels ul li {
    margin-top: var(--line-height);
}
.going-hybrid--labels ul li a {
    padding: .3em .5em;
    border: 2px solid;
    text-decoration: none;
}
.going-hybrid--labels ul li a:hover {
    background: white;
}
 
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;
    /*background-color: #153d6d;*/
}

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

/**label decoration*/
[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: #70a2d6;
}

/**grid for Travel bags*/

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1.25 * var(--line-height));
  margin: calc(3 * var(--line-height)) 0;
}


.report-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.report-card img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  margin-bottom: calc(0.75 * var(--line-height));
}


.report-title {
  display: block;
  margin-top: calc(1.2 * var(--line-height));
  font-family: var(--highlight-font);
  font-size: 0.6em;
  line-height: 1.2;
}