* {
  line-height: 1.0;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0;
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

main {
  flex: 1;
  max-width: 1280px;
}

article {
  border-left: 1px solid var(--color-white);
  display: flex;
  flex-direction: column;
  margin-left: var(--size-large);
}

  section:first-child article:first-child {
    margin-top: var(--size-large);
  }

  section:last-of-type article {
    border-left: none;
  }

div { --placeholder: auto; }

  div.title, div.description {
    padding: 0 var(--size-large);
    position: relative;
  }

    div.title:not(div:last-child) {
      min-height: var(--size-title);
    }

    div.title:last-child, div.description:last-child {
      padding-bottom: var(--size-large);
    }

  div.media {
    position: relative;
  }

    div.media div {
      align-items: center;
      display: flex;
      mask-image: linear-gradient(90deg, black 80%, transparent);
      mask-repeat: no-repeat;
      mask-size: 100% 100%;
      max-height: var(--size-video);
      overflow: hidden;
      padding: var(--size-large);
      transition: opacity 0.6s ease-in-out;
    }

h1, h2 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: var(--size-large);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h3 {
  font-family: "Helvetica Neue", sans-serif;
  font-size: var(--size-medium);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--size-large);
}

img { --placeholder: auto; }

  div.title img {
    position: absolute;
  }

    section:first-of-type div.title img, section:last-of-type div.title img {
      outline: var(--size-small) solid var(--color-black);
    }

    img[src*="/assets/images/avatar"] {
      border-radius: calc(var(--size-large) / 2.00);
      height: var(--size-large);
      left: calc(-1.00 * (var(--size-large) / 2.00));
      top: 0;
      width: var(--size-large);
    }

    img[src*="/assets/images/circle"] { --placeholder: auto; }

      h2 + img[src*="/assets/images/circle"] {
        height: calc(var(--size-large) / 2.00);
        left: calc(-1.00 * (var(--size-large) / 4.00));
        top: calc(var(--size-large) / 3.50);
        width: calc(var(--size-large) / 2.00);
      }

      h3 + img[src*="/assets/images/circle"] {
        height: calc(var(--size-large) / 4.00);
        left: calc(-1.00 * (var(--size-large) / 8.00));
        top: calc(var(--size-large) / 2.50);
        width: calc(var(--size-large) / 4.00);
      }

  div.media img { --placeholder: auto; }

    img[src="/assets/images/arrow.svg"] {
      cursor: pointer;
      height: calc(var(--size-large) / 2.00);
      padding: var(--size-large) var(--size-small);
      position: absolute;
      right: 0;
      top: calc(50% - var(--size-large) - (var(--size-large) / 4.00));
    }

    div.media div img {
      border-radius: calc(var(--size-tiny) / 2.0);
      max-height: var(--size-media);
      max-width: calc(100% - var(--size-large));
      opacity: 0.2;
      transition: opacity 0.6s ease-in-out;
    }

      div.media div img:not(img.first-child) {
        margin-left: var(--size-small);
      }

      div.media:is(div.active) div img {
        opacity: 1.0;
      }

  footer img { --placeholder: auto; }

    img[src="/assets/images/license.svg"] {
      height: var(--size-large);
      left: calc(-1.00 * (var(--size-large) / 2.00));
      position: absolute;
      top: calc(50% + (var(--size-small) / 2.00) - (var(--size-large) / 2.00));
      width: var(--size-large);
    }

p {
  font-family: "San Francisco", sans-serif;
  font-size: var(--size-small);
  font-weight: 100;
  line-height: 1.2;
}

  p:not(p:first-child) {
    margin-top: var(--size-small);
  }

  p + p {
    margin-top: var(--size-tiny) !important;
  }

  article p + p:last-child {
    font-weight: 400;
    letter-spacing: -0.025em;
  }

  footer p {
    font-size: var(--size-tiny);
    padding-left: var(--size-large);
  }

a {
  color: var(--color-white);
  cursor: pointer;
  text-decoration: underline;
}

  nav a {
    opacity: 0.2;
    text-decoration: none;
    transition: opacity 0.6s ease-in-out;
  }

    nav a:hover, nav a.active {
      opacity: 1.0;
    }

video {
  opacity: 0.2;
  transition: opacity 0.6s ease-in-out;
}

  video[loop] {
    max-height: var(--size-video);
    max-width: 100%;
    pointer-events: none;
  }

    video[loop].active {
      opacity: 1.0;
    }

  div.media video {
    border-radius: calc(var(--size-tiny) / 2.0);
    cursor: pointer;
    max-height: var(--size-media);
    max-width: calc(100% - var(--size-large));
  }

    div.media video:not(video.first-child) {
      margin-left: var(--size-small);
    }

    div.media:is(div.active) video {
      opacity: 1.0;
    }

form {
  padding: var(--size-small) var(--size-large) var(--size-large);
}

input, textarea {
  border-radius: calc(var(--size-tiny) / 2.0);
  box-sizing: border-box;
  color: var(--color-white);
  display: block;
  font-family: "San Francisco", sans-serif;
  font-size: var(--size-tiny);
  font-weight: 400;
  letter-spacing: -0.025em;
  width: 100%;
}

  input + textarea, textarea + input {
    margin-top: var(--size-tiny);
  }

  input[type="email"], textarea {
    background-color: var(--color-gray);
    border: none;
    padding: var(--size-tiny);
  }

  input[type="submit"] {
    background-color: transparent;
    border: 2px solid var(--color-white);
    cursor: pointer;
    padding: var(--size-tiny);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  }

    input[type="submit"]:hover {
      background-color: var(--color-white);
      color: var(--color-black);
    }

textarea {
  resize: none;
}

footer {
  display: flex;
  flex-direction: row;
  margin: 0 var(--size-large) var(--size-large);
  position: relative;
}

b {
  font-weight: 400;
  letter-spacing: -0.025em;
}

aside {
  display: flex;
  position: sticky;
}

  aside.desktop {
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    padding: var(--size-large) var(--size-large) var(--size-large) 0;
    text-align: right;
    top: 0;
  }

  aside.mobile {
    background-color: var(--color-black);
    border-bottom: 1px solid var(--color-gray);
    top: 0;
    padding: var(--size-small);
    z-index: 1;
  }

button {
  background-color: transparent;
  border: 2px solid var(--color-white);
  border-radius: calc(var(--size-tiny) / 2.0);
  color: var(--color-white);
  cursor: pointer;
  font-family: "San Francisco", sans-serif;
  font-size: var(--size-tiny);
  font-weight: 400;
  letter-spacing: -0.025em;
  padding: var(--size-tiny) var(--size-small);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

  button:hover {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  aside.mobile button {
    font-size: var(--size-small);
    margin-left: var(--size-small);
    padding: var(--size-tiny) var(--size-medium);
  }

nav {
  font-family: "San Francisco", sans-serif;
}

  aside.desktop nav {
    font-size: var(--size-tiny);
    font-weight: 400;
    letter-spacing: -0.025em;
  }

  aside.mobile nav {
    font-size: var(--size-medium);
    font-weight: 100;
    width: 100%;
  }

ul { --placeholder: auto; }

  aside.mobile ul {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-evenly;
  }

  aside.desktop ul + ul {
    margin-top: var(--size-tiny);
  }

li { --placeholder: auto; }

  aside li {
    padding: 0.2em 0;
  }

  aside.desktop ul:last-child li {
    font-weight: 100;
    letter-spacing: -0.000em;
    line-height: 1.2;
  }