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

/* ########### FONTS ########### */

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

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

:root {
  --font-size: 20px;
  --font-size-small: 16px;
  --body-font: "Tuffy";
  --brown: #521E00;
  --green: #C7FF00;
  --green-fake: #87ad00;
  --white: white;
  --black: black;
  --margin: 1em;
  --offwhite: #F0F0F0;
  --clocksize: calc(100vh - 2em);
  --clocksmall: 15em;
  --printsize: calc(100vw - 100vh  - var(--margin) - 15px);
  --printsmall: 6em;
  --annotationsize: 20em;
}

* {
box-sizing: border-box;
}

[data-snap="snap"]{
    scroll-snap-type: y mandatory;
    }

body{
    padding: .5em;
    color: var(--brown);
    font-family: var(--body-font);
    font-size: var(--font-size-small);
    background: var(--offwhite);
    padding-top: 0;
    margin-top: 0;
}

.snap{
    height: 100vh;
    scroll-snap-align: start;
    pointer-events: none;8
    }

a{
    color: var(--black);
    word-break: break-all !important;
}

strong{
    font-weight: normal;
    font-style: italic;
    }

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


main{
    max-width: 40em;
    min-height: calc( 100lvh - 710px);
    width: calc( 100% - (var(--annotationsize) + var(--clocksmall) + var(--margin) + var(--margin)) * .8);
    margin: 0 auto 0 calc(var(--clocksmall) * .8 + var(--margin) * .8);
    line-height: 1.3;
    font-size: var(--font-size);
    }

.timecode{
    color: black;
    width: 4em;
}

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

main a:hover,
.reference--label--inline{
    background-color: var(--green);
    color: var(--brown);
}

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


/* ########### Footer ########### */


footer{
    margin-top: 16em;
    }

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

footer a{
    text-decoration: none;
    }


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

.annotation[data-type="reference"]::before{
    content: "⁝";
    color: var(--black);
    font-size: var(--font-size-small);
    }

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

.annotation--author{
    text-transform: uppercase;
    color: var(--black);
    }

main .annotation{
    }

main .annotation--content{
    font-size: var(--font-size-small);
float: right;
width: var(--annotationsize);
margin-right: calc(var(--annotationsize) * -1 - var(--margin));
margin-bottom: var(--margin);
clear: both;
}

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

/* .annotation::before {
  content: "↜ ";
  float: left;
  margin-left: -1.1em;
} */

.reference--target{
    font-size: var(--font-size-small);
    float: left;
    margin-left: calc( (var(--clocksmall) + var(--margin)) * -1);
    width: 10em;
    color: var(--brown);
    margin-bottom: 0px;
    clear: left;
    }

a:has(.reference--label--inline){
    text-decoration: none;
    }

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

main .annotation a{
    color: black;
    float: none;
    display: inline;
    margin-right: 0px;
    margin-bottom: 0px;
    }

/* ########### TAG PAGE ########### */

.label--context-list{
    padding-left: 0px;
    }

.label--context-list li{
    list-style-type: none ;
    }

.link-source{
    text-transform: uppercase;
    }

.link-source {
margin-top: 9em;
    }

/* ########### MENU ########### */

#nav {
    padding-top: 1em;
    margin-left: calc(var(--clocksmall) + var(--margin));
    scroll-snap-align: start;
}

#nav ul {      
    list-style-type: none;
    padding: 0;
}

#nav > ul {
    display: grid;
    max-width: 1000px;
    grid-row-gap: .05em;
    grid-template-columns: 1fr 1fr;
    }
    
#nav > ul > li {
    grid-column: 1;
    }

#nav > ul > .navbar--labels {
    grid-row: 1 / 10;
    grid-column: 2;
    }

.navbar--labels > a {
    display: none;
    }

.navbar--label a {
color: var(--brown);
    }



#nav a {
    text-decoration: none;
}

.navbar--reports {
    display: none;
}

.navbar--organisation {
    display: none;
}

/* ########### Counter ########### */

#nav > ul {
    list-style: none;
    counter-reset: chapter;
}

#nav > ul > li:not(.navbar--index, .navbar--print){
    margin-left: 5em;
    }
    
#nav > ul > li:nth-child(3){
    margin-bottom: 1em;
    }
    
#nav > ul > li:nth-child(15){
    margin-top: 1em;
    }
    
#nav > ul > li::before{
    position: absolute;
    margin-left: -2.5em;
    }

#nav > ul > li:nth-child(5)::before,
#nav > ul > li:nth-child(7)::before,
#nav > ul > li:nth-child(9)::before,
#nav > ul > li:nth-child(11)::before{
    content:"⁘";
    }

#nav > ul > li:nth-child(4)::before,
#nav > ul > li:nth-child(6)::before,
#nav > ul > li:nth-child(8)::before,
#nav > ul > li:nth-child(10)::before,
#nav > ul > li:nth-child(12)::before,
#nav > ul > li:nth-child(13)::before,
#nav > ul > li:nth-child(14)::before{
    counter-increment: chapter;
    content: counter(chapter);
}



/* ########### CLOCK ########### */

#nav li.navbar--index{

        border: 1px solid var(--brown);
        position: fixed;
        top: var(--margin);
        left: var(--margin);
        list-style-type:none;
        display flex;
        height: var(--clocksmall);
        width: var(--clocksmall);

        min-width: var(--clocksmall);
        min-height: var(--clocksmall);
        justify-content: flex-end;
        border-radius: 100vh;
        z-index: 1;

        display: flex;
        align-items: center;
        text-decoration: none;
}

.home-page #nav li.navbar--index{
        height: var(--clocksize);
        width: var(--clocksize);
        max-height: none;
        max-width: none;
}


#nav li.navbar--index a{
display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 50%;
    padding-right: var(--margin);
height: 100%;
pointer-events: none;
}


/* one home page add pointer to clock */
#nav li.navbar--index.top{
    cursor: pointer;
}
/* disable link on home page */
.home-page #nav li.navbar--index.top a{
    pointer-events: none;
}
/** Make first menu item 'transparent' for the cursor, except for the link within it. */
#nav li.navbar--index a{
   pointer-events: initial;
}

/* on home page add hover to clock */
#nav li.navbar--index:hover{
    background: var(--brown);
}
#nav li.navbar--index:hover a *{
    color: var(--offwhite);
}

#nav li.navbar--index span{
    color: var(--black);
}

#nav li.navbar--print{
        border: 1px solid var(--brown);
        position: fixed;
        top: var(--margin);
        right: var(--margin);
        list-style-type:none;
        display flex;
        height: var(--printsmall);
        width: var(--printsmall);
        min-width: var(--printsmall);
        min-height: var(--printsmall);
        max-width: var(--clocksize);
        max-height: var(--clocksize);
        justify-content: center;
        text-transform: uppercase;
        /*opacity: .5;*/
        /* cursor: not-allowed; */
}
#nav li.navbar--print:hover{
        background: var(--brown);
}
#nav li.navbar--print:hover a{
        color: var(--offwhite);
}
#nav li.navbar--print a{
    display: block;
    height: 100%;
    width: 100%;
    padding: var(--margin);
    /* pointer-events: none; */
    
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.home-page #nav li.navbar--print{
        height: var(--printsize);
        width: var(--printsize);
}

/** hide ugly labels at end of  content **/

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

.navbar--chapter--Going, .navbar--pages{
    display: none;
}

.navbar--chapter:hover a, .navbar--label:hover a{
    background: var(--green);
}

/* ########### Colophon ########### */

body[data-content-model="colophon"] img{
    max-width: 250px;
    padding: 2em 0;
    display: inline;
}


/* ########### INLINE ARTICLE ########### */
        
    h1, h2, h3, h4, h5, h6{
        font-size: var(--font-size);
        font-weight: normal;
        margin-left: 4em;
        margin-top: 9em;
        color: var(--black);
        text-transform: uppercase;
        }
        
        h1{
            font-size: calc(var(--font-size) * 2);
            margin-left: 2em;
            margin-top: 2em;
            }


h5{
margin-top: 3em;
margin-bottom: 1em;
    padding-right: 2em;
}
    
    h6{
        display:none;
        }
        
        

/* ########### BREAKPOINTS ########### */


/* Circle and Square */

@media screen and (max-aspect-ratio: 1/1) {
/* Styles for vertical screens */
:root{
--clocksize: calc(100vw - 2em);
--printsize: calc(100vh - 100vw - var(--margin));
}
#nav li.navbar--print{
bottom: var(--margin);
top: auto;
}
}






/*
Mittel Bildschirme (when the layout fills the whole width)
1em margin + 12em clock + 1em margin + 40em * 1.25 body text + 1em margin + 20em annotations + 1em margin 
*/
@media only screen and (max-width: 86em) {
    :root{
        --annotationsize: 15em;
        --clocksmall: 11em;
        --printsmall: 10em;
    }
    
    #nav li.navbar--index a{
/*        max-width: 75%; */
    }
}



@media only screen and (max-width: 1024px) {
    :root{
        --annotationsize: 12em;
        --clocksmall: 8em;
        --printsmall: 7.5em;
    }
}


/* Mobile */

@media only screen and (max-width: 1024px) {
    :root{
        --annotationsize: 12em;
        --clocksmall: 8em;
        --printsmall: 7.5em;
    }
}
 
 
/* Mobile */
 
@media only screen and (max-width: 800px) {
    
main{
width: 100%;
margin-left: 0;
padding-top: calc(100vh - var(--clocksmall));
}
.snap{
    height: alc(100vh - var(--clocksmall));
}
h1{
    margin-left: 0;
    line-height: 1.1;
    }
 
footer ul{
    flex-direction: column;
    gap: 0;
    }
 
.reference--target{
display: none;
}
 
main .annotation .annotation--content{
float: revert;
position: relative;
display: block;
margin: revert;
max-width: 65ch;
width: revert;
padding-left: 2em;
}
 
 
.timecode{
width: 3.5em
}
 
main figure{
    margin-left: 0;
}
 
main img{
padding-left: 0;
}
 
figcaption{
padding-left: 0;
}
 
 
#nav{
        margin: 0;
        padding-top: calc(var(--clocksmall) + var(--margin));
        position: absolute;
        scroll-snap-align: revert;
}

.home-page{
        padding-top: calc(100vh - var(--clocksmall));
}
 
#nav > ul > li:not(.navbar--index, .navbar--print){
    margin-left: 2.5em;
    }
 
 
#nav > ul {
grid-template-columns: 1fr;
}

.navbar--labels{
display: none;
}
 
        #nav li.navbar--index{
                transition: top .5s;
        }
        #nav li.navbar--index a{
                padding-left: 25%;
        }
        #nav li.navbar--print{
                transition: bottom .5s;
        }
         
        #nav li.navbar--index.hidden-away{
                top: calc(-1 * var(--clocksmall));
        }
        #nav li.navbar--print.hidden-away{
                bottom: calc(-1 * var(--printsmall));
        }
 
 *{
        scroll-snap-align: revert!important;
        scroll-snap-type: y mandatory!important;
        }
}