Pyramid.

Layout

• Two zones on a warm #faf8f4 page. Left: a fixed argument map, width max(22vw, 240px), vertically centred, with a 1px rgba(28,26,24,.15) hairline on its right edge and a 0.66rem uppercase 0.16em-tracked #6d675f heading "The argument" above it. Right: the main panel, padding 8vh 5vw 7vh 3vw, all slides stacked in one grid area (grid-template-columns: minmax(0,1fr)), each slide align-self:center, max-width 60rem, flex column, gap 2.6vh.
• THE CONTRACT. Every slide declares its place in the argument inline: data-level="0|1|2" and data-branch="1|2|3". Level 0 is the governing thought and is the cover. Level 1 slides are the supporting arguments (one per branch). Level 2 slides are the evidence sitting under the level-1 slide with the same data-branch. data-title stays the 1–3 word tracker label; the action title is the long sentence in the panel. Nothing else drives the map.
• MAP BUILT FROM THE CONTRACT. Script walks the slides once: the level-0 slide becomes the governing node (a <button class="n n-gov"> carrying its data-arg sentence, Spectral 0.8rem/600, max-width 26ch, white fill, 1px rgba(28,26,24,.15) border, 6px radius); each level-1 slide becomes a branch <button data-goto> indented 22px carrying its data-title; each level-2 slide becomes a smaller evidence <button data-goto> indented 46px, 0.72rem/500. All nodes justify-self:start so they hug their label. The tree is a grid with 0.45rem gaps and position:relative; an inline <svg> sits absolutely at inset:0 behind the nodes.
• CONNECTORS. Drawn from measured geometry, never guessed: for each node, take its parent's rect and its own rect relative to the tree, and emit one elbow path "M x y0 V y1 H x1" where x = parent.left + 11 (a spine dropping from inside the parent's left edge), y0 = parent.bottom, y1 = child's vertical centre, x1 = child.left. 1px rgba(28,26,24,.15). Recompute on resize and on every slide change so a path can never miss its node.
• ACTIVE ROUTE. The route is governing → current branch → current node. Its paths are moved to the end of the <svg> (so they are never covered), drawn in #1f5f5b at 1.5px, and animated: set stroke-dasharray and stroke-dashoffset to the path length, force a reflow, then transition stroke-dashoffset to 0 over 600ms cubic-bezier(.22,1,.36,1). The live argument literally draws itself. The current node gets a 2px #1f5f5b border and full #1c1a18 ink (300ms); nodes on the active branch are full ink; every other node stays #6d675f.
• PANEL CONTENT, in order: a level badge, a pill reading "Governing thought", "Supporting argument 2" or "Evidence", 0.66rem uppercase 0.16em tracked, #1f5f5b text on an 8% #1f5f5b tint, 3px radius; the action title in Spectral clamp(1.6rem, 2.8vw, 2.8rem), weight 500, line-height 1.25, max-width 44ch; the object; then the takeaway as "Therefore", the word in 0.68rem uppercase tracked #1f5f5b, the sentence under it in Karla 1rem weight 500, the whole block with a 3px #1f5f5b left border and 1rem left padding. On the cover the governing thought replaces the action title at clamp(2rem, 3.6vw, 3.6rem) with the cover lede beneath and no takeaway.
• SIGNATURE EXHIBIT, ISSUE TREE (driver tree). A 3-column grid (1fr 1fr 1.2fr, column-gap clamp(1.4rem,3vw,3rem), min-height clamp(13rem,38vh,20rem)); each column is its own grid with grid-auto-rows:1fr and align-items:center, so 1 root, 2 drivers and 4 leaves line up on exact halves and quarters. Nodes are white hairline boxes, 6px radius, 0.8rem/600 label plus, on the leaves, a measured value in #1f5f5b 0.74rem/700 tabular ("2 weeks", "1 team, 7 weeks", "0 hand-offs", "6 of 6 engagements"). An absolutely positioned inline <svg> behind the nodes draws 1px elbows measured from the rects: "M x0 y0 H mx V y1 H x1" with mx the midpoint of the gap; the two segments on the strongest driver are #1f5f5b at 1.5px and that driver and leaf get an #1f5f5b border. A figcaption names what is decomposed, says what the accent path means, and carries the source.
• FOOTER. 1px rgba(28,26,24,.15) hairline across the panel, source line left, "Confidential, for discussion only" centre, "03 / 07" right, all 0.7rem #6d675f tabular-nums, nowrap, never overlapping the content.

Signature motion, "the argument draws"

• On deck:change: the map redraws the active route (stroke-dashoffset, 600ms cubic-bezier(.22,1,.36,1)) while the new node's border transitions to accent over 300ms.
• In the panel the outgoing slide fades over 250ms; the incoming slide is force-started at translate(dx, 14px) / opacity 0 (inline, with transition suppressed and a forced reflow), then released to transform:none / opacity:1 over 600ms cubic-bezier(.22,1,.36,1) with a 200ms delay. dx = +24px when you move DOWN a level (argument → evidence), −24px when you move UP or across, computed in your own JS from the previous and current slide's data-level / data-branch, so the direction of travel through the argument is legible. Nothing else moves. body carries data-reveal-delay="600" and data-animate-delay="600" so objects stagger in after the panel lands.

Writing rules (this is what makes the deck professional)

• ACTION TITLES. Every headline is the finding as a full sentence with a verb. Good: "A smaller roster lifted retention to 92% and cut delivery time by 38%". Bad: "Retention". A reader who reads only the titles must get the whole argument.
• Keep data-title as a 1–3 word tracker label on every slide as well; the map and the furniture use it.
• THE SO-WHAT. One "Therefore" line per slide: the implication, not a summary of the slide.
• MECE. Groups of parallel items are 3 or 4, mutually exclusive, collectively exhaustive, and the same kind of thing.
• SOURCE. Every exhibit slide carries "Source: …" with the base (n = …) where relevant, plus the page number and confidentiality mark.
• PYRAMID RULES. Exactly one governing thought (level 0). 3 or 4 supporting arguments (level 1), mutually exclusive. Every argument backed by at least one evidence slide (level 2, same data-branch). Each level summarises the level below it, an argument must be true because its evidence is true, and the governing thought must be true because the arguments are.

Navigation. → ↓ Space PageDown next, ← ↑ PageUp prev, Home/End, 1-9 jump, F fullscreen; touch swipe. No wheel. Every node in the argument map is a real <button data-goto>, the map is the navigation.