/* scroll-stage 1.0.0 - neutral, tokenised stage CSS. Pairs with scroll-stage.js (window.STG). No brand values: set the --stage-* tokens per site.
   CSP: external file only; no inline styles needed by consumers (z-order, pins and per-frame values are all class- or CSSOM-driven).
   Modes: .story.live = pinned/scrubbed. Everything else (reduced motion, no JS, script failure, print) = the designed static page at the end. */

/* ---------- tokens (override on .story or :root) ---------- */
.story{
  --stage-bg:#15181d;            /* stage / page background in live + static mode */
  --stage-ink:#f3f2ee;           /* text on the dark stage */
  --stage-ink-2:rgba(243,242,238,.74);   /* secondary text on the dark stage */
  --stage-ink-dark:#1b1f24;      /* text on the light (dither) plates: .ink beats */
  --stage-ink-dark-2:#3d444c;
  --stage-accent:#4fb3a5;        /* eyebrow / label colour */
  --stage-accent-dark:#1d6b61;   /* the same accent on the light plates (>= 4.5:1 on --dither-bg) */
  --stage-line:rgba(243,242,238,.16);
  --stage-line-dark:rgba(27,31,36,.28);
  --stage-fig-bg:#1f242b;        /* background of a static figure box */
  --dither-bg:#e3e6e0;           /* the flat colour the dither dissolves into */
  --frame:rgba(27,31,36,.55);    /* inset hairline */
  --frame-2:rgba(27,31,36,.7);   /* inset corner ticks */
  --stage-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --stage-display:var(--stage-font);
  --stage-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --stage-radius:8px;
  --stage-wrap:1140px;
  --stage-gutter:24px;
  --beat:86vh;                   /* runway length per beat (60-100vh) */
  --stage-dots:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='3' cy='3' r='1.7' fill='black'/></svg>");
  position:relative;background:var(--stage-bg);color:var(--stage-ink);padding:0;   /* padding:0 is mandatory: runway = beats x --beat */
}
.story.live{height:calc(var(--beats,6) * var(--beat))}
.stage{position:relative;overflow:hidden;min-height:100svh;background:var(--stage-bg);font-family:var(--stage-font);
  --dcx:50%;--dcy:50%;--dw:0px;--dh:0px;--rw:0px;--rh:0px;--wy:-12%;--we:10%;--ddeg:0deg}   /* engine defaults live HERE, never on a descendant */
.story.live .stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}

/* layer-slot variables are read only by their own element, so they are non-inheriting: a per-frame write restyles one element, not a subtree */
@property --s1{syntax:'*';inherits:false}@property --s2{syntax:'*';inherits:false}@property --s3{syntax:'*';inherits:false}@property --s4{syntax:'*';inherits:false}@property --s5{syntax:'*';inherits:false}@property --s6{syntax:'*';inherits:false}
@property --x1{syntax:'*';inherits:false}@property --x2{syntax:'*';inherits:false}@property --x3{syntax:'*';inherits:false}@property --x4{syntax:'*';inherits:false}@property --x5{syntax:'*';inherits:false}@property --x6{syntax:'*';inherits:false}
@property --y1{syntax:'*';inherits:false}@property --y2{syntax:'*';inherits:false}@property --y3{syntax:'*';inherits:false}@property --y4{syntax:'*';inherits:false}@property --y5{syntax:'*';inherits:false}@property --y6{syntax:'*';inherits:false}
@property --o1{syntax:'*';inherits:false}@property --o2{syntax:'*';inherits:false}@property --o3{syntax:'*';inherits:false}@property --o4{syntax:'*';inherits:false}@property --o5{syntax:'*';inherits:false}@property --o6{syntax:'*';inherits:false}
@property --b1{syntax:'*';inherits:false}@property --b2{syntax:'*';inherits:false}@property --b3{syntax:'*';inherits:false}@property --b4{syntax:'*';inherits:false}@property --b5{syntax:'*';inherits:false}@property --b6{syntax:'*';inherits:false}

/* ---------- plates: slot N (.lN) reads --sN scale, --oN opacity, --xN/--yN translate, --bN blur, --oxN/--oyN origin ---------- */
.plate{position:absolute;inset:0;contain:layout paint;backface-visibility:hidden}
.plate.on{will-change:transform,opacity}
.plate>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.story.live .plate:not(.on),.story.live .dither:not(.on){visibility:hidden}   /* hidden from paint AND the accessibility tree while not the live layer */
.l1{z-index:2}.l2{z-index:4}.l3{z-index:6}.l4{z-index:8}.l5{z-index:10}.l6{z-index:12}   /* even: a dither sits on the odd step above its plate (.after-lN) */
.l1{transform-origin:var(--ox1,50%) var(--oy1,50%);transform:translate3d(var(--x1,0px),var(--y1,0px),0) scale(var(--s1,1));opacity:var(--o1,1)}
.l2{transform-origin:var(--ox2,50%) var(--oy2,50%);transform:translate3d(var(--x2,0px),var(--y2,0px),0) scale(var(--s2,1));opacity:var(--o2,1)}
.l3{transform-origin:var(--ox3,50%) var(--oy3,50%);transform:translate3d(var(--x3,0px),var(--y3,0px),0) scale(var(--s3,1));opacity:var(--o3,1)}
.l4{transform-origin:var(--ox4,50%) var(--oy4,50%);transform:translate3d(var(--x4,0px),var(--y4,0px),0) scale(var(--s4,1));opacity:var(--o4,1)}
.l5{transform-origin:var(--ox5,50%) var(--oy5,50%);transform:translate3d(var(--x5,0px),var(--y5,0px),0) scale(var(--s5,1));opacity:var(--o5,1)}
.l6{transform-origin:var(--ox6,50%) var(--oy6,50%);transform:translate3d(var(--x6,0px),var(--y6,0px),0) scale(var(--s6,1));opacity:var(--o6,1)}
@media(min-width:700px){   /* blur only on .fx plates, only on wide screens */
  .l1.fx{filter:blur(var(--b1,0px))}.l2.fx{filter:blur(var(--b2,0px))}.l3.fx{filter:blur(var(--b3,0px))}
  .l4.fx{filter:blur(var(--b4,0px))}.l5.fx{filter:blur(var(--b5,0px))}.l6.fx{filter:blur(var(--b6,0px))}
}
.plate.vig::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 90% at 50% 50%,transparent 46%,rgba(0,0,0,.6) 100%)}
.plate.hero{display:flex;align-items:center}
/* any element that should fade with a layer's opacity: data-o="2" (the engine writes --o2 on it too) */
[data-o~="1"]{opacity:var(--o1,1)}[data-o~="2"]{opacity:var(--o2,1)}[data-o~="3"]{opacity:var(--o3,1)}[data-o~="4"]{opacity:var(--o4,1)}[data-o~="5"]{opacity:var(--o5,1)}[data-o~="6"]{opacity:var(--o6,1)}
.hint{position:absolute;left:50%;bottom:30px;z-index:12;transform:translateX(-50%);font:600 .6rem/1 var(--stage-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--stage-ink-2);pointer-events:none}

/* ---------- keyboard order: controls leave the tab order while invisible ---------- */
.story.live .beat:not(.ready) a,.story.live .beat:not(.ready) button{visibility:hidden}
.story.live .plate.away a,.story.live .plate.away button,.story.live .plate.away input,.story.live .plate.away select,.story.live .plate.away textarea{visibility:hidden}

/* ---------- copy beats: bN reads its own --rN (0..1) via --rv. Never alias a reveal to a site radius token such as --r ---------- */
.copy{position:absolute;inset:0;z-index:20;pointer-events:none}
.beat{position:absolute;opacity:var(--rv,0);transform:translate3d(var(--bx,0px),calc((1 - var(--rv,0)) * 14px),0);pointer-events:none}
.beat.ready{pointer-events:auto}
.beat.slide{--bx:calc((1 - var(--rv,0)) * 4vw)}
.b1{--rv:var(--r1)}.b2{--rv:var(--r2)}.b3{--rv:var(--r3)}.b4{--rv:var(--r4)}.b5{--rv:var(--r5)}.b6{--rv:var(--r6)}.b7{--rv:var(--r7)}.b8{--rv:var(--r8)}.b9{--rv:var(--r9)}
.beat .stage-n{font:700 .74rem/1.2 var(--stage-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--stage-accent);margin:0 0 14px;font-variant-numeric:tabular-nums}
.beat h2,.beat h3{font-family:var(--stage-display);margin:0 0 14px;color:var(--stage-ink);text-wrap:balance;
  text-shadow:0 calc((1 - var(--rv,0)) * 7px) 0 color-mix(in srgb,currentColor calc((1 - var(--rv,0)) * 40%),transparent)}   /* the ghost rise */
.beat h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.03em;max-width:12em}
.beat h3{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.04;letter-spacing:-.025em}
.beat p{margin:0;color:var(--stage-ink-2);font-size:1.02rem;line-height:1.55;max-width:32em}
.beat .stage-cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
/* placements */
.beat.at-l{left:max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2));top:50%;translate:0 -50%;width:min(29em,88vw)}
.beat.at-bl{left:max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2));bottom:11vh;width:min(29em,88vw)}
.beat.at-c{left:50%;top:50%;translate:-50% -50%;width:min(32em,88vw);text-align:center}
.beat.at-c p{margin-inline:auto}
.beat.at-r{left:58%;top:40%;width:min(23em,34vw);scale:calc(.94 + var(--rv,0) * .06);transform-origin:0 0}
.beat.at-inset{left:54vw;top:50%;translate:0 -50%;width:min(42vw,560px)}
.beat.at-inset p{margin-top:18px}
.beat.ruled::before{content:"";position:absolute;left:-30px;top:-34px;width:1px;height:calc(var(--rv,0) * (100% + 68px));background:currentColor;opacity:.4}
/* .ink: dark type for beats that sit on a light (dither / cream) plate */
.beat.ink{color:var(--stage-ink-dark)}
.beat.ink .stage-n{color:var(--stage-accent-dark)}
.beat.ink h2,.beat.ink h3{color:var(--stage-ink-dark)}
.beat.ink p{color:var(--stage-ink-dark-2)}

/* ---------- overlay (optional): hairline grid, ruler, crosshair, figure tag, registration frame ---------- */
.draft{position:absolute;inset:0;z-index:22;pointer-events:none;color:var(--stage-ink);opacity:.22;transition:color .5s;
  background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:100% 25%,25% 100%;background-position:0 -1px,-1px 0}
.draft::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 2.5%)}
.draft::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;translate:-50% -50%;
  background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.draft-tag{position:absolute;left:max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2));top:20px;z-index:22;pointer-events:none;display:flex;gap:10px;align-items:center;
  font:600 .6rem/1 var(--stage-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--stage-ink-2);transition:color .5s,opacity .3s}
.draft-tag::before{content:"";width:28px;height:1px;background:currentColor}
.draft-tag.swap{opacity:0}
.marks{position:absolute;inset:0;pointer-events:none;z-index:22;color:var(--stage-ink-2);transition:color .5s}
.marks::before{content:"";position:absolute;top:var(--mt,56px);bottom:24px;left:max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2));right:max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2));border:1px solid currentColor;opacity:.16}
.stage.lit .draft{color:var(--stage-ink-dark)}
.stage.lit .draft-tag,.stage.lit .marks{color:var(--stage-ink-dark-2)}
/* chapter rail (optional, [data-stg-rail]): fixed text at the left edge on wide screens */
[data-stg-rail]{position:fixed;left:14px;top:50%;z-index:30;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:600 .6rem/1 var(--stage-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--stage-ink-2);transition:opacity .3s;pointer-events:none}
[data-stg-rail].swap{opacity:0}
[data-stg-rail].dark{color:var(--stage-ink-dark-2)}
@media(max-width:1100px){[data-stg-rail]{display:none}}

/* ---------- dither dissolve: a flat colour (--dither-bg) arrives through a halftone rim. Two masked layers, no canvas.
   .sq   a square grows from (--dcx,--dcy) to --dw/--dh, rim --rw/--rh.      .wipe  a noisy edge --wy -> 100% along --ddeg (0deg = up, 270deg = from the right).
   Per-element pins (--ddeg, --we, --dcx) go in the JSON `pin` list, never as defaults on the .dither. Markup: <div class="dither sq after-l4 on"><i class="d-rim"></i><i class="d-core"></i></div> ---------- */
.dither{position:absolute;inset:0;z-index:9;pointer-events:none}
.dither.after-l1{z-index:3}.dither.after-l2{z-index:5}.dither.after-l3{z-index:7}.dither.after-l4{z-index:9}.dither.after-l5{z-index:11}
.dither i{position:absolute;inset:0;background:var(--dither-bg);display:block}
.dither.sq .d-core{
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) + var(--dw)),transparent calc(var(--dcx) + var(--dw))),
                     linear-gradient(180deg,transparent calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) + var(--dh)),transparent calc(var(--dcy) + var(--dh)));
  -webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(90deg,transparent calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) + var(--dw)),transparent calc(var(--dcx) + var(--dw))),
             linear-gradient(180deg,transparent calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) + var(--dh)),transparent calc(var(--dcy) + var(--dh)));
  mask-composite:intersect,intersect}
.dither.sq .d-rim{
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--dcx) - var(--dw) - var(--rw)),#000 calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) + var(--dw)),transparent calc(var(--dcx) + var(--dw) + var(--rw))),
                     linear-gradient(180deg,transparent calc(var(--dcy) - var(--dh) - var(--rh)),#000 calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) + var(--dh)),transparent calc(var(--dcy) + var(--dh) + var(--rh))),
                     var(--stage-dots);
  -webkit-mask-size:auto,auto,6px 6px;-webkit-mask-composite:source-in,source-in,source-in;
  mask-image:linear-gradient(90deg,transparent calc(var(--dcx) - var(--dw) - var(--rw)),#000 calc(var(--dcx) - var(--dw)),#000 calc(var(--dcx) + var(--dw)),transparent calc(var(--dcx) + var(--dw) + var(--rw))),
             linear-gradient(180deg,transparent calc(var(--dcy) - var(--dh) - var(--rh)),#000 calc(var(--dcy) - var(--dh)),#000 calc(var(--dcy) + var(--dh)),transparent calc(var(--dcy) + var(--dh) + var(--rh))),
             var(--stage-dots);
  mask-size:auto,auto,6px 6px;mask-composite:intersect,intersect,intersect}
.dither.wipe .d-core{
  -webkit-mask-image:linear-gradient(var(--ddeg),#000 var(--wy),transparent var(--wy));
  mask-image:linear-gradient(var(--ddeg),#000 var(--wy),transparent var(--wy))}
.dither.wipe .d-rim{
  -webkit-mask-image:linear-gradient(var(--ddeg),transparent var(--wy),#000 var(--wy),#000 calc(var(--wy) + var(--we)),transparent calc(var(--wy) + var(--we))),var(--stage-dots);
  -webkit-mask-size:auto,6px 6px;-webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(var(--ddeg),transparent var(--wy),#000 var(--wy),#000 calc(var(--wy) + var(--we)),transparent calc(var(--wy) + var(--we))),var(--stage-dots);
  mask-size:auto,6px 6px;mask-composite:intersect,intersect}

/* ---------- halftone -> solid: a dot-screened twin (.ht) over the solid art (.solid); dots tighten (--hp) and fade (--hto) as the solid (--hso) resolves ---------- */
.solid{position:absolute;inset:0;opacity:var(--hso,0)}
.solid>svg,.ht>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ht{position:absolute;inset:0;opacity:var(--hto,1);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 40%,transparent 50%);mask-image:radial-gradient(circle,#000 40%,transparent 50%);
  -webkit-mask-size:var(--hp,10px) var(--hp,10px);mask-size:var(--hp,10px) var(--hp,10px)}

/* ---------- inset shrink: .pIn shrinks (--ds, --dx, --dy) while .inset-frame follows by transform only (--fx/--fy/--fs, same curve as --ds) ---------- */
.pIn{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform-origin:0 0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--ds,1))}
.pIn>svg{position:absolute;inset:0;width:100%;height:100%}
.inset-frame{position:absolute;z-index:18;pointer-events:none;opacity:var(--df,0);left:0;top:0;width:100%;height:100%;transform-origin:0 0;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0) scale(var(--fs,1))}
.inset-frame::before{content:"";position:absolute;inset:calc(-10px / var(--fs,1));border:calc(1px / var(--fs,1)) solid var(--frame)}
.inset-frame i{position:absolute;width:12px;height:12px;border:1px solid var(--frame-2);transform:scale(calc(1 / var(--fs,1)))}
.inset-frame .tl{left:-16px;top:-16px;border-right:0;border-bottom:0;transform-origin:100% 100%}
.inset-frame .tr{right:-16px;top:-16px;border-left:0;border-bottom:0;transform-origin:0 100%}
.inset-frame .bl{left:-16px;bottom:-16px;border-right:0;border-top:0;transform-origin:100% 0}
.inset-frame .br{right:-16px;bottom:-16px;border-left:0;border-top:0;transform-origin:0 0}
/* breath scene: a drawn line, --cur (0..1) on a pathLength="1" path */
.curve{stroke-dasharray:1;stroke-dashoffset:calc((1 - var(--cur,0)) * 1px)}
.cfill{opacity:var(--cur,0)}

/* ---------- mobile (<700px): beats re-anchor to the bottom; the inset keeps a 62vh band ---------- */
@media(max-width:699px){
  .beat.at-l,.beat.at-r,.beat.at-c,.beat.at-inset,.beat.at-bl{left:var(--stage-gutter);right:var(--stage-gutter);top:auto;bottom:10svh;width:auto;translate:none;scale:none;text-align:left}
  .beat.at-c p{margin-inline:0}
  .pIn,.inset-frame{height:62vh}
  .beat.ruled::before{display:none}
}

/* ==========================================================================================================================
   STATIC LAYOUT - reduced motion / no JS / script failure / print. A designed page, not a stripped stage:
   the hero with its buttons, every art plate as a framed + captioned figure (data-fig), then one headline + paragraph per beat in a
   two-column rhythm, the final beat's CTAs last. Nothing is hidden. The engine never adds .live in these cases.
   ========================================================================================================================== */
.story:not(.live) .stage{min-height:0;display:flex;flex-wrap:wrap;gap:20px;padding:0 max(var(--stage-gutter),calc(50% - var(--stage-wrap) / 2 + var(--stage-gutter))) 84px;--cur:1}
.story:not(.live) .plate.bg{position:absolute;inset:0 0 auto 0;height:100svh;transform:none;opacity:1;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.story:not(.live) .plate.hero{position:relative;inset:auto;flex:0 0 100%;min-height:0;padding:var(--stage-hero-pad,72px 0 48px);transform:none;opacity:1;filter:none;visibility:visible;z-index:2}
.story:not(.live) .plate:not(.bg):not(.hero){position:relative;inset:auto;z-index:2;flex:1 1 calc(50% - 10px);min-width:min(100%,300px);aspect-ratio:16/10;max-height:min(56svh,520px);
  border-radius:var(--stage-radius);overflow:hidden;border:1px solid var(--stage-line);background:var(--stage-fig-bg);contain:paint;transform:none;opacity:1;filter:none;visibility:visible}
.story:not(.live) .plate[data-fig]::after{content:attr(data-fig);position:absolute;left:14px;bottom:12px;z-index:2;font:600 .6rem/1 var(--stage-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--stage-ink);background:rgba(0,0,0,.72);padding:6px 10px;border-radius:6px}
.story:not(.live) .plate .halo,.story:not(.live) .plate .ht{display:none}
.story:not(.live) .plate .solid{opacity:1}
.story:not(.live) .plate .pIn{transform:none;height:100%}
.story:not(.live) .dither,.story:not(.live) .inset-frame,.story:not(.live) .draft,.story:not(.live) .draft-tag,.story:not(.live) .hint,.story:not(.live) .marks{display:none}
.story:not(.live) [data-o]{opacity:1}
.story:not(.live) .copy{position:relative;inset:auto;flex:0 0 100%;z-index:4;pointer-events:auto;margin-top:16px}
.story:not(.live) .beat{position:relative;inset:auto;width:auto;max-width:none;translate:none;scale:none;transform:none;opacity:1;pointer-events:auto;text-align:left;color:var(--stage-ink);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px 44px;align-items:start;padding:44px 0;border-top:1px solid var(--stage-line)}
.story:not(.live) .beat .stage-n,.story:not(.live) .beat .stage-cta{grid-column:1/-1}
.story:not(.live) .beat h2,.story:not(.live) .beat h3{grid-column:1;margin:0;max-width:none;color:var(--stage-ink);text-shadow:none}
.story:not(.live) .beat p{grid-column:2;max-width:none;margin:0;color:var(--stage-ink-2)}
.story:not(.live) .beat .stage-cta{margin-top:18px}
.story:not(.live) .beat .stage-n{color:var(--stage-accent)}
/* .ink beats keep their dark-on-light context in the static page too: a light panel, so a site's ink-context buttons/links need no override */
.story:not(.live) .beat.ink{background:var(--dither-bg);color:var(--stage-ink-dark);border:0;border-radius:var(--stage-radius);padding:40px 28px;margin-top:14px}
.story:not(.live) .beat.ink .stage-n{color:var(--stage-accent-dark)}
.story:not(.live) .beat.ink h2,.story:not(.live) .beat.ink h3{color:var(--stage-ink-dark)}
.story:not(.live) .beat.ink p{color:var(--stage-ink-dark-2)}
.story:not(.live) .beat.ruled::before{display:none}
@media(max-width:760px){
  .story:not(.live) .stage{gap:14px}
  .story:not(.live) .plate.hero{padding:var(--stage-hero-pad-m,56px 0 40px)}
  .story:not(.live) .beat{grid-template-columns:1fr;padding:34px 0}
  .story:not(.live) .beat h2,.story:not(.live) .beat h3,.story:not(.live) .beat p{grid-column:1}
}

/* ---------- reduced motion: never pinned (the engine does not add .live); belt and braces for any consumer animation ---------- */
@media(prefers-reduced-motion:reduce){
  .story *,.story *::before,.story *::after{animation:none!important;transition:none!important}
}

/* ---------- print: the static shape on white ---------- */
@media print{
  @page{margin:14mm}
  .story,.story.live,.stage,.story.live .stage{position:static;height:auto;min-height:0;background:#fff;color:#000;--cur:1}
  .stage{display:flex;flex-wrap:wrap;gap:16px;padding:0 0 24px;overflow:visible}
  .draft,.draft-tag,.marks,.dither,.inset-frame,.hint,[data-stg-rail],.plate.bg,.plate .ht,.plate .halo{display:none!important}
  .plate.hero{position:relative;inset:auto;flex:0 0 100%;display:block;padding:20px 0 12px;min-height:0;visibility:visible!important;transform:none!important;opacity:1!important;filter:none!important;color:#000}
  .plate:not(.bg):not(.hero){position:relative;inset:auto;flex:1 1 calc(50% - 8px);min-width:min(100%,300px);aspect-ratio:16/10;max-height:380px;border-radius:var(--stage-radius);overflow:hidden;border:1px solid #999;
    visibility:visible!important;transform:none!important;opacity:1!important;filter:none!important;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .plate[data-fig]::after{content:attr(data-fig);position:absolute;left:12px;bottom:10px;z-index:2;font:600 .6rem/1 var(--stage-mono);letter-spacing:.24em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.78);padding:5px 9px;border-radius:6px}
  .plate .solid{opacity:1!important}
  .plate .pIn{transform:none!important;height:100%}
  .plate .curve{stroke-dashoffset:0!important}.plate .cfill{opacity:1!important}   /* the live engine writes --cur inline; print always shows the finished drawing */
  .copy{position:relative;inset:auto;flex:0 0 100%;pointer-events:auto}
  /* .story .copy .beat outranks the placement classes (.beat.at-l / .at-r / .at-inset) */
  .story .copy .beat{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;translate:none;scale:none;transform:none!important;opacity:1!important;padding:18px 0!important;margin-top:0!important;background:none!important;border-radius:0!important;border-top:1px solid #999;text-align:left;break-inside:avoid;color:#000!important;
    display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:8px 32px;align-items:start}
  .story .copy .beat .stage-n,.story .copy .beat .stage-cta{grid-column:1/-1}
  .story .copy .beat h2,.story .copy .beat h3{grid-column:1;margin:0;max-width:none;color:#000;text-shadow:none!important}
  .story .copy .beat p{grid-column:2;max-width:none;margin:0;color:#222}
  .beat .stage-n,.beat.ink .stage-n{color:#222}
  .beat.ruled::before{display:none}
  .story.live .beat:not(.ready) a,.story.live .beat:not(.ready) button,.story.live .plate.away a,.story.live .plate.away button,.story.live .plate.away input{visibility:visible}
}