html,
body,
.work-harbor {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.harbor-film {
  object-position: 100% 50%;
}

.screen-answer {
  max-width: 31rem;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(.46rem, .7vw, .72rem);
  transition: color .5s ease, text-shadow .5s ease;
}

.work-harbor.has-answer .lantern-work-screen {
  box-shadow: inset 0 0 3.2rem rgba(89, 216, 248, .32), 0 0 3.8rem rgba(79, 211, 246, .7);
}

.work-harbor.has-answer .screen-answer {
  color: #e8faff;
  text-shadow: 0 0 16px rgba(119, 219, 244, .5);
}

@media (max-width: 560px) {
  .lighthouse-vessel {
    left: auto;
    transform: none;
  }

  .screen-answer {
    margin-top: .18rem;
    font-size: .32rem;
    line-height: 1.2;
  }

  .screen-opening h1 {
    font-size: .78rem !important;
    line-height: .9 !important;
    overflow-wrap: normal;
  }

  .gateway {
    padding: .28rem .4rem;
  }

  .screen-signal input {
    padding: .26rem;
    font-size: .46rem;
  }

  .work-harbor.has-answer[data-path="none"] .lantern-work-screen {
    position: fixed;
    left: 50%;
    top: 8rem;
    width: calc(100% - 1rem);
    height: min(31rem, calc(100svh - 9rem));
    transform: translateX(-50%);
    border-radius: 1rem;
  }

  .work-harbor.has-answer .lighthouse-vessel,
  .work-harbor:not([data-path="none"]) .lighthouse-vessel {
    left: 0;
    transform: none;
    filter: none;
  }

  .work-harbor.has-answer[data-path="none"] .screen-opening h1 {
    font-size: clamp(2.4rem, 12vw, 3.5rem) !important;
    line-height: .9 !important;
  }

  .work-harbor.has-answer[data-path="none"] .screen-answer {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.45;
  }

  .work-harbor.has-answer[data-path="none"] .quiet-paths {
    display: flex;
    margin-top: 1.2rem;
  }

  .journey .scene-copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.5rem) !important;
    line-height: .9 !important;
  }
}