/* A single pinned composition. Native scrolling drives every transition. */
.knowledge-story { --story-ink:#dce1e4; --story-line:#8295a3; --story-secondary:#b3c9d7; --story-font:var(--font-display); color:var(--story-ink); position:relative; scroll-margin-top:calc(var(--home-header-height,105px) - 105px); }
.knowledge-stage { position:relative; }
.knowledge-intro,.knowledge-scene { margin:0 6%; padding:50px 0; max-width:720px; }
.knowledge-intro h2 { font:400 clamp(32px,4.5vw,64px)/1.18 var(--story-font); letter-spacing:-.025em; margin:22px 0 0; }
.knowledge-story em { font-family:inherit; font-style:normal; font-weight:400; color:#c4cdd3; letter-spacing:inherit; }
.knowledge-story .story-highlight { font:inherit; color:#e7f4fb; text-decoration:underline; text-decoration-color:#a9cfe3; text-decoration-thickness:1.5px; text-underline-offset:.25em; text-shadow:0 0 14px #a9cfe325; }
.knowledge-scene h3 { font:400 clamp(30px,3.25vw,46px)/1.18 var(--story-font); letter-spacing:-.02em; margin:21px 0 25px; text-wrap:balance; }
.knowledge-scene h3 em { font-size:1em; line-height:inherit; }
.knowledge-scene p { color:var(--story-ink); font:400 18px/1.7 var(--story-font); max-width:36ch; margin:0; }
.knowledge-scene .knowledge-aside { font-size:14px; line-height:1.75; color:#a3aab0; margin-top:22px; max-width:42ch; }
.knowledge-visual,.knowledge-signature,.knowledge-dust,.story-atmosphere { display:none; }
.knowledge-story.story-enhanced { height:590svh; }
.story-enhanced .knowledge-stage { position:sticky; top:var(--home-header-height,86px); height:calc(100svh - var(--home-header-height,86px)); overflow:clip; isolation:isolate; }
.story-enhanced .story-atmosphere { display:block; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 75% 47%,rgba(99,122,138,.075),transparent 52%),radial-gradient(ellipse at 48% 85%,rgba(105,135,153,.035),transparent 50%); }
.story-enhanced .knowledge-intro { position:absolute; top:9%; left:6%; width:75%; max-width:1020px; margin:0; padding:0; z-index:3; opacity:var(--intro-opacity,1); transform:translateY(var(--intro-shift,0px)); pointer-events:none; }
.story-enhanced .knowledge-intro h2 { font-size:clamp(32px,4.5vw,65px); max-width:24ch; text-wrap:balance; }
.story-enhanced .knowledge-scenes { position:absolute; inset:0; z-index:3; pointer-events:none; }
.story-enhanced .knowledge-scene { position:absolute; left:6%; top:50%; width:36%; max-width:465px; padding:0; margin:0; opacity:0; visibility:hidden; transform:translateY(calc(-50% + var(--copy-shift,0px))); }
.story-enhanced .knowledge-scene[data-active] { visibility:visible; }
.story-enhanced .knowledge-visual { --map-width:75%; --map-height:100%; --map-top:0%; --map-right:-4%; display:block; position:absolute; right:calc(var(--map-right) * (1 - var(--finale,0))); top:calc(var(--map-top) * (1 - var(--finale,0))); height:calc(var(--map-height) + (100% - var(--map-height)) * var(--finale,0)); width:calc(var(--map-width) + (100% - var(--map-width)) * var(--finale,0)); z-index:1; opacity:var(--visual-opacity,.6); transform:translate(var(--visual-x,0px),calc(var(--visual-y,0px) - var(--home-header-height,86px) * var(--finale,0) * .5)) scale(var(--visual-scale,1)); transform-origin:70% 50%; pointer-events:none; }
.knowledge-map { width:100%; height:100%; overflow:visible; }
.knowledge-map text { fill:var(--story-ink); font:400 23px var(--story-font); paint-order:stroke; stroke:#101419; stroke-width:6px; stroke-linejoin:round; }
.knowledge-map .map-small,.knowledge-map .map-detail { font-size:18px; }
.knowledge-map .map-accent { font:400 30px var(--story-font); fill:#c5d1d8; }
.knowledge-map path,.knowledge-map circle,.knowledge-map ellipse { stroke:var(--story-line); stroke-width:1; }
.knowledge-map [data-map-composition] > ellipse { stroke:none; }
.map-orbits { opacity:.2; transform-box:fill-box; transform-origin:center; }
.map-orbits circle:nth-child(2) { opacity:.5; }
.map-label-layer { opacity:0; }
.knowledge-map .map-secondary text,.knowledge-map .map-secondary-text { fill:var(--story-secondary); }
.knowledge-map .map-secondary path,.knowledge-map .map-secondary circle { stroke:var(--story-secondary); }
.knowledge-map .map-annotation path { opacity:.6; }
.knowledge-map .map-paper { opacity:1; }
.knowledge-map .map-record path { stroke:#a9becb; opacity:.6; }
.knowledge-map .map-source-threads { opacity:.6; }
.knowledge-map .map-context ellipse { stroke:#becdd5; stroke-width:1.3; fill:#91aab9; fill-opacity:.035; }
.knowledge-map .map-person circle,.knowledge-map .map-person path { stroke:#b3c9d7; stroke-width:1.7; }
.knowledge-map .map-process-links { opacity:.55; }
.knowledge-map .map-ai-links { opacity:.82; }
.knowledge-map .map-ai-links [data-ai-path] { stroke:#a8c9dc; stroke-width:1.2; }
.knowledge-map .map-ai-hub text { font-size:36px; fill:#d3e6f1; stroke-width:8px; }
.knowledge-map .map-flow-ink { fill:none; stroke:#d3e6f1; stroke-width:2.1; stroke-linecap:round; stroke-dasharray:.18 .82; }
.knowledge-map .map-collaboration-links { opacity:.8; }
.knowledge-map .map-collaboration-links [data-context-path] { stroke:#abc6d6; stroke-width:1.2; }
.knowledge-map .map-context-human,.knowledge-map .map-context-machine { opacity:.8; }
.knowledge-map .map-context-machine path { stroke:#b3c9d7; stroke-width:1.6; }
.knowledge-map .context-paper { opacity:1; }
.knowledge-map .map-foundation ellipse { fill:#161c22; fill-opacity:.8; stroke:#aabfcb; }
.knowledge-map .map-cycle path { stroke:#a7bcc9; stroke-width:1.4; }
.knowledge-network .network-link { stroke:url(#knowledge-thread); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.knowledge-network .network-conflict { stroke:#a8c1d2; }
.knowledge-map .network-glyph { font:400 14px var(--story-font),"Segoe UI Symbol",sans-serif; fill:#b7ccd9; stroke:#101419; stroke-width:4px; }
.knowledge-network .network-paper { opacity:1; }
.knowledge-network .network-selected { fill:#d7e7f1; font-size:17px; }
/* One pen stroke at a time, revealed by scroll instead of a timed animation. */
.knowledge-map .sketch-original { stroke:none!important; }
.knowledge-map .story-sketch-ink { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
/* Slow orbits accompany the evidence labels and their moving connections. */
.map-orbits { animation:story-orbit 140s linear infinite paused; }
.map-cycle { transform-box:fill-box; transform-origin:center; animation:story-orbit 180s linear infinite paused; }
.story-live .map-orbits,.story-live .map-cycle { animation-play-state:running; }
@keyframes story-orbit { from { rotate:0deg; } to { rotate:360deg; } }

.knowledge-network .network-signal { fill:none; stroke:#c1d9e7; stroke-width:1.7; stroke-linecap:round; stroke-dasharray:.035 .965; }
.story-ending .map-orbits { animation-duration:100s; animation-direction:reverse; opacity:.34; }
.story-ending .map-cycle { animation-duration:72s; }
.story-ending [data-story-layer="4"] text { opacity:var(--ending-ink,1); }
.story-enhanced .knowledge-dust { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }
.story-enhanced .knowledge-signature { display:block; position:absolute; left:50%; top:calc(50% - var(--home-header-height,86px) * var(--finale,0) * .5); transform:translate(-50%,-50%); z-index:7; isolation:isolate; padding:20px 0; color:#e3e9ed; font:400 clamp(36px,7.5vw,100px)/1.3 var(--font-brand); letter-spacing:-.025em; text-transform:none; text-decoration:none; white-space:nowrap; opacity:0; visibility:hidden; }
.knowledge-signature > span { padding-right:.2em; margin-right:-.2em; }
.knowledge-signature .psych { color:var(--accent); }
.knowledge-signature::before { content:""; position:absolute; inset:-35px -55px; z-index:-1; background:radial-gradient(ellipse,#101419 25%,rgba(16,20,25,.8) 45%,transparent 72%); }
.knowledge-signature[data-active] { visibility:visible; }
.knowledge-signature:focus-visible { outline:1px solid #adc6d5; outline-offset:12px; }
.story-static .knowledge-visual,.story-static .knowledge-dust,.story-static .knowledge-signature { display:none; }

/* Words keep their final position while their individual characters fade in. */
.story-readable { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; user-select:none; }
.story-word { display:inline-block; white-space:nowrap; }
.story-character { opacity:clamp(0,calc(var(--typed-count,0) - var(--character-index)),1); transition:opacity 110ms linear; }
.story-static .story-character { opacity:1; transition:none; }
.story-static .knowledge-network,.story-static .map-orbits,.story-static .map-cycle { animation:none; }
.home-story-active .brand-atmosphere { visibility:hidden; }
.home-story-active body[data-page="home"]::before { opacity:0; }
.home-story-active .background-ripple { opacity:.12; }
@media (min-width:761px) and (max-height:700px) {
  .story-enhanced .knowledge-intro h2 { font-size:clamp(32px,4.1vw,56px); }
  .knowledge-scene h3 { font-size:36px; margin-block:18px 21px; }
  .knowledge-scene p { font-size:16px; line-height:1.65; }
  .knowledge-scene .knowledge-aside { font-size:13px; margin-top:17px; }
}
@media (max-width:1000px) and (min-width:761px) {
  .story-enhanced .knowledge-scene { width:38%; left:5%; }
  .knowledge-scene h3 { font-size:32px; }
  .knowledge-scene p { font-size:16px; }
  .knowledge-scene .knowledge-aside { font-size:13px; }
  .story-enhanced .knowledge-visual { --map-right:-1%; --map-width:76%; }
}
@media (max-width:760px) {
  .knowledge-story.story-enhanced { height:640svh; }
  .story-enhanced .knowledge-intro { top:13%; left:7%; width:86%; }
  .story-enhanced .knowledge-intro h2 { font-size:clamp(30px,7.8vw,47px); line-height:1.24; max-width:20ch; margin-top:20px; }
  .story-enhanced .knowledge-visual { --map-width:135%; --map-height:49%; --map-top:-2%; --map-right:-6%; transform-origin:65% 50%; }
  .knowledge-map .map-small,.knowledge-map .map-detail { font-size:22px; }
  .knowledge-map text { font-size:26px; }
  .knowledge-map .map-accent { font-size:40px; }
  .story-enhanced .knowledge-scene { left:7%; top:47%; width:86%; max-width:none; transform:translateY(var(--copy-shift,0px)); }
  .knowledge-scene h3 { font-size:clamp(27px,7.2vw,37px); line-height:1.16; margin:13px 0 19px; }
  .knowledge-scene h3 em { font-size:1em; }
  .knowledge-scene p { font-size:15px; line-height:1.65; max-width:42ch; }
  .knowledge-scene .knowledge-aside { font-size:12px; line-height:1.65; margin-top:16px; max-width:46ch; }
}
@media (max-width:760px) and (max-height:740px) {
  .story-enhanced .knowledge-visual { --map-height:40%; --map-top:-4%; }
  .story-enhanced .knowledge-scene { top:37%; }
  .knowledge-scene h3 { font-size:26px; margin-block:10px 13px; }
  .knowledge-scene p { font-size:13.5px; line-height:1.6; }
  .knowledge-scene .knowledge-aside { font-size:11px; line-height:1.55; margin-top:12px; }
}
/* Reduced motion restores the full narrative as a naturally scrolling document. */
.knowledge-story.story-static { height:auto; }
.story-static .knowledge-stage { position:relative; top:auto; height:auto; overflow:visible; }
.story-static .knowledge-intro,.story-static .knowledge-scene { position:static; visibility:visible; opacity:1!important; width:auto; max-width:720px; padding:45px 0; margin:0 7%; transform:none; }
.story-static .knowledge-scenes { position:static; }
@media (prefers-reduced-motion:reduce),(forced-colors:active) {
  .knowledge-network,.map-orbits,.map-cycle,.network-link { animation:none!important; }
  .story-character { opacity:1; transition:none; }
  .knowledge-story.story-enhanced { height:auto; }
  .story-enhanced .knowledge-stage { position:relative; top:auto; height:auto; overflow:visible; }
  .story-enhanced .knowledge-intro,.story-enhanced .knowledge-scene { position:static; opacity:1!important; visibility:visible; width:auto; max-width:720px; padding:45px 0; margin:0 7%; transform:none; }
  .story-enhanced .knowledge-scenes { position:static; }
  .story-enhanced .knowledge-visual,.story-enhanced .knowledge-dust,.story-enhanced .knowledge-signature { display:none; }
}
@media (forced-colors:active) {
  .knowledge-story em,.knowledge-scene p { color:CanvasText; }
}
