body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background: #ffffff;
}


/* ========================================
   GLOBAL
======================================== */

.container {
  position: relative;
}


/* ========================================
   LEFT NAVIGATION / INFORMATION
======================================== */

.info {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 400px;
  font-size: 15px;
  line-height: 1.4;
  z-index: 100;
}

.info h1 {
  font-size: 15px;
  font-weight: normal;
  margin: 0 0 2px 0;
}

.info p {
  margin: 0 0 15px 0;
}


/* LINKS */

.info a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info a:hover {
  color: red;
}


/* HIDDEN INFORMATION */

#more-info {
  display: none;
}


/* HIDDEN ON DESKTOP */

.mobile-break {
  display: none;
}


/* ========================================
   HOMEPAGE IMAGE GRID
======================================== */

.gallery {
  width: min(809px, calc(100vw - 860px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 3px;
}


.gallery > * {
  min-width: 0;
}


.gallery img,
.gallery video {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 200 / 250;
  object-fit: cover;
  display: block;
}


/* ========================================
   PROJECT PAGES
======================================== */

.project-page {
  position: relative;
}


.project-sections {
  display: flex;
  flex-direction: column;
  gap: 80px;
}


.project-block {
  width: 100%;
}


.project-stream {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.media-item {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
}


/* ========================================
   PROJECT IMAGES
======================================== */

.media-item img {
  display: block;

  width: min(809px, calc(100vw - 860px));

  height: auto;

  object-fit: contain;

  cursor: default;
}


/* ========================================
   VIDEO PLAYER
======================================== */

.video-player {
  position: relative;

  width: min(809px, calc(100vw - 860px));

  overflow: hidden;

  cursor: pointer;
}


.media-item .video-player video {
  display: block;

  width: 100%;
  max-width: 100%;

  height: auto;

  object-fit: contain;

  cursor: pointer;
}


/* ========================================
   VIDEO PROGRESS BAR
======================================== */

.video-progress {
  position: absolute;

  left: 12px;
  bottom: 12px;

  width: calc(100% - 24px);

  height: 6px;

  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  outline: none;

  background:
    linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0.4) 100%
    );

  cursor: pointer;

  opacity: 0;

  /*
  IMPORTANT:
  While hidden, the progress bar cannot
  intercept the first tap on mobile.
  */

  pointer-events: none;

  transition: opacity 0.15s ease;

  z-index: 3;
}


/* ========================================
   DESKTOP / MOUSE
======================================== */

@media (hover: hover) and (pointer: fine) {

  .video-player:hover .video-progress {
    opacity: 1;
    pointer-events: auto;
  }

}


/* ========================================
   MOBILE / TOUCH

   First tap adds .controls-visible
   using JavaScript.
======================================== */

@media (hover: none), (pointer: coarse) {

  .video-player.controls-visible .video-progress {
    opacity: 1;
    pointer-events: auto;
  }

}


/* KEEP BAR VISIBLE WHEN PAUSED */

.video-player.is-paused .video-progress {
  opacity: 1;
  pointer-events: auto;
}


/* ========================================
   PROGRESS BAR — CHROME / SAFARI
======================================== */

.video-progress::-webkit-slider-runnable-track {
  height: 1px;

  background: transparent;

  border: 0;
}


/* REMOVE CIRCULAR HANDLE */

.video-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 0;
  height: 0;

  margin: 0;

  border: 0;

  background: transparent;
}


/* ========================================
   PROGRESS BAR — FIREFOX
======================================== */

.video-progress::-moz-range-track {
  height: 1px;

  background: transparent;

  border: 0;
}


.video-progress::-moz-range-thumb {
  width: 0;
  height: 0;

  margin: 0;

  border: 0;

  background: transparent;
}


/* ========================================
   PROJECT CREDITS
======================================== */

.project-credits {
  width: min(809px, calc(100vw - 860px));

  margin: 18px auto 0 auto;

  font-size: 15px;
  line-height: 1.4;

  color: black;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 1050px) {

  /* NAVIGATION */

  .info {
    position: static;

    width: calc(100% - 70px);
    max-width: 320px;

    padding: 18px;
  }


  .mobile-break {
    display: block;
  }


  /* HOMEPAGE */

  .gallery {
    width: calc(100% - 18px);

    margin: 0 auto 18px auto;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 3px;
  }


  .gallery img,
  .gallery video {
    width: 100%;
    max-width: 100%;

    height: auto;

    aspect-ratio: 200 / 250;
  }


  /* PROJECT PAGES */

  .project-sections {
    gap: 48px;
  }


  .media-item img {
    width: 100%;
    max-width: 100%;

    height: auto;
  }


  /* VIDEO */

  .video-player {
    width: 100%;
    max-width: 100%;
  }


  .media-item .video-player video {
    width: 100%;
    max-width: 100%;

    height: auto;
  }


  .video-progress {
    left: 10px;
    bottom: 10px;

    width: calc(100% - 20px);

    height: 6px;
  }


  /* PROJECT CREDITS */

  .project-credits {
    width: auto;

    margin: 16px 16px 0 16px;

    font-size: 15px;
    line-height: 1.4;
  }

}


/* ========================================
   BACK TO TOP
======================================== */

/* Hidden on all devices by default */

.info.back-to-top {
  display: none !important;
}


/* Only visible on mobile touchscreen devices */

@media screen and (max-width: 900px) and (hover: none) and (pointer: coarse) {

  .info.back-to-top {
    display: block !important;
    position: static;
    margin-top: 40px;
    margin-bottom: 50px;
  }

}


/* ========================================
   SMOOTH SCROLLING
======================================== */

html {
  scroll-behavior: smooth;
}