/* Story page sections — #story-* ids for easy Cursor edits */

.story-page .section {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

/* Opening */
#story-opening {
  padding: 96px var(--gutter) 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#story-opening .display--xl {
  max-width: 960px;
}

#story-opening .lead {
  max-width: 660px;
}

#story-portrait {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  aspect-ratio: 1200 / 560;
}

#story-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

/* Numbered narrative blocks (cream bg) */
.story-block {
  padding: 112px var(--gutter) 76px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.story-block .display--sm {
  max-width: 800px;
}

.story-block .body {
  max-width: 700px;
}

.story-block .body + .body {
  margin-top: 0;
}

/* Quote / question band (sand) */
#story-question {
  background: var(--color-sand);
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#story-question .display {
  max-width: 860px;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #000;
}

/* What changed (dark) */
#story-changed {
  background: var(--color-forest);
  padding: 104px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#story-changed .display {
  max-width: 820px;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -1px;
}

#story-changed .body {
  max-width: 700px;
}

/* Why I walk (sand) */
#story-why {
  background: var(--color-sand);
  padding: 104px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#story-why .display--sm {
  max-width: 800px;
}

#story-why .body {
  max-width: 700px;
}

/* Closing (dark) */
#story-closing {
  background: var(--color-forest);
  padding: 112px var(--gutter) 88px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#story-closing .display {
  max-width: 860px;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -1px;
}

.story-closing__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 1199px) {
  #story-question .display {
    font-size: 40px;
  }

  #story-changed .display,
  #story-closing .display {
    font-size: 42px;
  }
}

@media (max-width: 809px) {
  #story-opening {
    padding: 48px var(--gutter) 40px;
    gap: 20px;
  }

  #story-portrait {
    aspect-ratio: 4 / 3;
  }

  .story-block {
    padding: 64px var(--gutter) 48px;
    gap: 16px;
  }

  #story-question {
    padding: 48px var(--gutter);
  }

  #story-question .display {
    font-size: 32px;
  }

  #story-changed,
  #story-why {
    padding: 64px var(--gutter);
  }

  #story-changed .display,
  #story-closing .display {
    font-size: 34px;
  }

  #story-closing {
    padding: 64px var(--gutter) 48px;
  }
}