.story { background: var(--color-background); }
.story__grid { display: grid; grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.story__visual { position: relative; min-height: 43rem; overflow: hidden; background: var(--color-surface-deep); }
.story__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__visual figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--space-4); background: linear-gradient(transparent, rgba(23,23,21,0.72)); color: var(--color-white); font-size: var(--font-size-100); text-align: right; }
.story__content h2 { max-width: 14ch; }
.story__lead { max-width: 39rem; margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-400); }
.story__list { display: grid; gap: 0; margin-block: var(--space-6); list-style: none; }
.story__list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.story__list li > span { color: var(--color-highlight); font-size: var(--font-size-100); font-weight: 700; }
.story__list h3 { margin-bottom: var(--space-1); font-family: var(--font-body); font-size: var(--font-size-300); font-weight: 700; }
.story__list p { color: var(--color-text-muted); font-size: var(--font-size-200); }
@media (max-width: 767px) {
  .story__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .story__visual { min-height: 30rem; }
  .story__content .button { width: 100%; }
}