.scenery {
  background: #7d8ca7;
}

.wallpaper-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sky-art {
  z-index: -1;
}

.wallpaper-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 25, 43, .22), rgba(26, 31, 48, .08) 42%, rgba(20, 28, 43, .34));
}

.sky-grain {
  z-index: 2;
  opacity: .08;
}

.wallpaper-fallback .wallpaper-video {
  display: none;
}

.wallpaper-fallback .sky-art {
  z-index: 0;
}

.landing,
.projects-view {
  position: relative;
  z-index: 1;
}

body {
  overflow-x: hidden;
}

.landing {
  color: #fff;
  text-shadow: 0 1px 18px rgba(18, 24, 42, .3);
}

.landing .wordmark,
.landing .top-note,
.landing .horizon-label,
.landing .welcome-copy,
.landing .enter-caption,
.landing .landing-bottom,
.landing .motion-control {
  color: #fff;
}

.landing .wordmark img,
.project-header .wordmark img {
  filter: brightness(0) invert(1);
  opacity: .95;
}

.landing .horizon-label span {
  background: rgba(255, 255, 255, .72);
}

.landing .welcome h1 {
  text-shadow: 0 3px 34px rgba(25, 25, 41, .48);
}

.landing .enter-button {
  color: #fff;
  border-color: rgba(255, 255, 255, .68);
  background: rgba(25, 31, 50, .24);
  box-shadow: 0 12px 40px rgba(17, 23, 38, .18);
}

.landing .enter-button:hover {
  background: rgba(255, 255, 255, .25);
}

.landing .button-arrow {
  color: #384a67;
  background: rgba(255, 255, 255, .86);
  text-shadow: none;
}

.landing .cloud-note i {
  background: #ffd1dd;
  box-shadow: 0 0 10px #ffd1dd;
}

.projects-view {
  width: 100%;
  max-width: none;
  padding-right: max(48px, calc((100vw - 1344px) / 2));
  padding-left: max(48px, calc((100vw - 1344px) / 2));
  color: #fff;
  text-shadow: 0 1px 14px rgba(13, 19, 34, .28);
}

.project-header,
.project-footer {
  border-color: rgba(255, 255, 255, .28);
}

.project-header nav,
.eyebrow,
.project-intro > p:not(.eyebrow),
.intro-sign,
.intro-sign > span,
.project-footer {
  color: rgba(255, 255, 255, .86);
}

.project-header nav a:hover {
  color: #fff;
}

.intro-rule,
.tree-root::after,
.branches::before,
.branch::before {
  background: rgba(255, 255, 255, .58);
}

.tree-root {
  border-color: rgba(255, 255, 255, .58);
  background: rgba(24, 31, 50, .23);
  box-shadow: 0 12px 35px rgba(12, 17, 30, .13);
}

.root-orbit {
  border-color: rgba(255, 255, 255, .42);
}

.root-name,
.root-name span {
  color: #fff;
}

.branch {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(26, 33, 53, .34);
  box-shadow: 0 12px 35px rgba(12, 17, 30, .14);
  text-shadow: none;
}

.branch:hover {
  background: rgba(28, 35, 55, .5);
  box-shadow: 0 15px 38px rgba(12, 17, 30, .22);
}
.branch-featured { border-color: rgba(255,215,224,.58); background: rgba(39,35,56,.42); }
.view-projects .project-main { align-items: start; min-height: 0; }
.view-projects .project-intro { position: sticky; top: 120px; }
.view-projects .project-tree { align-items: start; }
.view-projects .tree-root { position: sticky; top: 130px; margin-top: 36px; }

.branch-point {
  border-color: rgba(255, 255, 255, .75);
  background: #f4b8c8;
}

.project-number,
.project-state,
.branch p,
.branch-bottom > span {
  color: rgba(255, 255, 255, .78);
}

.project-state.live,
.branch-bottom a {
  color: #fff;
}

.project-state i {
  background: #bce5d3;
  box-shadow: 0 0 8px #bce5d3;
}

.branch-bottom {
  border-top-color: rgba(255, 255, 255, .19);
}

.branch-bottom b {
  color: rgba(255, 255, 255, .42);
}

.motion-paused .wallpaper-video {
  filter: saturate(.92);
}

@media (max-width: 760px) {
  .projects-view {
    max-width: 100vw;
    padding-right: 22px;
    padding-left: 22px;
  }

  .wallpaper-video {
    object-position: 52% center;
  }

  .wallpaper-shade {
    background: linear-gradient(180deg, rgba(13, 21, 38, .31), rgba(19, 25, 42, .12) 40%, rgba(13, 20, 35, .44));
  }

  .project-header {
    flex-wrap: wrap;
  }

  .project-header nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .project-header nav a:nth-child(2) {
    display: none;
  }

  .branches {
    width: auto;
    min-width: 0;
    margin-right: 27px;
  }

  .branch {
    width: calc(100vw - 93px);
    max-width: calc(100vw - 93px);
    min-width: 0;
    margin-right: 22px;
    overflow: hidden;
  }

  .project-main,
  .project-tree {
    min-width: 0;
    max-width: 100%;
  }
  .view-projects .project-intro, .view-projects .tree-root { position: static; }

  .branch-top,
  .branch-bottom {
    flex-wrap: wrap;
  }

  .branch-top .project-state {
    display: none;
  }

  .branch p,
  .branch-bottom > span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .projects-view {
    padding-right: 16px;
    padding-left: 16px;
  }
}