@charset "UTF-8";


/* FONTS */

@font-face {
    font-family: 'Literata';
    src: url('../fonts/literata/literata-variablefont_opszwght-webfont.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Literata';
    src: url('../fonts/literata/literata-italic-variablefont_opszwght-webfont.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}


/* VARIABLES */

:root {
  --color-background: rgba(255,255,255,1);
  --color-text: rgba(0,0,0,1);
  --font-text: 'Literata', 'Helvetica', 'Arial', sans-serif;
  --font-size: 22px;
  --margin: 1rem;

  --font-size-heading: calc(var(--font-size) * 2);
  --font-size-subheading: calc(var(--font-size) * 1.15);
  --font-size-caption: calc(var(--font-size) * 0.75);

  --margin-xs: calc(var(--margin) * 0.4);
  --margin-s: calc(var(--margin) * 1);
  --margin-sm: calc(var(--margin) * 1.5);
  --margin-m: calc(var(--margin) * 2);
  --margin-l: calc(var(--margin) * 3);
  --margin-xl: calc(var(--margin) * 5);
}


/* GENERAL STYLES */

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

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

a {
  color: #666666;
  text-decoration: underline;
}
a:hover {
  opacity: 50%;
  text-decoration: underline;
}
a.link-no-und{
  text-decoration: none;
}

h1{
  font-size: clamp(
    var(--font-size-heading),
    4vw,
    calc(var(--font-size-heading) * 1.25)
  );
  transform: rotate(-3deg);
  padding: var(--margin-xs);
  text-align: center;
  color: var(--color-background);
}

h3{
  font-size: clamp(
    var(--font-size-subheading),
    4vw,
    calc(var(--font-size-subheading) * 1.25)
  );
  transform: rotate(2deg);
  padding: var(--margin-xs);
  text-align: center;
  color: #434343;
}

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

em{
  font-size: var(--font-size-caption);
  font-style: normal;
}

hr{
  opacity: 10%;
}

img{
  height: var(--font-size-subheading);
  transform: rotate(12deg);
}

summary {
  list-style: none;
  -webkit-appearance: none;
}
::marker,
::-webkit-marker,
::-webkit-details-marker,
summary::marker,
summary::-webkit-marker,
summary::-webkit-details-marker { 
  color: var(--color-background);
  content: "";
  display: none;
}


/* PAGE STYLES */
/* page structure */

div.page-wrapper {
  padding: var(--margin-s);
  padding-left: var(--margin-l);
  padding-right: var(--margin-s);
}

main{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: var(--margin-m);
}

.essay{
  grid-column-start: 1;
  grid-column: span 2;
}

.intro-body{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: var(--margin-m);
  margin-bottom: var(--margin-m);
}
.intro-head{
  grid-column-start: 1;
  grid-column: span 2;
  max-width: 60vw;
  display: flex;
  flex-direction: column;
}
.intro-txt{
  grid-column-start: 2;
  padding-right: var(--margin-l);
  padding-left: var(--margin-m);
}
.intro-1{
  padding-top: var(--margin-m);
}
details.intro-body[open] {
  .intro-head{
  grid-column-start: 1;
}
}

.flex-start{
  align-self: flex-start;
}
.flex-end{
  align-self: flex-end;
}

.sources{
  grid-column-start: 3;
}
.sources-box{
  position: sticky;
  top: var(--margin-s);
}
details.sources-box{
  max-height: calc(100svh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
}
details.sources-box[open]{
  summary{
  position: sticky;
  top: calc(var(--margin-xs)* -1);
  z-index: 2;
  }
  ::marker,
  ::-webkit-marker,
  ::-webkit-details-marker,
  summary::marker,
  summary::-webkit-marker,
  summary::-webkit-details-marker { 
    color: #f3f3f3;
  }
}


/* navigation */
/* nav{} */


/* content */

.hellip{
    opacity: 20%;
}

summary{
  transform: rotate(1deg);
  margin-top: var(--margin-sm);
  cursor: pointer;
  transition: transform 50ms ease-in-out 0ms;
}
summary:hover{
  transform: scale(1.02);
  span.hellip{
      opacity: 100;
    }
}
details[open] {
    summary{
      transform: rotate(-1deg);
    }
    span.hellip{
      display: none;
    }
}

ul{
  padding: 0;
}
li{
  transform: rotate(-1deg);
  margin-bottom: var(--margin-xs);
}
li::marker {
  content: "";
}

.source-txt{
  font-size: var(--font-size-caption);
}

details.sources-box[open] {background-color: #f3f3f3;}

.q-arch{color: #0c696e; background-color: #ceebee;}
.q-auke{color: #9f313e; background-color: #fbdce0;}
.q-copy{color: #26649a; background-color: #d4e5f6;}
.q-dan{color: #9c4070; background-color: #fbe8f3;}
.q-grun{color: #356f1b; background-color: #d9ead3;}
.q-julia{color: #1155cc; background-color: #ddeaff;}
.q-lara{color: #7b8033; background-color: #f4f7d1;}
.q-ludo{color: #168752; background-color: #ddf6e7;}
.q-mosh{color: #a26f38; background-color: #f7e5bf;}
.q-oak{color: #a64b23; background-color: #fcdad0;}
.q-paul{color: #6e1c75; background-color: #e2cde7;}

.r-arch{color: #0c696e;}
.r-auke{color: #9f313e;}
.r-copy{color: #26649a;}
.r-dan{color: #9c4070;}
.r-grun{color: #356f1b;}
.r-julia{color: #1155cc;}
.r-lara{color: #7b8033;}
.r-ludo{color: #168752;}
.r-mosh{color: #a26f38;}
.r-oak{color: #a64b23;}
.r-paul{color: #6e1c75;}

.collage-h{background-color: #272727;}
.collage-h3{background-color: #d9d9d9;}

.acknows{
  font-size: var(--font-size-caption);
  padding-right: var(--margin-sm);
  color: #666666;
}


/* 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: 14px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 299px) and (max-width: 340px) { :root{--font-size: 15px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 340px) and (max-width: 440px) { :root{--font-size: 16px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 441px) and (max-width: 779px) { :root{--font-size: 16px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 780px) and (max-width: 992px) { :root{--font-size: 17px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 993px) and (max-width: 1200px) { :root{--font-size: 18px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1201px) and (max-width: 1320px) { :root{--font-size: 20px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1321px) { :root{--font-size: 22px;} 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 (max-width: 779px) {
  /* 'mobile' overriding css properties here */

  div.page-wrapper {
    padding: var(--margin-sm);
    padding-top: var(--margin-s);
  }

  main{
    display: block;
  }

  details.intro-body::details-content {
    content-visibility: visible;
  }

  .sources{
    position:fixed;
    bottom: var(--margin-s);
    left:0;
    width: 80%;
    margin-left:10%;
  }
  details.sources-box{
    max-height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
    details.sources-box[open]{
    outline: var(--margin-xs) solid var(--color-background);
  }

  .intro-body{
    display: block;
    padding-left: var(--margin-s);
  }
  .intro-head{
    max-width: 80vw;
  }
  .intro-txt{
    padding-left: 0;
    padding-right: var(--margin-sm);
  }
  .intro-1{
    padding-top: 0;
  }

  .bottom-space{
    height: 20vh;
    background-color: var(--color-background);
  }

  /* utility classes, mobile */
  .desktop-only{display:none;}
  .mobile-only{display:block;}

}


/* query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */
@media (max-width: 339px) {

  div.page-wrapper {
    padding: var(--margin-s);
    padding-top: 0;
  }
  .intro-txt{
    padding-right: var(--margin-s);
  }

}


/* query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
@media (max-width: 779px) and (orientation: landscape) {
   /* overriding css properties here */
}


/* query to apply style for 'small' desktop screens */
@media (min-width: 780px) and (max-width: 992px) {

  div.page-wrapper {
    padding-left: var(--margin-m);
  }
  .intro-1{
    padding-top: var(--margin-sm);
  }

}