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

* {
  box-sizing: border-box;
}

html,
body {
  margin: 10px;
  padding: 0;

  background-color: #F3F3F3;
  color: #000000;

  font-family: sans-serif;
  letter-spacing: 0.15ch;
  line-height: 1.3em;
}

body {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;

  color: inherit;

  font-size: 1em;
}


/* ==========================================
ABOUT
========================================== */

.about {
  position: fixed;

  top: 20px;
  left: 2em;
  right: 2em;

  z-index: 100;

  color: #000000;

  font-size: 1em;
}

.about p {
  margin: 0;
  color: inherit;
}

.about a {
  color: inherit;
  text-decoration: underline;
}


/* ==========================================
ABOUT GLYPHS
========================================== */

.about-char {
  display: inline;

  color: #000000;

  transition: color 0.12s ease;
}

.about-char.overlap-char {
  color: #f0f5a4;
}

.about-char:hover {
  color: #f0f5a4;
}


/* ==========================================
PROJECT GLYPHS
========================================== */

.project-char {
  display: inline;

  color: inherit;

  transition: color 0.12s ease;
}

.project-char:hover {
  color: #f0f5a4;
}


/* ==========================================
MAIN
========================================== */

#container {
  padding-top: 8em;
}


/* ==========================================
PROJECT BLOCK
========================================== */

.project-block {
  margin-bottom: 120px;
}

.project-block:last-child {
  margin-bottom: 80px;
}


/* ==========================================
CAROUSEL
========================================== */

.splide {
  width: 72vw;
  max-width: 1100px;

  margin-left: auto;
  margin-right: auto;
}


/* ==========================================
CAROUSEL FRAME
========================================== */

.splide__track {
  width: 100%;

  aspect-ratio: 1778 / 1000;

  overflow: hidden;

  cursor: default;
}


/* ==========================================
SPLIDE LIST
========================================== */

.splide__list {
  width: 100%;
  height: 100%;
}


/* ==========================================
SLIDE
========================================== */

.splide__slide {
  width: 100%;
  height: 100%;

  display: flex;

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

  overflow: hidden;

  background-color: #ffffff;
}


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

.splide__slide video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  margin: 0;
  padding: 0;
}


/* ==========================================
STATIC IMAGE
========================================== */

.splide__slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  margin: 0;
  padding: 0;

  opacity: 0;

  transition: opacity 0.25s ease;
}

.splide__slide img.is-loaded {
  opacity: 1;
}


/* ==========================================
REMOVE SPLIDE UI
========================================== */

.splide__pagination {
  display: none !important;
}

.splide__arrows {
  display: none !important;
}


/* ==========================================
CURSOR
========================================== */

.splide__track.cursor-left {
  cursor: w-resize;
}

.splide__track.cursor-right {
  cursor: e-resize;
}


/* ==========================================
PROJECT META
========================================== */

.project-meta {
  width: 100% !important;

  margin: 0;
  padding: 0;
}


/* ==========================================
IMAGE COUNTER
========================================== */

.image-counter {
  width: 100%;

  margin-top: 8px;
  margin-bottom: 16px;

  padding: 0;

  color: #000000;

  font-size: 0.8em;
  line-height: 1.2;

  text-align: center;
}


/* ==========================================
PROJECT DETAILS
========================================== */

.project-details {
  width: 100%;

  margin: 0;
  padding: 0;

  display: grid;

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

  column-gap: 24px;

  align-items: start;
}


/* ==========================================
PROJECT DESCRIPTION
========================================== */

.project-description {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #000000;

  text-align: left;
}

.project-description p {
  margin: 0;
  padding: 0;

  color: #000000;

  font-size: 1em;
  line-height: 1.3em;

  text-align: left;
}


/* ==========================================
PROJECT TITLE
========================================== */

.project-title {
  font-size: 1em;
}


/* ==========================================
PROJECT CREDIT / HELPERS
========================================== */

.project-credit {
  display: block;

  margin-top: 0.3em;

  font-size: 0.8em;
  line-height: 1.3em;
}


/* ==========================================
PROJECT ROLE
========================================== */

.project-role {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #000000;

  text-align: right;
}

.project-role p {
  margin: 0;
  padding: 0;

  color: #000000;

  font-size: 0.8em;
  line-height: 1.3em;

  text-align: right;
}


/* ==========================================
SOCIAL
========================================== */

.social_media {
  position: fixed;

  left: 2em;
  bottom: 1.5em;

  z-index: 100;

  color: #000000;

  font-size: 1em;
}

.social_media p {
  margin: 0;

  color: inherit;

  line-height: 1.1em;
}

.social_media a {
  color: inherit;
  text-decoration: none;
}

.social_media a:hover {
  text-decoration: underline;
}


/* ==========================================
TEXT SELECTION
========================================== */

::selection {
  background-color: #f0f5a4;
  color: #111415;
}

::-moz-selection {
  background-color: #f0f5a4;
  color: #111415;
}


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

@media only screen and (max-width: 700px) {

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

  html,
  body {
    margin: 6px;

    letter-spacing: 0.02ch;
  }


  /* ==========================================
  ABOUT

  Scrolls normally on mobile
  ========================================== */

  .about {
    position: static;

    top: auto;
    left: auto;
    right: auto;

    width: auto;

    margin-left: 0.5em;
    margin-right: 0.5em;

    padding-top: 10px;
    padding-bottom: 2.5em;

    font-size: 1em;
  }


  /* ==========================================
  MAIN
  ========================================== */

  #container {
    width: 100%;

    padding-top: 0;
  }


  /* ==========================================
  PROJECT / CAROUSEL

  Almost full screen width
  ========================================== */

  .splide {
    width: calc(100% - 1em);
    max-width: none;

    margin-left: auto;
    margin-right: auto;
  }


  /* ==========================================
  CAROUSEL FRAME
  ========================================== */

  .splide__track {
    width: 100%;

    aspect-ratio: 1778 / 1000;

    overflow: hidden;
  }


  .splide__list {
    width: 100%;
    height: 100%;
  }


  .splide__slide {
    width: 100%;
    height: 100%;
  }


  .splide__slide img,
  .splide__slide video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }


  /* ==========================================
  IMAGE COUNTER
  ========================================== */

  .image-counter {
    width: 100%;

    margin-top: 6px;
    margin-bottom: 10px;

    font-size: 0.75em;
    line-height: 1.2;

    text-align: center;
  }


  /* ==========================================
  PROJECT META
  ========================================== */

  .project-meta {
    width: 100% !important;

    margin: 0;
    padding: 0;
  }


  /* ==========================================
  PROJECT DETAILS

  Single column on mobile
  ========================================== */

  .project-details {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
  }


  /* ==========================================
  PROJECT DESCRIPTION

  Full width of image
  ========================================== */

  .project-description {
    width: 100%;

    margin: 0;
    padding: 0;

    text-align: left;
  }


  .project-description p {
    width: 100%;

    margin: 0;
    padding: 0;

    font-size: 1em;
    line-height: 1.3em;

    text-align: left;
  }


  /* ==========================================
  PROJECT TITLE
  ========================================== */

  .project-title {
    font-size: 1em;
  }


  /* ==========================================
  PROJECT CREDIT / HELPERS
  ========================================== */

  .project-credit {
    display: block;

    margin-top: 0.3em;

    font-size: 0.8em;
    line-height: 1.3em;
  }


  /* ==========================================
  HIDE PROJECT ROLE ON MOBILE

  Art Direction / Motion / Design etc.
  ========================================== */

  .project-role {
    display: none;
  }


  /* ==========================================
  PROJECT SPACING
  ========================================== */

  .project-block {
    width: 100%;

    margin-bottom: 100px;
  }


  /* ==========================================
  SOCIAL
  ========================================== */

  .social_media {
    left: 0.5em;
    bottom: 1em;
  }

}