/* Shared screen-space regions are measured by the renderer, not duplicated in JS. */
:root{--ink:#f4f6f8;--muted:#b7bec2;--line:#ffffff24;--cyan:#a9e8ea;--gold:#edc38d;--h2-size:clamp(34px,4.4vw,64px);--h2-lh:1.08;--h2-ls:-.045em;--panel:#0a0d10cc}
html{scroll-behavior:auto}body{font-size:16px}.reading-shade{background:linear-gradient(90deg,#000b 0%,#0006 30%,transparent 63%)}
header{height:84px}.wordmark{font-size:17px}
#journey{height:280svh}.scene-ui{min-height:660px}.identity{top:23%;width:42%;max-width:620px}
h1{font-size:clamp(48px,5.6vw,88px);line-height:1.02;letter-spacing:-.02em;font-weight:500}.intro{font-size:18px;line-height:1.65;max-width:420px;color:#c3cbd4}
.eyebrow{font-size:12px;letter-spacing:.10em}.actions a{font-size:15px;min-height:50px}.social{font-size:14px}.scene-caption{font-size:12px;margin-top:34px}
#inspect{position:fixed;left:47%;top:32%;width:48%;height:43%;border-radius:12px;touch-action:pan-y}
#inspect:focus-visible{outline:1px dashed #b2dee5;outline-offset:5px}#inspect[aria-disabled=true]{outline:none}
.craft-tools{position:fixed;z-index:5;bottom:12%;right:5%;gap:10px}.craft-tools>span{font-size:12px;color:#b8c6cb}.craft-tools button{font-size:14px;min-height:44px;background:#080b0cba;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* Icon coordination with the shared site system (v3-system.css .icon rule): same
   stroke-based sizing technique, tuned to /proof/'s existing cyan/gold palette. */
.icon{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;font-size:1.05em;color:var(--cyan)}
.craft-tools button:hover .icon,.craft-tools button[aria-pressed=true] .icon,footer button:hover .icon,footer button[aria-pressed=true] .icon{color:var(--gold)}
.outside-journey #inspect{visibility:hidden;pointer-events:none}.outside-journey .craft-tools{display:none}
.scene-foot{font-size:12px;bottom:25px;color:#a1aeb4}.scene-foot>span:last-child{max-width:230px;font-size:12px}
.transition-title{position:absolute;left:5%;top:16%;opacity:var(--transition-in,0);pointer-events:none}.transition-title h2{font-size:var(--h2-size);line-height:var(--h2-lh);font-weight:400;letter-spacing:var(--h2-ls);margin:0}.transition-title .eyebrow{margin-bottom:20px}
.etl-title{opacity:var(--etl-in,0)}.etl-title h2{font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);margin-bottom:12px}.etl-title p:last-child{font-size:16px}
.evidence-heading h2{font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls)}
.pipeline{gap:12px;visibility:visible;opacity:1;pointer-events:none;align-items:start}
.pipeline li{border:0;min-width:0}.component-window{height:clamp(90px,15svh,145px);width:100%;pointer-events:none}
.pipeline button{opacity:var(--etl-in,0);visibility:hidden;border-top:1px solid #9dc9cb60;border-right:0;background:#080b0cec;min-height:132px;padding:17px 13px;transition:background .16s,border-color .16s}
.pipeline button span{font-size:12px;letter-spacing:.02em;white-space:nowrap}.pipeline strong{font-size:20px;margin:9px 0}.pipeline small{font-size:14px;color:#b5c0c6;line-height:1.45}
.is-resolved .pipeline button{visibility:visible;pointer-events:auto}.pipeline button:hover,.pipeline button[aria-pressed=true],.craft-tools button:hover,.craft-tools button[aria-pressed=true],footer button[aria-pressed=true]{background:#122023ed;border-color:#b9e3df}
.stage-detail{display:grid;grid-template-columns:180px 1fr;gap:35px;border-top:1px solid #ffffff20;background:var(--panel);padding:10px 20px;border-radius:4px;opacity:var(--etl-in,0);pointer-events:none;max-width:1050px}
.stage-detail>span{font:14px/1.7 Mono;color:var(--cyan)}.stage-detail p{font-size:16px;line-height:1.5;margin:0;color:#c2cacf;max-width:740px}
.is-etl .craft-tools{bottom:4%;right:5%}.is-etl .craft-tools>span{display:none}.is-etl .scene-foot{bottom:5%;right:auto}.is-etl .scroll-cue,.is-etl .scene-foot>span:last-child{display:none}
#reticle{left:0;top:0;width:0;height:0;border:0;opacity:1;transform:none;transition:none}#reticle:after{content:'';position:absolute;width:24px;height:24px;left:-12px;top:-12px;border:1px solid #b9d8d842;border-radius:50%;transition:width .15s,height .15s,left .15s,top .15s,border-color .15s}.inspect-hover #reticle:after{width:38px;height:38px;left:-19px;top:-19px;border-color:#e5eeefaa}
article{background:#080c10db}.supporting p{font-size:16px}footer{font-size:12px}
footer button{min-height:44px;flex-shrink:0;background:#080b0c;border:1px solid #ffffff35;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}footer button:hover{border-color:var(--cyan)}
@media(min-width:761px) and (max-height:800px){.identity{top:20%}h1{font-size:clamp(42px,5vw,68px)}.intro{font-size:16px}.scene-caption{display:none}.etl-stack{top:12%;gap:12px}.component-window{height:90px}.pipeline button{min-height:110px;padding:12px 10px}.pipeline strong{font-size:18px}.stage-detail{padding-top:4px;padding-bottom:4px}.stage-detail p{font-size:14px;line-height:1.45}.etl-title h2{font-size:38px}}
@media(max-width:1050px) and (min-width:761px){.pipeline{gap:6px}.pipeline button{padding:12px 9px}.pipeline small{font-size:12px}.pipeline button span{font-size:11px}.intro{max-width:330px}.actions a{padding:13px 12px;font-size:14px}.scene-foot>span:last-child{display:none}}
@media(max-width:760px){
 header{height:62px}.wordmark{font-size:14px}.nav-work{font-size:14px}#journey{height:260svh}.scene-ui{min-height:760px}
 .identity{top:12%;width:90%}h1{font-size:clamp(38px,10.1vw,58px);margin-bottom:16px}.eyebrow{font-size:12px;letter-spacing:.04em;margin-bottom:18px}.intro{font-size:16px;line-height:1.6;max-width:340px}.actions{gap:8px}.actions a{font-size:14px;padding:12px;gap:10px;min-height:46px}.social{font-size:13px;margin-top:17px}
 #inspect{left:5%;top:51%;width:90%;height:30%}.craft-tools{bottom:10%;left:5%;right:5%;justify-content:flex-end}.craft-tools>span{display:none}.craft-tools button{font-size:13px;min-height:44px}.scene-foot{font-size:12px;bottom:24px}.scroll-cue{font-size:10px}
 .reading-shade{background:linear-gradient(90deg,#0007,transparent 85%)}
 .transition-title{top:12%;right:5%}.transition-title .eyebrow{font-size:11px}.transition-title h2{font-size:37px}
 .etl-title{position:absolute;top:10%;left:5%;right:5%}.etl-title .eyebrow{font-size:11px}.etl-title h2{font-size:34px}.etl-title p:last-child{display:none}
 .pipeline{position:absolute;top:22%;left:5%;right:5%;bottom:auto;grid-template-columns:1fr;grid-template-rows:none;gap:0}
 .pipeline li{display:grid;grid-template-columns:30% 70%;height:clamp(63px,8.3svh,85px)}.component-window{height:100%;width:100%}
 .pipeline button{padding:6px 12px;min-height:0;height:100%;line-height:1.1;border-top:1px solid #ffffff25}.pipeline button span{display:block;font-size:11px;line-height:1.2}.pipeline strong{font-size:17px;line-height:1.15;margin:2px 0}.pipeline small{display:block;font-size:12px;line-height:1.3}
 .stage-detail{position:absolute;left:5%;right:5%;bottom:9%;gap:4px;grid-template-columns:1fr;padding-top:6px;padding-bottom:6px}.stage-detail>span{font-size:12px}.stage-detail p{font-size:14px;line-height:1.35;pointer-events:auto}.stage-attrib{margin:3px 0 0!important}
 .is-etl .craft-tools{bottom:2%;left:auto}.is-etl .craft-tools button{font-size:12px}.is-etl .scene-foot{display:none}
 article p:not(.eyebrow){font-size:16px}.supporting p{font-size:16px}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){#reticle{display:none}}
/* Short viewports, any width (was min-width:600px, which missed narrower-than-600
   short windows entirely — e.g. 566×366 collided .intro with the fixed craft-tools,
   since .craft-tools/#inspect being position:fixed put their percentages against
   the real (short) viewport while .identity's percentages, being position:absolute,
   were against .scene-ui's own (taller, min-height-floored) box: two different
   coordinate systems for regions meant to share one composition.
   Never force everything into one screen by shrinking text further or hiding
   content — identity+CTAs alone don't fit under ~450px tall even at these already-
   reduced sizes. Instead give identity, the spacecraft hit-region and its controls
   their own non-overlapping bands, and let .scene-ui scroll internally
   (overflow-y:auto) for whatever doesn't fit the actual viewport — genuine
   vertical flow, not the clipped, unreachable overflow the old overflow:hidden
   produced.
   .identity/#inspect/.craft-tools are position:static (normal flow), stacked by
   document order with margin-top for spacing, NOT absolute with tuned pixel top
   offsets — an earlier version of this fix used fixed offsets (270px, 430px) and
   a 1.5x font-size test on .identity's text alone pushed it past #inspect's fixed
   position, confirming that approach breaks under any real content growth
   (longer translations, larger user font settings, zoom). Flow makes the actual
   rendered height of identity irrelevant to whether the elements after it
   overlap — they simply start wherever it ends, however tall that turns out to
   be, with overflow-y:auto scrolling whatever the total exceeds the viewport.
   #inspect keeps a fixed height (150px) since it's an empty hit-region with no
   text of its own, not fragile the way identity's copy is.
   Deliberately no min-height floor on .scene-ui itself: giving the sticky box a
   height taller than the viewport is exactly the original bug (content beyond
   the fold, permanently unreachable, since sticky doesn't scroll its own box
   into further view) — height must stay pinned to the viewport (minus the
   header) so the box never exceeds it, and it's the flow content's own natural
   height exceeding THAT which overflow-y:auto then makes scrollable.
   header is a separate, transparent, always-on-top overlay (no background) that
   .scene-ui's children pass under once the internal scroll moves them — sticky
   top:0 initially let scrolled content render right through the header's own
   58px band with nothing to stop it (confirmed: eyebrow sat under the header at
   rest, and .intro scrolled into it later). top:58px + height:calc(100svh - 58px)
   moves .scene-ui's own box (and therefore its overflow clipping) entirely below
   the header instead, so scrolled content can never reach that band, at any
   scroll position — structural, not just a one-off offset tuned to clear it at
   rest. #inspect and .craft-tools switch from position:fixed to position:static
   here so they share .identity's normal-flow coordinate system and actually
   scroll together with it (cinematic.js has a matching .scene-ui scroll listener
   that re-measures the renderer's hero placement, since that internal scroll
   doesn't bubble to window). Real wheel-scroll tested: scrolling over the hero
   drains .scene-ui's internal overflow first, then chains to the outer page
   scroll automatically (standard scroll-chaining, no extra code needed) —
   forward reaches the ETL pipeline and #evidence, reverse returns to a clean
   hero with no stray interactive elements left behind.
   No font-size/line-height/margin overrides for eyebrow, h1, .intro, .actions,
   .social, or .craft-tools button here (an earlier version had them, shrinking
   e.g. .intro to 14px and .actions a to 12px) — vertical flow plus
   overflow-y:auto means there's no longer a fitting pressure to shrink text
   for, so each of those simply inherits whatever @media(max-width:760px) (or
   the wider desktop rules, for a short-but-wide window) already establishes
   for that width — the same 16px .intro and 14px .actions a a normal mobile
   window gets, just reachable via scroll instead of guaranteed to fit in one
   screen. .identity's own width/max-width/margin stay explicit since the
   established rules size it assuming #inspect sits beside it (this fix stacks
   #inspect below instead, so identity needs its own wide column regardless of
   how established typography happens to wrap within it). */
@media(max-height:600px){
 header{height:58px}#journey{height:320svh}.scene-ui{top:58px;height:calc(100svh - 58px);min-height:0;overflow-y:auto;overflow-x:hidden}
 .identity{position:static;width:90%;max-width:480px;margin:14px 5% 0}.scene-caption,.scene-foot{display:none}
 #inspect{position:static;display:block;width:90%;height:150px;margin:24px 5% 0}.craft-tools{position:static;width:90%;margin:16px 5% 20px;justify-content:flex-end}.craft-tools>span{display:none}
 .transition-title{top:16%;max-width:44%}.transition-title h2{font-size:34px}.etl-stack{display:flex;top:9%;gap:10px}.etl-title{position:static;max-width:65%}.etl-title h2{font-size:32px}.etl-title .eyebrow{margin-bottom:8px}.etl-title p:last-child{display:none}
 .pipeline{position:static;left:auto;right:auto;top:auto;bottom:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px}.pipeline li{display:block;height:auto}.component-window{height:40px}.pipeline button{min-height:64px;height:64px;padding:6px 9px}.pipeline strong{font-size:15px;margin:2px 0}.pipeline span{font-size:9px}.pipeline small{font-size:11px;line-height:1.2}
 .stage-detail{position:static;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:120px 1fr;gap:14px;padding-top:8px;padding-bottom:8px}.stage-detail>span{font-size:11px}.stage-detail p{font-size:12px;line-height:1.4;pointer-events:auto}
 /* .is-etl .craft-tools{top:9%} (the general/desktop rule from proof.css) repositions
    the controls to a top-right cluster near the ETL header — fine when craft-tools
    sits near the top of the composition already, but here it's flowed in after
    .identity/#inspect, so top:9% instead drops it squarely onto .etl-title's own
    heading (confirmed with real wheel scroll: "Reset view"/"Pause motion" visibly
    overlapping "From orbit to insight."). Reset is disabled during this phase
    (canDrag is false once scrolled past the hero) and native `disabled` already
    removes it from the tab order — but Pause stays enabled and focusable, so simply
    leaving the overlap would mean a fully interactive control sitting on top of
    body text. Hiding both via visibility (not just opacity/pointer-events) removes
    them from the tab order too, so nothing focusable is left invisible; Pause
    motion has a working duplicate in the page footer, so no control is lost. */
 .is-etl .craft-tools{visibility:hidden;pointer-events:none}
 /* .failed/.static's own padding:120px top (proof.css) is sized to clear the
    absolute header in THEIR normal, non-short layout, which has no top:58px
    shift of its own — stacked with this query's shift it produced ~192px of
    dead space before any content (confirmed: identity started at y:192, not
    the ~72px every other short-height state gets). Same specificity, later
    in cascade, so this wins only while both conditions hold. */
 .failed .scene-ui,.static .scene-ui{padding:0}
}
.static #journey,.failed #journey{height:auto}.static .scene-ui,.failed .scene-ui{height:auto;min-height:0}.static .pipeline,.failed .pipeline{display:grid;gap:10px}.static .component-window,.failed .component-window,.static .transition-title,.failed .transition-title{display:none}.static .pipeline li,.failed .pipeline li{display:block;height:auto}.static .pipeline button,.failed .pipeline button{opacity:1;visibility:visible;pointer-events:auto}.static .stage-detail,.failed .stage-detail{position:static;opacity:1;margin-top:25px}.static .fallback,.failed .fallback{display:block}
@media(forced-colors:active){.component-window,.transition-title{display:none}.pipeline li{display:block;height:auto}.pipeline button{opacity:1;visibility:visible;pointer-events:auto}.stage-detail{position:static;opacity:1;margin-top:25px}}