/* ----------------------------------
   RESET
---------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: #000;
  color: #f4f1ec;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  overflow-x: hidden;
}


/* ----------------------------------
   SPLASH PAGE
---------------------------------- */

.splash {
  position: relative;

  width: 100%;
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #000;

  padding:
    clamp(42px, 7vh, 85px)
    24px
    clamp(28px, 4vh, 50px);
}


/* ----------------------------------
   STUDIO LOGO
---------------------------------- */

.studio-mark {
  display: flex;
  justify-content: center;

  flex-shrink: 0;
}

.studio-mark img {
  display: block;

  width: clamp(125px, 11vw, 185px);
  height: auto;

  opacity: 0.97;
}


/* ----------------------------------
   CENTER CONTENT
---------------------------------- */

.film {
  flex: 1;

  width: 100%;

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

  /* visually compensates for footer */
  transform: translateY(-1.5vh);

  text-align: center;
}


/* ----------------------------------
   KITÁ LOGO
---------------------------------- */

.kita-logo {
  display: block;

  width: min(46vw, 680px);
  height: auto;

  margin-bottom: clamp(38px, 4.5vh, 62px);
}


/* ----------------------------------
   NARRATOR
---------------------------------- */

.narrator {
  font-size: clamp(15px, 1.35vw, 23px);

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.35em;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.94);
}


/* ----------------------------------
   DIVIDER
---------------------------------- */

.divider {
  width: 61px;
  height: 1px;

  background: rgba(255, 255, 255, 0.42);

  margin:
    clamp(40px, 5vh, 63px)
    0
    clamp(40px, 5vh, 62px);
}


/* ----------------------------------
   COMING SOON
---------------------------------- */

.coming-soon {
  font-size: clamp(18px, 1.7vw, 28px);

  font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.42em;

  color: rgba(255, 255, 255, 0.72);

  padding-left: 0.42em;
}


/* ----------------------------------
   FOOTER
---------------------------------- */

.copyright {
  flex-shrink: 0;

  font-size: clamp(9px, 0.75vw, 13px);

  font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.34em;

  color: rgba(255, 255, 255, 0.43);

  padding-left: 0.34em;

  text-align: center;
}


/* ----------------------------------
   TABLET
---------------------------------- */

@media (max-width: 900px) {

  .splash {
    padding-top: 48px;
    padding-bottom: 30px;
  }

  .studio-mark img {
    width: 145px;
  }

  .kita-logo {
    width: min(66vw, 560px);
  }

  .narrator {
    letter-spacing: 0.29em;
  }
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 600px) {

  .splash {
    min-height: 100svh;

    padding:
      36px
      20px
      26px;
  }

  .studio-mark img {
    width: 120px;
  }

  .film {
    transform: translateY(-1vh);
  }

  .kita-logo {
    width: min(82vw, 410px);

    margin-bottom: 35px;
  }

  .narrator {
    font-size: 12px;

    letter-spacing: 0.24em;

    white-space: nowrap;
  }

  .divider {
    width: 42px;

    margin:
      36px
      0
      35px;
  }

  .coming-soon {
    font-size: 15px;

    letter-spacing: 0.34em;
  }

  .copyright {
    font-size: 8px;

    letter-spacing: 0.27em;
  }
}


/* ----------------------------------
   VERY SMALL PHONES
---------------------------------- */

@media (max-width: 380px) {

  .narrator {
    font-size: 10px;
    letter-spacing: 0.19em;
  }

  .coming-soon {
    font-size: 13px;
    letter-spacing: 0.29em;
  }
}