:root {
  --black: #000000;
  --white: #f2f2f2;
  --page-padding: 18px;
  --margin-2y: calc(var(--page-padding) * 2);
  --image-width: 100ch;
  --text-width: 57ch;
  --image-height-vh: calc(
    100vh - (var(--page-padding) * 6) - (var(--line-height) * 2)
  );
  --image-height-svh: calc(
    100svh - (var(--page-padding) * 6) - (var(--line-height) * 2)
  );
}

@media screen and (max-width: 768px) {
  :root {
    --image-height-vh: calc(
      100vh - (var(--page-padding) * 8) - (var(--line-height) * 2)
    );
    --image-height-svh: calc(
      100svh - (var(--page-padding) * 8) - (var(--line-height) * 2)
    );
  }
}

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

body {
  overflow-x: clip;
  user-select: none;
}

a:hover,
nav .selected a {
  border-bottom: 0.4px solid var(--white);
}
@media screen and (max-width: 768px) {
  a:hover,
  nav .selected a {
    border-bottom: 1px solid var(--white);
  }
}

nav,
section#gallery ul.gallery_nav {
  width: 100%;
  padding: var(--page-padding);
  position: absolute;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
  column-gap: var(--page-padding);
  row-gap: calc(var(--line-height) - var(--font-size));
  white-space: nowrap;
}

nav,
section#gallery ul.gallery_nav,
#cursor {
  color: var(--white);
  mix-blend-mode: difference;
  font-weight: 200;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

nav {
  top: 0;
  left: 0;
}

nav #pages {
  display: flex;
}
nav #pages > * {
  display: flex;
}
nav #pages > *:first-child::after {
  content: ",\00a0";
}

nav #title {
  justify-self: center;
}

nav #info {
  justify-self: end;
}

@media screen and (max-width: 768px) {
  nav {
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    grid-template-rows: repeat(2, 1fr);
    column-gap: 0;
  }

  nav #title {
    grid-row: 1;
    grid-column-start: 1;
    /* grid-column-end: 3; */
    justify-self: start;
  }

  nav #info {
    grid-row: 1;
  }

  nav #pages {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

div.wrap {
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
}

section#text:not(.visible),
section#gallery:not(.visible) > * > *:not(#image_count) {
  visibility: hidden;
  overflow: hidden;
}

section#text {
  grid-row: 1;
  grid-column: 1;

  padding: var(--page-padding);
  padding-top: calc((100vh - var(--image-height-vh)) / 2);
  padding-top: calc((100svh - var(--image-height-svh)) / 2);

  display: grid;
  grid-template-columns: repeat(2, calc(50% - 9ch - var(--margin-2y)));
  gap: 42px;

  color: var(--white);
  mix-blend-mode: difference;
}
@media screen and (max-width: 768px) {
  section#text {
    padding-top: 0;
    grid-template-columns: 1fr;
    gap: var(--page-padding);
  }
}
section#text .text_wrap {
  max-width: var(--text-width);
}
@media screen and (max-width: 768px) {
  section#text .text_wrap {
    padding-top: calc((var(--page-padding) * 4) + var(--line-height));
  }
  section#text .text_wrap:last-of-type {
    padding-top: 0;
    padding-bottom: calc((var(--page-padding) * 4) + var(--line-height));
  }
}

section#text .text_wrap p {
  padding-bottom: var(--page-padding);
}
section#text .text_wrap p:last-of-type {
  padding-bottom: 0;
}

section#gallery {
  grid-row: 1;
  grid-column: 1;

  width: 100%;
  height: 100%;

  display: grid;
  cursor: none;
}

section#gallery ul#images_wrap {
  width: 100vw;
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 5;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100vw);
  grid-template-rows: 1fr;
  align-items: center;
  overflow-x: hidden;
  /* overflow-x: scroll;
    scroll-snap-points-x: repeat(100vw);
    scroll-snap-destination: 0 0;
    scroll-snap-type: x mandatory;
    scroll-snap-type: mandatory;
    transform: translate3d(0, 0, 0); */
}
section#gallery ul#images_wrap::-webkit-scrollbar {
  display: none;
}

section#gallery li.image_wrap {
  grid-row: 1;
  width: 100vw;
  display: grid;
  grid-template-columns:
    minmax(var(--page-padding), 1fr)
    minmax(auto, var(--image-width))
    minmax(var(--page-padding), 1fr);
  scroll-snap-align: start;
}
@media screen and (max-width: 768px) {
  section#gallery li.image_wrap {
    grid-template-columns:
      minmax(calc(var(--page-padding) * 3), 1fr)
      minmax(auto, var(--image-width))
      minmax(calc(var(--page-padding) * 3), 1fr);
  }
}

img {
  pointer-events: none;
}

section#gallery li.image_wrap img {
  grid-column-start: 2;
  max-height: var(--image-height-vh);
  max-height: var(--image-height-svh);
  max-width: 100%;
  object-fit: scale-down;
  justify-self: center;
}
section#gallery li.image_wrap p.image_title,
section#gallery li.image_wrap p.image_number {
  display: none;
}

section#gallery li.image_wrap.large img {
  grid-column-start: 1;
  grid-column-end: 4;
  max-height: 100svh;
  width: 100%;
  object-fit: cover;
}

section#gallery ul.gallery_nav {
  bottom: 0;
  left: 0;
  cursor: auto;
}

section#gallery ul.gallery_nav > *:hover:not(#image_count) {
  font-style: italic;
  letter-spacing: var(--letter-spacing-italic);
}

section#gallery ul.gallery_nav #zoom_button {
  cursor: pointer;
}

section#gallery ul.gallery_nav .project_title {
  font-style: italic;
  text-align: center;
  letter-spacing: var(--letter-spacing-italic);
}

section#gallery ul.gallery_nav li:last-child {
  justify-self: end;
}

@media screen and (max-width: 768px) {
  section#gallery ul.gallery_nav {
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    column-gap: 0;
  }

  section#gallery ul.gallery_nav .project_title {
    text-align: right;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    max-width: 100%;
    white-space: pre-line;
  }
  section#gallery ul.gallery_nav li:first-child {
    /* text-align: right; */
    grid-row: 2;
    grid-column: 1;
  }
  section#gallery ul.gallery_nav li:last-child {
    grid-row: 2;
    grid-column: 2;
  }
}

section#gallery #cursor {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  display: none;
}

.lazyload {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lazyloaded {
  opacity: 1;
}