.story-page { overflow: hidden; background: #fff; }
.story-breadcrumb { padding: 15px 48px; border-bottom: 1px solid rgba(17,17,17,.1); background: #fff; }
.story-breadcrumb ol { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; color: #5e5c57; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.story-breadcrumb li + li::before { content: '/'; margin-right: 18px; color: #aaa89f; }
.story-breadcrumb a:hover { color: #144ea2; }

.story-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(320px,1fr); min-height: clamp(620px,41vw,840px); }
.story-row--reverse { grid-template-columns: minmax(320px,1fr) minmax(0,2fr); }
.story-row--reverse .story-copy { order: 2; }
.story-row--reverse .story-media { order: 1; }
.story-row--light { color: #111; background: #fff; }
.story-row--dark { color: #fff; background: #111; }

.story-copy { display: grid; place-items: center; padding: clamp(64px,7vw,132px); }
.story-copy__inner { width: min(100%,510px); }
.story-copy h1,.story-copy h2 { max-width: 510px; margin: 0 0 22px; font-size: clamp(2rem,2.4vw,2.85rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; }
.story-copy p { max-width: 510px; margin: 0; font-size: clamp(1rem,1.04vw,1.16rem); line-height: 1.72; }
.story-row--dark .story-copy p { color: #d6d5d0; }

.story-media { min-width: 0; margin: 0; overflow: hidden; background: #d9d6cf; }
.story-media picture { display: block; width: 100%; height: 100%; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-row:nth-of-type(2) .story-media img { object-position: 51% center; }
.story-row:nth-of-type(3) .story-media img { object-position: 52% center; }
.story-row:nth-of-type(4) .story-media img { object-position: 52% center; }
.story-row:nth-of-type(5) .story-media img { object-position: 48% center; }

.story-signoff { display: grid; min-height: 58vh; place-items: center; align-content: center; gap: clamp(58px,8vw,118px); padding: 100px 36px 74px; color: #111; background: var(--color-soft); text-align: center; }
.story-signoff p { max-width: 720px; margin: 0; font-size: clamp(2.15rem,4.2vw,4.8rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.05; }
.story-signoff img { width: min(88vw,1400px); height: auto; }

.js .story-copy.section-reveal { transform: translateY(16px); }
.js .story-media.section-reveal { transform: scale(1.008); }
.js .story-copy.section-reveal.is-visible,.js .story-media.section-reveal.is-visible { transform: none; }

@media (max-width: 1080px) {
    .story-row { grid-template-columns: minmax(0,1.7fr) minmax(300px,1fr); min-height: 610px; }
    .story-row--reverse { grid-template-columns: minmax(300px,1fr) minmax(0,1.7fr); }
    .story-copy { padding: 70px 60px; }
}

@media (max-width: 760px) {
    .story-breadcrumb { padding: 12px 20px; }
    .story-row,.story-row--reverse { grid-template-columns: 1fr; min-height: 0; }
    .story-row .story-copy,.story-row--reverse .story-copy { order: 1; min-height: 400px; padding: 70px 28px; }
    .story-row .story-media,.story-row--reverse .story-media { order: 2; min-height: 124vw; max-height: 760px; }
    .story-copy__inner { width: min(100%,500px); }
    .story-copy h1,.story-copy h2 { font-size: clamp(2rem,9vw,2.7rem); }
    .story-copy p { font-size: 1rem; line-height: 1.68; }
    .story-signoff { min-height: 65vh; padding: 84px 20px 58px; }
}

@media (max-width: 420px) {
    .story-row .story-copy,.story-row--reverse .story-copy { min-height: 370px; padding: 58px 22px; }
    .story-row .story-media,.story-row--reverse .story-media { min-height: 128vw; }
}