@charset "UTF-8";
@font-face {
  font-family: "TimesNewArial";
  src: url(../fonts/TimesNewArialGX.ttf);
}
:root {
  --text-shadow:
    rgba(163, 177, 198, 0.5) calc(.25dvw * var(--size)) calc(.25dvw * var(--size)) calc(.5dvw * var(--size)), white calc(-.25dvw * var(--size)) calc(-.25dvw * var(--size)) calc(.5dvw * var(--size)),
    white calc(.5dvw * var(--size)) calc(.5dvw * var(--size)) calc(1dvw * var(--size)), rgba(163, 177, 198, 0.5) calc(-.5dvw * var(--size)) calc(-.5dvw * var(--size)) calc(1dvw * var(--size)),
    rgba(163, 177, 198, 0.5) calc(1dvw * var(--size)) calc(1dvw * var(--size)) calc(2dvw * var(--size)), white calc(-1dvw * var(--size)) calc(-1dvw * var(--size)) calc(2dvw * var(--size));
  --no-text-shadow: 0px 0px 0 #111;
  --size: 1;
}

html, body {
  background: #fff;
  z-index: 1;
  font-size: calc(1.5dvw * var(--size));
  line-height: calc(1.5dvw * var(--size));
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "TimesNewArial", sans-serif;
  font-variation-settings: "srff" 0, "ital" 0;
  background: lightgray;
  transition: background-color 0.25s;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  html, body {
    font-size: calc(3dvw * var(--size));
    line-height: calc(3dvw * var(--size));
  }
}

body {
  z-index: -1;
}

a, button, input, label {
  cursor: pointer;
}

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: lighter;
}

ul, ol {
  list-style-position: inside;
  display: block;
  margin-bottom: calc(1.5dvw * var(--size));
}
ul li, ol li {
  font-size: calc(2.5dvw * var(--size));
  line-height: calc(3dvw * var(--size));
}
@media screen and (max-width: 600px) {
  ul li, ol li {
    font-size: calc(4.5dvw * var(--size));
    line-height: calc(5.25dvw * var(--size));
  }
}
ul ::marker, ul p, ol ::marker, ol p {
  display: inline;
}

.footer ul {
  list-style: none !important;
}
.footer ul li {
  display: inline-block;
}
.footer ul li:before {
  display: none !important;
}

ul {
  list-style: none;
}
ul li:before {
  content: "•";
  color: lightgray;
  padding-right: calc(2dvw * var(--size));
  text-shadow: var(--text-shadow);
}

::marker {
  color: lightgray;
  padding-right: calc(2dvw * var(--size));
  text-shadow: var(--text-shadow);
}

.default ul li:before {
  color: black;
  text-shadow: var(--no-text-shadow);
}
.default ::marker {
  color: black;
  text-shadow: var(--no-text-shadow);
}

main {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
  display: block;
}

h1, h2, h3, h4, p, p a {
  position: relative;
  color: lightgray;
  z-index: 1;
}

a.projectlink {
  text-decoration: none;
}

h1, h2, h3, h4, p, p a {
  text-shadow: var(--text-shadow);
}

@media screen and (min-width: 600px) {
  .mobile {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .desktop {
    display: none;
  }
}
.item {
  transition: all 0.25s;
}
@media screen and (min-width: 600px) {
  .item {
    box-shadow: var(--text-shadow);
  }
}
.item:not(.open):has(.content) {
  cursor: pointer;
}
.item:not(.open):has(.content) * {
  pointer-events: none;
}
.item:not(.open):has(.load) {
  cursor: pointer;
}
.item:not(.open):has(.load) * {
  pointer-events: none;
}

h1, h2, h3, h4, p, p a, li {
  transition: font-size 0.25s, line-height 0.25s, font-variation-settings 0.25s, margin 0.25s, text-shadow 0.25s, color 0.25s, letter-spacing 0.25s, -webkit-text-decoration 0.25s;
  transition: font-size 0.25s, line-height 0.25s, font-variation-settings 0.25s, margin 0.25s, text-shadow 0.25s, color 0.25s, letter-spacing 0.25s, text-decoration 0.25s;
  transition: font-size 0.25s, line-height 0.25s, font-variation-settings 0.25s, margin 0.25s, text-shadow 0.25s, color 0.25s, letter-spacing 0.25s, text-decoration 0.25s, -webkit-text-decoration 0.25s;
}

.item {
  transition: width 0.25s, height 0.25s, box-shadow 0.25s, border-radius 0.25s;
}

h1 {
  top: 0;
  left: 0;
  margin-top: calc(1.5dvw * var(--size));
  margin-bottom: calc(2dvw * var(--size));
  font-size: calc(13dvw * var(--size));
  line-height: calc(11dvw * var(--size));
  letter-spacing: calc(-0.4dvw * var(--size));
}
h1.default {
  color: black;
  text-shadow: var(--no-text-shadow);
  font-size: calc(12.85dvw * var(--size));
  font-variation-settings: "srff" 100, "ital" 0;
}
h1.mobile {
  margin-bottom: -0.5dvw;
}

.name {
  margin-top: 0;
  padding-top: 1vw;
  text-align: center;
  transition: all 0.25s;
}
.name.default {
  box-shadow: 0 0 0;
}
@media screen and (min-width: 600px) {
  .name {
    margin-top: 0;
    font-size: calc(13dvw * var(--size));
    line-height: calc(11dvw * var(--size));
    letter-spacing: calc(-0.4dvw * var(--size));
  }
  .name.longname {
    font-size: calc(11dvw * var(--size));
    line-height: calc(10dvw * var(--size));
    letter-spacing: calc(-0.3dvw * var(--size));
  }
}
@media screen and (max-width: 600px) {
  .name {
    margin-top: 1.5vw;
    padding-top: 1.5vw;
    box-shadow: var(--text-shadow);
  }
}

@media screen and (max-width: 600px) {
  .item h1:first-of-type + h2 {
    padding-left: 4dvw;
  }
}
.about span {
  text-decoration: none;
}

.about h2, .legalnotice h2, .dataprivacy h2 {
  font-size: calc(7.5dvw * var(--size));
  line-height: calc(7.7dvw * var(--size));
  margin-bottom: calc(0.5dvw * var(--size));
  letter-spacing: calc(-0.1dvw * var(--size));
}
@media screen and (max-width: 600px) {
  .about h2, .legalnotice h2, .dataprivacy h2 {
    font-size: calc(10dvw * var(--size));
    line-height: calc(10dvw * var(--size));
  }
}
.about h3, .legalnotice h3, .dataprivacy h3 {
  font-size: calc(5dvw * var(--size));
  line-height: calc(5dvw * var(--size));
  letter-spacing: calc(-0.025dvw * var(--size));
  margin-bottom: calc(1dvw * var(--size));
}
@media screen and (max-width: 600px) {
  .about h3, .legalnotice h3, .dataprivacy h3 {
    font-size: calc(7.5dvw * var(--size));
    line-height: calc(7.7dvw * var(--size));
  }
}

h2 {
  font-size: calc(7.5dvw * var(--size));
  line-height: calc(7.5dvw * var(--size));
  margin-bottom: calc(1.5dvw * var(--size));
  letter-spacing: calc(-0.1dvw * var(--size));
}
@media screen and (max-width: 600px) {
  h2 {
    font-size: calc(10dvw * var(--size));
    line-height: calc(9dvw * var(--size));
  }
}
h2.mobile {
  margin-bottom: 3dvw;
  padding-left: 4dvw;
}

h3 {
  font-size: calc(5dvw * var(--size));
  line-height: calc(5dvw * var(--size));
  letter-spacing: calc(-0.025dvw * var(--size));
  margin-bottom: calc(1.5dvw * var(--size));
}
@media screen and (max-width: 600px) {
  h3 {
    font-size: calc(7.5dvw * var(--size));
    line-height: calc(7dvw * var(--size));
  }
}

h4 + p, h2 + p {
  margin-top: calc(-1.25dvw * var(--size));
}

p, p a, button, .credit {
  font-size: calc(2.5dvw * var(--size));
  line-height: calc(3dvw * var(--size));
  margin-bottom: calc(1.5dvw * var(--size));
}
@media screen and (max-width: 600px) {
  p, p a, button, .credit {
    font-size: calc(4.5dvw * var(--size));
    line-height: calc(5.25dvw * var(--size));
  }
}
p.credit, p a.credit, button.credit, .credit.credit {
  position: absolute;
  bottom: 0;
  z-index: 99;
  margin-bottom: 0 !important;
  left: calc(0.5dvw * var(--size));
  font-variation-settings: "srff" 100, "ital" 0;
  -webkit-text-stroke: 0.5px white;
  opacity: 0;
}

.slide-caption .credit {
  bottom: calc(1.5dvw * var(--size)) !important;
}

.block-image:hover .credit, .block-slideshow:hover .active .credit {
  opacity: 1;
}

button {
  color: blue;
  padding-left: calc(1dvw * var(--size));
  padding-right: calc(1dvw * var(--size));
  margin-bottom: 0 !important;
}

hr {
  border: none;
  outline: none;
}
hr.big {
  height: 3dvw;
}
hr.small {
  height: 1.5dvw;
}

.block-download, .internallink, .iframelink {
  display: inline-block;
  margin-bottom: calc(1.5dvw * var(--size));
  margin-right: calc(1.5dvw * var(--size));
}

.download {
  display: inline-block;
}

.about p, .about p a, .legalnotice p, .legalnotice p a, .dataprivacy p, .dataprivacy p a {
  font-size: 1.5dvw;
  line-height: 1.75dvw;
  margin-bottom: 1.5dvw;
}
@media screen and (max-width: 600px) {
  .about p, .about p a, .legalnotice p, .legalnotice p a, .dataprivacy p, .dataprivacy p a {
    font-size: 4.5dvw;
    line-height: 5.25dvw;
  }
}

.intro {
  width: 100dvw;
  text-align: center;
  text-shadow: var(--text-shadow);
  transition: all 0.25s;
  margin-top: 4dvw;
  margin-bottom: 1dvw;
}

main {
  padding: 1dvw;
}

article {
  position: relative;
  padding-top: calc(2dvw * var(--size));
  margin-bottom: calc(4dvw * var(--size));
  width: 98dvw;
}
@media screen and (max-width: 600px) {
  article {
    scroll-margin-top: 21dvw !important;
  }
}

.item {
  display: inline-block;
  vertical-align: top;
  position: sticky;
  top: 1dvw;
}
.item.default h1, .item.default h2, .item.default h3, .item.default h4, .item.default p, .item.default p a {
  color: black;
  text-shadow: 0px 0px 0 #111;
  font-variation-settings: "srff" 100, "ital" 0;
}
.item.default a {
  color: blue !important;
  text-decoration-color: blue !important;
}

.name.default {
  color: black;
  text-shadow: 0px 0px 0 #111;
  font-variation-settings: "srff" 100, "ital" 0;
}

article:has(.default) .name {
  color: black;
  box-shadow: 0 0 0;
  text-shadow: 0px 0px 0 #111;
  font-variation-settings: "srff" 100, "ital" 0;
}

.item {
  padding-bottom: 0;
  line-height: 0;
}
@media screen and (min-width: 600px) {
  .item {
    padding: calc(1.5dvw * var(--size));
  }
}
.item iframe, .item audio {
  width: 100%;
  border: none;
  outline: none;
}
.item .block-audio {
  margin-bottom: calc(1.5dvw * var(--size));
}
.item .block-audio.backgroundsound {
  opacity: 0.5;
  height: 0;
  max-height: 0 !important;
  margin-bottom: 0;
  overflow: hidden;
}
.item .vimeo {
  width: calc(94.5dvw * var(--size));
  height: calc(56dvw * var(--size));
  margin-bottom: calc(1.5dvw * var(--size));
  background-size: cover;
}
.item .vimeo.block-iframe {
  border-radius: 0.5dvw;
  margin-bottom: 0 !important;
  cursor: pointer;
}
.item .vimeo.vimeo {
  background: black;
  height: calc(53.1dvw * var(--size));
}
.item .block-iframe {
  width: 100%;
  height: auto;
  margin-bottom: calc(1.5dvw * var(--size));
  background-size: cover;
}
.item .block-iframe:has(.portrait) {
  background: dimgray;
}
.item .block-iframe.block-iframe {
  border-radius: 0.5dvw;
  margin-bottom: 0 !important;
  cursor: pointer;
}
.item .block-iframe img {
  width: 100%;
}

.item {
  display: inline-block;
  border-radius: 0.5dvw;
}
.item.default, .item.score {
  background: transparent;
  box-shadow: 0 0 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  scroll-margin-top: 1vw;
}
@media screen and (max-width: 600px) {
  .item.default, .item.score {
    scroll-margin-top: 24dvw;
  }
}
.item.default.project, .item.score.project {
  top: 0.5vw;
  padding-top: 0;
}
.item .item-image, .item .block-image, .item .block-video {
  line-height: 0;
  transition: margin-bottom 0.5s ease;
  margin-bottom: calc(1.5dvw * var(--size));
  position: relative;
}
.item .item-image.load, .item .block-image.load, .item .block-video.load {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height 0.5s ease;
}
.item .item-image.load.open, .item .block-image.load.open, .item .block-video.load.open {
  max-height: 100dvh;
  margin-bottom: calc(1.5dvw * var(--size));
}
.item .block-video, .item .block-image, .item .slide, .item .block-iframe {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  max-height: calc(93dvw * var(--size));
  margin-bottom: calc(1.5dvw * var(--size));
  text-align: center;
}
.item .block-video img, .item .block-image img, .item .slide img, .item .block-iframe img {
  position: relative;
  width: 100%;
}
.item .block-video video, .item .block-video img.portrait, .item .block-image video, .item .block-image img.portrait, .item .slide video, .item .slide img.portrait, .item .block-iframe video, .item .block-iframe img.portrait {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(93dvw * var(--size), 100dvh);
  transition: all 0.5s ease;
}

.projectopen .project {
  --size: .7;
}
@media screen and (max-width: 600px) {
  .projectopen .project {
    --size: 1;
  }
}
.projectopen .score {
  --size: .29;
}
@media screen and (max-width: 600px) {
  .projectopen .score {
    --size: 0;
  }
}

.scoreopen .project {
  --size: .29;
}
@media screen and (max-width: 600px) {
  .scoreopen .project {
    --size: 0;
  }
}
.scoreopen .score {
  --size: .7;
}
@media screen and (max-width: 600px) {
  .scoreopen .score {
    --size: 1;
  }
}

.project {
  padding-top: calc(2dvw * var(--size));
  z-index: 1;
  width: calc(98dvw * var(--size));
}
.project h1:first-of-type, .project h2:first-of-type {
  margin-bottom: 0;
}
.project .item-image {
  margin-bottom: calc(1.5dvw * var(--size));
}

.score {
  padding-top: 0dvw;
  z-index: 2;
  width: calc(98dvw * var(--size));
  transform-origin: right center;
}
.score h1:first-of-type {
  margin-top: calc(0.75dvw * var(--size));
}

#drawingCanvas {
  position: sticky;
  margin-bottom: calc(-99dvh + 1dvw);
  top: 0 !important;
  left: 0 !important;
  width: 100dvw;
  height: 100dvh;
  background: lightgrey;
  z-index: 0;
}

nav {
  z-index: 99;
  position: relative;
  padding: 1dvw;
  padding-left: 0;
  padding-right: 0;
  font-size: 4dvw;
  line-height: 3dvw;
  text-align: center;
}
nav:not(.mainnav) {
  margin-top: 4dvw;
}
nav:has(.default) .view {
  color: black;
  text-shadow: var(--no-text-shadow);
  font-variation-settings: "srff" 100, "ital" 0;
}
nav.mainnav {
  margin-left: 2dvw;
  position: sticky;
  top: 0dvw;
}
nav.footer {
  z-index: 90;
  margin-top: 3.5dvw;
  margin-bottom: 2dvw;
}
nav a, nav span {
  text-shadow: var(--text-shadow);
  color: lightgrey;
  text-decoration: none;
  padding-right: 1dvw;
  padding-left: 1dvw;
  padding-top: 0.5dvw;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  transition: all 0.25s;
  margin-left: 1dvw;
}
nav a.active, nav span.active {
  border-radius: 0.5dvw;
  box-shadow: var(--text-shadow);
}
nav a.default:not(.view), nav a .default:not(.view).active, nav span.default:not(.view), nav span .default:not(.view).active {
  color: blue;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: var(--no-text-shadow);
  text-decoration: underline;
  text-decoration-thickness: 0.2dvw;
  text-shadow: 0px 0px 0 #111;
  border-radius: 0;
  font-variation-settings: "srff" 100, "ital" 0;
}
nav a.default:not(.view).active, nav a .default:not(.view).active.active, nav span.default:not(.view).active, nav span .default:not(.view).active.active {
  color: #800080;
}
@media screen and (max-width: 600px) {
  nav a.default:not(.view), nav a .default:not(.view).active, nav span.default:not(.view), nav span .default:not(.view).active {
    letter-spacing: -0.1dvw;
  }
}
nav a.default.view, nav span.default.view {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: var(--no-text-shadow);
  font-variation-settings: "srff" 100, "ital" 0;
  color: black;
}
@media screen and (max-width: 600px) {
  nav {
    font-size: 10dvw;
    line-height: 10dvw;
    text-align: left;
    display: inline-block;
  }
  nav.mainnav {
    margin-left: 1dvw;
  }
  nav a {
    margin-left: 0;
  }
  nav .view {
    margin-left: 5dvw;
    padding-right: 0 !important;
    margin-left: 6dvw;
    margin-right: -2vw;
  }
}

@media screen and (max-width: 600px) {
  .item {
    transition: all 0s ease !important;
  }
  .item * {
    transition: all 0s ease !important;
  }
}
.item:not(.open) .content {
  font-size: 0;
}
.item:not(.open) .content * {
  max-height: 0;
  border: none;
  outline: none;
  margin: 0 !important;
}
.item .content * {
  transition: all 0.5s ease;
  max-height: 0 !important;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  .item .content {
    transition: max-height 0.5s ease, overflow 0.5s ease;
    max-height: 0;
  }
}
.item.open .content * {
  max-height: 100dvh !important;
}
.item.open .content *.block-image, .item.open .content *.block-video, .item.open .content *.slide, .item.open .content * video {
  max-height: min(93dvw * var(--size), 100dvh - 4dvw) !important;
}
.item.open .content *.block-image img, .item.open .content *.block-video img, .item.open .content *.slide img, .item.open .content * video img {
  max-height: min(93dvw * var(--size), 100dvh - 4dvw) !important;
}
.item.open .content *.extenadable {
  max-height: 1500dvh !important;
}
.item.open .content *.extenadable * {
  max-height: auto !important;
}
.item.open .content p, .item.open .content h1, .item.open .content h2, .item.open .content h3 {
  transition: overflow 0.5s ease 0.55s;
  overflow: visible;
}
@media screen and (max-width: 600px) {
  .item.open .content {
    max-height: 1000dvh;
  }
}
.item.open.default .close {
  opacity: 1;
  max-height: 10dvh;
  pointer-events: auto;
}
.item.open .load {
  max-height: 100dvh;
  margin-bottom: 1.5dvw;
}

#about, #legalnotice, #dataprivacy {
  margin-bottom: 0;
  padding-top: 0;
}
#about .item, #legalnotice .item, #dataprivacy .item {
  margin-bottom: 4.5dvw;
  margin-top: 3dvw;
  box-shadow: none;
  padding: 0;
  padding-left: 0.5dvw;
  padding-right: 0.5dvw;
}

#legalnotice, #dataprivacy {
  font-size: 0;
  line-height: 0;
  margin: 0;
  scroll-margin-top: 9dvw;
}
@media screen and (max-width: 600px) {
  #legalnotice, #dataprivacy {
    scroll-margin-top: 44dvw !important;
  }
}
#legalnotice .item, #dataprivacy .item {
  margin: 0;
  font-size: 0;
  line-height: 0;
  border: 0;
  border-radius: 0;
}
#legalnotice .item *, #dataprivacy .item * {
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
}
#legalnotice .item.open *, #dataprivacy .item.open * {
  max-height: 100dvh;
  margin-bottom: calc(1.5dvw * var(--size));
  overflow: visible;
  transition: overflow 0.5s ease 0.5s;
}

body:has(#about.aboutopen) .cta_about span {
  display: none;
}
body:has(#about.aboutopen) .cta_about:after {
  content: "Close";
}

.aboutopen .content *:not(img) {
  max-height: 100dvh !important;
}
.aboutopen .load {
  max-height: 100dvh;
  margin-bottom: 1.5dvw;
}

.iframewrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: calc(1.5dvw * var(--size));
  pointer-events: auto !important;
}
.iframewrapper.isCover figure {
  pointer-events: none;
}
.iframewrapper .coveriframe {
  pointer-events: auto !important;
  position: absolute;
  bottom: 0.5vw;
  left: 0.5vw;
  display: none;
}
.iframewrapper:hover .coveriframe {
  display: block;
}
.iframewrapper * {
  transition: all 0.5s ease;
}

.block-iframe::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 25%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

.block-iframe::before {
  animation: shine 3s infinite;
}

.block-iframe:hover::before {
  animation-play-state: paused;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -75%;
  }
}
.iframe:not(.vimeo) {
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
}

.general {
  transform-origin: bottom left;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  left: 0;
  overflow: scroll;
  z-index: 9999;
  position: fixed;
  transition: transform 1s ease, top 1s ease, bottom 1s ease, left 1s ease, border 1s ease;
}

.iframeopen {
  cursor: pointer;
}
.iframeopen .general {
  left: 1dvw;
  top: auto;
  bottom: 1dvw;
  transform: scale(0.1);
  overflow: hidden;
  border: 1dvw solid blue;
}
@media screen and (max-width: 600px) {
  .iframeopen .general {
    border: 2dvw solid blue;
  }
}
.iframeopen .general * {
  pointer-events: none;
}

article:not(.projectopen):not(.aboutopen) .content * {
  margin-bottom: 0 !important;
}

article:nth-of-type(2) {
  margin-top: -2dvw;
  scroll-margin-top: 4dvw;
}

.vimeo {
  width: 100%;
}

.slides {
  position: relative;
}

.slides-inner {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}

.slide {
  flex: 0 0 100%;
  justify-content: center;
  align-items: center;
  max-width: 0;
  transition: max-width 0.5s ease;
}
.slide.active {
  max-width: 100%;
}
.slide img {
  width: auto !important;
  max-width: 100%;
  max-height: 100% !important;
}

.nav-area {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  opacity: 0.5;
}

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

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

.load {
  transition: max-height 0.5s ease;
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.open.load {
  max-height: 100dvh;
  overflow: hidden;
  margin-bottom: calc(1.5dvw * var(--size));
}

.slideshow-caption {
  margin-bottom: calc(1.5dvw * var(--size));
}
.slideshow-caption .slideshow-counter, .slideshow-caption p {
  display: inline;
}
.slideshow-caption .prev, .slideshow-caption .next {
  font-variation-settings: "srff" 0, "ital" 0;
  cursor: pointer;
}
.slideshow-caption .prev.next, .slideshow-caption .next.next {
  margin-right: calc(1.5dvw * var(--size));
}
.slideshow-caption .slideshow-counter {
  margin-right: calc(1.5dvw * var(--size));
}

.close, .close2 {
  position: sticky;
  width: calc(9dvw * var(--size));
  top: 0.5vw;
  left: calc(100% - 6dvw * var(--size));
  z-index: 99;
  color: transparent;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
@media screen and (max-width: 600px) {
  .close, .close2 {
    width: calc(20dvw * var(--size));
    margin-right: -1dvw;
    top: 13dvh;
  }
}
.close::after, .close2::after {
  content: "Open";
  position: absolute;
  width: calc(9dvw * var(--size));
  left: -0.25vw;
  top: 0;
  text-outline: 0 0 #000;
  color: blue;
}
@media screen and (max-width: 600px) {
  .close::after, .close2::after {
    width: calc(20dvw * var(--size));
  }
}

.open .close::after, .open .close2::after {
  content: "Close";
}

.default .close2 {
  opacity: 1;
  pointer-events: auto;
}

.score:has(.close, .close2) > :nth-child(2),
.project:has(.close, .close2) > :nth-child(2) {
  margin-top: calc(-3dvw * var(--size)) !important;
}
@media screen and (max-width: 600px) {
  .score:has(.close, .close2) > :nth-child(2),
  .project:has(.close, .close2) > :nth-child(2) {
    margin-top: calc(-5dvw * var(--size)) !important;
  }
}

.more {
  margin-left: calc(1dvw * var(--size));
  display: inline;
  cursor: pointer;
  color: blue !important;
  text-decoration: underline;
}

.extenadable {
  margin-bottom: calc(1.5dvw * var(--size));
}
.extenadable .extender {
  display: none;
}
.extenadable p:first-of-type {
  display: inline;
}
.extenadable.open .extender {
  display: contents;
}
.extenadable.open p:first-of-type {
  display: block;
}
.extenadable.open p:last-of-type {
  display: inline;
}
.extenadable.open .more span {
  display: none;
}
.extenadable.open .more:after {
  content: "Read Less";
}

.cta_legalnotice {
  position: relative;
  display: block;
}
.cta_legalnotice::after {
  content: "Legal notice & data privacy";
  position: absolute;
  top: 0;
  left: 1vw;
  width: 100%;
  opacity: 1;
}

nav a.cta_legalnotice span {
  opacity: 0;
}

body:has(#legalnotice.aboutopen) .cta_legalnotice::after {
  content: "Close";
}