/* Discreet escape from the existing film. No SVG, layout or header restyling. */
.np-film-skip {
  position: absolute;
  left: clamp(28px, 4.1vw, 72px);
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  color: #c5d4e2;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 5px;
  pointer-events: auto;
  touch-action: manipulation;
}
/* Above the film vignette, but still a child of the first film section.
   svh keeps the link inside the first viewport even on short laptop screens. */
.np-film > .np-film-skip {
  top: calc(100svh - max(18px, env(safe-area-inset-bottom, 0px)));
  bottom: auto;
  transform: translateY(-100%);
}
.np-film-skip span { color: #79cfea; }
.np-film-skip:hover { color: #fff; text-decoration: underline; }
.np-film-skip:focus-visible {
  outline: 2px solid #86d9f4;
  outline-offset: 5px;
  border-radius: 3px;
}
.np-film-skip[hidden] { display: none !important; }
.np-film.is-bypassed .np-film-skip { display: none !important; }
/* The mobile composition changes height during playback. The link belongs
   to the film but stays at the lower-left of the visible viewport. */
@media (max-width: 899px) {
  .np-film > .np-film-skip {
    position: fixed;
    top: auto;
    transform: none;
    left: max(16px, env(safe-area-inset-left, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    font-size: 12px;
  }
}

/* Explicit mobile skip: do not leave the settled partner scene above the
   content. This class is applied only by the skip action; normal playback
   and its reverse path keep their original layout. */
@media (max-width: 899px) {
  .np-film.is-bypassed {
    display: none !important;
  }
}