body {
  margin: 0;
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background-image: url("../texture/grain.png");
  background-repeat: repeat;

  opacity: 0.06; /* extremely subtle */
  z-index: 0;
}

/* HEADER */
.header {
  position: fixed;
  top: 30px;
  left: 40px;
  z-index: 10;
  font-size: 12px;
}

/* PROJECT LINKS */

.film-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.header a {
  text-decoration: none;
  color: #1C1F2A;
}

/* VIDEO STAGE */

.film-stage {
  position: fixed;

  top: 50%;
  right: 5vw;

  transform: translateY(-50%);

  width: 52vw;
  max-width: 900px;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #111;

  z-index: -1;
}

/* VIDEO */

.film-stage video {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  opacity: 1;

  transition: opacity 0.6s ease;
}

/* CONTENT */
.film-container {
  width: 45%;
  padding-left: 60px;
}

.film-section:first-child {
  margin-top: 30vh;
}

.film-section:last-child {
  margin-bottom: 30vh;
}


/* ACTIVE STATE */
.film-section.active {
  opacity: 1;
  transform: translateY(-10px);
}

/* TEXT */
.meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: 12px;
}

.title {
  font-size: 40px;
  font-family: 'EB Garamond', serif;
}

/* SMOOTH SCROLL */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
}

.film-section {
  height: 70vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  opacity: 0.2;

  transition: opacity 0.6s ease, transform 0.6s ease;

  scroll-snap-align: center;
}
/* MOBILE */

@media (max-width: 768px) {

  .film-stage {

    position: relative;

    top: auto;
    right: auto;

    transform: none;

    width: 92%;
    height: auto;

    aspect-ratio: 16 / 9;

    margin: 120px auto 60px auto;

  }

  .film-container {

    width: 100%;

    padding: 0 20px 80px 20px;

    box-sizing: border-box;

  }

  .film-section {

    height: 42vh;

    justify-content: center;

  }

  .title {
    font-size: 34px;
  }

}