@import 'fonts.css';
@import 'variables.css';

html {
  font-family: "Alegreya";
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  font-feature-settings:"onum";
  text-rendering: optimizeSpeed;
  background-color: white;
  /* hyphens: auto;
  word-wrap: break-word; */
}

main {
  width: 100%;
  min-height: 100vh;
  padding: 1rem;
  padding-top: 4rem;
  box-sizing: border-box;
}

article {
  max-width: 60rem;
  margin: auto;
  background-color: white;
  position: relative;
  z-index: 10;
}

section {
  max-width: 34rem;
  margin: auto;
}


/* typography */

a:link:hover,
a:visited:hover {
  text-decoration: underline;
}

h2 {
  font-size: var(--xxl);
  line-height: 1.2;
  margin-bottom: 1.25rem;
  font-feature-settings:"lnum";
}

h3 {
  font-size: var(--m);
  margin-bottom: 0.5rem;
  font-feature-settings:"lnum";
}

.bodytext h2 {
  font-size: var(--l);
  margin-bottom: 0;
}

.bodytext h3 {
  text-decoration: underline;
}

.bodytext h4 {
  font-size: var(--m);
  text-transform: uppercase;
  text-align: center;
  font-feature-settings:"lnum";
}

.bodytext h4:not(:first-child) {
  margin-top: 2rem;
}

.bodytext blockquote {
  padding-left: 1.5em;
  box-sizing: border-box;
  font-style: italic;
  border-left: 1.5px dotted black;
  width: 90%;
  margin-top: 1rem;
}

blockquote p:not(:last-child) {
  margin-bottom: 0.5em;
}

.bodytext a:link, a:visited {
  text-decoration: underline;
}

em {
  font-style: italic;
}

::selection {
  background-color: var(--accent-40);
  color: black;
}

audio {
  width: 100%;

}


/* navigation */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;
  background-color: white;
  border-bottom: 1px solid rgb(191, 191, 191);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  font-size: var(--m);
  transition: top 0.5s;
}

header.hidden {
  top: -2.5rem;
  top: 0;
}

header .items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 55rem;
  z-index: 10;
}

.logo svg {
  height: 1.5em;
  width: 1.5em;
  margin-bottom: -0.4em;
  margin-right: 0.2em;
}

.logo a:hover {
  text-decoration: none;
}

header nav {
  position: fixed;
  top: 3rem;
  right: -20em;
  width: 20em;
  height: calc(100% - 3.5rem);
  padding: 0.25rem;
  box-sizing: border-box;
  background-color: rgba(26, 26, 26, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: 0.5s;
  border-radius: 5px;
  box-shadow: 0 0 50px #0000004d;
  color: white;
  pointer-events: none;

}

header nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 55rem;
  margin: auto;
  height: 100%;
  padding: 0.25rem;
  box-sizing: border-box;
}

header nav li {
  display: block;
  width: 100%;
}

header nav a {
  display: block;
  padding: 0.1rem;
}

header.active nav {
  opacity: 1;
  right: 0.5rem;
  pointer-events: all;
}

header button {
  padding: 0.5em;
  box-sizing: border-box;
  font-size: 1.5rem!important;
}

header button .open {
  display: block;
}

header button .close {
  display: none;
}

header.active button .open {
  display: none;
}

header.active button .close {
  display: block;
}

header hr {
  background-color: rgba(255, 255, 255, 0.25);
  height: 0;
  margin: 1rem;
}

/* title */

section.title {
  max-width: 45rem;
  text-align: center;
  position: relative;
  z-index: 10;
}


/* cover */

section.cover {
  max-width: 55rem;
  height: 75vh;
  background-color: var(--accent-40);
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;
  box-shadow: 0 0 50px #89544e65;
  border-radius: 2px;
  overflow: hidden;
}

section.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}


/* summary */

section.summary {
  max-width: 34rem;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 3rem;
  text-wrap: balance;
  font-size: var(--m);
}

.home .summary,
.archive-single .summary,
.biography-single .summary {
  max-width: 45rem;
  font-size: var(--xl);
}

section.summary .button {
  display: inline-block;
  background-color: var(--accent-20);
  margin-top: 1em;
  padding: 0.2em 0.35em 0.2em 0.35em;
  font-size: var(--s);
  border-radius: 2px;
  line-height: 1.5;
}

/* bodytext */

section.bodytext {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 3rem;
}

.bodytext figure {
  width: calc(100% + 8rem);
  position: relative;
  margin: auto;
  margin-left: -4rem;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 16rem;
  gap: 1rem;
}

.bodytext figure[data-orientation="portrait"] {
  width: calc(100% + 1rem);
}

.bodytext figure img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: contain;
  transition: transform 0.2s;
  cursor: zoom-in;
}

.bodytext figure img:hover {
  transform: scale(1.02);
}

.bodytext figcaption {
  font-size: var(--s);
  letter-spacing: 0.01em;
  padding-top: 0.5rem;
}

.audio-wrapper figcaption {
  max-width: 35em;
  text-align: center;
}

figcaption .credits {
  color: rgb(144, 144, 144);
  display: block;
  margin-top: 0.25em;
}


.audio-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* tiles */


.tile-collection[data-colums="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.tile-collection[data-colums="3"] {
  grid-template-columns: repeat(3, 1fr);
  padding-top: 3.5rem;
  /* border-top: 1px solid rgb(191, 191, 191); */
}

.tile-collection[data-colums="4"] {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

section.tile-collection {
  max-width: 50rem;
  display: grid;
  gap: 2rem;
}

.tile-single {
  display: flex;
  flex-direction: column;
  gap: 0.4rem
}

.tile-single .cover {
  width: 100%;
  aspect-ratio: 3/2;
  background-color: rgb(230, 230, 230);
  line-height: 0;
  border-radius: 2px;
  overflow: hidden;
}

.tile-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tile-single h4 {
  font-size: var(--m);
  line-height: 1.1;
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: -0.1em;
}

.tile-single p {
  font-size: var(--s);
}

.tile-single .dates {
  font-feature-settings:"lnum";
  letter-spacing: 0.02em;
  background-color: var(--accent-40);
  padding: 0.15em 0.35em 0.15em 0.35em;
  align-self: flex-start;
}

.dates.passed {
  background-color: rgb(217, 217, 217);
}


[data-colums="2"] h4 {
  font-size: var(--l);
}

[data-colums="2"] p {
  font-size: var(--m);
}


/* elements */

.circle {
  display: inline-block;
  height: 0.6em;
  width: 0.6em;
  background-color: var(--accent-100);
  border-radius: 1rem;
  margin-right: 0.3em;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(white, transparent);
  mix-blend-mode: hue;
  display: none;
}

.arrow {
  margin-right: 0.25em;
}

.categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.categories li {
  background-color: rgba(0, 0, 0, 0.08);
  padding: 0.2em 0.35em 0.2em 0.35em;
  border-radius: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  font-family: sans-serif;
  transition: 0.2s;
}

.title .categories ul {
  justify-content: center;
}


/* map */

.map-container {
  border-radius: 2px;
  margin-bottom: 2rem;
  padding-top: 0;
  position: sticky;
  top: 2.5rem;
}

.archive-collection .map-container {
  top: 0;
}

#map {
  width: 100%;
  height: 75vh;
  font-family: "Alegreya";
  z-index: 0;
}

.leaflet-popup-content-wrapper {
  border-radius: 2px;
}

.leaflet-popup-content {
  border-radius: 2px;
  margin: 0;
  padding: 0.5em 0.75em 0.5em 0.75em;
  font-size: var(--s);
}

.leaflet-popup-content p {
  margin: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.leaflet-popup-content a {
  display: inline-block;
  background-color: var(--accent-20);
  padding: 0.25em 0.5em 0.25em 0.5em;
  border-radius: 2px;
  margin-right: 0.25rem;
}

.leaflet-popup-content .title {
  font-size: var(--m);
}

.leaflet-control-attribution {
  font-size: var(--xs);
  background: white!important;
  display: none;
}

.leaflet-top.leaflet-left {
  top: 0.15rem
}

.leaflet-bar a {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-decoration: none!important;
}

.leaflet-bar,
.leaflet-bar a {
  border-color: var(--accent-50)!important;
  border-width: 1.5px!important;
  background-color: var(--accent-30);
  font-weight: 200;
}


/* table */

section.table {
  max-width: 55rem;
}

table {
  width: 100%;
  font-size: var(--s);
  z-index: 200;
}

th {
  letter-spacing: 0.03em;
  color: grey;
}

/* tr */

tr {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr;
  border-bottom: 1px solid black;
  padding: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  column-gap: 2rem;
  transition: background-color 0.15s;
}

tr.header-row {
  position: sticky;
  top: 0rem;
  top: 2.5rem;
  background-color: white;
  transition: top 0.5s;
  z-index: 200;
}

tr.header-row.shifted {
  top: 2.5rem;
}

tr.place {
  position: relative;
}

tr.place:hover {
  background-color: var(--accent-20);
  cursor: pointer;
}

/* td */

td.headline {
  font-size: var(--m);
}

td.summary {
  height: 0;
  overflow: hidden;
  transition: 0.4s;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  opacity: 0;
  font-size: var(--s)!important;
}

td.summary a {
  display: inline-block;
  background-color: var(--accent-10);
  padding: 0.25em 0.5em 0.25em 0.5em;
  border-radius: 2px;
  margin-top: 0.5rem;
  margin-right: 0.25rem;
}

td.location {
  text-indent: -0.9em;
  margin-left: 0.9em;
}


/* active */

tr.active,
tr.active:hover {
  background-color: var(--accent-30);
  cursor: auto;
}

tr.active td.summary {
  height: 10rem;
  opacity: 1;
}


/* glossary */

.glossary-collection .summary {
  font-size: var(--m);
}

.simple-table ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--l);
}

.simple-table li {
  background-color: rgb(236, 236, 236);
  border-radius: 2px;
  padding: 0.25em;
  text-align: center;
}

.simple-table li:hover {
  background-color: var(--accent-20);
  border-radius: 2px;
  padding: 0.25em;
}

.simple-table li .arrow {
  display: inline;
  font-size: 0;
  transition: 0.2s;
}

.simple-table li:hover .arrow {
  font-size: inherit;
}

.simple-table a {
  text-decoration: none!important;
}

/* lightbox */

#lightbox {
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s;
}

#lightbox.active {
  top: 0;
  opacity: 1;
  pointer-events: all;
  cursor: zoom-out;
}

#lightbox .container {
  width: 100%;
  height: 100%;
}

#lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* footer */

footer {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(26, 26, 26);
  color: white;
  margin-top: 5rem;
  display: flex;
  align-items: flex-start;
  padding: 2rem 1rem 3rem 1rem;
  justify-content: center;
}

footer nav {
  display: grid;
  grid-template-columns: 1fr 13rem 13rem;
  column-gap: 0.5rem;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 55rem;
}

footer nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

footer nav a {
  display: inline-block;
  padding: 0;
}

footer svg path,
footer svg line {
  fill: white!important;
  stroke: white!important;;
}

footer .logo {
  font-size: var(--l);
}













.intro {
  margin-bottom: 4rem;
}

.intro h2 {
  margin-bottom: 1em;
}

#slideshow {
  width: 100%;
  max-width: 60rem;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  z-index: 0;
}

#slideshow::-webkit-scrollbar {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-overflow-scrolling: auto;
}

#slideshow::-webkit-scrollbar:vertical {
  width: 12px;
}

#slideshow::-webkit-scrollbar:horizontal {
  height: 12px;
}

#slideshow::-webkit-scrollbar-track {
  background: none;
}

#slideshow::-webkit-scrollbar-thumb {
  background: var(--accent-100);
}
#slideshow::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
  cursor: pointer;
}

.slides {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  box-sizing: border-box;
  width: 100%;
}

.prev-slide,
.next-slide {
  position: absolute;
  top: 0;
  height: calc(100% - 12px);
  width: 20vw;
  z-index: 10;
  display: none;
}

.prev-slide {
  left: 0;
  cursor: w-resize;
}

.next-slide {
  right: 0;
  cursor: e-resize;
}

@media (hover: hover) {
    .prev-slide,
    .next-slide {
      display: block;
  }
}

/* ----- 7.1 Slideshow (Home) ----- */

.slide {
  width: 100%;
  height: 75vh;
  
  position: relative;
  overflow: hidden;
  background-color: var(--accent-40);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.slide-info {
  padding: 1em;
  box-sizing: border-box;
  z-index: 10;
  width: 50%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  right: 0;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s;
}

.slide h3 {
  font-size: var(--xl);
}

.slide p {
  font-size: var(--m);
}

.slide a.button {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  margin-top: 1em;
  padding: 0.2em 0.35em 0.2em 0.35em;
  font-size: var(--s);
  border-radius: 2px;
}

@media (hover: hover) {
a.slide:hover {
    color: var(--black);
  }
}

.backgroundimage {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  transition: opacity 0.2s;
  pointer-events: none;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}


/* exhibition */

.exhibition-info {
  background-color: var(--accent-10);
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 10px;
  max-width: 25rem;
  font-feature-settings:"tnum";
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
}

.openingtimes {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.openingtimes tr {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-bottom: none;
  padding: 0;
  column-gap: 1rem;
}

.externallink {
  font-size: var(--s);
}


/* category collection */

.category-collection .tile-single {
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 3/2;
  background-color: rgb(236, 236, 236);
  border-radius: 2px;
  font-size: var(--l);
  font-family: sans-serif;
}

.category-collection .tile-single h3 {
  margin-bottom: 0.1em;
}

.category-collection .tile-single:hover {
  background-color: var(--accent-20);
  
}