@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/

@font-face {
    font-family: 'textface';
    src: url('../fonts/textface/CaslonSVZ-Regular-BETA01-WEB_ttf.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'textface';
    src: url('../fonts/textface/CaslonSVZ-ItalicBeta1-WEB_ttf.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}



@font-face {
  font-family: 'orchard';
  src: url('../fonts/orchard/Orchard-Linear-modified-2.otf');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}






/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgb(255, 255, 255);
  --color-text: rgb(0, 0, 0);
  --color-text-link: rgba(0,0,255,0.8);
  --color-text-link-hover: rgba(0,0,255,0.4);
  /* Font values */
  --font-text: 'textface', 'Times', 'serif';
  --font-caption: 'Diatype', 'Helvetica', 'Arial', 'sans';
  --font-size: 26px;
  --font-size-caption: 19px;
  --line-height: 1.26;
  --text-indent: 46px;
  --heading-1-size: 4vw;
  /* Margin value */
  --margin: 1rem;
  /* Padding Value */
  --heading-1-spacing: 14vh;
}



/* GENERAL STYLES */

body, html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
font-family: var(--font-text);
font-size: var(--font-size);
line-height: var(--line-height);
font-variant-numeric: oldstyle-nums;
scroll-behavior: smooth !important;
box-sizing: border-box;
hyphens: manual;
}

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

body {
  position:relative;
  background-color: var(--color-background);
  color: var(--color-text);
  width:100%;
  height:auto;
  overflow-y:auto;
}

.hyphenate {
  hyphens: auto;
}

/* .footnote-ref {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}


.footnote-tooltip {
  position: absolute;
  margin: 5px;
  overflow-wrap: break-word;
  width: max-content; 
  min-width: 8ch; 
  max-width: 36ch;
  white-space: normal; 
  background: #000000;
  color: white;
  border: 1.5px solid #000000; 
  padding: var(--font-size-caption);
  font-size: var(--font-size-caption);
  display: none;
  z-index: 1000;
  text-indent: 0;
}


.footnote-ref.active .footnote-tooltip {
  display: block;
} */

.sub-chapters {
padding-left: 2ch;
/* list-style-position: inside; */
}

.chapter {
  padding-left: 2ch;
  text-indent: -2ch;
}







.dimmed-footnote {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}


.highlighted-footnote {
  opacity: 1;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  scroll-margin-top: 10vh;
}

.sig {
  width: 15%;
  margin-left: var(--text-indent);
  margin-top: 48px;
}


.landing {
  display: flex;
  justify-content: center;
  height: 115vh;
  height: 115svh; 
  height: 115dvh; 
  height: 115lvh; 
pointer-events: none;
}

.school-date {

  color: white;
  font-size: var(--font-size-caption);
  text-align: left;
  margin: 2vh;
  line-height: 1.33;

}




.background{
position: fixed;
pointer-events: none !important;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background: rgb(0, 0, 0);
      opacity: 1; 
      transition: opacity 200ms linear;
}

.path {
  pointer-events: none !important;
  stroke-dasharray: 3000;
  stroke-dashoffset: 0;
  /* position: fixed; */
margin-right: 2vw;
  /* transform: translateY(-50%);
  top: 50%; */
  width: 56vw;
  margin-top: 12dvh;
 
}

.path-container {
  pointer-events: none !important;
  position: fixed;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
display: flex;
justify-content: center;
align-items: center;
}



.menu-button {
  position: fixed;
  left: 2vh;
  bottom: 2vh;
  z-index: 2000;
mix-blend-mode: difference;
color: white;
text-align: center;
border-radius: 50%;
border: 1.5px solid white;
width: 32px;
height: 32px;
vertical-align: baseline;
display: flex;
justify-content: center;
align-items: center;
}

.menu-button:hover {
  background-color: white;
  color: black;
}

.info {
padding-top: 0.4vh;
}

.credits {
margin-left: var(--text-indent);
  text-align: left;
  /* margin-right: 2vh; */
  font-size: var(--font-size-caption);
  text-indent: 0;
}




nav {
  width: 26vw;
  background-color: white;
  position: fixed;
  top: 0;
  left: -26vw;
  height: 100vh;
  transition: left 0.3s ease-in-out;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 1999;
padding: 3vh;
box-sizing: border-box;
border-right: 1.5px solid rgb(0, 0, 0);
font-variant-numeric: tabular-nums;
}

nav a {
  color: var(--color-text);
  opacity: 1;
}

nav a:hover {
color: var(--color-text);
 text-decoration: underline;
 text-decoration-thickness: 1.5px;
 text-underline-offset: 5px;
}

.nav-list {
  list-style: decimal;
}

.active {
  left: 0;
}




#abstract-container .viewer {
height: unset;
}

#epilogue-container .viewer {
  height: unset;
  }

  #epilogue-container {
    margin-bottom: calc(var(--heading-1-spacing)* 1.6);
  }

.line-separator {
  height: 96px;
}


.container {
  display: flex;
  /* gap: 2vh; */

}

.heading-container{
  display: flex;
  flex-direction: column;
  flex: 7.9;
  margin-right: 2vh;
}

.image-column {
  flex: 8;
  display: flex;
padding-top: 0.5vh;
/* padding-left: 0.5vh; */
  position: sticky;
  top: 1.5vh;
  margin-left: 2vh;
height: min-content;


}

.thumbnail-column {
  flex: 1;
  /* top: 20px; */
  position: sticky;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  height: fit-content;
  background-color: white;

}

.viewer {
  flex: 10;
  height: 100vh;
  /* position: sticky;
  top: 2vw; */
}

/* .viewer-portrait figure {
margin: 0% 16% 0% 16%;
} */

.text-column {
flex: 7;

}

.footnote-column {
  flex: 0.9;
  margin-right: 2vh;
}

.image-column-even {
  flex: 4.5;
}

.footnote-column-even {
  flex: 4;
}


.thumbnail-column img {
  width: 100%;
  cursor: pointer;
transition: 0.3s;
opacity: 1;
/* filter: grayscale(100%); */
border: 1px solid black;
/* filter: contrast(1.2) grayscale(100%); */
}


.thumbnail-column img:hover {
  /* width: 110%; */
/* filter: grayscale(0%); */
margin-left: 2vh;

}


#viewer-feminine-hands {
  height: 65vh;
}

.viewer {

  display: flex;
  align-items:flex-start;
  justify-content: center;

  position: relative;
  /* height: 100vh; */

}
figure {
  text-align: left;
  display: none;
  position: relative;
 /* padding-bottom: 3vh; */
  width: 100%;
  margin: 0% 17.5% 0% 17.5%;
  position: sticky;
  /* top: 10.5vh; */
  top: 2vh;


}



figure.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--font-size-caption) / 1.5);

  /* animation: fadeIn 0.2s forwards; */

}

/* @keyframes fadeIn {
  0% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
} */

figure img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
  /* border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
}
figcaption {
font-size: var(--font-size-caption);
  /* font-family: var(--font-caption); */
}

.clickable {
  cursor: pointer;
  white-space: nowrap;
}

.clickable:hover {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1.5px;
}

/* Styling for the close button */
.close-button {
  position: absolute;
  top: 0.5vh;
  right: 0.6vh;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  mix-blend-mode: invert;
  /* border-radius: 50%;
  border: 1px solid white; */
  border: none;
  width: 30px;
  height: 30px;
font-size: calc(var(--font-size)*1.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  vertical-align: baseline;
  /* font-family: var(--font-caption); */
}

.close-button-exception {
  color: black;
}

figure:hover .close-button {
  opacity: 1;
}

.footnotes {
  word-wrap: break-word;
text-indent: 0px;
page-break-inside: avoid;
}

.ol-footnotes {
columns: 3;
column-gap: 8vh;
break-inside: avoid-column;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
list-style:decimal-leading-zero;
font-size: var(--font-size-caption);
padding-left: 1vh;
}

.ol-footnotes p {
  text-indent: 0;
}

/* ol {
  list-style-position: outside; 
} */

.ol-footnotes li {
  padding-left: 12px;  /* Adjust the space between the number and the content */
  break-inside: avoid; /* Prevent list items from being broken across columns */

}

.footnote-container{
  margin-left: 2vh;
  margin-right: 2vh;
  margin-bottom: 2vh;
}

.footnotes a {
  color: white;
}

.footnote:target {
  background-color: yellow;
}



.footnotes a:hover {
opacity: 0.3;
}

.references-container {
  background-color: black;
  padding: 0vh 4vh 0vh 4vh;

}

.references {
color: white;
display: flex;
flex-direction: column;
/* margin-left: 2vh;
margin-right: 2vh; */
/* padding-bottom: 4vh;
border-bottom: 1px solid white; */

}

.bibliography {
  word-wrap: break-word;
  columns: 2;
  gap: 2vh;
  font-size: var(--font-size-caption);
background-color: black;
color: white;
page-break-inside: avoid;
}

.bibliography p {
  padding-left: var(--text-indent);
text-indent: calc(-1 * var(--text-indent));
}

.bibliography a {
 color: white;
}

.bibliography a:hover {
color: white;
 }



 .thank-you {
  text-align: center;
  font-size: var(--font-size-caption);
  padding-bottom: calc(var(--heading-1-spacing)/ 3);

 }

 .thanks {
  text-transform: uppercase;
 }

 /* .image-sources {
font-variant-numeric: lining-nums;
 } */

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

a:hover {
  text-decoration: underline;

  text-decoration-thickness: 1.5px;
  /* text-decoration: underline; */
}

.mobile-break {
  display: none;
}


h1{
  scroll-margin-top: var(--heading-1-spacing);
  font-family: 'orchard';
  font-weight: normal;
  font-size: var(--heading-1-size);
  transition: 0.3s ease-in-out;
text-align: center;
/* font-feature-settings: "liga" 0, "kern" 0; */
line-height: 1;
word-break: keep-all;
margin-bottom: 0;
margin-top: 0;
}

.heading-1-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--heading-1-spacing);
  margin-top: calc(var(--heading-1-spacing)* 1.6);
}


/* 
.legible {
  opacity: 0;
  font-family: 'textface';
  align-self: baseline;
transition: 500ms ease-in-out;
  font-size: 0.5px;
}

.legible.visible {
  opacity: 1;
  font-size: var(--font-size);
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  pointer-events: auto;
} */



.legible {
  opacity: 0;
  font-family: 'textface';
  align-self: baseline;
  transition: 500ms ease-in-out;
  font-size: 0.5px;
}


.legible.visible {
  opacity: 1;
  font-size: var(--font-size);
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .chapter-title:hover .legible {
    opacity: 1;
    font-size: var(--font-size);
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    pointer-events: auto;
  }
}

/* .chapter-title:hover .legible {
  opacity: 1;
  display: inline-block;
  font-size: var(--font-size);
  margin-left: 0.5vw;
  margin-right: 0.5vw;
} */

.chapter-number {
  font-family: 'textface';
  font-size: var(--font-size);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  letter-spacing: 1px;
vertical-align: -0.3vh;
}

h2{
  font-size: var(--font-size);
  font-weight: normal;
font-style: italic;
  text-indent: var(--text-indent);
  margin-top: calc(var(--font-size) * 4);
  margin-bottom: var(--font-size);
  font-variant-numeric: lining-nums;
  scroll-margin-top: calc(var(--font-size)* 4);
}

#beautiful-hands {
  margin-top: 0px;
}

h3{
  /* h3 style */
}

h4, h5, h6{
  /* h4-h5-h6 style */
}

p{
margin: 0;
text-indent: var(--text-indent);
}

.sinnesabschnitt {
  height: var(--font-size);
}

.no-indent {
  text-indent: 0;
}

blockquote + p {
  text-indent: 0;
}

blockquote {
  margin-right: 0;
}


.blockquote-after-heading {
  margin-top: 0;
}

.container p:first-of-type {
  text-indent: 0;
}

ol, ul{
 list-style: none;
 margin: 0;
 padding: 0;
}

blockquote{
margin-left: var(--text-indent);
}

hr{
  /* horizontal rule style */
}



/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
}

/* navigation */
 
nav{
  
}

/* content */

main{
 
}

summary{
  
}





/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}





/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */
@media (max-width: 299px) { :root{--font-size: 18px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 299px) and (max-width: 340px) { :root{--font-size: 18px; --font-size-caption: 14px; --text-indent: 26px; --heading-1-size: 9.5vw; --heading-1-spacing: 9vh;} }
@media (min-width: 341px) and (max-width: 440px) { :root{--font-size: 19px; --font-size-caption: 15px; --text-indent: 28px; --heading-1-size: 9.5vw; --heading-1-spacing: 9vh;} }
@media (min-width: 441px) and (max-width: 779px) { :root{--font-size: 24px; --font-size-caption: 18px; --text-indent: 40px; --heading-1-size: 9.5vw; --heading-1-spacing: 11vh;} }
@media (min-width: 780px) and (max-width: 992px) { :root{--font-size: 18px; --font-size-caption: 14px; --text-indent: 35px; --heading-1-size: 4.5vw;}}
@media (min-width: 993px) and (max-width: 1280px) { :root{--font-size: 19px; --font-size-caption: 15px; --text-indent: 36px; --heading-1-size: 4.5vw;}}
@media (min-width: 1281px) and (max-width: 1366px) { :root{--font-size: 21px; --font-size-caption: 17px; --text-indent: 36px; --heading-1-size: 4.5vw;} }
@media (min-width: 1367px) and (max-width: 1440px) { :root{--font-size: 22px; --font-size-caption: 17px; --text-indent: 37px;} }
@media (min-width: 1441px) and (max-width: 1536px) { :root{--font-size: 23px; --font-size-caption: 18px; --text-indent: 38px;} }
/* @media (min-width: 1321px) { :root{--font-size: 24px;} html, body {font: var(--font-size) var(--font-text); } } */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */


/* @media (hover: hover) and (pointer: fine) {
  .chapter-title:hover .legible {
    opacity: 1;
    font-size: var(--font-size);
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    pointer-events: auto;
  }
} */


@media (min-width: 1920px) {
  :root {

    --font-size: 29px;
    --font-size-caption: 22px;
    --text-indent: 45px;

  }

}

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here */

  :root {
    /* --heading-1-spacing: 11vh; */
  }

  .path {
  
  margin-right: 3vw;
    width: 80vw;
  }



  .menu-button {
background-color: black;
color: white;
    mix-blend-mode: normal;
    border: none;
left: 4.4vw;
    bottom: 4.4vw;
border: 1px solid white;
margin: auto;
  }

  .menu-button:hover {
    background-color: black;
    color: white;

  }

  nav {
    width: 80vw;
    top: 0;
    left: -80vw;
    height: 100vh;
  padding: 4vw;
  }

  h2{
    margin-top: calc(var(--font-size) * 3);
    margin-bottom: var(--font-size);
    scroll-margin-top: calc(var(--font-size)* 3);
  }

  

.image-column, .footnote-column {
  display: none;
}

.image-column-even, .footnote-column-even {
  display: none;
}

.sinnesabschnitt-nach-bild {
  display: none;
}

.container {
  margin-left: 4.4vw;
  margin-right: 4.4vw;
}

figure {
  display: block;
  text-align: left;
  width: 100%;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 28px;
  position: relative;
  top: 0;
  padding: 0;
}

figure + p {
  text-indent: 0;
}

.chapter-number {
  font-size: calc(var(--font-size) * 0.85);
}

#disobedient-hands {
  margin-bottom: 0;
}

.last-image {
  margin-bottom: 0;
}

.clickable:hover {
  color: black;
}

.bibliography {
  columns: 1;
}

.ol-footnotes {
  columns: 1;
}

/* .references {
  padding: 0 4vw 4vw 4vw;
} */

.references-container {
  padding: 0vh 4.4vw 0vh 4.4vw;
}

.mobile-break {
  display: inline;
}




  /* utility classes, mobile */

  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

}




/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {
  

  /* your overriding css properties here */

}



/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {

   /* your overriding css properties here */

}



/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {

  /* your overriding css properties here */

}