/* ==========================================================================
   Perspectives page only - the Framer spiral illustration (stack of topics winding up a marble helix).
   The picture has no red line of its own; the red line is an SVG drawn slowly by js/scroll-line.js, following the
   open topic card. The illustration sits in the sticky left column under the "Perspectives" label.
   Loaded only by perspectives.php; scoped to body.thinking-page.
   ========================================================================== */
body.thinking-page .persp-visual {
  height: min(78vh, 800px);
  aspect-ratio: 1024 / 1536;
  max-width: 100%;
  margin: 4px 0 0;
  pointer-events: none;
  /* gentle fade at the very top, like the Framer mask */
  -webkit-mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12%);
  mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12%);
}

.persp-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* a taller illustration needs the sticky column to start a little higher */
@media (min-width: 1201px) {
  body.thinking-page .thinking-topics-header-col {
    top: 96px;
  }

  /* topics spaced a little further apart so the illustration stays beside them for longer */
  body.thinking-page .thinking-topics-list-col {
    gap: 80px;
  }
}

.persp-stage > img,
.persp-stage > .impl-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.persp-stage > img {
  display: block;
  object-fit: contain;
}

/* Tablet / mobile: the label and the cards stack, the illustration sits centred under the label */
@media (max-width: 1200px) {
  body.thinking-page .persp-visual {
    height: auto;
    width: 100%;
    max-width: 420px;
    margin: 12px auto 0;
  }

  .persp-stage {
    height: auto;
    aspect-ratio: 1024 / 1536;
  }
}