/* A quiet introduction, with one continuous line through the story. */
.hero-intro.kinetic-intro { display: block; padding-top: clamp(24px, 3.4vw, 58px); padding-bottom: clamp(28px, 3.5vw, 56px); }
.hero-intro.kinetic-intro h1 { font-size: clamp(44px, 6.6vw, 110px); letter-spacing: -.035em; line-height: 1.08; }
.hero-intro.kinetic-intro h1 > span { display: block; margin: 0; font-weight: 300; }
.hero-intro.kinetic-intro h1 > strong { display: block; font-weight: 700; }
.intro-signature { display: flex; align-items: baseline; gap: 22px; margin-top: 22px; }
.intro-role { color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: .05em; flex-shrink: 0; }
.intro-summary { font-size: clamp(18px, 1.65vw, 23px); line-height: 1.5; font-weight: 300; word-break: keep-all; }
.perspective.story-section { padding-top: 0; padding-bottom: 0; }
.story-sticky { padding: 28px 0; }
.story-label { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; color: var(--muted); }
.perspective.story-section .story-label h2, .story-label > span { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .06em; line-height: 1.5; }
.story-chapter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; padding: clamp(64px, 8vw, 120px) 0; }
.story-chapter + .story-chapter { border-top: 1px solid var(--line); }
.story-visual { min-width: 0; }
.story-display { font-size: clamp(54px, 7.8vw, 128px); line-height: 1; letter-spacing: -.035em; }
.story-display > span { display: block; font-weight: 300; }
.story-display > strong { display: block; font-weight: 700; color: var(--fg); }
.story-text { max-width: 31rem; justify-self: end; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.65; color: #bdbdbb; word-break: keep-all; overflow-wrap: break-word; }
.story-text p + p { margin-top: .8em; }
.story-text strong { color: var(--fg); font-weight: 400; }
.story-journey { flex-shrink: 0; }
.story-milestones { list-style: none; display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 0; }
.story-milestones li { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
.story-milestones li:nth-child(2) { text-align: center; }
.story-milestones li:last-child { text-align: right; }
.story-milestones li > span:first-child { font-size: 13px; letter-spacing: .05em; }
.story-milestones li > span:last-child { font-size: 13px; font-weight: 300; }
.story-milestones li.is-current { color: var(--accent); }
.story-milestones li.is-done { color: var(--fg); }
.story-progress { position: relative; display: block; padding: 14px 0; margin-top: 14px; }
.story-progress > span { display: block; height: 2px; background: #333330; overflow: hidden; }
.story-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(1); transform-origin: left; }
.story-playhead { position: absolute; width: 6px; height: 6px; top: 12px; left: calc(var(--story-progress, 1) * (100% - 6px)); background: var(--accent); }
.story-finish { margin-top: 12px; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.3; font-weight: 300; word-break: keep-all; }
.story-finish strong { font-weight: 700; }
.story-section.is-scroll-story { --story-screen: calc(100svh - 48px); }
.is-scroll-story .story-runway { height: calc(var(--story-screen) + 115svh); }
.is-scroll-story .story-sticky { position: sticky; top: 24px; height: var(--story-screen); display: flex; flex-direction: column; overflow: clip; }
.is-scroll-story .story-panels { flex: 1; min-height: 0; position: relative; margin: 24px 0; }
.is-scroll-story .story-chapter { position: absolute; inset: 0; padding: 0; border: 0; opacity: var(--chapter-opacity, 0); transform: translateY(var(--chapter-y, 0px)); }
.is-scroll-story .story-finish { opacity: calc(.25 + var(--finish-reveal, 0) * .75); }
.story-invitation { padding: clamp(60px, 8vw, 115px) 0; border-top: 1px solid var(--line); }
.story-invitation > .meta { margin-bottom: 26px; color: var(--muted); }
.invitation-bottom { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.invitation-bottom > p { font-size: clamp(30px, 4vw, 64px); line-height: 1.3; font-weight: 300; letter-spacing: -.025em; word-break: keep-all; }
.invitation-bottom > button { display: flex; align-items: center; justify-content: space-between; gap: 50px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid #777; font-size: clamp(24px, 2.6vw, 38px); }
.invitation-bottom > button:hover { border-color: var(--fg); }
@media (max-width: 800px) {
 .intro-signature { flex-direction: column; gap: 7px; margin-top: 18px; }
 .story-chapter { grid-template-columns: 1fr; align-content: center; gap: 25px; padding: 54px 0; }
 .story-display { font-size: clamp(52px, 11.7vw, 90px); }
 .story-text { max-width: 34rem; justify-self: start; font-size: 21px; }
 .story-sticky { padding: 22px 0; }
 .invitation-bottom { flex-direction: column; align-items: start; gap: 28px; }
 .invitation-bottom > button { min-width: 170px; }
}
@media (max-width: 640px) {
 .hero-intro.kinetic-intro { padding-top: 23px; padding-bottom: 28px; }
 .hero-intro.kinetic-intro h1 { font-size: clamp(39px, 10.4vw, 65px); }
 .intro-summary { font-size: 18px; }
 .story-label { gap: 12px; }
 .story-label > span { font-size: 12px; }
 .story-text { font-size: 19px; }
 .story-finish { font-size: 23px; }
 .story-milestones li > span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .story-finish { opacity: 1; } }