/* ==========================================================================
   STORY  ·  Sticky heading + portrait beside the narrative
   The aside is pinned with native CSS sticky (no JS pin, nothing cached),
   while a copper thread draws down the margin of the text as it is read.
   ========================================================================== */

.story {
  background-color: var(--cream);
}

.story__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .story__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 1rem + 5vw, 7rem);
    /* `start` lets the aside be shorter than the row, which sticky needs. */
    align-items: start;
  }
}

/* --- Aside ----------------------------------------------------------------- */
.story__sticky {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@media (min-width: 64rem) {
  .story__sticky {
    position: sticky;
    inset-block-start: 7.5rem;
  }
}

@media (max-width: 47.99rem) {
  .story__sticky {
    align-items: center;
    text-align: center;
  }
}

.story__title {
  font-size: var(--step-h2);
  max-inline-size: 13ch;
}

/* A portrait card: paper ground, a hairline edge and the cut-out seated on
   its bottom edge, with a quiet forest wash behind the shoulders. */
.story__portrait {
  position: relative;
  inline-size: min(100%, 20rem);
  aspect-ratio: 4 / 4.6;
  margin-block-start: var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    radial-gradient(80% 70% at 50% 35%, rgba(var(--forest-rgb), 0.16), transparent 72%),
    var(--cream-shade);
  box-shadow: inset 0 0 0 1px var(--line-on-cream);
}

.story__portrait img {
  position: absolute;
  inset: 8% 0 0;
  inline-size: 100%;
  block-size: 92%;
  object-fit: contain;
  object-position: center bottom;
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .story__portrait { display: none; }
}

/* --- Narrative ------------------------------------------------------------- */
.story__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.story__body p {
  font-size: var(--step-lead);
  line-height: 1.75;
  color: var(--ink-body);
}

/* The opening paragraph carries the thesis, so it is set in the heading ink. */
.story__body .story__lead {
  color: var(--ink);
}

/* The thread: a hairline track with a copper fill that grows with reading
   progress (story.js scrubs its scaleY from a live measurement). */
.story__thread {
  position: absolute;
  inset-block: 0.6em 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background-color: var(--line-on-cream);
}

.story__thread span {
  position: absolute;
  inset: 0;
  background-color: var(--copper);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* Without motion the thread is simply drawn in full. */
html:not(.js-motion) .story__thread span {
  transform: none;
}