. Nothing
here reaches the accessibility tree, adds a text node, or takes
a focus ring, so the measured gates see the page they always saw.
:empty collapses every host when bam.js is absent or bails.
Skin per ground: t-ba (bone) on --ink and --slate-2,
t-ba-ink (slate) on --paper, --paper-2 and --sky.
============================================================ */
.bam{display:block;line-height:0;pointer-events:none;contain:layout paint;
aspect-ratio:400 / 480}
.bam:empty{display:none}
/* EVERY DIMENSION DEFINITE, DERIVED FROM THE HOST'S OWN WIDTH.
height:auto on an inline SVG asks the engine to infer an intrinsic ratio
from the viewBox, and engines disagree about that. Chromium infers it;
WebKit need not, and can resolve the SVG against the available space
instead. That is how a puppet measuring 66px in headless Chromium renders
enormous in Safari. aspect-ratio on the host removes the inference: width
is definite, height follows 400/480, and the SVG simply fills it. */
.bam svg{display:block;width:100%;height:100%}
.bam > div{height:100%}
.bam .ms-body{height:100%}
/* 1 · hero — he drives in from OFF THE SCREEN EDGE, right to left.
The rig's rollIn travels left-to-right in its own coordinate space, so the
host is mirrored to reverse it. BAM is front-facing and near-symmetric, so
the only thing that flips is the eye catchlights, which is invisible.
THE HOST IS ANCHORED TO THE SCREEN EDGE, and that is the whole trick.
BAM is clipped by his own 400-unit viewBox, not by the section, so wherever
the host's right edge sits is where he appears to pop into existence. At
right:3rem he was materialising 43px inside the frame, measured, which is
the teleport. At right:0 the clip boundary IS the screen edge, so he drives
in from genuinely off-screen. He still rests inset, because his own viewBox
carries 94 units of empty margin either side of him. */
.bam--mirror{transform:scaleX(-1)}
.bam--hero{position:absolute;z-index:0;width:clamp(132px,22vw,320px);
right:0;bottom:clamp(0px,2vh,26px)}
/* the architecture block: the visible work is the tip, not the mass */
/* HE STANDS ON THE ICEBERG'S TIP.
Seating is derived, not nudged. The plateau sits at y=62 of a 300-unit
viewBox, so (300-62)/300 = 79.33% up from the iceberg's foot. Dividing by
the viewBox WIDTH rather than its height first gave 74.4% and sat him 12px
under the ice. BAM's own ground line is at
437/480 of his viewBox, so his feet sit 8.96% of his height above his box
bottom; translateY pushes him down by exactly that, which lands his feet on
the plateau at any size. Same constant composite.py uses for plates. */
/* The ice's own width is a variable so the labels can be positioned off it
without a second clamp drifting out of step. The box is wider than the ice
to make room for them; its HEIGHT still comes from the ice, which is the
only in-flow child, so the percentage seats below stay true. */
.berg__ice{--icew:clamp(150px,19vw,238px);--bamw:clamp(44px,5vw,66px);
position:relative;width:calc(var(--icew) + 13.5rem);flex:none}
.berg__ice .ice{display:block;width:var(--icew);height:auto;aspect-ratio:320 / 300}
/* the two labels, seated off the same viewBox percentages BAM is */
.ice__lbl{position:absolute;left:calc(var(--icew) + 1.25rem);width:12rem;margin:0;
font-size:.82rem;font-weight:600;line-height:1.35;letter-spacing:.02em}
.ice__lbl::before{content:"";position:absolute;right:100%;top:.55em;
width:1rem;height:1px;background:currentColor;opacity:.5}
/* mid-tip, not the plateau line: at the plateau the label ran into BAM's
toolbox by 2px. The visible tip spans y 62..108, so its middle is y=85,
i.e. (300-85)/300 = 71.7% up from the foot. */
.ice__lbl--tip{bottom:71.7%;transform:translateY(50%);color:var(--sky-bright)}
.ice__lbl--deep{bottom:33.3%;transform:translateY(50%);color:var(--slate-soft)}
/* Placed HERE, not up with the other narrow rules, because the base .berg__ice
block sits 200 lines BELOW those and would win on order. An override that
cannot reach what it overrides is not an override. Keep them adjacent. */
@media (max-width:900px){
/* the labels stop pointing and start listing */
.berg__ice{width:100%}
.ice__lbl{position:static;transform:none;width:auto;max-width:36ch;
margin-top:var(--s3);padding-left:1.5rem}
.ice__lbl::before{top:.62em;right:auto;left:0}
.ice__lbl--tip{margin-top:var(--s4)}
}
/* SEATED OFF THE ICE, NOT OFF ITS BOX. left:50% and bottom:% both measure the
BOX, and the box grew when the labels were added (and grows again when they
stack on narrow), which floated him 108px right at 1440 and 345px at 900.
Both coordinates are now pure functions of --icew and --bamw:
ice height = icew * 300/320
plateau from ice top= icew * 300/320 * 62/300 = icew * 0.19375
BAM's feet from top = bamw * 480/400 * 437/480 = bamw * 1.09248
so his top is the difference, and his centre is half the ice. */
.bam--berg{position:absolute;
/* Not the viewBox's centre (160) and not quite the plateau's (174).
His tracks span 104..296 of his own 400-unit viewBox, which lands 42.6
ice-units wide against a 56-unit plateau, so centring left 5px of slack
each side and the toolbox, which sits 112 units right of the front
socket, hung over the right edge. 167 puts his LEFT track edge on the
plateau's left edge at 146 and pulls the toolbox back to about 2px. */
left:calc(var(--icew) * 167 / 320);
top:calc(var(--icew) * 0.19375 - var(--bamw) * 1.09248);
transform:translateX(-50%);
width:var(--bamw);margin:0}
/* 7 · chips — the small register */
.bam--sm{width:64px;margin-bottom:var(--s3)}
.chip .bam--sm{width:62px;float:right;margin:0 0 var(--s3) var(--s4);shape-outside:margin-box}
/* 4 · proof — a held bow, now up in the header row beside the client's own
line rather than at the foot of the card. He bows AT the introduction,
which is the moment that wants a bow. */
.bam--proof{width:clamp(70px,7vw,98px);margin:0 clamp(var(--s5),3vw,var(--s7)) 0 0}
/* 5 · the four steps, performed. In flow BELOW the copy, never over it.
The four puppets align with EACH OTHER, not with their own paragraphs: the
step copy runs to different line counts, so a BAM that simply follows its
own text lands at four different heights. The cards already stretch to the
grid row, so pushing each puppet to the bottom of its own card puts all
four on one line. */
.step{display:flex;flex-direction:column}
.bam--step{width:clamp(96px,12vw,150px);margin:var(--s5) 0 0;align-self:flex-start}
/* margin-top:auto, never padding. aspect-ratio and padding resolve differently
in Chromium and WebKit (204px vs 229px tall for the same 150px puppet), so
the breathing room lives on the paragraph above instead. */
.step .bam--step{margin-top:auto}
.step p{padding-bottom:var(--s5)}
/* 8 · book — the rider; see .bam--ride in the closing-scene block */
/* 9 · faq — the question badge, floated beside the questions rather than
left stranded in the gap between the chips and the list */
.bam--faq{float:right;width:clamp(84px,10vw,124px);margin:var(--s4) 0 var(--s4) var(--s6);
shape-outside:margin-box}
/* 10 · 404 */
.bam--404{width:clamp(120px,20vw,190px);margin:0 0 var(--s5)}
/* PROPS AND EFFECTS CARRY THE MASCOT LANE'S OWN COLOURS, DELIBERATELY.
A clipboard is a brown clipboard and sparks are orange sparks: these are
depicted objects, not brand marks, and the page already publishes a
third-party logo (dws-logo.jpg) in its own colours. The palette law in
BRIEF.md governs the page's grounds, type and controls, which is where
contrast and recognition live.
THE ONE EXCEPTION is the pop badge: a mark in a circle is annotation, not
an object, so it reads as brand chrome and is brought onto the palette.
A CSS property beats an SVG presentation attribute, so this needs no fork
of the vendored stage.js. The gate asserts the override is still landing,
because a silent revert here would be invisible. */
.bam [fill="#FFC978"]{fill:var(--sky-bright)}
.bam [fill="#10162B"]{fill:var(--ink)}
@media (max-width:560px){
.bam--hero{width:104px;right:0}
/* The test headline runs the full width at 360, so the corner BAM was
landing on the type. He keeps his corner and the section is given the
height to hold him, rather than him being hidden on the half of the
traffic that is a phone. */
.plot{--plotw:min(92vw,340px)}
.bam--step{width:104px;margin:var(--s4) 0 0}
.bam--proof{position:static;width:96px;margin:var(--s5) 0 0}
.berg__ice{--icew:150px;--bamw:42px}
.bam--berg{width:42px}
.chip .bam--sm{width:48px}
}
/* Reduced motion is handled in bam.js, which renders exactly one settled
frame and never starts a rAF. This rule is the belt to that brace. */
@media (prefers-reduced-motion:reduce){
.bam,.bam *{animation:none!important;transition:none!important}
}