@media (max-width: 1199px) {
  .site-header__label,
  .site-header__time {
    display: none;
  }

  .chapter__title {
    font-size: clamp(2.2rem, 7vw, 4.5rem);
  }

  .chapter[data-align="split"] .chapter__title {
    display: block;
  }

  .chapter[data-align="split"] .chapter__title .word:last-child {
    text-align: left;
  }

  .credits__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .experience {
    height: 380vh;
  }

  .experience.is-complete {
    height: 100vh;
  }

  .site-header {
    mix-blend-mode: normal;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.55), transparent);
  }

  .site-header__btn[data-action="info"] {
    display: none;
  }

  .chapter {
    align-content: end;
    padding-bottom: calc(5rem + var(--safe-bottom));
  }

  .chapter[data-align="split"] .chapter__content,
  .chapter[data-align="right"] .chapter__content,
  .chapter[data-align="left"] .chapter__content,
  .chapter[data-align="center"] .chapter__content {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .chapter[data-align="split"] .chapter__content {
    grid-template-columns: 1fr;
  }

  .chapter__body {
    max-width: 36ch;
  }

  .bg-title {
    display: none;
  }

  .atmosphere__measure {
    display: none;
  }

  .credits__grid {
    grid-template-columns: 1fr;
  }

  .cursor {
    display: none !important;
  }

  html.has-cursor,
  html.has-cursor body,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor [data-cursor] {
    cursor: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .experience {
    height: 420vh;
  }

  .experience.is-complete {
    height: 100vh;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .chapter {
    align-content: center;
    padding-block: 4.5rem;
  }

  .chapter__title {
    font-size: clamp(1.8rem, 6vh, 3rem);
  }

  .chapter__scroll-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}