/* Theme-level section margins must not create a gap before or after a case. */
:is(.steins-case-capal-root, .steins-case-guabi-root) :is(.scl-page, .sgb-page) > section {
  margin: 0 !important;
}

/* These two Gutenberg pages wrap their shortcode output in an inline <code>
 * element. Flatten it and zero its whitespace-only line boxes so they cannot
 * leave a white strip before the first section or after the closing section. */
:is(.steins-case-capal-root, .steins-case-guabi-root) {
  font-size: 0;
  line-height: 0;
}

:is(.steins-case-capal-root, .steins-case-guabi-root) > code {
  display: contents !important;
}

:is(.steins-case-capal-root, .steins-case-guabi-root) :is(.scl-page, .sgb-page) {
  font-size: 16px;
  line-height: normal;
}

@media (min-width: 700px) {
  .steins-case-capal-root .scl-page::before {
    background: #e30613;
    content: '';
    height: 92px;
    left: 16px;
    pointer-events: none;
    position: fixed;
    top: calc(50% - 46px);
    transform: scaleY(var(--scl-scroll-progress, 0));
    transform-origin: center top;
    transition: transform 100ms linear;
    width: 3px;
    z-index: 4;
  }

  .steins-case-guabi-root .sgb-page::after {
    background: #e30613;
    bottom: 18px;
    content: '';
    height: 3px;
    left: 18px;
    pointer-events: none;
    position: fixed;
    transform: scaleX(var(--sgb-scroll-progress, 0));
    transform-origin: left center;
    transition: transform 100ms linear;
    width: 112px;
    z-index: 4;
  }
}

/* A percentage height in Capal's media grid can resolve against its own track
 * in some themes. Keep the desktop hero to one viewport without a blank top. */
@media (min-width: 821px) {
  .steins-case-capal-root .scl-hero {
    height: max(720px, 100svh);
    min-height: 0;
  }

  .steins-case-capal-root .scl-hero__grid {
    height: calc(max(720px, 100svh) - clamp(20px, 3.5vw, 54px) - clamp(20px, 3.5vw, 54px));
    min-height: 0;
  }

  .steins-case-capal-root .scl-hero__media {
    height: 100%;
    min-height: 0;
  }

  .steins-case-capal-root .scl-hero__main {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .steins-case-capal-root .scl-hero__media {
    grid-template-rows: 242px auto;
    min-height: 282px;
  }

  .steins-case-capal-root .scl-hero__main {
    min-height: 242px;
  }

  .steins-case-capal-root .scl-hero__detail {
    height: 106px;
  }

  .steins-case-capal-root .scl-hero__copy {
    padding-bottom: 42px;
  }
}