/* Scroll narrative: existing V3 palette, type, triangular particles and spacing. */
.data-story{position:relative;background:var(--color-paper);isolation:isolate;margin-top:var(--space-2xl)}
.data-story-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-2xl);position:relative}
.data-story-art{position:sticky;top:5svh;height:90svh;align-self:start;min-width:0;display:flex;flex-direction:column;justify-content:center}
.data-story-drawing{position:relative;width:100%;height:min(68svh,43rem)}
.data-story-drawing canvas{display:block;width:100%;height:100%}
.data-story-fallback{position:absolute;inset:15%;width:70%;height:70%;color:var(--color-lilac)}
.data-story.is-ready .data-story-fallback{display:none}
.data-story-art figcaption{color:var(--color-muted);font-size:var(--text-small);font-weight:400;line-height:1.6;text-align:center;min-height:2.6em}
.data-story-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-sm);padding-block:var(--space-sm)}
.data-story-controls button{font-size:var(--text-small);font-weight:400;color:var(--color-muted);padding:.6rem .5rem;min-height:2.75rem;background:none;border:0;border-bottom:1px solid transparent}
.data-story-controls button{border:1px solid var(--color-rule);border-radius:var(--radius-button);padding-inline:1rem}
.data-story-controls button[aria-pressed=true]{color:var(--color-ink);border-color:var(--color-muted)}
.data-story-controls button:hover{color:var(--color-ink)}
.data-story-step{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--space-3xl);scroll-margin-top:0}
.data-story-step h2{font-size:clamp(2.35rem,4.3vw,4.2rem);max-width:14ch}
.data-story-step p{max-width:31rem;color:var(--color-muted);margin-top:var(--space-lg)}
.data-story-step .eyebrow{margin-top:0;margin-bottom:var(--space-xl)}
.data-story-step .story-example{font-size:1rem;border-top:1px solid var(--color-rule);padding-top:var(--space-lg);margin-top:var(--space-xl)}
.data-story-step .story-example strong{display:block;color:var(--color-ink);margin-bottom:var(--space-xs)}
.data-story-step .button{margin-top:var(--space-xl);width:fit-content}
@media(max-width:47.99rem){
 .data-story-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .data-story-art{grid-area:1/1;top:0;height:41svh;z-index:2;background:var(--color-paper);padding-top:var(--space-sm)}
 .data-story-drawing{height:28svh;min-height:8rem}
 .data-story-art figcaption{font-size:.7rem;min-height:1.6em}
 .data-story-controls{gap:.25rem;padding-block:0}
 .data-story-controls button{font-size:.7rem;padding-inline:.45rem}
 .data-story-scenes{grid-area:1/1;min-width:0}
 .data-story-step{min-height:110svh;padding-top:47svh;padding-bottom:var(--space-2xl);scroll-margin-top:0;justify-content:flex-start}
 .data-story-step h2{max-width:16ch;font-size:clamp(2.25rem,8vw,3.5rem)}
 .data-story-step .eyebrow{margin-bottom:var(--space-md)}
 .data-story-step p{font-size:1rem;margin-top:var(--space-md)}
 .data-story-step .story-example{margin-top:var(--space-lg);padding-top:var(--space-md)}
}
@media print{.data-story-art{display:none}.data-story-layout{display:block}.data-story-step{min-height:0;padding-block:2rem}}
.data-story-controls button:disabled{cursor:default;opacity:1}
/* Hero: a globe of small stars behind the headline, handed off into the story on scroll. */
.hero-particles{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.home-page main{z-index:auto}
.home-page .site-header{z-index:3}
.home-page .hero-home{min-height:calc(100svh - 7.5rem);display:flex;align-items:center}
.home-page .hero-home>.container{width:100%}
.home-page .hero-copy{z-index:3;max-width:44rem;text-shadow:0 0 1.25rem var(--color-paper),0 0 .35rem var(--color-paper)}
.data-story.is-awaiting .data-story-drawing canvas{opacity:0}
@media(max-width:47.99rem){.home-page .hero-home{min-height:calc(100svh - 6rem);align-items:flex-start}}
@media print{.hero-particles{display:none}}
/* Wide screens: the drawing fills the width behind the copy, starting left of the text, then gliding right. */
@media(min-width:48rem){
 .data-story{overflow-x:clip}
 .data-story-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .data-story-art{grid-area:1/1;top:0;height:100svh;width:100vw;margin-left:calc(50% - 50vw);display:block;z-index:0}
 .data-story-drawing{position:absolute;inset:0;width:100%;height:100%}
 .data-story-fallback{inset:20% auto auto 15%;width:30%;height:auto}
 .data-story-art figcaption{position:absolute;bottom:6svh;left:calc(var(--story-x,.3)*100%);transform:translateX(-50%);white-space:nowrap}
 .data-story-scenes{grid-area:1/1;position:relative;z-index:1}
 .data-story-step{width:min(31rem,42%)}
 #story-fragments{margin-left:auto}
 .data-story-step h2,.data-story-step p{text-shadow:0 0 1rem var(--color-paper),0 0 .3rem var(--color-paper)}
}
/* Hero subheading: brighter and one step heavier so it holds its own against the headline and the sky. */
.home-page .hero-intro{color:oklch(83% 0 0);font-weight:400}
/* Scene four: the agent, with the four rules that keep people in control as a compact ruled list beside it. */
.story-control h2{max-width:16ch}
.story-control .muted-heading{color:var(--color-quiet)}
.story-rules{list-style:none;margin:var(--space-xl) 0 0;padding:0}
.story-rules li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--space-sm);align-items:baseline;border-top:1px solid var(--color-rule);padding-block:var(--space-md)}
.story-rules span{color:var(--color-amber);font-size:var(--text-small);font-weight:400;font-variant-numeric:tabular-nums}
.story-rules h3{font-size:1.125rem}
.data-story-step .story-rules p{grid-column:2;margin-top:var(--space-xs);font-size:1rem}
.data-story-step.story-control .how-note{margin-top:var(--space-lg);color:var(--color-quiet);font-size:var(--text-label)}
/* How we work, as scenes five to eleven: the intro, then one stage per screen with its own shape beside it. */
.how-intro .muted-heading{color:var(--color-quiet)}
.how-flow{list-style:none;margin:0;padding:0}
.how-stage h3{font-size:clamp(2.35rem,4.3vw,4.2rem);max-width:14ch}
.how-stage .eyebrow{color:var(--color-quiet)}
.data-story-step .how-outcome{color:var(--color-ink);border-top:1px solid var(--color-rule);padding-top:var(--space-md);margin-top:var(--space-xl);font-size:1rem}
.data-story-step.how-stage .how-note{margin-top:var(--space-xl);color:var(--color-quiet);font-size:var(--text-label)}
/* The stage rail: six stops under the drawing that fill in as the stages flow into one another. */
.how-rail{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:var(--space-md);position:relative;font-size:var(--text-small);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
.data-story.show-rail .how-rail{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out)}
.how-rail:before,.how-rail:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--color-rule);z-index:-1}
.how-rail:after{background:linear-gradient(90deg,var(--color-accent),var(--color-lilac));transform:scaleX(var(--how,0));transform-origin:left}
.how-rail a{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:2.75rem;padding-inline:.6rem;border:1px solid var(--color-rule);border-radius:var(--radius-button);background:var(--color-paper);color:var(--color-quiet);text-decoration:none}
.how-rail a:hover{color:var(--color-ink);border-color:var(--color-muted)}
.how-rail a[aria-current]{color:var(--color-ink);border-color:var(--color-accent)}
.how-rail .how-num{color:inherit}
.how-rail a[aria-current] .how-num{color:var(--color-amber)}
.how-rail-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.how-rail a[aria-current] .how-rail-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
@media(min-width:48rem){
 .data-story-scenes{pointer-events:none}
 .data-story-step{pointer-events:auto}
 .how-stage{min-height:90svh}
 .how-rail{position:absolute;bottom:5svh;left:calc(var(--story-x,.7)*100%);transform:translateX(-50%);z-index:2}
 .data-story-step h3{text-shadow:0 0 1rem var(--color-paper),0 0 .3rem var(--color-paper)}
}
@media(max-width:47.99rem){
 .how-rail{gap:.3rem;margin-top:var(--space-xs)}
 .how-rail a{padding-inline:.45rem;min-height:2.25rem}
}
@media print{.how-rail{display:none}}