@humanforest/slidev-theme 0.1.0

package/layouts/default.vue

@@ -0,0 +1,187 @@
+<script setup>
+/*
+  The workhorse. Adds one thing over a bare slide: the editorial kicker.
+
+  A content slide in the system's voice is eyebrow → shout → content, and making the eyebrow a
+  layout prop means an author gets that rhythm from frontmatter instead of remembering to write
+  an <hgroup>. Writing the hgroup by hand still works — base.css styles it — this is the short
+  form for the common case.
+*/
+defineProps({
+  /** Optional kicker rendered above the content, giving the eyebrow → shout → content rhythm from frontmatter instead of a hand-written hgroup. */
+  eyebrow: { type: String, default: '' },
+  /**
+   * Vertical position of the content: anchored to the top (default), centred in the frame, or
+   * `body-center` — the heading holds the top and everything under it centres in what is left.
+   *
+   * `body-center` is for a slide whose body is SHORT AND WIDE, where the other two both read as
+   * wrong: a wide diagram is a few hundred units tall on a 1080 canvas, so `start` leaves half the
+   * slide empty below it, and `center` pulls the heading down into the middle with it, losing the
+   * running rhythm every other content slide has. This keeps the heading where the eye expects it
+   * and centres only the part that has spare room around it.
+   */
+  align: { type: String, default: 'start', validator: (a) => ['start', 'center', 'body-center'].includes(a) },
+  /**
+   * Draws this slide on the DARK register — the deck's dark ground with light ink — by putting
+   * `deck-dark` on the layout root.
+   *
+   * ★★ THIS IS NOT SLIDEV'S DARK MODE, and the two must not be confused. Slidev has one:
+   * `colorSchema` in headmatter, toggling `html.dark` for the WHOLE deck as a viewer preference.
+   * This theme pins `colorSchema: 'light'` (package.json) and never toggles it, because a
+   * presentation's register is a design decision baked into the deck rather than something the
+   * audience picks — dark is punctuation here, not the ground. Slidev offers no per-slide
+   * colorSchema; its supported per-slide hook is `class:`, which is exactly what this writes.
+   *
+   * It replaces `class: 'deck-dark'` in frontmatter — same class, same element, said as a prop the
+   * layout documents instead of a raw class name an author had to know.
+   *
+   * ⚠ THE TWO DARKS DO INTERACT, and base.css records where: Slidev's own code stylesheet picks
+   * shiki's palette off `html.dark`, which stays LIGHT through a dark slide, so a code block on
+   * this register needs the theme's own override or it scores 2.43:1.
+   */
+  dark: { type: Boolean, default: false },
+  /**
+   * Takes the whole slide onto one of the four named backgrounds — the same table split's panel,
+   * stack's band and a Card read, so a full-field slide and a panel of the same name are the same
+   * colour by construction. `paper` (the default) leaves the deck's own ground.
+   *
+   * ★★ IT IS A GROUND, NOT A PANEL, AND THERE IS NO NOTCH. A panel notches so the running chrome
+   * can seat against the slide ground BESIDE it; at full field there is no ground left outside to
+   * seat into, which is why `split` and `stack` both switch their own notch off when `bleed` is
+   * true. The chrome lands ON this ground instead. Measured, the pill follows the register and
+   * clears the 3:1 a shape is held to on every one: light 3.55 vivid to 5.66 neutral, dark 3.55
+   * vivid to 8.51 accent.
+   *
+   * Composes with `dark`, which pins the pair's dark half exactly as it does on a panel.
+   */
+  background: {
+    type: String,
+    default: 'paper',
+    validator: (b) => ['paper', 'warm', 'accent', 'vivid', 'neutral'].includes(b),
+  },
+})
+</script>
+
+<template>
+  <div
+    class="slidev-layout default h-full"
+    :class="[
+      align === 'center' ? 'is-center' : '',
+      align === 'body-center' ? 'is-body-center' : '',
+      background !== 'paper' ? `bg-${background} deck-own-ground` : '',
+      dark ? 'deck-dark' : '',
+    ]"
+    :data-deck-distributes="align === 'center' || align === 'body-center' ? 'y' : undefined"
+  >
+    <!--
+    ★ `data-deck-distributes` IS FOR THE LAYOUT INSPECTOR, and it is declared here rather than
+    detected there. Both centred modes hand out their free space with AUTO MARGINS, so the gap they
+    open is leftover — whatever is left after the content — and can land on any number at all. The
+    inspector measures gaps against the spacing ladder and marks a miss as an off-ladder HAZARD,
+    which meant a working `body-center` slide reported a red band every time.
+    
+    Detecting it there is not possible: `getComputedStyle` resolves `margin-top: auto` to its USED
+    value in px, so an auto margin and a hardcoded one are indistinguishable after the fact. The
+    layout that creates the free space is the only thing that knows, so it says so — next to the
+    class whose rules do it, rather than in a list somewhere else that the next centred layout would
+    have to remember to join.
+    -->
+    <p v-if="eyebrow" class="deck-eyebrow">{{ eyebrow }}</p>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/*
+  task-14b-brief.md — Jose: "heading should start not at the border top I guess, but have some
+  breathing space." Only the top-anchored case (`align: 'start'`, the default, plain block flow)
+  actually has that problem — a slide is already at the standard --deck-inset-text (96px) from the
+  edge, but a heading's own cap-height sits right at the TOP of that padding with nothing further
+  above it, which reads as flush rather than as air. `is-center` below doesn't have this problem at
+  all (centred content already reads as deliberate), so this is scoped to `:not(.is-center)` rather
+  than applied to the layout unconditionally.
+
+  --deck-heading-top-space is one full grid unit (40px) ON TOP of the standard text inset — chosen
+  because it is a clean, already-meaningful number in this system (it is what the OLD chrome/media
+  inset used to be, before task-14b's 36px revision freed it up) rather than a fraction invented for
+  this one rule, and because 40px reads as clearly MORE than the ambient inset rather than a marginal
+  nudge — total top padding on an ordinary content slide is 136px (96 + 40), about 13% of the 1080
+  canvas. Scoped here, not in base.css's shared `.slidev-layout` rule: applying it there would also
+  shift split.vue's figure escape maths and every centred beat layout's (cover/divider/statement/
+  quote/end) vertical centring asymmetrically, none of which have the flush-top problem this solves.
+*/
+.slidev-layout.default:not(.is-center) {
+  padding-top: calc(var(--deck-inset-text) + var(--deck-heading-top-space));
+}
+/* `align: 'start'` stays the plain block flow every existing slide already renders — only
+   'center' opts into a flex column, so today's decks are untouched. */
+.default.is-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+/*
+  `body-center` is a flex column too, but left at flex-start: the free space is handed out by the
+  auto margins in base.css rather than by justify-content, which is what lets the heading keep the
+  top while the rest centres beneath it.
+
+  ⚠ IT IS DELIBERATELY NOT `.is-center`. Three rules elsewhere key on `:not(.is-center)` — the
+  heading's top air, and two that clear the running chrome — and a `body-center` slide wants every
+  one of them, because its heading IS at the top. Sharing the class would have silently removed the
+  air this mode exists to keep.
+*/
+.default.is-body-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+/*
+  ★★ THE EYEBROW IS A RUNNING HEAD AND DOES NOT TRAVEL WITH THE CENTRED COLUMN.
+
+  It is a sibling of the slot, so `justify-content: center` centred the two together and the kicker
+  moved with whatever the slide happened to hold. MEASURED on apps/deck's type-ramp pages,
+  which are the case that found this: the eyebrow landed at y 263, 203 and 251 on three consecutive
+  pages of one catalogue section. A running head that jumps 60px page to page is worse than none,
+  because the eye tracks it.
+
+  ★ IN FLOW, NOT PINNED, and that is the whole design of this rule. The obvious fix is
+  `position: absolute` on the eyebrow — and deckNotch.static.test.ts rejects it, correctly: all four
+  corners belong to the running chrome when it shows, so a layout that parks a box in one has to ask
+  `chromeShows()` first. This box does not want a corner at all; it wants the top of the flow with
+  the rest centred beneath it. Flexbox does exactly that with auto margins, which absorb the free
+  space before `justify-content` gets any: the first slot child takes it above, the last takes it
+  below, and the eyebrow keeps its natural place at the top. No absolute positioning, no corner, no
+  question to ask, and the eyebrow's own height is reserved because it never leaves the flow.
+
+  The extra air matches a top-anchored slide's: --deck-heading-top-space on the eyebrow itself
+  rather than on the layout's padding, so the running head sits on the same line either way.
+
+  ⚠ THE AUTO MARGINS THEMSELVES LIVE IN base.css, NOT HERE, and that is not tidiness — a scoped rule
+  cannot reach them. `<style scoped>` stamps this component's own elements with a data attribute and
+  the slot content comes from the slide's markdown, which carries none, so
+  `.deck-eyebrow + *` compiled to a selector matching nothing and the first rung kept
+  `margin-top: 0`. Measured that way first: the eyebrow still wandered, 159 then 123. base.css is
+  where every other rule that reaches into a layout's slot already lives. Search `is-center` there.
+*/
+.default.is-center > .deck-eyebrow {
+  margin-top: var(--deck-heading-top-space);
+}
+
+/* ── The full-field ground ─────────────────────────────────────────────────────────────────────
+   The FOLLOWING pair, so `dark` on the root re-points both halves — the same rule a panel, a band
+   and a Card run on, off the same table. Nothing here changes the layout: the content keeps the
+   text inset and the working voice, because this is the workhorse on a colour rather than a beat
+   slide. `divider` is the beat slide, and it re-sets the type as well as the ground.
+
+   The root also takes `deck-own-ground`, which `divider` does not need and this does: a divider
+   holds a title and a rule, and an author will write a bulleted LIST on here. base.css keys the
+   bullet and marker protection off that one class — without it a list on a saturated field paints
+   its markers in --deck-accent, which is the 1.00:1 defect that rule exists for. */
+.default.bg-warm    { background: var(--deck-bg-warm);    color: var(--deck-on-bg-warm); }
+.default.bg-accent  { background: var(--deck-bg-accent);  color: var(--deck-on-bg-accent); }
+.default.bg-vivid   { background: var(--deck-bg-vivid);   color: var(--deck-on-bg-vivid); }
+.default.bg-neutral { background: var(--deck-bg-neutral); color: var(--deck-on-bg-neutral); }
+/* The text tiers are handed back to the pair's ink in base.css, keyed on the background classes
+   rather than on this layout — see the note there. A scoped copy lived here and was one of four,
+   which is how the stack band came to paint a near-black heading on a brown panel. */
+</style>

package/layouts/divider.vue

@@ -0,0 +1,286 @@
+<script setup>
+/*
+  The divider — the deck's punctuation, and the one place a slide takes over the whole field.
+
+  ★★ ITS GROUND IS ITS RANK, NOT A COLOUR AN AUTHOR PICKS. `rank` says what the slide OPENS — a
+  section, a subsection, a topic — and the treatment follows from that: the ground, the headline
+  size and the rule all step down together, so a reader learns the ladder once and reads depth
+  everywhere. An author naming a colour per divider is choosing decoration where the deck wants
+  structure, and the specimen it produced proved the point: nine sections, nine different grounds,
+  none of them meaning anything.
+
+  ⚠ IT HAD `background` AND `dark` INSTEAD, the same four named pairs a panel takes. They came off
+  rather than being kept as an override, and the reason is a gate rather than a preference: this
+  theme requires an enum prop's default to be a member of its own enum, so there is no way to spell
+  "unset, take the rank's" — every value including the default would have to win over the rank, and
+  a lever that always wins is not an override. A one-off ground that is not a rank is a `default`
+  slide with a `background`, which is the layout that exists for exactly that.
+
+  ★★ THE LADDER, AND WHAT CARRIES IT. Each ground is one of the eight pairs the deck publishes, so
+  the ink is the one published against that fill — nothing here assembles a colour. Measured as how
+  far each departs from the deck's cream page:
+
+      section      --deck-bg-vivid   dark   #046c4c    6.1 : 1 against the page
+      subsection   --deck-bg-warm    light  #ffd6a6   1.30 : 1
+      topic        --deck-bg-accent  light  #cef5dd   1.13 : 1
+
+  ★★ ONE DARK CUT, THEN TWO PALE ONES, AND THAT SHAPE IS THE POINT. A section is the only rank that
+  takes the field — the deck's own green, the brand voice, a new part. Everything below it is a
+  pause inside something rather than the start of a thing, so neither takes the whole slide's
+  attention: the warm cut for a turn, the pale accent for the shallowest.
+
+  ⚠ WHICH MEANS WEIGHT SEPARATES THE SECTION AND ALMOST NOTHING ELSE. Subsection and topic sit at
+  1.30 and 1.13 against the page — a fifth of a step apart, which no room will read as a ranking.
+  What tells THOSE two apart is HUE (warm against the accent's mint) and the TYPE, 72px against
+  60px. So the headline tier and the rule are load-bearing rather than decorative here: drop them
+  and the two lower ranks become the same slide in slightly different paint.
+
+  Every pair clears 3:1 for the headline and the rule at 0.6 (measured; the tightest is vivid-dark's
+  rule at 3.31).
+
+  ★ AND THE TYPE STEPS WITH IT, so the rank survives a greyscale print and a reader who is not
+  looking at the ground. The headline drops a tier per rank, in tokens, so the ladder moves when the
+  scale does.
+
+  The rule is the ink, dimmed — currentColor, not a second token — so a background can never
+  assemble an ink that was not published against its fill.
+
+  ── WHAT EACH RANK MAY CARRY ────────────────────────────────────────────────────────────────────
+
+  ★★ THE RANK DECIDES THE CONTENT, NOT ONLY THE PAINT, and that is what stops the three from being
+  one slide in three colours. A standfirst — the lead line under the title — is REQUIRED on a
+  section, OPTIONAL on a subsection and REFUSED on a topic:
+
+      section      title + standfirst      the reader is being asked to change subject
+      subsection   title + standfirst?     a turn inside something they are already in
+      topic        title                   a beat, not an orientation
+
+  The argument is the reader's, not the author's. A section break is the one moment someone can be
+  genuinely lost — a new part, possibly after a break — so it earns a sentence saying what the part
+  is FOR. A topic is a punctuation mark inside a thought they are already following, and a sentence
+  there would be answering a question nobody asked.
+
+  ⚠ IT ALSO CLOSES A GAP THIS LAYOUT HAD FROM THE START: `:deep(p)` and `:deep(h2)` were styled here
+  and drawn by NOTHING. Measured across both decks before this — 21 divider slides, not one carrying
+  anything but its heading. The tier existed, dimmed to 0.85, with no slide to prove it.
+
+  ★ Enforced where it can be: the specimen's own generator refuses a section divider with no
+  standfirst and a topic divider with one, and the same rule is gated over the written markdown in
+  frontmatter.static.test.ts. A layout cannot validate its own slot, so the gate is where it lands.
+
+  ⚠ IT CARRIED A KICKER NUMBER, `index`, AND IT WAS ANSWERING NOTHING. The claim for it was that a
+  section opener should say "part 03 of 09" and pair with the contents slide. It did not pair: the
+  contents lists SLIDE numbers — `4 · Type`, `10 · Colour` — while the divider showed a SECTION
+  ordinal, so the two numbers a reader sees for one section disagreed and neither led to the other.
+  What was left was a progress cue the room cannot act on, beside a running section pill and a slide
+  number that already answer "where am I". And below section rank it could only ever be a
+  placeholder: this deck has no 3.2, so every demo and subsection divider rendered a literal "00".
+*/
+import { computed, inject } from 'vue';
+import { injectionFrontmatter } from '@slidev/client/constants.ts';
+import { ICON_SLUGS } from '../components/iconSlugs';
+import { iconUrlOrFallback } from '../components/iconUrl';
+
+const props = defineProps({
+  /** What the slide opens — `section`, `subsection` or `topic`. It picks the ground, the headline
+   *  tier and the rule together, so depth is one decision rather than three. Not a colour: a
+   *  one-off ground belongs on a `default` slide with a `background`. */
+  rank: { type: String, default: 'section', validator: (v) => ['section', 'subsection', 'topic'].includes(v) },
+  /**
+   * The part's own mark, drawn above the rule — `<namespace>:<name>`, the same reference IconTile
+   * takes (`forest:bike`, `lucide:layers`). SECTION RANK ONLY: it is the identity of a part, and a
+   * subsection is not a new part. Ignored at the other ranks rather than refused, so changing a
+   * slide's rank never breaks it.
+   */
+  icon: {
+    type: String,
+    default: '',
+    validator: (v) => (import.meta.env.DEV ? v === '' || ICON_SLUGS.includes(v) : true),
+  },
+})
+
+/*
+  ★★ THE KICKER IS RANK-SHAPED — one slot, and what belongs in it changes with the rank, because the
+  three ranks answer three different questions for the reader:
+
+      section      an ICON            what this part is ABOUT — a new subject needs a face
+      subsection   the SECTION NAME   where you ARE — the subject holds, the angle changes
+      topic        nothing            a beat inside a thought already being followed
+
+  A subsection is the only rank with somewhere to point AT: the part enclosing it. A section has no
+  parent to name, and repeating its own title is not orientation. A topic sits close enough to the
+  thing it interrupts that the question does not arise.
+
+  ⚠ AND IT IS THE SLOT THE KICKER NUMBER USED TO SIT IN. That number came out because it lied — it
+  read as a section ordinal while the contents slide listed slide numbers, so the two disagreed and
+  neither led to the other. What replaces it is not a second number: an icon and a breadcrumb each
+  say something a reader cannot get anywhere else on the slide.
+*/
+const frontmatter = inject(injectionFrontmatter, {});
+/*
+  ★ THE PARENT COMES FROM `section`, WHICH IS ALREADY REQUIRED AND ALREADY MEANS THIS. Every divider
+  must declare the run it BELONGS to (frontmatter.static.test.ts) — for a section opener that is its
+  own title, for anything drawn INSIDE a section it is the enclosing one. So at subsection rank the
+  value IS the parent by construction, and there is no second key to keep in step.
+
+  Read through `injectionFrontmatter` rather than declared as a prop, because `section` is deck-wide
+  state section.js already owns: a second declaration here could disagree with it, and a layout prop
+  of that name would put it in the manifest as though a divider's section were a styling choice.
+*/
+const parent = computed(() => (props.rank === 'subsection' ? String(frontmatter?.section ?? '') : ''));
+const iconMask = computed(() => (props.rank === 'section' && props.icon ? `url("${iconUrlOrFallback(props.icon)}")` : ''));
+</script>
+
+<template>
+  <div
+    class="slidev-layout divider h-full flex flex-col justify-center"
+    :class="[`rank-${['section', 'subsection', 'topic'].includes(rank) ? rank : 'section'}`, rank === 'section' ? 'deck-dark' : '']"
+  >
+    <span
+      v-if="iconMask"
+      class="divider-icon"
+      :style="{ maskImage: iconMask, webkitMaskImage: iconMask }"
+      aria-hidden="true"
+    />
+    <div v-else-if="parent" class="divider-parent">{{ parent }}</div>
+    <div v-if="iconMask || parent" class="divider-rule" />
+    <slot />
+  </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. */
+.divider {
+  padding-left: var(--deck-inset-display);
+  padding-right: var(--deck-inset-display);
+}
+/* The FOLLOWING pair, so the `deck-dark` the template hands the ONE dark rank re-points both halves
+   here — the same rule a panel takes. Section is the only rank that takes a dark half now; the two
+   pale ones read on the light register like any other slide. */
+.divider.rank-section    { background: var(--deck-bg-vivid); color: var(--deck-on-bg-vivid); }
+.divider.rank-subsection { background: var(--deck-bg-warm);  color: var(--deck-on-bg-warm); }
+.divider.rank-topic      { background: var(--deck-bg-accent); color: var(--deck-on-bg-accent); }
+/* base.css gives h1/h2/p HARD colours at (0,2,0), which beat the inherited pair; every text tier on
+   a divider is the ink the background published, and nothing else. */
+.divider :deep(h1),
+.divider :deep(h2) {
+  color: currentColor;
+}
+.divider :deep(p) {
+  color: currentColor;
+  opacity: 0.85;
+}
+/* The divider is a beat slide — Mohr uppercase, not the layout-default working voice. */
+.divider :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);
+  line-height: 0.95;
+}
+/* One tier down per rank. The ladder is the point: a subsection that shouted as loudly as the
+   section above it would be telling the room they were the same thing. */
+.divider.rank-subsection :deep(h1) { font-size: var(--type-deck-text-7xl); }
+.divider.rank-topic      :deep(h1) { font-size: var(--type-deck-text-6xl); }
+/*
+  The standfirst — the lead role a cover's subtitle takes, not body copy, and `h1 + p` so it is the
+  line UNDER THE TITLE rather than any paragraph an author drops on the slide.
+
+  ★★ IT STEPS WITH THE RANK, BECAUSE THE RATIO IS WHAT MATTERS AND THE RATIO COLLAPSED. Written
+  first as one size for both, on the argument that the heading ladder already carried depth and a
+  second ladder would say the same thing twice. MEASURED on the render, that argument was wrong:
+
+      section      96 over 60   1.60
+      subsection   72 over 60   1.20
+
+  A standfirst is subordinate to the title it explains, and at 1.20 it is not — the sentence and
+  the heading read as two lines of similar weight, so the eye has no order to take them in. The
+  section's 1.60 is the relationship the pair wants, and the body role holds it at 72 over 48.
+
+  ★ A TOPIC CARRIES NO STANDFIRST AT ALL, which is what made the first argument look sound — there
+  are only two rungs to fill. It is still given a size, for the case the contract cannot reach: a
+  deck built on this theme elsewhere is not gated by this repo's tests, and an ungoverned paragraph
+  there would inherit the base 60 under a 60 heading, a ratio of 1.00.
+
+  The measure is the cover's own 20em — about forty characters of GT Haptik, a sentence rather than
+  a paragraph, and that cap is the point: a divider needing two lines of explanation is a slide.
+*/
+.divider :deep(h1 + p) {
+  margin-top: var(--deck-space-2);
+  font-size: var(--type-deck-subtitle-size);
+  line-height: var(--type-deck-subtitle-line-height);
+  max-width: 20em;
+  text-wrap: balance;
+}
+.divider.rank-subsection :deep(h1 + p) {
+  font-size: var(--type-deck-body-size);
+  line-height: var(--type-deck-body-line-height);
+}
+/*
+  ★ TOPIC HAS NO STANDFIRST, AND THIS IS WHAT HAPPENS IF ONE ARRIVES ANYWAY. The rank contract
+  refuses it and frontmatter.static.test.ts gates every divider in this repo — but that gate reads
+  the slides.md files HERE, and a deck built on this theme elsewhere is not one of them. Without a
+  case of its own such a paragraph would inherit the base 60px under a 60px heading: a ratio of
+  1.00, the collapse the subsection rule above exists to fix, only complete.
+
+  Sized rather than hidden, deliberately. Dropping an author's sentence with no explanation is the
+  worse failure of the two — the contract is stated in the prop docs and enforced where this theme
+  owns the deck; where it does not, the type still has to hold up. 60 over 36 is 1.67, which is the
+  section's own relationship.
+*/
+.divider.rank-topic :deep(h1 + p) {
+  font-size: var(--type-deck-body-sm-size);
+  line-height: var(--type-deck-body-sm-line-height);
+}
+/*
+  The mark, drawn as a CSS mask in the ink the ground published — the technique IconTile and Logo
+  both use, for the reason IconTile records: an `i-forest-*` utility only exists once UnoCSS has
+  seen the literal class in source, and an `icon` PROP means the string is assembled at runtime,
+  which the scanner never sees.
+
+  Sized against the type ramp rather than pinned, so the mark moves the day the ramp is retuned.
+*/
+.divider-icon {
+  display: block;
+  width: var(--type-deck-text-6xl);
+  height: var(--type-deck-text-6xl);
+  margin-bottom: var(--deck-space-2);
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+/* The breadcrumb takes the overline role — the deck's smallest, widest-tracked tier, which is what
+   a label above a title is everywhere else here. Dimmed like the rule, because it orients rather
+   than announces: the title is still the thing being read. */
+.divider-parent {
+  font-family: var(--font-sans);
+  font-size: var(--type-deck-overline-size);
+  font-weight: var(--type-deck-overline-weight);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.7;
+  margin-bottom: var(--deck-space-1);
+}
+/*
+  ★ THE RULE BELONGS TO THE KICKER, not to the slide — and not to the icon either, which was the
+  first attempt. It is a separator, so it is drawn exactly when there are two things to separate:
+  a mark or a breadcrumb above, the title below. A topic has neither, and over a bare heading the
+  rule was separating the title from nothing at all.
+*/
+.divider-rule {
+  width: var(--deck-space-7);
+  height: 6px;
+  margin-bottom: var(--deck-space-3);
+  /* The ink, dimmed — not an accent. The old dark tone painted this in --deck-accent, a hue on top
+     of a register; on a warm or neutral field that would be the one green thing on the slide. */
+  background: currentColor;
+  opacity: 0.6;
+}
+
+</style>