/* ─── Stages: interactive figures are attractors ───
   Shared by the explorable article pages (roc/, bits/, bootstrap/,
   shrink/). Markup:

       <div class="stage"><div class="stage-pin"><div class="stage-card">
           …figure, legend, controls…
       </div></div></div>

   Each figure sits in a tall track. As it reaches the top of the viewport
   it pins, and its card widens into a full-screen panel; it stays there for
   about a screen of further scrolling before shrinking back and scrolling
   away. When scrolling stops halfway through opening or closing, the panel
   settles back to fully open with the card centred, so leaving takes a
   deliberate scroll. No CSS scroll-snap: on mobile it made the page glide on
   by itself while the finger was still down. Geometry is driven from
   assets/stage.js. */
body { overflow-x: clip; counter-reset: figure; }
.stage {
    position: relative;
    width: 100vw;
    margin: 28px 0 28px calc(50% - 50vw);
    height: 210vh;               /* refined in JS: pin height + dwell */
}
.stage-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.stage-bg {
    position: absolute;
    left: 0; top: 0;
    background: #FDFDFC;
    border: 1px solid var(--rule);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
    pointer-events: none;
}
.stage-card {
    --card-w: min(760px, 100vw);
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--card-w);
    margin-left: calc(var(--card-w) / -2);
    padding: 0 18px;
    box-sizing: border-box;
    transform-origin: 50% 0;
    will-change: transform;
}
.stage-card--wide { --card-w: min(1120px, 100vw); }
.stage-card > :first-child { margin-top: 0; }
@media (min-width: 640px) {
    .stage-card { padding: 0 22px; }
}
.stage-hint {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom));
    text-align: center;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--faint);
    opacity: 0;
    pointer-events: none;
}
.stage-hint .bar {
    display: block;
    width: 72px; height: 2px;
    margin: 6px auto 0;
    background: var(--line);
    border-radius: 1px;
    overflow: hidden;
}
.stage-hint .bar i { display: block; height: 100%; width: 0; background: var(--body); }

/* ─── Figure numbers ───
   Every stage card, and every static figure marked .fig, is numbered in
   page order. */
.stage-card,
.fig { counter-increment: figure; }
.stage-card::before,
.fig::before {
    content: "Figure " counter(figure);
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 10px;
}