@layer design {
/* Decorative crops of the unchanged 2172 x 724 PNG, in the existing stage order.
   A shared 450 x 550 canvas (source y=90) keeps scale and feet aligned.
   Per-stage x/width values exclude adjacent illustrations without editing pixels. */
.page-research #lifecycle .lc-item { min-width: 0; }
.page-research #lifecycle .lc-icon[data-lifecycle-art] {
  width: min(100%, 156px);
  aspect-ratio: 450 / 550;
  margin: 0 auto var(--an-paragraph-gap);
  background-image: url('./lifecycle-states.png');
  background-repeat: no-repeat;
  background-size: calc(2172 / 450 * 100%) auto;
  background-position:
    calc((var(--lc-crop-x) - (450 - var(--lc-crop-width)) / 2) / (2172 - 450) * 100%)
    calc(90 / (724 - 550) * 100%);
  clip-path: inset(0 calc((450 - var(--lc-crop-width)) / 900 * 100%));
}
.page-research #lifecycle [data-lifecycle-art="birth"] { --lc-crop-x: 0; --lc-crop-width: 437; }
.page-research #lifecycle [data-lifecycle-art="inheritance"] { --lc-crop-x: 437; --lc-crop-width: 439; }
.page-research #lifecycle [data-lifecycle-art="growth"] { --lc-crop-x: 876; --lc-crop-width: 445; }
.page-research #lifecycle [data-lifecycle-art="branching"] { --lc-crop-x: 1321; --lc-crop-width: 450; }
.page-research #lifecycle [data-lifecycle-art="departure"] { --lc-crop-x: 1771; --lc-crop-width: 401; }
@media (max-width: 768px) {
  .page-research #lifecycle .lc-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    justify-items: stretch;
  }
  .page-research #lifecycle .lc-item {
    display: grid;
    grid-template-columns: clamp(76px, 24vw, 96px) minmax(0, 1fr);
    column-gap: 12px;
    grid-column: auto;
    min-width: 0;
    text-align: left;
    padding-top: 20px !important;
  }
  .page-research #lifecycle .lc-item .lc-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .page-research #lifecycle .lc-item h4 {
    grid-column: 2;
    align-self: end;
    overflow-wrap: break-word;
  }
  .page-research #lifecycle .lc-item p {
    grid-column: 2;
    align-self: start;
    margin: 6px 0 0;
  }
}

}