/* Jävla Kritiker! — a copy of the original WordPress theme, reading its content from Sanity.
   Measurements follow the original (Foundation 6 based) theme. "Large" = 64em (1024px). */

@font-face {
  font-family: 'JK';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/FranklinGothicStd-ExtraCond.woff2') format('woff2'),
       url('/fonts/Franklin-Gothic-Std-Extra-Condensed.woff') format('woff');
}
@font-face {
  font-family: 'Times Condensed';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/TimesCondensed.woff2') format('woff2'),
       url('/fonts/TimesCondensed.woff') format('woff');
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: none; -ms-overflow-style: none; scrollbar-color: transparent transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'JK', 'Arial Narrow', arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  background: #fff;
  color: #000;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
::selection { color: #fff; background: #000; }
img { filter: grayscale(100%); max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
a { color: inherit; }
p { margin: 0 0 1rem; line-height: inherit; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; line-height: 1; }
h3, h4, h5 { font-weight: 400; margin: 0 0 0.5rem; text-rendering: optimizeLegibility; }
h3 { font-size: 1.4rem; line-height: 1.15; }
h4 { font-size: 1.2rem; line-height: 1.2; }
h5 { font-size: 1.0625rem; line-height: 1.2; }
@media (min-width: 40em) {
  h3 { font-size: 1.9375rem; }
  h4 { font-size: 1.5625rem; }
  h5 { font-size: 1.25rem; }
}
p:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; }
.serif, p.serif, .serif p { font-family: 'Times Condensed', times, serif; }
h3.header { margin-bottom: 2vw; }
p > a { text-decoration: underline; }
p.img-caption { margin-top: 0.5rem; font-size: 18px; }
.introduction p.img-caption { margin-top: 1rem; }
.loading { padding: 3vw; }

/* ---------- frame: stacked on phones, scrolling columns on large screens ---------- */
.frame { display: flex; flex-direction: column; }
.frame > .cell { width: 100%; }
@media (min-width: 64em) {
  .frame { flex-direction: row; height: 100vh; overflow: hidden; }
  .frame > .cell { height: 100%; overflow-y: auto; scroll-behavior: smooth; scroll-padding-top: 2vw; }
  .frame > .l-6 { width: 50%; }
  .frame > .l-4 { width: 33.3333%; }
  .frame > .l-2 { width: 16.6667%; }
}
.o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; }
@media (min-width: 64em) { .lo-1 { order: 1; } .lo-2 { order: 2; } .lo-3 { order: 3; } }

.border-block-s { border-bottom: 1px solid #000; padding-bottom: 3vw; }
@media (min-width: 64em) { .border-block-s { border-bottom: none; padding-bottom: 0; } }

/* ---------- menu button + phone bar ---------- */
.nav-bar-small {
  position: fixed; z-index: 1; bottom: 0; left: 0;
  width: 100vw; height: calc(24px + 8vw);
  background: #fff;
  box-shadow: 0 -2px 7px 0 rgba(50, 50, 50, 0.5);
}
.con-menu-icon {
  position: fixed; z-index: 5; bottom: 4vw; right: 3vw;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0;
}
.menu-icon { position: relative; display: inline-block; vertical-align: middle; width: 40px; height: 26px; }
.menu-icon::after {
  content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px;
  background: #0a0a0a; box-shadow: 0 12px 0 #0a0a0a, 0 24px 0 #0a0a0a;
}
.con-menu-icon:hover .menu-icon::after { background: #8a8a8a; box-shadow: 0 12px 0 #8a8a8a, 0 24px 0 #8a8a8a; }
.con-menu-icon.active .menu-icon::after { background: #fff; box-shadow: 0 12px 0 #fff, 0 24px 0 #fff; }
@media (min-width: 64em) {
  .nav-bar-small { display: none; }
  .con-menu-icon { bottom: 2vw; right: 2vw; }
}

/* ---------- menu (overlay and landing page) ---------- */
.overlay-canvas, .landing-canvas {
  position: fixed; left: 0; width: 100vw; height: 100%;
  overflow-x: hidden; overflow-y: auto;
  background: #000; color: #fff; z-index: 4;
}
.overlay-canvas { bottom: -100%; transition: bottom 1s; }
.overlay-canvas.active { bottom: 0; }
.landing-canvas { top: 0; z-index: 2; }
.nav-left, .nav-right { padding: 3vw; }
.nav-right { padding-top: 0; }
@media (min-width: 64em) {
  .overlay-canvas .frame, .landing-canvas .frame { height: 100%; }
  .nav-left { padding: 2vw 1vw 2vw 2vw; }
  .nav-right { padding: 2vw 2vw 2vw 1vw; }
}
.main-nav { display: flex; flex-direction: column; }
.main-nav a {
  display: block; color: #fff; text-decoration: none; text-transform: uppercase;
  line-height: 1; letter-spacing: normal;
  font-size: 6vw; padding: 16px 0 0; border-bottom: 1px solid #fff;
}
.main-nav .lang-item a {
  font-size: 6vw; text-decoration: underline; padding: 16px 4vw 8px 0;
  background: url('/assets/icons/next.svg') no-repeat right center / 3.5vw auto;
}
.main-nav .main-menu > a {
  font-size: 12vw; padding-right: 6vw;
  background: url('/assets/icons/next.svg') no-repeat right center / 5.5vw auto;
}
.main-nav .has-children > a, .main-nav .sub-menu a { border-bottom: 0; }
.main-nav .sub-menu { border-bottom: 1px solid #fff; display: flex; flex-direction: column; }
.main-nav .sub-menu a { padding-top: 0; }
@media (min-width: 64em) {
  .main-nav .lang-item a { font-size: 3vw; background-size: 1.5vw auto; }
  .main-nav .main-menu > a { font-size: 5.5vw; background-size: 2.5vw auto; }
}
.menu-media { width: 100%; aspect-ratio: 3 / 2; background: #111 center / cover no-repeat; }
.menu-media img, .menu-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-canvas video { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; background: #000; }

/* ---------- experiments page ---------- */
.experiments { padding: 3vw 3vw calc(24px + 11vw) 3vw; }
.introduction { padding: 3vw 3vw 0; }
@media (min-width: 64em) {
  .experiments { padding: 2vw 1vw 2vw 2vw; }
  .introduction { padding: 2vw 2vw 2vw 1vw; }
}
.experiments-block { margin-bottom: 2vw; }
ul.experiments-list { margin-left: 3vw; }
@media (min-width: 64em) { ul.experiments-list { margin-left: 2vw; } }
li.experiments-list-item { margin-bottom: 2vw; cursor: pointer; }
li.experiments-list-item a { text-decoration: underline; }
li.experiments-list-item h4 p { margin: 0; }

.video { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #000; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video .play {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.video .play::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px;
  border: 4px solid #fff; border-radius: 50%; box-sizing: border-box; opacity: 0.85;
}
.video .play::after {
  content: ''; position: absolute; left: 50%; top: 50%; margin: -16px 0 0 -9px;
  border-style: solid; border-width: 16px 0 16px 28px; border-color: transparent transparent transparent #fff; opacity: 0.85;
}
.video .play:hover::before, .video .play:hover::after { opacity: 1; }
.video.playing .play { display: none; }

/* ---------- experiment panels ---------- */
.experiments-overlay-item {
  position: fixed; top: 0; right: -95vw; width: 95vw; height: 100%;
  overflow-x: hidden; overflow-y: auto;
  padding: 3vw 9vw 3vw 3vw;
  background: #000; color: #fff; z-index: 3;
  transition: right 1s;
  scroll-behavior: smooth; scroll-padding-top: 3vw;
}
.experiments-overlay-item.slide-in { right: 0; }
.experiments-overlay-item p, .experiments-overlay-item h5, .experiments-overlay-item a { color: #fff; }
.experiments-overlay-item a { text-decoration: underline; }
h5.exp-intro { margin-bottom: 3vw; }
h5.exp-intro p { margin: 0; }
.text-block { margin-bottom: 3vw; }
.text-block:last-child { margin-bottom: 0; }
@media (min-width: 64em) {
  .experiments-overlay-item { width: 80vw; right: -80vw; padding: 2vw 25vw 2vw 2vw; scroll-padding-top: 2vw; }
  h5.exp-intro { margin-bottom: 2vw; }
  .text-block { margin-bottom: 2vw; }
}
.cross {
  position: fixed; top: 2vw; right: -95vw; display: block;
  height: 2rem; width: 2rem; cursor: pointer;
  background: transparent; padding: 0; border: none; z-index: 3;
  transition: right 1s;
}
.cross::before, .cross::after {
  content: ''; position: absolute; top: 0; left: 50%; height: 2rem; width: 2px; background: #fff;
}
.cross::before { transform: rotate(45deg); }
.cross::after { transform: rotate(-45deg); }
.cross.slide-in { right: 3vw; }
@media (min-width: 64em) {
  .cross { right: -80vw; height: 3rem; width: 1rem; }
  .cross::before, .cross::after { height: 3rem; width: 3px; }
  .cross.slide-in { right: 2vw; }
}
button.audio-icon {
  width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer;
  background: url('/assets/icons/audio-controls.png') 0 0 no-repeat;
  margin-left: 4vw; vertical-align: middle;
}
button.audio-icon.active { background-position: -20px 0; }

/* image series */
.slider { position: relative; margin-top: 1rem; }
.slider .slide { display: none; }
.slider .slide.current { display: block; }
.slider img { width: 100%; cursor: zoom-in; }
.slider .arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; border: 0; cursor: pointer;
  background: url('/assets/icons/next.svg') no-repeat center / 20px auto; opacity: 0.8;
}
.slider .arrow:hover { opacity: 1; }
.slider .prev { left: 0; transform: translateY(-50%) scaleX(-1); }
.slider .next { right: 0; }
.lightbox {
  position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 3vw;
}
.lightbox img { max-width: 100%; max-height: 100%; width: auto; }

/* ---------- about page ---------- */
.about, .participants { padding: 3vw 3vw 0; }
.contact { padding: 3vw 3vw calc(24px + 11vw) 3vw; }
@media (min-width: 64em) {
  .about { padding: 2vw 1vw 2vw 2vw; }
  .participants { padding: 2vw 1vw 2vw 1vw; }
  .contact { padding: calc(4vw + 1.9375rem) 0 2vw 0; }
  .contact-block { border-left: 3px solid #000; padding: 0 2vw 0 1vw; }
}
ul.index { margin-left: 6vw; margin-bottom: 3vw; }
ul.index h4 { margin: 0; }
@media (min-width: 64em) { ul.index { margin-left: 4vw; margin-bottom: 2vw; } }
.about .text-block p.section-heading { text-transform: uppercase; }
.about img { max-width: 94vw; }
@media (min-width: 64em) { .about img { max-width: 46vw; } }

.participants-list-item, .image-container { margin-bottom: 1rem; }
.participants-list-item:last-child { margin-bottom: 0; }
.image-container { position: relative; display: inline-flex; }
.image-container img { max-height: 30vh; width: auto; padding-right: 2rem; display: flex; }
p.rotate-text {
  position: absolute; top: 0; right: 0; margin: 0; white-space: nowrap;
  transform-origin: right top; transform: rotate(90deg) translate(100%, 0);
}
.participants-list-item h4 p { margin: 0; }

.contact-block img { max-height: 7vh; width: auto; padding: 0.3rem 0; display: block; }
.contact-part { margin-bottom: 2vw; }
.contact-part:last-child { margin-bottom: 0; }
.contact-dots { cursor: pointer; margin-bottom: 1rem; }
.contact-dots p { white-space: pre-line; margin: 0; }
.contact-info-block { overflow: hidden; max-height: 0; transition: max-height 0.5s ease; }
.contact-info-block.open { max-height: 60rem; }