@humanforest/slidev-theme 0.1.0

package/layouts/end.vue

@@ -0,0 +1,384 @@
+<script setup>
+/*
+  The closer. Four shapes, the same question the opener answers in reverse: what is the last thing
+  on the screen while the room is still looking at it.
+
+  ★★ THE VARIANTS ARE COMPOSITIONS, NOT COLOURS — the same split cover.vue documents at length. A
+  ground is `background` plus the register, and every shape here takes both, so the two props stay
+  orthogonal and the names stay about arrangement.
+
+  ⚠ AND NO PILL EITHER. `cover` takes a `badge` — a strapline under the title, where a title is
+  already the loud thing and a pill beside it is a second, quieter line. A closer has no such
+  hierarchy: on `signoff` the pill lands between the two words and reads as a third voice, and on
+  `wordmark` it turns the identity into a lockup with a caption. Jose, twice, on two different
+  variants: "remove this". So there is no `badge` prop here.
+
+  ⚠ AND THE CLOSER CARRIES NO CERTIFICATION. `cover` does, on its brand variant, because an opener
+  is where a deck states what it is; a sign-off that ends on a compliance mark ends on somebody
+  else's logo. Jose, on this layout specifically: "fuck bcorp in end layout". There is no
+  `endorsements` prop here and there should not be one.
+*/
+import { computed } from 'vue';
+import { BEAT_GROUND, END_GROUNDS, END_PHOTO_GROUND } from '../notch.js';
+import { assetUrl } from '../assetUrl.js';
+
+const props = defineProps({
+  /**
+   * WHAT SHAPE the closer is.
+   *
+   * · `plain`    — the closing line and the lockup under it. Type alone on the ground.
+   * · `signoff`  — two display words split around one of the brand's own renders, the second word
+   *                in front of it. The loudest close the deck has.
+   * · `wordmark` — the wordmark alone at display scale, centred. The quietest.
+   * · `lockup`   — the same, composed: mark over wordmark, at the brand's own proportions.
+   * · `photo`    — a photograph edge to edge under a scrim, the closing line and lockup over it.
+   *
+   * ★ `wordmark` AND `lockup` ARE TWO SHAPES, NOT ONE WITH A SWITCH. The wordmark is a WORD held
+   * alone and reads as a signature; the vertical lockup is the mark ON the word and reads as a
+   * stamp. Which one closes a deck is the same kind of choice as which one opens it, and
+   * `Logo` already draws both from one set of proportions — this layout only says which.
+   */
+  variant: {
+    type: String,
+    default: 'plain',
+    validator: (v) => ['plain', 'signoff', 'wordmark', 'lockup', 'photo'].includes(v),
+  },
+  /**
+   * The ground. `auto` resolves to the brand pair, `paper` leaves the deck's own surface, and the
+   * four named pairs are the same table `default`, `split`'s panel, `stack`'s band and a Card read.
+   *
+   * ★ THE TWO BOOKENDS RESOLVE `auto` FROM ONE TABLE (notch.js's BEAT_GROUND), so a deck that
+   * states neither opens and closes on the same colour by construction rather than by an author
+   * remembering to match them.
+   *
+   * ★★ AND THE CLOSER TAKES MORE GROUNDS THAN THE OPENER. cover.vue narrows itself to two because a
+   * deck states its identity there; a closer is the last frame and is the slide a deck is allowed to
+   * be loud on. See END_GROUNDS in notch.js, which the chrome's own register reader clamps against.
+   */
+  background: {
+    type: String,
+    default: 'auto',
+    validator: (b) => END_GROUNDS.includes(b),
+  },
+  /** Force the register. Unstated, the ground decides — which is the whole point of `auto`. */
+  dark: { type: Boolean, default: null },
+  /**
+   * The two display words of a `signoff`, split around the render: `lead` sits above it and behind
+   * it, `trail` below it and in front.
+   *
+   * ★ TWO PROPS, NOT ONE STRING THIS LAYOUT SPLITS. "Thank you" splits at the space; "Ride with
+   * us" does not, and a layout guessing where a phrase breaks is a layout that breaks it in the
+   * wrong place on the one slide nobody re-reads. The author says which word goes where.
+   */
+  lead: { type: String, default: '' },
+  /** The second word — the one that overlaps the render from in front. */
+  trail: { type: String, default: '' },
+  /**
+   * The picture: one of the brand's renders on `signoff` (a cutout, drawn over the ground), a
+   * photograph on `photo` (bled to the frame, under a scrim). Slidev's own key, so
+   * `extractImagesUsage()` preloads it either way.
+   */
+  image: { type: String, default: '' },
+  /** Alt text for that picture. */
+  alt: { type: String, default: '' },
+})
+
+const VARIANT_CLASS = {
+  plain: 'is-plain',
+  signoff: 'is-signoff',
+  wordmark: 'is-wordmark',
+  lockup: 'is-lockup',
+  photo: 'is-photo',
+}
+/* Looked up rather than interpolated, so an invented variant renders the default composition
+   instead of minting an unstyled `is-<whatever>` — a validator is stripped in production. */
+const variantClass = computed(() => VARIANT_CLASS[props.variant] ?? 'is-plain')
+
+const stated = computed(() => (END_GROUNDS.includes(props.background) ? props.background : 'auto'))
+const ground = computed(() => {
+  /* The photograph IS the ground on this one — the same fact cover.vue records for its poster. Light
+     ink on a dark picture, fixed, and notch.js agrees so the chrome reads the same slide. */
+  if (END_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),
+  }
+})
+
+/*
+  ★ THE RENDER'S OWN SIZE, AS A SHARE OF THE FRAME RATHER THAN A PIXEL COUNT. A cutout has no box of
+  its own — it is a bike on nothing — so what decides its scale is how much of the slide it should
+  occupy against two words the same height as it. Stated here so the two numbers are read together.
+*/
+const RENDER_WIDTH = '56%'
+const RENDER_HEIGHT = '66%'
+
+/* The wordmark variant's own scale. `size` on <Logo> is the MARK's height for every form, so 300
+   draws the wordmark 581px across — a wordmark that IS the composition rather than a signature in a
+   corner, and still short of the 697px the poster's own stack settled on for a narrower column. */
+const END_WORDMARK_PX = 300
+/* The composed form is sized from its MARK, and a mark over a wordmark is a taller object than the
+   wordmark alone — 260 draws the stack about the height 300 draws the word, which is what keeps the
+   two variants the same weight in the frame rather than the same number. */
+const END_LOCKUP_PX = 260
+</script>
+
+<template>
+  <div
+    class="slidev-layout end h-full relative overflow-hidden"
+    :class="[
+      variantClass,
+      ground.background !== 'paper' ? `bg-${ground.background}` : '',
+      ground.dark ? 'deck-dark' : '',
+    ]"
+  >
+    <!--
+      ★★ ONE GRID CELL, THREE LAYERS, AND THE ORDER IS THE DESIGN. Jose, describing the reference:
+      "the 'thank' is back and above the bike, and the 'you' is top and below the bike". So the two
+      words are not a heading split over two lines with a picture between them — they are two planes
+      with the render BETWEEN them, and the composition only reads if the second word passes in
+      front of the wheels.
+
+      Every child takes the same `grid-area`, so they stack; `align-self` places each one in the
+      frame and `z-index` decides which passes in front. No absolute positioning: a corner-pinned
+      box would have to ask whether the chrome is there (deckNotch.static gates exactly that), and
+      none of these sits in a corner — they sit on top of each other.
+    -->
+    <div v-if="variant === 'signoff'" class="end-stage">
+      <p v-if="lead" class="end-word is-lead">{{ lead }}</p>
+      <div class="end-render">
+        <img v-if="image" :src="assetUrl(image)" :alt="alt">
+        <Placeholder v-else :label="alt || 'Closing render'" ratio="16:9" />
+      </div>
+      <p v-if="trail" class="end-word is-trail">{{ trail }}</p>
+      <!-- The slot still runs, under the stack: a closer that also wants a line of its own can
+           write one, and a slide that writes nothing draws nothing. -->
+      <div class="end-note"><slot /></div>
+    </div>
+
+    <!--
+      The identity as the last frame, in whichever of its two forms the deck closes on. No heading
+      over it and nothing under it: the identity IS the sign-off here, and a second mark beside it
+      would be the mark twice.
+
+      ★ THE VERTICAL LOCKUP RATHER THAN A MARK STACKED ON A WORDMARK BY HAND. `Logo` centres the mark
+      over the wordmark's midline and holds the canonical gap — its own note records that a
+      hand-copied gap made this form 1.7x too airy. One element, the brand's own proportions.
+    -->
+    <div v-else-if="variant === 'wordmark' || variant === 'lockup'" class="end-stage is-quiet">
+      <Logo
+        :variant="variant === 'lockup' ? 'lockup-vertical' : 'wordmark'"
+        :size="variant === 'lockup' ? END_LOCKUP_PX : END_WORDMARK_PX"
+        class="end-wordmark"
+      />
+    </div>
+
+    <template v-else>
+      <!-- The photograph, edge to edge, with the scrim drawn over it by `.is-photo::after`. -->
+      <div v-if="variant === 'photo'" class="end-media">
+        <img v-if="image" :src="assetUrl(image)" :alt="alt">
+        <Placeholder v-else :label="alt || 'Closing image'" ratio="16:9" />
+      </div>
+      <div class="end-content">
+        <slot />
+        <!-- The closer signs off with the full identity, not the bare tile. -->
+        <Logo variant="lockup" class="end-logo" :size="88" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* The beat margin — see cover.vue's own note. Both edges, not just the left: the left-only version
+   this replaces rendered a 120px left margin against a 90px right one on every divider and closer,
+   with nothing in any file explaining the asymmetry. */
+.end {
+  padding-left: var(--deck-inset-display);
+  padding-right: var(--deck-inset-display);
+}
+/*
+  ★★ THE NAMED GROUND IS PAINTED HERE, and without this rule the class is inert. `.bg-vivid` on the
+  root is only a marker: base.css keys ink, eyebrows and bullets off it but paints nothing, and
+  `.deck-dark { background: var(--deck-bg) }` then wins — so a closer that asked for the vivid pair
+  rendered on the deck's own dark ground instead. MEASURED on this slide before the rule existed:
+  forest-950 (0.052 0.162 0.142) where the cover beside it, which carries the same class AND its own
+  paint rule, drew forest-700 (0.182 0.417 0.307). cover.vue's note above its four says the same
+  thing; `end` takes two of them because a bookend takes two grounds.
+*/
+.end.bg-warm    { background: var(--deck-bg-warm);    color: var(--deck-on-bg-warm); }
+.end.bg-accent  { background: var(--deck-bg-accent);  color: var(--deck-on-bg-accent); }
+.end.bg-vivid   { background: var(--deck-bg-vivid);   color: var(--deck-on-bg-vivid); }
+.end.bg-neutral { background: var(--deck-bg-neutral); color: var(--deck-on-bg-neutral); }
+
+/* Only the flowed variants centre their content in the frame; the staged ones fill it. */
+.end-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  position: relative;
+  z-index: 1;
+}
+/* The closer is a beat slide — Mohr uppercase, not the layout-default working voice. */
+.end :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-8xl); /* 6rem / 96px — ramp 8xl, pairs with the statement tier */
+}
+.end-logo {
+  margin-top: var(--deck-space-6);
+}
+
+/* ── signoff: two words, a render between them ───────────────────────────────────────────────── */
+/*
+  The stage bleeds past the layout's own display margin, because a word used as a FIELD is not type
+  in a measure — it is a shape the render sits in front of, and holding it to a 120px margin on both
+  sides shrank it to the size of a heading. The margin still governs everything flowed.
+*/
+.end-stage {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  margin-inline: calc(-1 * var(--deck-inset-display));
+}
+.end-stage > * {
+  grid-area: 1 / 1;
+}
+/*
+  ★★ THE WORDS ARE A TONE OF THE GROUND, AND A SOLID ONE. Two wrong answers came first. `currentColor`
+  is white on the dark register, so the wash LIGHTENED — a word lighter than its ground reads as text
+  the deck forgot to finish rather than as a field behind an object. Black at 22% darkened correctly
+  on every ground and was still an alpha wash: it composites against whatever passes behind it, so
+  the word changed value where the render's shadow crossed it. Jose: "make it solid, not opacity".
+
+  So each ground names the tone one step down its own ramp, as a token. Three states, because the
+  ground has three: the vivid pair on either register, and the deck's own paper.
+*/
+/* The deck's paper is warm-50, so the tone steps down its own family. 200 (#FFD6A6) was the first
+   step tried and read as a highlight rather than a tone against cream — two steps down is where the
+   word reads as a field. */
+.end { --end-word-ink: var(--warm-300); }
+/*
+  ★★ ONE TONE PER GROUND PER REGISTER, AND EVERY ONE IS A RAMP STEP OF THAT GROUND'S OWN FAMILY.
+  Not `--deck-bg-<name>-mark`, which is the obvious reach and is wrong here: that role is the colour
+  a SMALL shape needs to clear 3:1 on the ground, so on every dark half it is a LIGHT tint —
+  forest-200 on vivid — and a word lighter than its ground is the failure this whole rule exists to
+  avoid. A field wants the quiet neighbour, not the legible one.
+*/
+.end.bg-vivid { --end-word-ink: var(--forest-700); }
+.end.bg-vivid.deck-dark { --end-word-ink: var(--forest-950); }
+/* Brown on peach, and the deeper brown on the dark half's warm-700. */
+.end.bg-warm { --end-word-ink: var(--warm-700); }
+.end.bg-warm.deck-dark { --end-word-ink: var(--warm-950); }
+/* The mint pair: a green step down from forest-100, and on its forest-950 half the same lift the
+   deck's own dark ground takes, for the same reason — there is nothing below 950. */
+.end.bg-accent { --end-word-ink: var(--forest-300); }
+.end.bg-accent.deck-dark { --end-word-ink: var(--forest-900); }
+/* Two steps down carries on every other pair and not on this one — the grey ramp has no chroma to
+   separate 300 from 100, so the word read as a printing artefact rather than a tone. 400. */
+.end.bg-neutral { --end-word-ink: var(--neutral-400); }
+.end.bg-neutral.deck-dark { --end-word-ink: var(--neutral-700); }
+/* ⚠ ON THE DECK'S OWN DARK GROUND THE TONE GOES UP, NOT DOWN. That ground IS forest-950, the bottom
+   of the ramp, so there is nothing darker to step to — the tint lifts to 900 instead. A tone of the
+   ground is what this has to be; which direction it lies in is the ground's business, not the
+   word's. */
+.end.deck-dark:not(.bg-vivid) { --end-word-ink: var(--forest-900); }
+.end-word {
+  margin: 0;
+  font-family: var(--type-deck-headline-family);
+  font-weight: var(--type-deck-headline-weight);
+  /*
+    ⚠ OFF THE RAMP ON PURPOSE, and this is the one place in the theme that is true. The deck ramp
+    tops out at --type-deck-text-9xl (128px), which is the biggest a line of READING is allowed to
+    be in a room. These two words are not read as a line — they are the composition, and at 128 they
+    sat under the render like a caption. 320px is the height that makes the render's 66% and the
+    word's cap height the same order of size. Drawn at 320 first: the word came out 901px across
+    against a 1190px render, which read as a picture with type behind it rather than as one object.
+  */
+  font-size: 360px;
+  line-height: 0.82;
+  letter-spacing: -0.02em;
+  color: var(--end-word-ink);
+  text-transform: none;
+  white-space: nowrap;
+}
+/* Above and behind; below and in front. The two z-indexes ARE the brief. */
+.end-word.is-lead {
+  align-self: start;
+  z-index: 0;
+}
+.end-word.is-trail {
+  align-self: end;
+  z-index: 2;
+}
+.end-render {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  width: 100%;
+}
+.end-render :deep(img) {
+  width: v-bind(RENDER_WIDTH);
+  max-height: v-bind(RENDER_HEIGHT);
+  object-fit: contain;
+  display: block;
+}
+.end-render :deep(.deck-placeholder) {
+  width: v-bind(RENDER_WIDTH);
+}
+/* A closing line under a stage is a footnote to it: small, quiet, and out of the composition's way. */
+.end-note {
+  align-self: end;
+  justify-self: start;
+  z-index: 3;
+  margin-inline-start: var(--deck-inset-display);
+}
+.end-note :deep(h1) {
+  font-size: var(--type-deck-text-5xl);
+}
+
+/* ── wordmark: the identity alone ────────────────────────────────────────────────────────────── */
+.end-stage.is-quiet {
+  grid-auto-flow: row;
+  place-content: center;
+  gap: var(--deck-space-5);
+}
+.end-stage.is-quiet > * {
+  grid-area: auto;
+}
+
+/* ── photo: the photograph, and the words over it ────────────────────────────────────────────── */
+.end-media {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+.end-media :deep(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.end-media :deep(.deck-placeholder) {
+  width: 100%;
+  height: 100%;
+}
+/*
+  The scrim, from the side the words are on. Black rather than the ground's own ink for the reason
+  bleed.vue's full scrim is: a green wash over a photograph tints the photograph, and what this has
+  to do is make white type legible over whatever the picture happens to be doing.
+*/
+.end.is-photo::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, rgb(0 0 0 / 74%), rgb(0 0 0 / 52%) 42%, transparent 78%);
+  z-index: 0;
+}
+</style>

package/layouts/quote.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { assetUrl } from '../assetUrl.js';
+/*
+  A pull quote. The one slide where the sans face gets to be large — the display face is the
+  brand SHOUTING, and a quote is somebody else speaking, so it stays in GT Haptik.
+
+  The quotation mark is drawn as a decorative glyph in the accent, set in the display face and
+  hung outside the text block, which is the system's editorial treatment for a lifted quote.
+
+  ★ THE COMPANION IMAGE IS A HALF, NOT A SPLIT. `image` puts a portrait beside the words — the one
+  thing a quote wants a picture of is the person saying it — and `flip` says which wall the WORDS take, the picture taking the other — the same reading `split` and `bleed` give it.
+  Deliberately ONE arrangement and a fixed half, rather than split.vue's ratio ladder: a quote is
+  already capped at 17em of measure, so a wider content column buys nothing and a narrower one
+  breaks the line-length the layout exists to protect. An author who wants a ratio wants `split`.
+
+  The figure carries split's own treatment — filled, corner-clipped, cover-fitted — but NO notch,
+  and that is measured rather than assumed. A quote keeps the display inset at the sides and the
+  text inset top and bottom, which puts the figure at 1020..1800 x 180..900 against a mark sitting
+  at 1812..1884 x 36..108: clear on BOTH axes, by 12px horizontally and 72 vertically. The cut was
+  wired here first and could never fire, so it came back out. A figure that reached the chrome would
+  need it — see split.vue — but this one cannot.
+*/
+
+defineProps({
+  /** Who said it. */
+  attribution: { type: String, default: '' },
+  /** Their role, company, or the source. */
+  source: { type: String, default: '' },
+  /** A companion image — a portrait of whoever is speaking. Omit for a quote that owns the whole slide. */
+  image: { type: String, default: '' },
+  /** Assistive text for that image. */
+  alt: { type: String, default: '' },
+  /**
+   * Which physical side the CONTENT sits on; the image takes the other. Ignored without an image.
+   *
+   * ★★ THIS USED TO MEAN THE OPPOSITE, and it was the only layout where it did. `split` and `bleed`
+   * both read `flip` as the CONTENT's side; quote read it as the IMAGE's, so `flip: false` put words
+   * on the left in two layouts and the photograph on the left in the third. One prop name, two
+   * meanings, and nothing in the type system to say which one a slide was getting.
+   *
+   * The default moved with the meaning — 'right' (image right) became 'left' (content left), which
+   * is the SAME rendering — so a quote that does not state a side is unaffected. A quote that does
+   * state one now gets the mirror of what it used to, which is the point: it is the layout that was
+   * lying, not the slides.
+   */
+  /**
+   * Mirror the layout: by default the WORDS take the left wall and the picture the right; flipped, they swap.
+   * Ignored without an image.
+   *
+   * ★★ A BOOLEAN, AND SHARED WITH `stack` — which is the only shape that gives the two layouts one
+   * key with one DEFAULT. They invert deliberately (split leads with the title, stack subordinates
+   * it), so any value that names a POSITION comes out opposite between them: content-first on one
+   * is content-last on the other. `false` means "this layout's own arrangement" on both, and that
+   * is the only thing they genuinely share — there is no word for "figure right" and "band top" at
+   * once. It replaced `flip`, which had no third value in prospect either.
+   *
+   * ⚠ IT IS RELATIVE, WHICH IS THE TRADE. `flip: true` said where the content went; `flip` says
+   * "the other way from the default", so reading a slide needs the default in hand — and reversing
+   * a layout's default would silently change every flipped slide. The defaults are doctrine and do
+   * not move, which is what makes that acceptable.
+   */
+  flip: { type: Boolean, default: false },
+});
+
+</script>
+
+<template>
+  <div
+    class="slidev-layout quote h-full"
+    :class="[image ? 'has-figure' : 'is-plain', flip ? 'is-right' : 'is-left']"
+  >
+    <div class="quote-content">
+      <div class="quote-mark" aria-hidden="true">“</div>
+      <div class="quote-body">
+        <slot />
+      </div>
+      <div v-if="attribution || source" class="quote-attribution">
+        <span v-if="attribution" class="quote-who">{{ attribution }}</span>
+        <span v-if="source" class="quote-source">{{ source }}</span>
+      </div>
+    </div>
+    <div v-if="image" class="quote-figure">
+      <img :src="assetUrl(image)" :alt="alt">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* The beat margin — see cover.vue's own note. Both edges, not just the left: the left-only version
+   this replaces rendered a 120px left margin against a 90px right one on every divider and closer,
+   with nothing in any file explaining the asymmetry. */
+.quote {
+  padding-left: var(--deck-inset-display);
+  padding-right: var(--deck-inset-display);
+  display: flex;
+  align-items: center;
+}
+/*
+  ★ TWO THIRDS FOR THE WORDS, ONE THIRD LEFT EMPTY. Without an image the quote is the only thing on
+  the slide, and letting it run the full column made a wall of 7xl type with nothing to sit against.
+  The blank third is not slack — it is what makes a lone quote read as placed rather than as
+  overflowing, and it is the same restraint the beat layouts get from their display inset.
+
+  A fraction of the CONTENT box, so it holds whatever the display inset is: 2/3 of 1680 = 1120,
+  with 560 left over. The paragraph's own measure cap comes off here — two rules capping one column
+  is how a block ends up narrower than either intended, and the column is now the measure.
+*/
+.quote.is-plain .quote-content { flex: 0 0 66.6667%; max-width: 66.6667%; }
+.quote.is-plain .quote-body { width: auto; }
+/*
+  ★ `pretty`, NOT `balance`, once the column is the measure. `balance` evens the lines out, which is
+  right for a heading and wrong here: given a 1120px column it returned four short lines about half
+  that wide, so the slide read as a third of quote and two thirds of blank — the opposite of what
+  the 2/3 rule was for. `pretty` fills the measure and only fixes the last-line orphan.
+
+  Kept as `balance` beside a figure, where the column is half a slide and short lines are the point.
+*/
+.quote.is-plain .quote-body :deep(p) { max-width: none; text-wrap: pretty; }
+.quote-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+/*
+  Two halves, and the ORDER is what `flip` moves — not a `direction` or a float. The figure is last
+  in the DOM so a screen reader hears the quote before the portrait of whoever said it, and `order`
+  puts it on the left visually without disturbing that.
+*/
+.quote.has-figure {
+  gap: var(--deck-inset-display);
+}
+.quote.has-figure .quote-content { flex: 1 1 0; min-width: 0; }
+.quote.has-figure .quote-figure { flex: 1 1 0; min-width: 0; }
+/* Content on the right puts the figure first. `order` rather than `direction` or a float, so
+   the DOM keeps the quote before the portrait of whoever said it for a screen reader. */
+.quote.has-figure.is-right .quote-figure { order: -1; }
+
+/* The figure keeps split's own treatment, so a portrait here and a portrait there are the same
+   picture: filled, corner-clipped, and cover-fitted rather than stretched. */
+.quote-figure {
+  align-self: stretch;
+  margin-top: var(--deck-inset-text);
+  margin-bottom: var(--deck-inset-text);
+  border-radius: var(--deck-radius-card);
+  overflow: hidden;
+  display: flex;
+}
+.quote-figure img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.quote-mark {
+  font-family: var(--font-display);
+  font-size: var(--type-deck-text-9xl);
+  line-height: 0.6;
+  color: var(--deck-accent);
+  margin-bottom: var(--deck-space-2);
+}
+/*
+  ★ THE BOX HUGS THE MEASURE. The cap lives on the paragraph — it has to, because `em` on this div
+  would resolve against its inherited body size rather than the quote's own 7xl — which left the
+  DIV spanning the full column while the words stopped at 17em. Harmless to look at, wrong to
+  inspect: every box in this deck is something a ruler or an audit can be pointed at, and one
+  claiming width it never uses reports a measure the slide does not have.
+
+  `fit-content` is min(max-content, available), which IS the paragraph's cap once the cap is set,
+  so the two cannot disagree.
+*/
+.quote-body {
+  width: fit-content;
+  max-width: 100%;
+}
+.quote-body :deep(p) {
+  font-family: var(--font-sans);
+  font-size: var(--type-deck-text-7xl);
+  line-height: 1.2;
+  font-weight: 400;
+  color: var(--deck-fg);
+  max-width: 17em; /* ≈34 characters of GT Haptik */
+  text-wrap: balance;
+}
+/* ★ Beside a figure the column IS the measure, so the 17em cap would apply a second time and hold
+   the quote to about half its own half. The cap above is a beat-layout cap — display type being
+   shaped into a two- or three-line block — which is why it survives base.css uncapping running
+   prose, and why it still has to be switched off where a column has already chosen the width. */
+/*
+  ★★ ONE STEP DOWN, NOT TWO, AND THE STEP IS THE COLUMN'S. A figure takes a third of the slide, so
+  the words get 780px where a plain quote gets 1120 — 70% of the measure. The size dropped from 7xl
+  to 5xl, which is 48px against 72: 67% of the type for 70% of the width, compounding a reduction
+  the column had already made. Measured side by side, the same voice read two sizes apart depending
+  on whether somebody was pictured saying it, which is not a distinction this layout means to draw.
+
+  6xl (60px) is the step the column actually asks for. The quote is still the loudest thing on the
+  slide and still sets in three lines; what goes away is the impression that a pictured quote is a
+  quieter one.
+*/
+.quote.has-figure .quote-body :deep(p) {
+  max-width: none;
+  font-size: var(--type-deck-text-6xl);
+}
+.quote-attribution {
+  display: flex;
+  align-items: baseline;
+  gap: var(--deck-space-2);
+  margin-top: var(--deck-space-5);
+}
+.quote-who {
+  font-size: var(--type-deck-label-size);
+  font-weight: var(--type-deck-label-weight);
+  color: var(--deck-fg);
+}
+.quote-source {
+  font-size: var(--type-deck-caption-size);
+  color: var(--deck-fg-muted);
+}
+</style>