@humanforest/slidev-theme 0.1.0

package/layouts/cover.vue

@@ -0,0 +1,1514 @@
+<script setup>
+/*
+  The opener. Light ground, one Mohr shout at the top of the ramp, the full lockup signing it —
+  on a slide the running chrome is not already signing. See `signs` below.
+
+  `eyebrow` and `meta` are the editorial frame around the title: the kicker that says what KIND
+  of thing this is, and the quiet line that says who and when. Both optional, both props rather
+  than markup so the frontmatter reads as a title block.
+*/
+import { Comment, Fragment, Text, computed, inject, ref, useSlots } from 'vue';
+import { useNotchCuts } from '../useNotchCuts.js';
+import { injectionCurrentPage, injectionFrontmatter } from '@slidev/client/constants.ts';
+import { chromeShows, coBrand, BEAT_GROUND, BEAT_GROUNDS, COVER_PANEL_SHAPED, COVER_PHOTO_GROUND } from '../notch.js';
+import deckTokens from '@humanforest/tokens/deck/deck.json';
+import { MARK_SIZE, MARK_CORNER, MARK_RING } from '@humanforest/tokens/logo';
+import { assetUrl } from '../assetUrl.js';
+
+const props = defineProps({
+  /** The kicker over the title — "Q3 review", "Design system", "Board pack". */
+  eyebrow: { type: String, default: '' },
+  /** The quiet line under it — presenter, team, date. */
+  meta: { type: String, default: '' },
+  /**
+   * A single pill under the title, for the line that is a CLAIM rather than a subtitle — a
+   * positioning line, a strapline, the thing a cover says about the product. Empty by default and
+   * absent when empty: a cover that does not make a claim draws no pill.
+   *
+   * ★ IT IS A `BadgeStrip` OF ONE, not a pill this layout draws for itself. The deck already has a
+   * badge — its ground comes from the named-pair table, its label is the overline, its cap and
+   * ellipsis are the ones BadgeStrip documents at length — and a second implementation here would
+   * be a pill that drifts from every other pill in the deck. One string rather than the strip's
+   * array because a cover makes one claim; a row of them is a content slide.
+   */
+  badge: { type: String, default: '' },
+  /** Horizontal position of the title block: ragged left (default), or centred on the slide. */
+  align: { type: String, default: 'start', validator: (a) => ['start', 'center'].includes(a) },
+  /**
+   * Draws the opener on the DARK register — the deck's dark ground with light ink — the same
+   * `deck-dark` class `default`, `split` and `stack` take. Composes with `background`, pinning a
+   * named pair's dark half exactly as it does on a panel.
+   *
+   * ★ THREE STATES, NOT TWO. Unset is not `false`: it means the author has said nothing about the
+   * ground, which is what lets the layout supply its own — see BEAT_GROUND. `false` is a
+   * decision (light, whatever the variant would have chosen) and pins it.
+   */
+  dark: { type: Boolean, default: null },
+  /**
+   * Which ground the opener sits on: `auto` — the default — is the brand's own, the vivid pair's
+   * dark half, whatever the variant; `paper` puts it on the deck's page ground instead. `dark`
+   * composes with both.
+   *
+   * ★★ TWO VALUES, NOT SIX, AND THAT IS THE POINT OF A COVER. The four named pairs — warm, accent,
+   * vivid, neutral — are for PANELS: a plane on a page, one of a set, read against the slide around
+   * it. A cover has no slide around it. It is the one place a deck states its identity, and an
+   * identity that arrives on a different colour each time is not one; the brand opens on its own
+   * green or on the page, and the variant is what chooses between them.
+   *
+   * ⚠ THE PAIRS ARE STILL REACHED, JUST NOT NAMED HERE. `auto` resolves to the vivid pair's dark
+   * half — see BEAT_GROUND — so a cover does land on a named ground; it does not get to pick which
+   * one. `default`, `split`, `stack` and `Card` all still take the full table.
+   *
+   * ★★ THE VARIANTS OF A COVER ARE ITS GROUND AND ITS REGISTER, not a private enum. An opener is
+   * one composition — kicker, rule, shout, credit — and what makes one deck's opener differ from
+   * another's is the colour it opens on. Spelling that as `variant: 'bold' | 'quiet' | …` would put
+   * a second, cover-only vocabulary next to the one every other ground-bearing layout already uses,
+   * and the two would drift the first time a background was added. base.css keys the ink, the
+   * eyebrow, the paragraph tiers and the bullet on the `bg-*` classes GENERICALLY, so a cover
+   * carrying them is correct on every ground without a rule of its own.
+   */
+  background: {
+    type: String,
+    default: 'auto',
+    /* The constant, not a restated pair: notch.js owns this list because the chrome reads it too,
+       and `end.background` validates against the same export. */
+    validator: (b) => BEAT_GROUNDS.includes(b),
+  },
+  /**
+   * WHAT SHAPE the opener is, as opposed to what colour. Six compositions, and every one of them
+   * takes every `background` and both registers — the two props are orthogonal by construction,
+   * which is the whole reason the ground is not baked into the variant names.
+   *
+   * · `plain`  — type alone on the ground. The opener with nothing to look at but the words.
+   * · `inset`  — the title in a panel floating on the ground, air all round it.
+   * · `mark`   — the Forest mark oversized as the composition, the title over it.
+   * · `poster` — a photograph edge to edge, the identity stacked over a scrim at the right.
+   * · `mosaic` — the title on a field, beside a staggered grid of pictures bleeding off the edge.
+   *
+   */
+  variant: {
+    type: String,
+    default: 'plain',
+    validator: (v) => ['plain', 'inset', 'poster', 'mosaic'].includes(v),
+  },
+  /**
+   * Whether the opener carries Forest's certifications in its corner. On by default; `false` is how
+   * a deck that is not making those claims says so.
+   *
+   * ★ PLURAL, because the corner is a SET even while it holds one mark. apps/docs calls that page
+   * endorsements, `Endorsement` keeps its own `mark` list open for Verra, and a deck turning the
+   * corner off is turning off whatever it would have held rather than one named certification.
+   *
+   * ★ A BOOLEAN, LIKE `chrome`, AND IT WAS AN ENUM FOR ONE COMMIT. The argument for
+   * `'b-corp' | 'none'` was that `Endorsement.vue` keeps its own `mark` list open for Verra, so
+   * naming the mark now would save a rename later — which is a guess about a mark whose artwork is
+   * still pending approval, and might never belong on a cover at all. This theme's lever for "draw
+   * this piece of furniture or do not" is a boolean everywhere else (`chrome`, `notch`, `bleed`),
+   * and a cover suppressing its certification is that, not a choice between certifications. If one
+   * ever has to be chosen here, widening this is a smaller cost than carrying the guess.
+   *
+   * ⚠ ONLY `mosaic` DRAWS ONE, so this is a lever on that variant rather than on the layout — the
+   * same shape `image`/`alt` (inset) and `images` (mosaic) already have. It suppresses
+   * an endorsement; it does not add one to a composition that has no place for it.
+   */
+  endorsements: { type: Boolean, default: true },
+  /**
+   * The picture, for `inset` and `poster`. Slidev's own key, so `extractImagesUsage()`
+   * preloads it. On `inset` it is also the switch: with one, the panel splits into a pair.
+   */
+  image: { type: String, default: '' },
+  /** Alt text for that picture — and the label the fallback `<Placeholder>` carries when there is none. */
+  alt: { type: String, default: '' },
+  /**
+   * The pictures for `mosaic`, as URLs. A LIST rather than one `image`, because the composition is
+   * the plurality — a single photograph in a mosaic is an inset with extra steps.
+   *
+   * ★ Nine is the drawn ceiling and the CSS says so rather than the caller: the wedge is four tiles,
+   * then three, two and one, and one of those ten cells is the mark. A tenth picture would need a
+   * fifth row, and a five-wide top row reaches back across the wordmark.
+   */
+  images: { type: Array, default: () => [] },
+})
+
+/*
+  ★ THE CLASS IS LOOKED UP, NOT INTERPOLATED. A validator is stripped in production, so an invented
+  `variant` would mint an unstyled `is-<whatever>` class and render an unstyled slide rather than
+  falling back — the same trap bleed.vue's SCRIM_CLASS records for its own enum.
+*/
+/*
+  ★★ `background` PAINTS THE SLIDE ON A FIELD COMPOSITION AND THE PANEL ON A PANEL-SHAPED ONE, which
+  is not two meanings for one prop — it is the one meaning the rest of the theme already uses. On
+  `default` the background takes the whole slide; on `split` and `stack` it takes the panel and the
+  band, and the slide keeps its paper. Which of those a cover is depends on its variant, so the prop
+  follows the composition rather than the layout.
+
+  `inset` is the panel-shaped one: it draws a plane ON the slide, and a plane is what the named
+  pairs are for. The rest are fields, and take the ground.
+
+  ★★ AND `dark` FOLLOWS `background` ONTO THE PANEL, which it did not at first. It landed on the ROOT
+  either way, so an inset on the default ground came out as a dark SLIDE carrying a vivid panel —
+  the cream page gone, on the one variant whose whole composition is a plane floating on that page.
+  Both props describe the same thing, so both land in the same place: on a field the slide, on a
+  panel the panel. The page keeps its paper.
+
+  ★ IT WAS TWO. `band` — the title in a full-width band across the foot of the slide — was drawn and
+  removed: `stack` already makes that composition, with a figure above the band rather than bare
+  ground, and a cover is the one slide in a deck that should not look like a content layout with the
+  content missing. An array of one is kept rather than collapsed to an equality, because the next
+  panel-shaped variant joins it here rather than rewriting the predicate.
+*/
+/* The list lives in notch.js: the chrome has to answer the same question — a panel-shaped cover's
+   PAGE is cream however its panel is painted — and cannot read this file. */
+const PANEL_SHAPED = COVER_PANEL_SHAPED;
+
+/*
+  ── THE VARIANT MAY CARRY A GROUND, AND ONLY WHEN THE AUTHOR NAMED NEITHER ────────────────────
+
+  ★★ THIS IS A DEFAULT, NOT A COUPLING, and the note above is still true: `background` and `dark`
+  remain orthogonal to `variant` — every composition still takes all ten grounds, and a slide that
+  names one gets it. What this table decides is what a slide gets when it names NOTHING, which
+  previously could only be the deck's paper for all seven.
+
+  The mosaic is why. It is the one composition whose ink is a field of photographs, and the brand
+  draws that field on dark green; on cream it reads as a contact sheet pinned to a wall. A variant
+  whose commonest correct ground is not the paper had no way to say so.
+
+  ⚠ THE TRIGGER IS "THE AUTHOR SAID NOTHING", not "the value equals the old default". `background`
+  gained an `auto` member and `dark` a null third state for exactly this: `background: 'paper'` is a
+  DECISION to open on paper and must beat the table, and it could not if unset and `paper` were the
+  same value. That is also why the two are read together — `dark: true` alone on a mosaic means the
+  deck's own dark register, not the vivid pair.
+*/
+/* The table lives in notch.js — the chrome has to answer the same question and cannot read the
+   classes this resolution lands as. See darkRegister() there. */
+/*
+  ★★ THE GROUND IS CLAMPED BEFORE IT IS USED, the same way VARIANT_CLASS clamps the composition, and
+  for the same reason stated one screen up: Vue strips `validator:` from production builds, so a name
+  that is not in the enum arrives here intact and is interpolated into a class.
+
+  MEASURED on this deck with `background: 'whatever'` written into slide 170's frontmatter by hand —
+  the root came back `is-mosaic bg-whatever deck-own-ground`. Two failures, and the second is the
+  one that hides: `bg-whatever` matches no rule so the slide paints the deck's paper and LOOKS like
+  `paper`, while `deck-own-ground` rides along and switches off the subtitle's muted tier and the
+  credit's tier, which are both scoped off it. A misspelt ground silently flattens the ink hierarchy
+  of a slide that otherwise looks correct.
+
+  It falls back to `auto` — the prop's own default — rather than to `paper`, so a mistyped ground
+  gives the composition the ground it would have chosen for itself instead of a bare page. Same
+  choice VARIANT_CLASS makes in falling back to `is-plain`.
+*/
+// The enum, shared with notch.js so a misspelt ground clamps the same way in both places.
+const stated = computed(() => (BEAT_GROUNDS.includes(props.background) ? props.background : 'auto'));
+
+const ground = computed(() => {
+  /*
+    ★★ ONE VARIANT DOES NOT TAKE A GROUND AT ALL. A poster's ground is the PHOTOGRAPH, edge to edge,
+    with a black scrim over it — so `background` has nothing to paint and `dark` has nothing to
+    invert. Drawn once per named ground it gave four slides that were pixel-identical apart from
+    their captions, which is how this was caught. Light ink on a dark picture, fixed; notch.js's
+    darkRegister() returns the same answer for the same slide so the confidentiality marking does
+    not come back dark on a dark photograph.
+  */
+  if (COVER_PHOTO_GROUND.includes(props.variant)) return { background: 'paper', dark: true };
+  const unstated = stated.value === 'auto' && props.dark === null;
+  const g = unstated ? BEAT_GROUND : {};
+  return {
+    background: g.background ?? (stated.value === 'auto' ? 'paper' : stated.value),
+    dark: g.dark ?? (props.dark === true),
+  };
+});
+
+/*
+  ★★ WHICH VARIANTS SIGN FROM THE COLUMN RATHER THAN THE CORNER. A corner mark needs something in
+  the frame to sit against — a panel edge, a field of tiles. `plain` has nothing there: it is type
+  alone on the ground, and a lockup pushed to the far corner of an otherwise empty slide reads as a
+  stray. In the column it leads the title block, which is where a lockup goes on a page with nothing
+  else on it.
+
+  `mosaic` is absent because it signs with the wordmark as its title, and `inset` keeps the corner —
+  a panel edge is exactly what a corner mark is for.
+*/
+const COLUMN_SIGNED = ['plain'];
+
+const VARIANT_CLASS = {
+  plain: 'is-plain', inset: 'is-inset', poster: 'is-poster', mosaic: 'is-mosaic',
+};
+
+/*
+  ★★ SINCE 2026-09-06 THE CHROME IS OFF FOR EVERY COVER BY DEFAULT — `CHROMELESS_LAYOUTS` in
+  notch.js — so the collision this predicate was written to resolve can no longer happen on its own.
+  `signs` stays anyway, and is not dead code: `chrome: true` on a slide's own frontmatter is still a
+  supported override, and a cover that takes it must not draw the mark twice. What follows is the
+  measurement that put the predicate here.
+
+  ★ THE CORNER BELONGS TO THE CHROME, so the lockup only signs a slide the chrome is not already
+  signing. Same shape as split.vue's and stack.vue's notch, and the same shared predicate: a layout
+  that puts something in a chrome corner has to ask whether the chrome is there, because the chrome
+  is forbidden from asking which layout it is on (frontmatter.static.test.ts, "names no layout").
+
+  What it fixes, on a cover slide that is not page 1: the lockup sat at right/bottom
+  --deck-space-6 and the page marker at --deck-inset-chrome, and the two boxes overlapped by 14px
+  (measured, apps/deck-layouts slide 3: lockup right edge 932, page-dot left edge 918). It went
+  unseen because a forest-700 pill on cream reads as its own object and the eye forgives a few px
+  of overlap with a dark wordmark; a two-ring halo briefly shipped on the pills and made it
+  obvious, which is how it was found. The halo has since been reverted. The overlap never depended
+  on it — it is as old as the corner.
+
+  ⚠ THE OVERLAP IS THE SMALLER HALF OF IT. When the chrome shows it draws the Forest mark
+  top-right at the SAME 72px this lockup uses (slide-top.vue, tied to this file's `:size` by
+  frontmatter.static.test.ts), so such a slide carried the mark twice — once as the running
+  identity, once as a signature on an opener that, by definition, is not the opening. Moving the
+  lockup to another corner would have kept both marks and only relocated the argument; every corner
+  is a chrome corner (section pill top-left, mark top-right, confidentiality bottom-left, page
+  marker bottom-right).
+
+  NOT `chrome: false`, which is the other way this could have gone. That key hides the running
+  chrome wholesale — including the confidentiality watermark, which slide-bottom.vue deliberately
+  exempts from the page-1 gate precisely so a title slide can still carry its marking. Making
+  `chrome: false` the enforced rule for covers would have traded this collision for the loss of
+  that, on every cover in every deck.
+*/
+const panelShaped = computed(() => PANEL_SHAPED.includes(props.variant));
+
+const frontmatter = inject(injectionFrontmatter, {});
+// injectionCurrentPage, not useNav().currentPage — the /print and /overview routes carry no `:no`
+// param and useNav() reports 1 for every slide at once, which would restore the lockup on every
+// page of an exported PDF. slide-top.vue records the measured failure.
+const currentPage = inject(injectionCurrentPage, computed(() => 1));
+const signs = computed(() => !chromeShows(frontmatter, currentPage.value));
+
+/*
+  ── THE INSET PANEL CUTS ITSELF FOR THE LOCKUP ─────────────────────────────────────────────────
+
+  ★★ THE CUT IS `useNotchCuts`, NOT A SECOND IMPLEMENTATION OF IT. That composable measures RUNNING
+  CHROME, and a cover has none by construction — so the first attempt here measured the lockup by
+  hand, and reproduced both of the bugs its own source documents: `getBoundingClientRect()` returns
+  SCREEN pixels on a transform-scaled slide while `clip-path: path()` speaks CSS pixels, and
+  `getPropertyValue('--deck-notch-gap')` returns the literal text `calc(24px * 1)`, whose
+  `parseFloat` is NaN. The cut came out at the wrong scale with a zero ring.
+
+  The composable now takes extra occupant selectors instead. One implementation of the shape, two
+  kinds of thing that can sit in it.
+*/
+/*
+  ── THE MOSAIC IS A BRAND COVER, NOT A TITLE COVER ─────────────────────────────────────────────
+
+  ★★ THE WORDMARK IS THE TITLE HERE. Every other variant opens with a typeset shout; this one opens
+  with the identity itself on a field of the product, which is the composition the brand's own
+  covers use. So the display line is the wordmark, the accent rule goes (the wordmark IS the
+  gesture), and the corner lockup goes with it — a slide signed by a 700px wordmark does not also
+  need a 72px one in the corner.
+
+  ⚠ ONE CELL OF THE STACK IS THE MARK, NOT A PHOTOGRAPH, so the identity reads twice — once as the
+  word, once as the glyph. The caller supplies NINE pictures for ten cells; the tenth is the
+  layout's.
+
+  ★ IT TAKES A CELL NOTHING CROPS, AND THE SECOND ROW'S MIDDLE ONE RATHER THAN ITS FIRST. The
+  wedge's top row runs off the top edge and its last column off the right, which leaves the second
+  row's two inner tiles. The middle of the three sits under the body of the wedge instead of on its
+  leading diagonal, so the glyph reads as part of the field rather than as a label pinned to its
+  corner — and it is further from the wordmark, which stops the two identities crowding each other. A cut photograph is the composition; a cut identity
+  is a mistake, which is what an earlier two-column arrangement produced.
+*/
+/*
+  ── A CO-BRANDED COVER PUTS THE PARTNER IN THE GRID ────────────────────────────────────────────
+
+  ★★ `companion:` DREW NOTHING ON A COVER UNTIL NOW. The key is read by notch.js's coBrand() and
+  rendered by slide-top.vue beside the Forest mark in the running chrome — and a cover is in
+  CHROMELESS_LAYOUTS, so a co-branded opener silently had no co-brand on it. The mosaic has the one
+  place on a cover that is already a mark on a card, so that is where the partner goes.
+
+  ⚠ AND ONLY WHILE THE WORDMARK IS DRAWING. On a titled mosaic the mark tile is the ONLY Forest
+  identity on the slide — the wordmark has been replaced by the deck's own title — so swapping it
+  for a partner's would leave a co-branded cover carrying somebody else's mark and none of ours.
+  With the wordmark showing, "forest" is set in type at 813px and the tile is free to be the
+  partner's. Same rule the corner lockup follows through `signs`, pointed the other way: never draw
+  our mark twice, and never draw it zero times.
+
+  ★ `coBrand`, NOT THE RAW FRONTMATTER KEY, so the trimming and the null-when-absent contract are
+  the ones slide-top already relies on. The pixel budget it also returns belongs to the notch and is
+  unused here — a cover has no cut to spend against, and this tile is sized by the grid.
+
+  ★★ AND IT IS AN ORDINARY CELL, NOT A FRAMED ONE. The first cut gave it a pale plate and
+  `object-fit: contain` — reasoning that a partner's file might be dark ink, light ink or full
+  colour, so it needed a safe ground. Drawn, that was a tile inside a tile: the artwork these decks
+  co-brand with is ALREADY a mark on its own square, exactly as ours is, so a second frame around it
+  is the same mistake the Forest mark's own cell made before it. It fills the cell like a
+  photograph, from the same rule.
+
+  ⚠ WHICH MAKES THE ASSET A CONTRACT: `cover` crops, so `companion:` here wants a square-ish mark on
+  its own ground. A wide wordmark would lose its ends. The running chrome contains rather than crops
+  because it sizes the pair to a measured budget; this tile has a fixed square to fill.
+*/
+const companion = computed(() => coBrand(frontmatter, deckTokens.chrome));
+const companionLabel = computed(() => frontmatter?.companionName || 'Companion mark');
+
+/*
+  ★★ A CO-BRANDED SPLIT INSET SIGNS TOP-RIGHT, WHERE THE RUNNING CHROME SIGNS. slide-top.vue puts
+  the mark and its companion in that corner on every slide that carries one; a cover suppresses the
+  chrome, so the pair is drawn here instead — same corner, same order, same shared height, so a
+  co-branded opener and the co-branded slides after it are the same object in the same place.
+
+  The bottom-right lockup gives way to it rather than joining it: a cover that signs twice is a
+  cover that signs once too often, and a pair seated in a notch cut for one mark would either
+  overflow the seat or shrink a partner's artwork to fit — which is not ours to shrink.
+
+  Only on the split inset. Everywhere else the corner is free and the lockup keeps it.
+*/
+const insetPair = computed(() => insetSplit.value && !!companion.value);
+/* The chrome's own mark size, so a cover's pair and the running chrome's are the same object at the
+   same proportions — coBrand computes its notch budget from this number. The GAP is no longer stated
+   here: MarkPair derives it from the size, which is what lets the poster's 120px pair keep the
+   chrome's proportions instead of holding a 72px gap between two larger tiles. */
+const PAIR_MARK_PX = deckTokens.chrome.markPx;
+/*
+  ★ THE POSTER'S OWN TWO SIZES, larger than the chrome's. A corner pair is furniture at 72px; this
+  one is the composition, read from the back of a room over a photograph. The wordmark leads it at
+  697px — the mark is a tile beside a partner's, and the NAME is what a poster says.
+
+  Both are stated rather than derived because the relationship between them is the design: at the
+  chrome's 72 the tiles read as a caption above the wordmark, and at the wordmark's own scale they
+  compete with it.
+*/
+const POSTER_MARK_PX = 160;
+/*
+  ⚠ SIZED TO THE COLUMN, NOT CHOSEN. The wordmark is the widest thing in the stack and the stack is
+  a third of the frame: at 360 it drew 697px across a 576px column and hung over the photograph on
+  both sides. `lockup-vertical` and this both size from the MARK, so the number that fits is the
+  column's width scaled by the wordmark's own aspect — 296 puts it at 573.
+*/
+const POSTER_WORDMARK_PX = 296;
+/* The composed lockup's MARK height. NOT tied to POSTER_MARK_PX: the pair grew and this did not,
+   because `lockup-vertical` sizes a wordmark from its mark too — matching them would have grown the
+   solo form's wordmark past the one the co-branded stack states. */
+const POSTER_LOCKUP_PX = 200;
+
+const MOSAIC_CELLS = 10;
+const MOSAIC_MARK_AT = 5;
+
+/*
+  ★★ THE OTHER EIGHT CELLS ARE THE MARK'S SHAPE WITH A PHOTOGRAPH WHERE THE TREE IS. The mark is a
+  rounded square with a thick ring hugging its edge; a picture beside it at some other radius and no
+  ring reads as a different kind of object, and the grid stops being one set. So the three numbers
+  come off the artwork rather than out of a stylesheet:
+
+    ring   19       / 434.82           = 4.3696%  of the tile, as padding
+    outer  95.0854  / 434.82           = 21.8678% of the tile
+    inner (95.0854 - 19) / (434.82 - 38) = 19.1738%
+
+  ⚠ THE INNER RADIUS IS A PERCENTAGE OF THE INNER BOX, NOT OF THE TILE. A percentage
+  `border-radius` on the picture resolves against the PICTURE's own width, and the picture is the
+  tile less two rings — 91.26% of it. Written as the tile's 17.4981% the corner comes out 4% shallow
+  and the ring looks thicker at the corners than along the edges, which is the exact tell that the
+  two shapes are not concentric.
+
+  ★ THE MARK ITSELF TAKES NONE OF THIS. It draws its own square and its own ring — putting it in a
+  ringed cell gave a tile inside a tile with a halo between them.
+*/
+const RING = `${(MARK_RING / MARK_SIZE) * 100}%`;
+const RADIUS_OUTER = `${(MARK_CORNER / MARK_SIZE) * 100}%`;
+const RADIUS_INNER = `${((MARK_CORNER - MARK_RING) / (MARK_SIZE - 2 * MARK_RING)) * 100}%`;
+const mosaicCells = computed(() => {
+  const pics = props.images.slice(0, MOSAIC_CELLS - 1);
+  return Array.from({ length: MOSAIC_CELLS }, (_, i) =>
+    i === MOSAIC_MARK_AT ? 'mark' : pics[i > MOSAIC_MARK_AT ? i - 1 : i] ?? '');
+});
+
+/*
+  ★★ THE REGISTER ALONE DECIDES THE COLOURWAY, and that is a fact about deck.json rather than a
+  simplification. Every named pair's LIGHT half has dark ink (warm-950, forest-950, neutral-900) and
+  every DARK half has `--neutral-0` — so "is the ink light" and "is this the dark register" are the
+  same question, on all four pairs and on the deck's own paper. A per-background table here would
+  restate that and drift from it.
+
+  The mark is swapped, never tinted: see Endorsement.vue on why there is no colour prop.
+*/
+const endorsementTone = computed(() => (ground.value.dark ? 'reverse' : 'positive'));
+
+/*
+  ── THE MOSAIC'S ONE INK, AND THE ONE GROUND IT CANNOT BE ──────────────────────────────────────
+
+  ★★ THE RINGS ARE --forest-950 EVERYWHERE EXCEPT ON A GROUND THAT IS ITSELF --forest-950. There is
+  exactly one such ground and it is reached two ways: the deck's dark register, whose --deck-bg IS
+  forest-950, and `accent`'s dark half, which is the same colour by construction (deck.json). A
+  pinned ring there is a 1.00:1 edge on its own fill — the tiles lose their shape and the mark loses
+  its outline.
+
+  On that ground the rings go to --neutral-0 — all of them at once, the eight photo rings and the
+  mark's own, because a field where only some reversed would read as two materials.
+
+  ★ THE BADGE FOLLOWS THE SAME SHAPE OF RULE ONE STEP LIGHTER. It is `vivid-dark` — forest-700
+  carrying white, the same green as the mark's own square — everywhere except on a ground that is
+  ITSELF forest-700, where it takes `accent-dark` (forest-950) instead. Measured fill-against-ground
+  on the three grounds this variant actually draws:
+
+      paper (warm-50)         vivid-dark  6.17:1     accent-dark 14.80:1
+      vivid dark (forest-700) vivid-dark  1.00:1  ←  accent-dark  2.40:1
+      deck dark (forest-950)  vivid-dark  2.40:1     accent-dark  1.00:1
+
+  One row disqualifies the pill on its own ground, and it is a different row for each of the two
+  candidates — which is why the badge and the rings need separate conditions rather than one shared
+  "is it dark". `accent-light` (forest-100) was tried on the darkest ground first and is 13.07:1
+  there: a near-white lozenge that outshouts the wordmark above it.
+
+  Named as a half of a published pair either way, so the pill cannot land on a fill/ink combination
+  the palette does not sanction.
+*/
+/*
+  ── A TITLE IN THE BODY TAKES THE WORDMARK'S PLACE ─────────────────────────────────────────────
+
+  ★★ THE SLOT IS THE SWITCH, because a `title` PROP is not available: `title` is one of Slidev's
+  reserved frontmatter keys (packages/slidev-theme/test/props.ts, RESERVED_ON_EVERY_SLIDE) and is
+  stripped before frontmatter reaches a layout — a prop named that would render its default forever.
+  Writing `# Ride the city` in the body is also how every other cover in this theme gets its title,
+  so the mosaic reads the same key the rest of the deck already uses.
+
+  ⚠ AND IT IS CHECKED AT RENDER TIME, NOT IN A COMPUTED. Calling a slot function inside a computed
+  warns ("Slot invoked outside of the render function") and caches a result that a re-rendered slot
+  invalidates. A plain function called from the template runs where slots are meant to be read.
+
+  What counts as content: not comments, not whitespace-only text, and Fragments are walked rather
+  than trusted — markdown gives this slot a Fragment whose children are the real answer, so a
+  shallow `.length` check is true for an EMPTY body and the wordmark would never draw.
+*/
+const slots = useSlots();
+const renderable = (nodes) => nodes.some((n) => {
+  if (n.type === Comment) return false;
+  if (n.type === Text) return String(n.children).trim() !== '';
+  if (n.type === Fragment) return renderable(n.children ?? []);
+  return true;
+});
+const hasHeadline = () => renderable(slots.default?.() ?? []);
+
+const onDarkestGround = computed(
+  () => ground.value.dark && (ground.value.background === 'paper' || ground.value.background === 'accent'),
+);
+const mosaicInk = computed(() => (onDarkestGround.value ? 'var(--neutral-0)' : 'var(--forest-950)'));
+/* The badge's own disqualifying ground is the vivid pair's dark half — forest-700, which is the
+   pill's own fill. Nothing else in the table is that colour. */
+const onVividGround = computed(() => ground.value.dark && ground.value.background === 'vivid');
+const badgeBackground = computed(() => (onVividGround.value ? 'accent-dark' : 'vivid-dark'));
+
+/*
+  ── THE INSET IS ONE PANEL OR TWO, AND `image` IS WHAT DECIDES ─────────────────────────────────
+
+  ★★ NO NEW PROP AND NO NEW VARIANT. An inset opener with a picture beside it is the same
+  composition with something in the other half, not a seventh shape — so it reads the `image` key
+  `bleed` already takes, and an author who has no picture gets the single panel this
+  variant has always drawn. One less enum value to document, and the fallback is the old behaviour
+  rather than an empty box.
+
+  ★ THE PICTURE TAKES THE RIGHT-HAND HALF, which is the side the lockup signs from and the side
+  `bleed` reads from, and the side a reader's eye lands on last. A `flip` would be a second prop
+  earning its keep on one composition.
+*/
+const insetSplit = computed(() => props.variant === 'inset' && !!props.image);
+
+const panelEl = ref(null);
+const mediaEl = ref(null);
+/*
+  ⚠ TWO PANELS MEAN TWO CUTS, ONE EACH, RATHER THAN ONE CUT AIMED AT A CORNER. The first attempt
+  pointed a single `useNotchCuts` at whichever panel owned the bottom-RIGHT, because that is where
+  the lockup signs from. It forgot the other corner: the confidentiality marking sits bottom-LEFT,
+  which is the CONTENT panel in a split — so a co-branded, marked cover had its picture correctly
+  notched and the marking sitting on a square corner beside it.
+
+  `occupantFor` already answers "does this thing touch this box" and returns null when it does not,
+  so an instance per panel needs no per-corner logic: the content panel seats the marking (and the
+  lockup too, when there is no picture to take it), and the picture seats the lockup.
+
+  ★ `enabled` DROPS `signs`. That predicate is about the LOCKUP — whether this cover signs itself —
+  and the marking is drawn from `confidential:` regardless of it. Gating the cut on `signs` meant a
+  cover with `chrome: true` and a marking got no seat for the one thing still in the corner.
+*/
+const { clip: panelClip } = useNotchCuts(panelEl, {
+  enabled: () => props.variant === 'inset',
+  occupants: ['.cover-logo'],
+});
+const { clip: mediaClip } = useNotchCuts(mediaEl, {
+  enabled: () => insetSplit.value,
+  occupants: ['.cover-logo', '.cover-pair'],
+});
+
+</script>
+
+<template>
+  <div
+    class="slidev-layout cover relative h-full overflow-hidden"
+    :class="[
+      VARIANT_CLASS[variant] ?? 'is-plain',
+      insetSplit ? 'has-media' : '',
+      align === 'center' ? 'is-center' : '',
+      ground.background !== 'paper' && !panelShaped ? `bg-${ground.background} deck-own-ground` : '',
+      ground.dark && !panelShaped ? 'deck-dark' : '',
+    ]"
+  >
+    <!--
+      The mosaic. Placeholders when a deck has not supplied pictures, for the same reason the two
+      photographic variants fall back to one: a variant that renders as nothing cannot be told from
+      a variant that does not work.
+    -->
+    <div
+      v-if="variant === 'mosaic'"
+      class="cover-mosaic"
+      aria-hidden="true"
+      :style="{ '--mosaic-ring': RING, '--mosaic-radius': RADIUS_OUTER, '--mosaic-radius-inner': RADIUS_INNER, '--mosaic-ink': mosaicInk }"
+    >
+      <template v-for="(cell, i) of mosaicCells" :key="i">
+        <!-- The partner's mark takes the tile only while the wordmark is carrying the identity. -->
+        <div v-if="cell === 'mark' && companion && !hasHeadline()" class="cover-mosaic-cell">
+          <img :src="assetUrl(companion.src)" :alt="companionLabel">
+        </div>
+        <!-- The mark is a tile of the grid, at the size the grid gives every other tile. -->
+        <Logo v-else-if="cell === 'mark'" variant="mark" :size="MARK_SIZE" class="cover-mosaic-mark" />
+        <div v-else class="cover-mosaic-cell">
+          <img v-if="cell" :src="assetUrl(cell)" alt="">
+          <Placeholder v-else ratio="1:1" label="" />
+        </div>
+      </template>
+    </div>
+
+    <div
+      ref="panelEl"
+      class="cover-content relative z-10"
+      :class="[
+        panelShaped && ground.background !== 'paper' ? `bg-${ground.background} deck-own-ground` : '',
+        panelShaped && ground.dark ? 'deck-dark' : '',
+      ]"
+      :style="panelClip ? { clipPath: panelClip } : undefined"
+    >
+      <!--
+        ★★ THE MOSAIC'S TAIL IS WRAPPED AND THE OTHER VARIANTS' IS NOT, which is a real difference
+        rather than duplication for its own sake. On this variant the WORDMARK is the thing that has
+        to sit on the slide's centre line — it is the title — and a flex column centres the whole
+        block, so the wordmark rode 119px high with the credit and the credential making up the
+        difference below it. Centring one child means the others cannot share its row, so they get a
+        box of their own and the column becomes a three-row grid (see the stylesheet).
+
+        Every other variant centres its block, which is correct for them: their title is typeset,
+        the rule sits above it and the credit below, and the group is the composition.
+      -->
+      <!--
+        ★★ THE BADGE CHANGES SIDES WITH THE DISPLAY LINE, because it changes JOB with it. Under the
+        wordmark it is a strapline — the claim the identity is making — and it reads after the name.
+        Above a title it is a kicker: the date, the series, the kind of thing this deck is, which a
+        reader wants BEFORE the title it qualifies. Same pill, same slot, two positions, and the
+        slide picks between them by whether it wrote a heading.
+      -->
+      <template v-if="variant === 'mosaic'">
+        <!-- Whichever of the two the slide has: its own title, or the identity. Never both. -->
+        <div v-if="hasHeadline()" class="cover-title">
+          <p v-if="eyebrow" class="deck-eyebrow">{{ eyebrow }}</p>
+          <BadgeStrip v-if="badge" :items="[badge]" :background="badgeBackground" class="cover-badge" />
+          <slot />
+        </div>
+        <!--
+          ★ 420 IS THE MARK'S HEIGHT, NOT THE WORDMARK'S WIDTH — `size` sets the scale of every form
+          from the mark, so this draws 813px across in a 978px measure, leaving 165 of it. Two other
+          values were drawn and looked at: 360 (697px) sat too small against the wedge beside it, and
+          480 (929px) matched the specimen's longest title line but crowded the measure to 49px and
+          read as a lockup filling its box rather than a mark placed in one.
+        -->
+        <Logo v-else variant="wordmark" :size="420" class="cover-wordmark" />
+        <div class="cover-body">
+          <template v-if="!hasHeadline()">
+            <p v-if="eyebrow" class="deck-eyebrow">{{ eyebrow }}</p>
+            <BadgeStrip v-if="badge" :items="[badge]" :background="badgeBackground" class="cover-badge" />
+          </template>
+          <p v-if="meta" class="cover-meta">{{ meta }}</p>
+        </div>
+      </template>
+      <!--
+        The poster's identity stack: the mark (with a partner beside it when there is one), the
+        wordmark at the size a cover states it, then whatever the slide wrote as its title. The
+        wordmark leads and the title is subordinate — the opposite of the mosaic's titled form,
+        because this composition IS the identity over a photograph.
+      -->
+      <template v-else-if="variant === 'poster'">
+        <!--
+          ★★ THE COMPOSED LOCKUP WHEN IT IS OURS ALONE. Stacking a mark over a wordmark by hand is
+          re-deriving `lockup-vertical`, which already centres the mark over the wordmark's midline
+          and holds the canonical gap — Logo.vue's own note records that a hand-copied gap made the
+          vertical lockup 1.7x too airy. One element, the brand's own proportions.
+
+          A companion cannot go through it: the lockup is one object and the partner's tile belongs
+          BESIDE the mark, not beside the pair. So that case draws the two tiles and the wordmark
+          under them, which is the same arrangement at the same shared height.
+        -->
+        <Logo v-if="!companion" variant="lockup-vertical" :size="POSTER_LOCKUP_PX" class="cover-lockup" />
+        <template v-else>
+          <MarkPair
+            class="cover-pair"
+            :src="assetUrl(companion.src)"
+            :label="companionLabel"
+            :size="POSTER_MARK_PX"
+          />
+          <Logo variant="wordmark" :size="POSTER_WORDMARK_PX" class="cover-wordmark" />
+        </template>
+        <!-- ★ NO `meta` CREDIT HERE. Every other variant sets its title block against the ground and
+             can carry a line under it; this one is an identity over a photograph, and a credit line
+             below the title is a fourth thing competing in a stack that already has three. -->
+        <slot />
+        <!--
+          ★★ THE CERTIFICATION IS PART OF THE STACK HERE, NOT A CORNER OF THE SLIDE. Every other
+          variant sets its words against the ground and can spare its own bottom-left corner for a
+          credential; this one hangs the whole identity on one axis at the right, and a mark pinned
+          to the slide's corner reads as belonging to the photograph rather than to the stack.
+
+          In the column it needs no arithmetic: `align-items: center` is what centres it, so it
+          follows the stack whatever the wordmark's size — which a percentage from the slide's edge
+          could not do.
+        -->
+        <Endorsement
+          v-if="endorsements"
+          mark="b-corp"
+          :tone="endorsementTone"
+          :size="136"
+          class="cover-endorsement-stacked"
+        />
+      </template>
+      <template v-else>
+        <!-- The signature, for the variants with no frame to sit a corner mark against. See
+             COLUMN_SIGNED. -->
+        <Logo v-if="signs && COLUMN_SIGNED.includes(variant)" variant="lockup" :size="72" class="cover-signature" />
+        <p v-if="eyebrow" class="deck-eyebrow">{{ eyebrow }}</p>
+        <!-- The rule is the brand's opening gesture: a short, heavy accent bar, not a hairline. -->
+        <div class="cover-rule" />
+        <slot />
+        <BadgeStrip v-if="badge" :items="[badge]" class="cover-badge" />
+        <p v-if="meta" class="cover-meta">{{ meta }}</p>
+      </template>
+    </div>
+
+    <!--
+      ★ THE REF IS ON A WRAPPER ELEMENT, NOT ON <Logo>. A ref on a component gives a component
+      instance, and `$el` is only an element when that component has a single root — which is not a
+      thing this layout should have to know about another component. The wrapper is always an
+      element, so the measurement below cannot silently read a comment node and give up.
+    -->
+    <!-- The inset's other half. Same radius and same inset as the panel beside it, so the two read
+         as one object split rather than a panel with a picture stuck on. -->
+    <div
+      v-if="insetSplit"
+      ref="mediaEl"
+      class="cover-inset-media"
+      :style="mediaClip ? { clipPath: mediaClip } : undefined"
+    >
+      <img :src="assetUrl(image)" :alt="alt">
+    </div>
+
+    <!--
+      The certification, in the slide's own bottom-left corner rather than in the title block. A
+      credential is not part of the claim above it: it belongs where a reader looks for one, and on
+      this composition that corner is the only piece of furniture on the slide.
+    -->
+    <Endorsement
+      v-if="variant === 'mosaic' && endorsements"
+      mark="b-corp"
+      :tone="endorsementTone"
+      :size="136"
+      class="cover-endorsement"
+    />
+
+    <!-- Forest first, then the partner, at one shared height — FSubLogo's rule for a pair, and the
+         corner slide-top.vue signs from. The picture's notch seats it. -->
+    <MarkPair
+      v-if="insetPair"
+      class="cover-pair cover-pair-seat"
+      :src="assetUrl(companion.src)"
+      :label="companionLabel"
+      :size="PAIR_MARK_PX"
+    />
+
+    <!-- The poster's photograph, edge to edge, with the scrim drawn over it by `.is-poster::after`. -->
+    <div v-if="variant === 'poster'" class="cover-media">
+      <slot name="media">
+        <img v-if="image" :src="assetUrl(image)" :alt="alt">
+        <Placeholder v-else :label="alt || 'Cover image'" ratio="16:9" />
+      </slot>
+    </div>
+
+    <div
+      v-if="signs && variant !== 'mosaic' && variant !== 'poster' && !COLUMN_SIGNED.includes(variant) && !insetPair"
+      ref="lockupEl"
+      class="cover-logo"
+    >
+      <Logo variant="lockup" :size="72" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ★ THE BEAT MARGIN, now a token. cover/quote/statement/divider/end each spelled
+   `calc(var(--deck-grid) * 3)` by hand — 120px, on 37 of 314 non-bleed slides, while every token in
+   the system said a slide's text sat at 90. It is a real decision (a 128px display cap wants more
+   air than a 48px paragraph does — see scripts/deck.ts above DISPLAY_INSET_MULT), so it is named
+   rather than removed; what it is not is five copies of a literal that no gate could see. */
+.cover {
+  /*
+    ★★ THE INSET IS ON THE CONTENT, NOT ON THE ROOT, and that is what lets a variant bleed. Every
+    composition here except `plain` puts something — a picture, a band, a glyph — against a slide
+    edge, and a padded root would have held all of them off it by 120px. The beat margin still
+    reaches the words, which is what it was for; it just no longer reaches the frame.
+  */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.cover > .cover-content {
+  padding-left: var(--deck-inset-display);
+  padding-right: var(--deck-inset-display);
+}
+/* `align: 'start'` leaves the flex container at its default cross-axis (stretch) so existing
+   decks render pixel-identical — only the 'center' state gets an explicit rule. */
+.cover.is-center {
+  align-items: center;
+  text-align: center;
+}
+/*
+  ★ CENTRING THE COLUMN DOES NOT CENTRE A CAPPED CHILD, and this rule used to say so for exactly
+  one of them. `align-items: center` centres `.cover-content` as a flex ITEM; its own children are
+  BLOCKS, which fill the column — unless a max-width caps them, and then the capped box sits flush
+  LEFT while `text-align: center` centres the words inside that box. The result is a line that
+  looks centred until you measure it.
+
+  MEASURED on the `align: center` cover: h1, the paragraph and the rule all centre on 960, and
+  `.cover-meta` centred on 801 — 159px off, because base.css caps it at the 720px caption measure
+  and the column is 1038 wide. The rule already had `margin: auto` for precisely this reason; meta
+  never did, and neither would the next capped thing added here.
+
+  So it applies to every child rather than being re-granted one at a time. The h1 and the paragraph
+  are capped too (1600 and 1200) — those caps are simply wider than the column, which is why they
+  were never wrong and why nobody noticed the rule was per-element.
+
+  Found by the layout overlay's own element boxes, not by eye.
+*/
+.cover.is-center .cover-content > * {
+  margin-left: auto;
+  margin-right: auto;
+}
+/*
+  The four named grounds, the same pairs `default` takes at full field — fill and ink together, so
+  `dark` on the root re-points both halves.
+*/
+/*
+  ⚠ THE CLASS LANDS ON EITHER ELEMENT, SO THE FILL HAS TO MATCH BOTH. On a field composition the
+  root carries `bg-*`; on a panel-shaped one (`inset`, `band`) the CONTENT does. These rules were
+  scoped to `.cover` alone, so every named-ground inset and band had the class, the ink and the
+  `deck-own-ground` marker — and no fill at all. Reported as `inset` on warm/accent/vivid/neutral
+  rendering with no panel.
+*/
+.cover.bg-warm,    .cover .cover-content.bg-warm    { background: var(--deck-bg-warm);    color: var(--deck-on-bg-warm); }
+.cover.bg-accent,  .cover .cover-content.bg-accent  { background: var(--deck-bg-accent);  color: var(--deck-on-bg-accent); }
+.cover.bg-vivid,   .cover .cover-content.bg-vivid   { background: var(--deck-bg-vivid);   color: var(--deck-on-bg-vivid); }
+.cover.bg-neutral, .cover .cover-content.bg-neutral { background: var(--deck-bg-neutral); color: var(--deck-on-bg-neutral); }
+/*
+  ★★ THE RULE IS THE GROUND'S MARK, NOT THE ACCENT, ON EVERY GROUND BUT PAPER. `--deck-accent` is
+  forest-700 — the brand's opening gesture on cream, and very nearly invisible on `vivid`, which is
+  a forest green itself. Each family publishes a `mark` role for exactly this: the colour that reads
+  AS a mark on its own ground. Same reason the list bullet re-points a few hundred lines up in
+  base.css, and the same table.
+*/
+.cover.bg-warm    .cover-rule { background: var(--deck-bg-warm-mark); }
+.cover.bg-accent  .cover-rule { background: var(--deck-bg-accent-mark); }
+.cover.bg-vivid   .cover-rule { background: var(--deck-bg-vivid-mark); }
+.cover.bg-neutral .cover-rule { background: var(--deck-bg-neutral-mark); }
+/* On the dark register with no named ground the accent is forest-300, which carries; nothing to
+   re-point. A named ground plus `dark` takes the pair's dark mark from the rules above. */
+.cover-rule {
+  /* ★ 120px, not `calc(var(--deck-grid) * 3)`. The accent bar's width is a visual weight, not a
+     measure of the layout module — spelling it in grid units meant a change to the grid resized the
+     brand mark on every cover. It rode the grid because 3 units happened to be the right length. */
+  width: 120px;
+  height: 8px;
+  background: var(--deck-accent);
+  margin-bottom: var(--deck-space-4);
+}
+/* The cover is a beat slide — Mohr uppercase, not the layout-default working voice. */
+.cover :deep(h1) {
+  font-family: var(--type-deck-display-family);
+  font-weight: var(--type-deck-display-weight);
+  text-transform: uppercase;
+  font-size: var(--type-deck-text-9xl); /* 8rem / 128px — ramp 9xl, the deck's biggest step */
+  line-height: 0.92;
+  /* Mohr uppercase averages 0.694em per character, so 18 characters ≈ 12.5em. In `ch` this
+     same cap reads 18ch = 14.2em = 1817px, which is WIDER than the 1680px content band — the
+     title would run off the slide rather than wrap. */
+  max-width: 12.5em;
+}
+/*
+  The subtitle under a cover title is the lead role, not body copy.
+
+  ★★ THE INK IS SCOPED OFF THE OWN-GROUND SLIDES, and it has to be. `--deck-fg-muted` and
+  `--deck-fg-subtle` are the SLIDE ground's roles; on a named background the ink comes from the
+  PAIR, and base.css already hands every `p` on a `bg-*` class back to it with `color: inherit`.
+  These two rules are scoped tighter than that one, so they won — measured by the audit on the new
+  cover run: the credit scored 2.62:1 on vivid and 1.36:1 on vivid's dark half, against the 3:1 a
+  graphical-weight text is held to.
+
+  ⚠ AND THE TEST IS ON BOTH ELEMENTS, because `bg-*` lands on either one. It was written as
+  `.cover:not(.deck-own-ground)` — the ROOT — which is right for the four field compositions and
+  wrong for the two panel-shaped ones, where the class rides on `.cover-content` and the root stays
+  bare. So `inset` and `band` on a named ground kept the muted tier over the PAIR's fill: measured
+  again on the same run, 2.62:1 on vivid's light half and 2.89:1 on accent's dark half, on four
+  slides. Both elements are now excluded, which is the same rule stated where the class actually is.
+
+  Excluding own-ground slides lets base.css do it, which is also the answer it gives for why: a
+  panel or a full-field slide is a PAGE, and a page's paragraphs read at its ink rather than at a
+  tier below it. The tiers stay where the deck's own paper is the ground.
+
+  ⚠ ONLY THE INK, THOUGH. This selector used to carry the SIZE as well, and a ground is not a type
+  scale: the same slide written twice — once unstated, once `dark: true` — set its lead at two
+  different sizes, because the first resolves to a named pair (own-ground, rule skipped, base
+  paragraph size) and the second to the deck's own dark register (rule applies, subtitle size).
+  Reported on the mosaic, where the two are a keystroke apart. A subtitle is the lead role on every
+  ground; what the ground decides is the colour it is drawn in, and nothing else.
+*/
+.cover :deep(h1 + p) {
+  font-size: var(--type-deck-subtitle-size);
+  line-height: var(--type-deck-subtitle-line-height);
+  max-width: 20em; /* ≈40 characters of GT Haptik */
+  text-wrap: balance; /* a two-line subtitle splits evenly rather than orphaning a word */
+}
+.cover:not(.deck-own-ground) > .cover-content:not(.deck-own-ground) :deep(h1 + p) {
+  color: var(--deck-fg-muted);
+}
+/*
+  ★★ AND A TIER BELOW ON A NAMED GROUND TOO, MIXED FROM THE PAIR'S OWN INK. The rule above cannot
+  reach these slides — `--deck-fg-muted` is the SLIDE ground's role and was measured at 2.62:1 over
+  vivid — so for a while the subtitle read at full ink on a pair and muted on the deck's paper. Two
+  tiers for one role, decided by a key the author may not have written.
+
+  base.css is right that a panel or a full-field slide is a PAGE and its paragraphs read at the
+  page's ink; a cover subtitle is not one of those paragraphs. It is the lead under a display line,
+  and it is a tier below that line on every ground or it is not a role at all.
+
+  ★ 80% OF `currentColor`, MEASURED ON ALL EIGHT HALVES rather than picked: the weakest is
+  vivid-dark at 4.63:1, which clears the 4.5 body floor even though a 60px line is only held to 3.
+  (Full ink there is 6.27:1; 75% still passes at 4.27, and 85% was too close to no change at all.)
+
+  ⚠ `color-mix`, NOT `opacity`, and base.css says why twice: alpha on the element also dims any
+  ::before it owns and overrides an inline colour a child stated on purpose — both shipped once and
+  both dropped a specimen under the floor. Mixing the COLOUR touches this element's text and nothing
+  else. `currentColor` inside `color` resolves to the INHERITED value, which is the pair's ink.
+*/
+.cover.deck-own-ground :deep(h1 + p),
+.cover > .cover-content.deck-own-ground :deep(h1 + p) {
+  color: color-mix(in oklab, currentColor 80%, transparent);
+}
+.cover-meta {
+  margin-top: var(--deck-space-4);
+  font-size: var(--type-deck-caption-size);
+  /*
+    ★ NOT THE PROSE MEASURE. base.css caps every <p> at 20em so body copy keeps a readable line
+    length, and at caption size that is 720px — which wrapped a one-line credit
+    ("Generated specimen book · @humanforest/slidev-theme", about 50 characters) onto two, under a
+    title running to 1600 and a subtitle to 1200. A measure exists to stop the EYE travelling too
+    far between lines; a credit has no second line to travel to, so the cap only breaks it. It still
+    cannot exceed the content band, which is what actually keeps it on the slide.
+  */
+  max-width: none;
+}
+/* The credit's tier, on the deck's own paper only — see the note on the subtitle above. */
+.cover:not(.deck-own-ground) > .cover-content:not(.deck-own-ground) .cover-meta {
+  color: var(--deck-fg-subtle);
+}
+/*
+  ⚠ EXCEPT ON THE DARK REGISTER, WHERE THE SUBTLE TIER DOES NOT CLEAR THE FLOOR. --deck-fg-subtle is
+  --neutral-500 in BOTH registers, and a dark cover has TWO grounds. A panel-shaped one paints its
+  PANEL, which with no named background takes --deck-surface — mixed from --forest-950 that is
+  #0d332d, where the subtle tier measures 2.89:1 against the 3:1 a graphical-weight text is held to.
+  Every other variant paints the slide, whose ground is --forest-950 itself and where the same tier
+  scrapes 3.25:1. The muted tier is --neutral-400: 5.24:1 and 5.90:1 on those two, still a step
+  below the ink on both.
+
+  ★★ HENCE TWO ARMS, BECAUSE `deck-dark` LANDS ON TWO DIFFERENT ELEMENTS. The panel-shaped variants
+  put it on .cover-content — the panel is the thing that is dark — and the rest put it on .cover.
+  The `deck-own-ground` pair twenty lines up already splits that way; this rule did not, so the
+  inset covers kept the subtle tier and the audit caught them at 2.89:1.
+
+  Scoped to this layout rather than fixed in the role, because --deck-fg-subtle has other callers
+  on other grounds and re-pointing it deck-wide is a bigger decision than a credit line.
+*/
+.cover.deck-dark:not(.deck-own-ground) > .cover-content:not(.deck-own-ground) .cover-meta,
+.cover:not(.deck-own-ground) > .cover-content.deck-dark:not(.deck-own-ground) .cover-meta {
+  color: var(--deck-fg-muted);
+}
+/* --deck-space-6 IS 60px, the same number this used to spell as `calc(var(--deck-grid) * 1.5)`. A
+   raw grid multiple used as a POSITION is the shape deckInsets.static.test.ts now refuses across
+   every layout, for the reason the beat margin above proves: an edge offset written as arithmetic
+   is invisible to the system that owns edge offsets. */
+/* The interval a kicker takes — the lockup is the first thing in the block, not part of the eyebrow
+   under it. `align-self: start` so it is its own width rather than the column's. */
+.cover-signature {
+  align-self: start;
+  margin-bottom: var(--deck-space-5);
+}
+.cover-logo {
+  position: absolute;
+  right: var(--deck-space-6);
+  bottom: var(--deck-space-6);
+  z-index: 10;
+}
+
+/*
+  ── THE SIX COMPOSITIONS ───────────────────────────────────────────────────────────────────────
+
+  ★★ EVERY PANEL AND WASH HERE IS MIXED FROM `currentColor`, NOT FROM A ROLE. The ground is a free
+  variable — five names, two registers, ten grounds in all — and a panel pinned to `--deck-surface`
+  is a page-role colour that does not re-point on any of them: it would be a cream card on green.
+  Mixed from the ink the ground already handed down, an inset panel, a band and the mark's own tint
+  are correct on all ten by construction, and on the next ground the system invents. Same reasoning
+  as the inline code chip, and the same alpha ladder.
+*/
+/*
+  ── poster: a photograph edge to edge, the identity stacked over a scrim at the right ───────────
+
+  ★★ THE SCRIM IS A GRADIENT FROM THE SIDE THE TYPE IS ON, not an even wash. `bleed`'s own note
+  makes the argument and this composition is the same one: an even veil costs the photograph
+  everywhere, including the two thirds of it nobody is reading. Here the words are a column at the
+  RIGHT, so the density is heaviest there and gone by the middle — the bike, the wall and the
+  pavement come through untouched.
+
+  ★ BLACK, NOT --deck-bg, for the reason `.scrim-full.deck-dark` records: a scrim is a neutral
+  density over somebody's photograph, and --deck-bg on the dark register is a green that tints
+  every colour underneath it.
+*/
+/* ⚠ THE PICTURE IS LIFTED OUT OF FLOW, and these three lines went missing once. They were the
+   shared `.cover-media` base, written for `figure` and `bleed`; both variants were removed and the
+   base went with them, leaving the poster's photograph an ordinary block that pushed the identity
+   stack off the top of the slide. The element is this variant's alone now, so its positioning lives
+   with it. */
+.cover-media {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+.cover-media :deep(img) { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cover-media :deep(.deck-placeholder) { width: 100%; height: 100%; }
+.cover.is-poster { justify-content: center; }
+.cover.is-poster::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to left,
+    rgb(0 0 0 / 76%) 0%,
+    rgb(0 0 0 / 58%) 30%,
+    transparent 68%
+  );
+  z-index: 1;
+}
+/*
+  The stack sits in a column at the right, centred on itself. `margin-left: auto` rather than a
+  width: the block is as wide as the wordmark it holds, so it cannot end up a narrow column of
+  wrapped type beside a wide picture.
+*/
+/*
+  ⚠ `fit-content`, NOT `auto`. `.cover-content` is a block that fills the column, so `width: auto`
+  left it full width and `margin-left: auto` had nothing to push — measured, the stack came out at
+  x 384 on one slide and x 817 on another purely because their headings were different lengths.
+  Sized to its contents, the block is as wide as the wordmark and the margin can do its job.
+*/
+/*
+  ⚠ AND A FLEX COLUMN, NOT A BLOCK. `align-items: center` was already here and was doing NOTHING —
+  the content box is a block, so the property is inert and each child fell back to its own idea of
+  the axis: the wordmark centred on the text, the pair (a block-level flex row) filled the column
+  and left its two tiles hard against the left edge. Measured on this slide: the pair's box 424px
+  wide with a 173px pair inside it, its marks 100px left of the wordmark's centre.
+*/
+/*
+  ★★ THE RIGHT THIRD, STATED AS A SHARE. Jose: "if this were split, this should be 2:1 for 142" —
+  the photograph holds two parts and the identity one, which is the proportion `split` would have
+  been given. A `fit-content` column could not say that: it was as wide as whatever the wordmark
+  happened to be, so the axis moved with the type rather than with the composition.
+
+  ⚠ POSITIONED, NOT LAID OUT IN FLOW, and its own padding zeroed. Three measured reasons, in the
+  order they were found:
+
+    · `.cover-content` pads itself by --deck-inset-display on both sides — right for a column of
+      words, wrong for a share of the frame. It made the box a third PLUS 240, and put the axis the
+      certification centres on 60px off the stack's.
+    · `height: 100%` on a flex item measured the cover's own centred box rather than the frame: the
+      column ran y 283 → 1171 on a 1080 canvas, so the stack sat low and the certification anchored
+      to the foot of a box that was not the slide.
+    · Pinned to the cover's padding edges, `justify-content: center` means the middle of the SLIDE
+      and `bottom: 0` on the certification means the slide's own bottom line.
+*/
+.cover.is-poster > .cover-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: absolute;
+  inset-block: 0;
+  /* The column is pinned to the CANVAS, so it carries the slide's own margins itself: --deck-space-6
+     off the right edge (a mark sits nearer an edge than a paragraph would) and the text inset top
+     and bottom, which is the line the certification lands on. */
+  right: var(--deck-space-6);
+  width: 33.3333%;
+  padding-block: var(--deck-inset-text);
+  padding-inline: 0;
+}
+.cover.is-poster .cover-lockup { margin-bottom: var(--deck-space-4); }
+.cover.is-poster .cover-pair { margin-bottom: var(--deck-space-5); }
+.cover.is-poster .cover-wordmark { margin-bottom: var(--deck-space-3); }
+/*
+  The title is subordinate here — the wordmark is the display line, so a heading takes the lead
+  role's size rather than the 128px step it gets on every other variant.
+
+  ★★ AND THE WORKING VOICE, NOT THE BEAT ONE. A cover is a beat layout and sets h1 in Mohr Black
+  uppercase; on this variant the WORDMARK is already the Mohr line, so a title above it in the same
+  face is the identity said twice. GT Haptik Bold, sentence case — base.css's own h1 default, which
+  this file overrode for every other variant.
+*/
+.cover.is-poster :deep(h1) {
+  font-family: var(--type-deck-headline-family);
+  font-weight: var(--type-deck-headline-weight);
+  font-size: var(--type-deck-subtitle-size);
+  line-height: var(--type-deck-subtitle-line-height);
+  text-transform: none;
+  max-width: none;
+}
+/*
+  ★★ THE STACK IS VERTICALLY CENTRED AND THE CERTIFICATION IS NOT. A credential is furniture: it
+  belongs at the foot of the composition, the way it does on every other cover, while the identity
+  holds the middle of the frame. So it leaves the flow — but stays inside the COLUMN rather than
+  going back to the slide's corner, which is what keeps it on the stack's own axis whatever the
+  wordmark's size. `left: 50%` of a `fit-content` column IS that axis.
+*/
+/* ⚠ Not `.cover.is-poster .cover-endorsement-stacked`: deckNotch.static reads EVERY class in a
+   corner-pinned rule and demands a `v-if` on an element carrying it, and `.cover` is the layout
+   root. The class is only ever emitted on the poster, so the prefix bought nothing. */
+.cover-endorsement-stacked {
+  position: absolute;
+  /* ⚠ THE INSET IS STATED HERE, NOT INHERITED FROM THE COLUMN'S PADDING. An absolutely positioned
+     box is placed against its containing block's PADDING box, so the column's `padding-block` — the
+     air its flow children get — does not move this one at all. At `bottom: 0` the mark sat flush on
+     the canvas edge. The number is the text inset, the line every other piece of cover furniture
+     sits on. */
+  bottom: var(--deck-inset-text);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* ── inset: the words in the theme's own panel, floating on the ground ───────────────────────── */
+/*
+  ★★ THIS IS `split`'s PANEL, NOT AN APPROXIMATION OF ONE. It was a `currentColor` wash with a
+  two-pixel edge and the code radius — a thing that looked panel-ish and was in the system nowhere.
+  A panel in this theme is a named pair carried on a `bg-*` class, at `--deck-radius-card`, inset
+  from the canvas: exactly what `split` draws at `frame: 'panel'`, `edge: 'inset'`. So the fill and
+  the ink come from the class the root hands this element, and the geometry comes from the same two
+  tokens the split panel uses. A cover's inset panel and a split's panel are now the same object.
+*/
+/*
+  ★★ THE PANEL IS THE SLIDE, INSET — NOT A BOX AROUND THE WORDS. It hugged its content at first,
+  which put a small card adrift in a large field and read as a quote rather than an opener. The
+  panel takes the whole canvas less one inset on every side, the words sit inside it at the card
+  pad, and the lockup sits in the corner it cuts for itself. That is the shape the brand's own
+  covers use.
+*/
+/*
+  ★★ THE PANEL GREW OUTWARD AND THE WORDS DID NOT MOVE. It read as tight inside: 32px of card pad
+  around a 128px display title, on a panel held 96px off the canvas. Rather than simply padding it
+  more — which pushes the title inward and shrinks the measure — the two insets trade. The panel now
+  sits `--deck-space-4` (32) from the canvas and pads itself by `--deck-inset-text` (96): the text
+  still starts 128px from the slide edge, exactly where it did, and the panel is 64px larger on every
+  side with three times the air inside it.
+
+  Both numbers are the ladder's, not a tuning: 32 is the panel's own step off an edge, and 96 is the
+  inset every slide in this deck gives its text. One variable, so the lockup below cannot drift from
+  the edge it has to sit on.
+*/
+.cover.is-inset {
+  --cover-inset: var(--deck-space-4);
+  justify-content: stretch;
+  padding: var(--cover-inset);
+}
+.cover.is-inset > .cover-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /*
+    ⚠ NO MARGIN. `.slidev-layout` already pads every slide by the text inset, so a margin here
+    applied it TWICE — measured 96 + 96 on each side, and the panel came out 696px tall in a 1080
+    frame, nowhere near the lockup it is supposed to cut around. The root's padding IS the inset.
+  */
+  padding: var(--deck-inset-text);
+  border-radius: var(--deck-radius-card);
+}
+/*
+  ★★ THE SIGNATURE IS FLUSH WITH THE PANEL'S CORNER, and it has to be to the pixel. `occupantFor`
+  decides a thing is IN a corner by touching it within 2px of slack — the same test the chrome
+  passes, because chrome sits on a panel's edge. At the layout's own `--deck-space-6` the lockup
+  landed outside the panel entirely; one card pad in, it was 32px clear of the edge and still not
+  touching. Both returned null and the panel kept four plain radii. Flush, and `--deck-notch-gap`
+  (24px) is what opens the ring around it — the gap belongs to the CUT, not to the placement.
+*/
+/*
+  ★★ THE PAIR IS <MarkPair>, NOT TWO ELEMENTS AND A RULE. It used to be a mark, an <img> and a block
+  of CSS pinning the chrome's --deck-mark-radius / --deck-mark-ring-width — numbers computed for a
+  72px tile. The poster draws the same pair at 120 and inherited a corner and a ring 40% too small.
+  The component takes a `size` and derives every other number from it; this file states the size and
+  where the pair sits, which is all a layout should know about somebody else's mark.
+*/
+/*
+  Flush with the panel's own corner, exactly as the lockup is with the other one: `occupantFor` seats
+  a thing by TOUCHING the box within 2px, so an inset here would return null and leave the picture's
+  corner square under the marks. The poster's pair is part of its stack, so only the inset's is
+  lifted out of flow — and it says so with a class of its own.
+
+  ⚠ A CLASS OF ITS OWN, `.cover-pair-seat`, rather than `.cover.is-inset .cover-pair` or
+  `.cover-pair.is-seated`. deckNotch.static reads every class in a corner-pinned rule and then
+  demands a `v-if` on an element carrying it — the check that stops a layout parking something in a
+  chrome corner without asking whether the chrome is there. `.cover` made it ask that of the layout
+  ROOT, which has no `v-if` and never could; `.cover-pair` made it ask that of the POSTER's pair,
+  which is in normal flow and needs none. Only the pinned element may name the pinned rule.
+*/
+.cover-pair-seat {
+  position: absolute;
+  top: var(--cover-inset);
+  right: var(--cover-inset);
+  z-index: 10;
+}
+/* Two halves of one object: the same gap between them as between either and the frame. */
+.cover.is-inset.has-media {
+  flex-direction: row;
+  gap: var(--cover-inset);
+}
+.cover.is-inset.has-media > .cover-content,
+.cover.is-inset .cover-inset-media {
+  flex: 1;
+  min-width: 0;
+}
+.cover-inset-media {
+  border-radius: var(--deck-radius-card);
+  overflow: hidden;
+}
+.cover-inset-media :deep(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+/*
+  ⚠ THE TEXT TAKES A SMALLER INSET ONCE IT IS HALF A SLIDE. The single panel pads itself by
+  --deck-inset-text (96) because it IS the slide and its words should start where every other
+  slide's do; half that width cannot afford 96 on both sides of a 128px display line.
+
+  ★★ BUT IT STILL OWES THE DISPLAY INSET FROM THE CANVAS, WHICH IS WHAT SETS THE NUMBER. The panel
+  floats --cover-inset (32) off the edge, so paying 120 − 32 = 88 puts the display line at 120 —
+  exactly where every other beat layout's starts. --deck-space-6 (60) landed it at 92: inside the
+  120px display inset the audit grades a cover against, and inside even the 96px inset an ordinary
+  paragraph keeps. Same expression the mosaic uses below, for the same complaint. The card pad (32)
+  was the first answer and is a card's, not a panel's: at 32 the type sat against the edge and read
+  as a crop rather than a composition.
+
+  ⚠ WHICH MAKES THIS THE TIGHTEST DISPLAY COLUMN IN THE THEME, and a title has to be written for it.
+  The panel is (1920 − 2×32 − 32) / 2 = 912 wide, so the measure is 912 − 176 = 736. Mohr uppercase
+  at the 128px step runs about 80px a character, so 736 holds NINE — and because
+  `overflow-wrap: break-word` is global, a tenth does not overflow, it BREAKS MID-WORD and reads
+  as a typo. Measured: "A partnership" set as "A PARTNERSH / IP".
+*/
+.cover.is-inset.has-media > .cover-content {
+  padding: calc(var(--deck-inset-display) - var(--cover-inset));
+}
+/*
+  ★ AND THE LEAD STEPS DOWN WITH THE COLUMN. The subtitle role is 60px, set for a panel that is the
+  whole slide — 1856px of measure. Half of that, less this inset, is 736, where 60px runs to three
+  lines and reads as a paragraph competing with the title above it rather than as a line under it.
+  48 is the next rung (there is nothing between), and the title is still 128, so the tier survives.
+
+  Same reasoning as `quote`'s own step-down beside its figure, and the same mistake if left alone: a
+  column that halves without the type following compounds a reduction the layout already made.
+*/
+.cover.is-inset.has-media :deep(h1 + p) {
+  font-size: var(--type-deck-body-size);
+}
+.cover.is-inset .cover-logo {
+  right: var(--cover-inset);
+  bottom: var(--cover-inset);
+}
+/* With no named background the panel still has to read as a plane, so it takes the deck's own
+   lifted surface — the one role that IS the answer to "a plane on the page". */
+.cover.is-inset:not(:has(> .deck-own-ground)) > .cover-content {
+  background: var(--deck-surface);
+}
+/*
+  ⚠ AND THE PANEL DOES CUT FOR THE CONFIDENTIALITY MARKING — this note used to say it did not need
+  to, and that stopped being true the moment the panel moved. A cover carries no running chrome (see
+  `signs`), but the marking is exempt from that: slide-bottom.vue draws it from `confidential:`
+  alone. It sits bottom-LEFT at --deck-inset-chrome (36px), and the panel now sits at
+  --deck-space-4 (32) rather than the 96 it had when this claim was written, so the two overlap.
+
+  Nothing here changed to fix it — useNotchCuts already measures the marking. Its selector was
+  simply the pre-split `.badge-strip-item` one and matched nothing; see the note there.
+*/
+
+
+/*
+  ── mosaic: the words on a field, beside a grid of pictures that runs off the edge ──────────────
+
+  ★★ THE GRID IS WIDER THAN ITS BOX AND THAT IS THE COMPOSITION. A mosaic that fits inside the slide
+  reads as a contact sheet; one that is cut by the edge reads as a fragment of something larger,
+  which is what the brand's own covers do. So the track is sized past the right edge and the column
+  offsets stagger it, rather than the cards being placed by hand.
+
+  ★ THE CARDS ARE `aria-hidden`. They carry no information the title does not — the alt text on six
+  decorative photographs is six interruptions before a reader reaches the one line that matters.
+*/
+/* ★ 52%, and the reason is the measure rather than a proportion: the content keeps the display
+   inset on both sides, so a narrower column eats the measure rather than the margin. At 46% the
+   title had 555px to run in and Mohr uppercase at 128px broke MID-WORD on the eighth character —
+   `overflow-wrap: break-word` is global, so it wrapped rather than overflowing and read as a
+   typo. 52% leaves 758px, which is 8 characters, and the mosaic starts past it. */
+/*
+  ★★ THIS VARIANT STOPS PAYING THE DISPLAY INSET TWICE. `.slidev-layout` already pads every slide by
+  --deck-inset-text (96) and `.cover > .cover-content` adds --deck-inset-display (120) on top, so
+  the type began 216px in and the whole block floated away from the frame. That second inset is for
+  a 128px TYPESET title (see DISPLAY_INSET_MULT in scripts/deck.ts) and this variant has none — its
+  display line is the wordmark, artwork with its own sidebearings built in.
+
+  ★ 58% OF THE CANVAS, WHICH IS A MEASURE RATHER THAN A PROPORTION. At 52% the column gave the
+  display step 974px to run in and "QUARTERLY TECH REVIEW" broke to THREE lines — "TECH REVIEW" is
+  977px of Mohr uppercase at 128px, three pixels over. 58% gives it 1089 and the title sets in two,
+  which also buys back the clearance above the corner mark (60px, from 1px). The wedge moved right
+  by the same argument: 40% instead of 36%, taking its tiles from 307 to 288.
+
+  ⚠ 120 EXACTLY, NOT 96, AND THE AUDIT IS WHY. Tried the text inset first, which put the type flush
+  with the wedge's own 96px bleed and read well — and scripts/deckAudit.ts grades cover, divider,
+  end, quote and statement against the DISPLAY inset, so the badge came back "24px past the left
+  inset" on all seven mosaic slides. The bound is right and this variant is not special enough to
+  be carved out of it: the difference between 216 and 120 is the whole complaint, and 120 is a
+  number the deck already owns.
+*/
+.cover.is-mosaic > .cover-content {
+  width: 58%;
+  padding-inline-start: calc(var(--deck-inset-display) - var(--deck-inset-text));
+  padding-inline-end: 0;
+}
+/*
+  ★★ THREE ROWS, THE OUTER TWO EQUAL, SO THE MIDDLE ONE IS THE SLIDE'S CENTRE LINE. `1fr auto 1fr`
+  is the whole mechanism: two equal fractions cannot help but put the `auto` row's midpoint at the
+  container's, whatever the tail below it weighs. MEASURED before: the wordmark's box centred on 421
+  against the canvas's 540 — 119px high — because the column was a centred flex block and the
+  subtitle and the credential were counted into it.
+
+  The tail then hangs from directly under the wordmark (`align-self: start`) rather than centring in
+  its own row, so the interval between the two is the wordmark's own margin and nothing else.
+*/
+.cover.is-mosaic { justify-content: stretch; }
+.cover.is-mosaic > .cover-content {
+  flex: 1;
+  display: grid;
+  grid-template-rows: 1fr auto 1fr;
+}
+.cover.is-mosaic .cover-wordmark,
+.cover.is-mosaic .cover-title { grid-row: 2; }
+.cover.is-mosaic .cover-body { grid-row: 3; align-self: start; }
+.cover-mosaic {
+  position: absolute;
+  /*
+    ★★ THE TILES STACK INTO A WEDGE IN THE TOP-RIGHT CORNER — four across, then three, two, one —
+    rather than filling a rectangle. A full grid of pictures is a contact sheet whatever its size;
+    drawn and measured, three by three read as a table and four rows as a proof sheet, and both
+    argued with the wordmark for the same attention. A wedge has a direction: it is heaviest where
+    it meets the corner and thins as it comes down towards the type, so the eye lands on the
+    identity and travels into the pictures rather than choosing between them.
+
+    ★ CUT EQUALLY ON THE TWO EDGES IT MEETS. Top and right both bleed by --deck-inset-text (96px),
+    the same number on both axes, so the corner reads as a corner the field carries on past rather
+    than as two unrelated crops. The wedge is anchored to the TOP by that measurement and hangs from
+    it, so whatever the tiles cost in height runs off the bottom: four rows come to 1324px against a
+    1080px canvas, and the last tile — the single one at the point of the wedge — loses 148px. That
+    is a consequence of the anchor rather than a third decision, and it falls on the tile furthest
+    from the type.
+  */
+  inset-block-start: calc(var(--deck-inset-text) * -1);
+  /*
+    ★ THE WEDGE REACHES BACK PAST THE TEXT COLUMN, and only its top row is up there. The rows step
+    RIGHT as they descend, so the widest one is the highest one — measured, its leftmost tile spans
+    y -96 to 192 while the wordmark sits at 457 and the credit below it at 675. They share a column
+    of the slide and never a row of it, which is what buys the tiles their size: held clear in x,
+    each one would be 80px smaller.
+
+    ⚠ THE SECOND ROW IS THE ONE A TITLE CAN HIT, and 42% is where it stops being able to. That row
+    DOES share y with the display line, so the only thing between them is x. Measured across the
+    three titled specimens, the longest line is "FLEET REPORT" at 959px from x 120 — ending at 1079
+    — and at 40% the second row began at 1088. Nine pixels, and it read as the title touching the
+    picture.
+
+    Capping the measure instead cannot work, and the numbers say why: "FLEET REPORT" (959) and
+    "TECH REVIEW" (911) are 48px apart, so every width that wraps the first also breaks "Quarterly
+    Tech Review" onto a third line. The wedge is the thing with slack. At 42% the second row starts
+    at 1117, which clears the longest title by 38px — more than the 32px the tiles clear each other
+    by, which is the interval this composition already uses everywhere else — and costs each tile
+    10px (288 to 278).
+  */
+  inset-inline-start: 42%;
+  inset-inline-end: calc(var(--deck-inset-text) * -1);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--deck-space-4);
+  align-content: start;
+  z-index: 0;
+  /*
+    ★★ THE RING DOES NOT FOLLOW THE GROUND, and that is the one place in this layout where a colour
+    is pinned rather than mixed. Everything else here is `currentColor` so it re-points on all ten
+    grounds — but the mark is ARTWORK, and its ring is the mark's own edge, not a reading of the
+    page. Left inheriting, `<Logo>` paints that ring in the deck's ink and it goes white on the dark
+    register: the tile stops being the mark and becomes a reversed drawing of it, with the eight
+    photographs beside it reversing too.
+
+    AND THE COLOUR IS THE DESIGN SYSTEM'S, NOT THE DECK'S READING OF IT. scripts/logo.ts — the
+    generator that bakes the downloadable artwork straight off the forest ramp — is explicit:
+    `const INK = 950, GREEN = 700; // wordmark + ring + inner = Darkest Forest; square = Dark
+    Forest`. So the ring is --forest-950 (#002A24), the same ink as the wordmark and the tree's
+    inner detail; the square is --forest-700 (#046C4C).
+
+    ⚠ `currentColor` IS THE DECK'S REVERSING TREATMENT, NOT THE MARK'S COLOUR, and reading it back
+    off the page says the wrong thing: on this deck it resolves to --deck-fg, which is
+    --neutral-900 — a neutral near-black that merely looks like the answer on cream. Pinning that
+    would have shipped a mark a shade off the artwork on every slide. The token is named from the
+    system instead.
+
+    ★ ONE GROUND OVERRIDES ALL OF THAT, and `--mosaic-ink` is where it is decided rather than here —
+    see `onDarkestGround` in the script. The pin is what stops the field following every ground it
+    lands on; the single exception is the ground the pin would disappear into.
+  */
+  color: var(--mosaic-ink);
+}
+.cover-mosaic > * {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  display: block;
+}
+/* A picture in the mark's clothing: the ring as padding, so it scales with the tile the grid hands
+   it, and the fill is the ground's own ink — the same colour the mark's ring takes. */
+.cover-mosaic-cell {
+  background: currentColor;
+  border-radius: var(--mosaic-radius);
+  padding: var(--mosaic-ring);
+}
+.cover-mosaic-cell :deep(img),
+.cover-mosaic-cell :deep(.deck-placeholder) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--mosaic-radius-inner);
+  display: block;
+}
+/*
+  The wedge, in two declarations. Auto-placement fills row 1 with cells 1-4; starting cells 5, 8
+  and 10 one column further in indents each following row by one tile, so the rows step in from the
+  left while their right edges stay flush against the frame.
+
+  ★ NO STAGGER HERE, and that is the point of the shape. A staggered rectangle was the previous
+  arrangement's way of not reading as a table — a nudge to break the rows up. The wedge already has
+  a direction, so an offset on top of it would only blur the diagonal it is made of.
+*/
+.cover-mosaic > :nth-child(5) { grid-column-start: 2; }
+.cover-mosaic > :nth-child(8) { grid-column-start: 3; }
+.cover-mosaic > :nth-child(10) { grid-column-start: 4; }
+/*
+  The mark's cell. A plate of the ground's OWN INK with the glyph knocked out of it in the ground's
+  fill — so it is the same two colours as the words beside it, inverted, on all ten grounds and
+  without a rule per ground.
+*/
+
+/*
+  ⚠ AND THE MARK DOES NOT REVERSE HERE, WHICH IS AN EXCEPTION AND HAS TO OUT-SPECIFY ONE.
+
+  Logo.vue pins the brand ink and flips it to --neutral-0 under `.deck-dark`, which is right
+  everywhere the mark signs a slide — the chrome, the cover lockup, the end card. It is wrong for
+  THIS grid: the nine tiles are one object drawn in one ink, so a reversing mark put a white ring on
+  the centre tile and forest-950 rings on the eight around it. Measured on the dark mosaic, which is
+  the variant's own default ground.
+
+  Three class selectors so it beats Logo.vue's own two — a tie would be settled by whichever
+  stylesheet the bundler emitted second, which is not a thing this should depend on.
+*/
+.cover .cover-mosaic .cover-mosaic-mark { color: var(--mosaic-ink); }
+/*
+  ⚠ THE INTERVAL BELOW THE WORDMARK BELONGS TO THE TAIL, NOT TO THE WORDMARK. As a margin it sat
+  INSIDE the grid's `auto` row — the row measured 190px for a 166px wordmark — so the row centred and
+  the wordmark inside it did not. Measured: 528 against the canvas's 540, twelve pixels high, which
+  is exactly half the margin. Moved onto `.cover-body`, where it separates the two boxes without
+  being weighed as part of either.
+*/
+/* ★ ONE STEP UP THE LADDER, NOT A TUNED NUMBER. At --deck-space-3 (24) the gap was set against a
+   697px wordmark; at 813 the mark grew and the interval did not, so the badge read as attached to
+   it rather than placed under it. --deck-space-4 (32) is the next rung. */
+.cover.is-mosaic .cover-body { margin-top: var(--deck-space-4); }
+/*
+  ── THE CERTIFICATION SITS IN THE BOTTOM-LEFT CORNER ───────────────────────────────────────────
+
+  ★★ AND IT CLEARS THE ONE PIECE OF CHROME A COVER CAN STILL CARRY. Every other corner of a slide
+  belongs to the running chrome, and a cover suppresses all of it (CHROMELESS_LAYOUTS) — except the
+  confidentiality marking, which slide-bottom.vue deliberately exempts from the page-1 gate so a
+  title slide can still be marked. That pill is bottom-LEFT, in the chrome band at
+  --deck-inset-chrome.
+
+  Measured live on slide 221, the one slide in the book that carries a marking: the band occupies
+  y 995-1044 and the pill itself y 1013-1044. At --deck-inset-text (96) from the bottom the mark
+  ends on 984 — eleven pixels clear of the band, twenty-nine of the pill — which is why the vertical
+  inset is that one and not --deck-space-6 (60), where the mark would end at 1020, inside both.
+
+  ★ THE TWO INSETS DIFFER ON PURPOSE. Vertically it is the text inset, for the clearance above;
+  horizontally it is --deck-inset-display, because that is where the type column starts and the
+  corner should read as the foot of that column rather than as a fifth thing on the slide.
+
+  ⚠ AND IT IS ABSOLUTE, SO A LONG ENOUGH TITLE BLOCK WILL REACH IT. The display row centres against
+  the whole slide (see the grid above), so it grows in both directions and the corner mark does not
+  move out of the way. MEASURED at the specimen's own longest slide — a two-line title, a kicker and
+  a two-line lead — the block ends at 788 against a mark that begins at 848: sixty pixels, or about
+  half a display line. A THIRD display line reaches it. Reserving the space inside the column would
+  move the centre line the wordmark is aligned to, which is the thing this variant is built around,
+  so the ceiling is recorded here rather than designed away.
+*/
+/*
+  ★ THE CREDENTIAL IS SIZED AGAINST THE WORDMARK ABOVE IT. At 104px it was 62.6px wide beside a
+  697px wordmark — a ratio of about 1:11, which is not "quiet", it is unresolved, and it sat 40px
+  under the subtitle where the eye read it as a fourth line of the paragraph. Larger, and on the
+  block's own biggest interval, so it reads as the last element of the title block rather than as
+  something left over.
+*/
+/*
+  ★ THE PILL IS LEFT WHERE THE TYPE IS, not stretched across the column. `.badge-strip` is a flex
+  ROW — correct for the strip's own job, a list of peers — and as a block-level child of a column it
+  would take the column's full width, putting a single pill's box 899px wide with 300px of nothing
+  after it. `width: fit-content` makes the box the pill.
+*/
+.cover-badge { width: fit-content; }
+/* As a kicker it needs the interval a kicker has; as a strapline the body's own top margin already
+   separates it from the wordmark, so only this position sets one. */
+.cover-title .cover-badge { margin-bottom: var(--deck-space-3); }
+/*
+  ⚠ AND THE STRIP'S 20em CAP COMES OFF, because it is measuring for a job this pill is not doing.
+  BadgeStrip caps a label and ellipsises it so ONE long tag cannot push a row of peers off the
+  slide — the right call for a row. A cover badge has no peers and no row: it is a strapline, and
+  the column it sits in is what bounds it. Left capped, "The bikes that look like trees" rendered as
+  "THE BIKES THAT LOOK LIKE TR…" at exactly 600px — measured, the cap to the pixel.
+
+  Only the cap. The ellipsis stays armed for a strapline longer than the column, which is the case
+  the cap was protecting against in the first place.
+*/
+.cover-badge :deep(.badge-strip-item) { max-width: none; }
+.cover-endorsement {
+  position: absolute;
+  left: var(--deck-inset-display);
+  bottom: var(--deck-inset-text);
+  z-index: 10;
+}
+/*
+  ★ THE TITLE TAKES THE COVER'S OWN DISPLAY STEP, unmodified — this variant used to DEMOTE an h1 to
+  subtitle size, back when the wordmark always held the display line and a heading could only be
+  something competing with it. Now a heading IS the display line, so it reads at 128px Mohr
+  uppercase like every other cover's, and the column's own width is what bounds it.
+*/
+
+</style>