/* Only this three-part story holds. The rest of the document scrolls normally. */
.w-abundance-stage { background:var(--site-paper); }
@media (min-width:901px) and (min-height:650px) {
 .w-abundance-pinned { --story-top:calc(var(--site-header-height) + 16px); --story-height:calc(100svh - var(--story-top) - 24px); height:calc(var(--story-height) + 220svh); position:relative; }
 /* #abundance links land with the stage at its sticky top; the html scroll padding already clears the header. */
 .workshop-home .w-abundance-pinned { scroll-margin-top:calc(var(--story-top) - var(--site-header-height)); }
 .w-abundance-pinned .w-abundance-stage { position:sticky; top:var(--story-top); height:var(--story-height); display:grid; grid-template-rows:auto minmax(0,1fr); }
 /* Text sits 40px inside the rails. The intro shares the lab's columns: its 112px gap
  * (1.4 × both 40px insets) starts the paragraph on the same edge as the step text. */
 .w-abundance-pinned .w-intro { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); padding:clamp(20px,3vh,36px) 40px; gap:112px; }
 .w-abundance-pinned .w-intro h2 { font-size:clamp(34px,3.3vw,50px); margin-top:16px; }
 .w-abundance-pinned .w-intro > p { font-size:16px; line-height:24px; }
 .w-abundance-pinned .w-lab, .w-abundance-pinned .w-lab__board { min-height:0; }
 .w-abundance-pinned .w-lab__board svg { flex:1; min-height:0; height:100%; }
 .w-abundance-pinned .w-lab__content { padding:0; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); min-height:0; }
 .w-abundance-pinned .w-art-caption { padding-inline:40px; }
 .w-abundance-pinned .w-lab__step { padding:16px 40px; }
 .w-abundance-pinned .w-lab__step b { font-size:20px; }
 .w-abundance-pinned .w-lab__step :is(p,.w-lab__step-copy) { font-size:14px; line-height:20px; padding-top:8px; }
}
/* The lab's right column starts on the header's first nav divider (left of Industries): its width is the
 * nav cells' width (--nav-cells, measured by js/home-abundance-scroll.js) less 1px, so the board's border
 * lies on the divider. Only while that column fits in half the lab (the script checks; narrower windows keep
 * the 1.4 : 1 split), and never more than half. The intro follows, so its paragraph still starts on
 * the step text's edge, 40px inside the column (50% of the lab is 50% + 40px of the padded intro). */
@media (min-width:901px) {
 [data-nav-cells] .w-lab { grid-template-columns:minmax(0,1fr) min(calc(var(--nav-cells) - 1px),50%); }
 [data-nav-cells] .w-intro { grid-template-columns:minmax(0,1fr) calc(min(calc(var(--nav-cells) - 1px),50% + 40px) - 80px); }
}
.w-lab__step { --step-color:var(--w-orange); position:relative; transition:background-color 350ms; }
/* The ember bar covers the 1px divider or rail at the step's left edge instead of sitting beside it. */
.w-lab__step::before { content:""; position:absolute; z-index:2; left:-1px; top:0; bottom:0; width:4px; background:transparent; transform:scaleY(var(--step-progress,1)); transform-origin:top; transition:background-color 350ms; }
.w-lab__step[aria-pressed="true"] { box-shadow:none; background:color-mix(in srgb,var(--step-color) 8%,var(--site-paper)); }
.w-lab__step[aria-pressed="true"]::before { background:var(--step-color); }
.w-lab__step[aria-pressed="true"] b::before { content:none; }
.w-lab[data-enhanced] .w-lab__block { transition:none; }
.w-lab__imagination { opacity:0; transition:opacity 240ms ease-out; }
.w-lab[data-mode="1"] .w-lab__imagination { opacity:1; transition-delay:180ms; }
.w-lab__intelligence { opacity:0; transition:opacity 180ms; }
.w-lab[data-mode="0"] .w-lab__intelligence { opacity:.75; transition-delay:400ms; }
/* Like the hero, outlines keep their weight at every board size. The controller sizes the
 * label so it never renders below 12px on screen. */
.w-lab__board svg path { vector-effect:non-scaling-stroke; }
.w-lab__outcome { font:500 12px/16px var(--arch-mono,monospace); letter-spacing:.1em; }
/* Connections appear after the boxes have gathered; leaving hides them first. */
.w-lab__route { transition:opacity 180ms; }
.w-lab[data-mode="2"] .w-lab__route { transition:opacity 400ms 550ms; }
/* All visual emphasis uses the same progress as the cube positions. [data-mode]
 * outranks the per-mode rules above so emphasis never pops at a mode change. */
.w-abundance-pinned .w-lab[data-mode] .w-lab__imagination { opacity:var(--beat-1,0); transition:none; }
.w-abundance-pinned .w-lab[data-mode] .w-lab__intelligence { opacity:calc(var(--beat-0,1) * .75); transition:none; }
.w-abundance-pinned .w-lab[data-mode] .w-lab__route { opacity:var(--beat-2,0); transition:none; }
.w-abundance-pinned .w-lab__step { background:color-mix(in srgb,var(--step-color) calc(var(--step-weight,0) * 8%),var(--site-paper)); transition:none; }
.w-abundance-pinned .w-lab__step::before { background:var(--step-color); opacity:var(--step-weight,0); transform:none; transition:none; }
@media(prefers-reduced-motion:reduce) { .w-lab__route, .w-lab__intelligence { transition:none !important; } }
@media(prefers-reduced-motion:reduce) { .w-lab__imagination { transition:none; } }
@media(prefers-reduced-motion:reduce) { .w-lab__step { transition:none; } }
/* Forced colours drop the tinted background, so the selected step keeps its bar in a system colour. */
@media (forced-colors:active) { .w-lab__step[aria-pressed="true"]::before { forced-color-adjust:none; background:Highlight; opacity:1; } }