@refrakt-md/lumina 0.42.0 → 0.43.0

package/base.css

@@ -30,6 +30,7 @@
 @import "./styles/dimensions/metadata.css";
 @import "./styles/dimensions/density.css";
 @import "./styles/dimensions/sections.css";
+@import "./styles/dimensions/link.css";
 @import "./styles/dimensions/reading.css";
 @import "./styles/dimensions/state.css";
 @import "./styles/dimensions/media.css";

package/contracts/structures.json

@@ -640,36 +640,6 @@
 				}
 			}
 		},
-		"PageSection": {
-			"block": "page-section",
-			"root": ".rf-page-section",
-			"dataRune": "page-section",
-			"childOrder": [
-				"{content}"
-			],
-			"universalAxes": {
-				"axes": {
-					"tint": {
-						"selectors": [
-							".rf-page-section--tinted"
-						]
-					},
-					"bg": {
-						"selectors": [
-							".rf-page-section--has-bg"
-						]
-					}
-				},
-				"unavailable": {
-					"reading": "this rune declares no prose body",
-					"dropcap": "this rune declares no prose body",
-					"prominence": "this rune has no page-section header",
-					"content-place": "this rune declares no `content-place` modifier",
-					"cover": "this rune declares no `media-position` modifier, so it cannot enter cover mode",
-					"frame": "this rune declares neither a `frameTarget` nor a media section"
-				}
-			}
-		},
 		"TableOfContents": {
 			"block": "toc",
 			"root": ".rf-toc",
@@ -3003,6 +2973,36 @@
 				}
 			}
 		},
+		"Actions": {
+			"block": "actions",
+			"root": ".rf-actions",
+			"dataRune": "actions",
+			"childOrder": [
+				"{content}"
+			],
+			"universalAxes": {
+				"axes": {
+					"tint": {
+						"selectors": [
+							".rf-actions--tinted"
+						]
+					},
+					"bg": {
+						"selectors": [
+							".rf-actions--has-bg"
+						]
+					}
+				},
+				"unavailable": {
+					"reading": "this rune declares no prose body",
+					"dropcap": "this rune declares no prose body",
+					"prominence": "this rune has no page-section header",
+					"content-place": "this rune declares no `content-place` modifier",
+					"cover": "this rune declares no `media-position` modifier, so it cannot enter cover mode",
+					"frame": "this rune declares neither a `frameTarget` nor a media section"
+				}
+			}
+		},
 		"Section": {
 			"block": "section",
 			"root": ".rf-section",
@@ -3016,6 +3016,34 @@
 					"default": "start",
 					"classPattern": ".rf-section--{value}",
 					"dataAttribute": "data-align"
+				},
+				"media-position": {
+					"source": "meta",
+					"dataAttribute": "data-media-position"
+				},
+				"media-ratio": {
+					"source": "meta",
+					"dataAttribute": "data-media-ratio"
+				},
+				"valign": {
+					"source": "meta",
+					"dataAttribute": "data-valign"
+				},
+				"collapse": {
+					"source": "meta",
+					"dataAttribute": "data-collapse"
+				},
+				"content-place": {
+					"source": "meta",
+					"dataAttribute": "data-content-place"
+				},
+				"height": {
+					"source": "meta",
+					"dataAttribute": "data-height"
+				},
+				"aspect": {
+					"source": "meta",
+					"dataAttribute": "data-aspect"
 				}
 			},
 			"universalAxes": {
@@ -3025,18 +3053,14 @@
 							".rf-section--tinted"
 						]
 					},
+					"frame": {
+						"target": "[data-section=\"media\"]"
+					},
 					"bg": {
 						"selectors": [
 							".rf-section--has-bg"
 						]
 					}
-				},
-				"unavailable": {
-					"reading": "this rune declares no prose body",
-					"dropcap": "this rune declares no prose body",
-					"content-place": "this rune declares no `content-place` modifier",
-					"cover": "this rune declares no `media-position` modifier, so it cannot enter cover mode",
-					"frame": "this rune declares neither a `frameTarget` nor a media section"
 				}
 			},
 			"elements": {
@@ -3065,6 +3089,118 @@
 					"selector": ".rf-section__image",
 					"source": "autoLabel"
 				}
+			},
+			"inlineStyles": {
+				"valign": {
+					"prop": "--split-valign",
+					"transform": "align"
+				},
+				"aspect": "aspect-ratio"
+			},
+			"variants": {
+				"media-position": {
+					"cover": {
+						"block": "section",
+						"root": ".rf-section",
+						"dataRune": "section",
+						"childOrder": [
+							"{content}"
+						],
+						"modifiers": {
+							"align": {
+								"source": "meta",
+								"default": "start",
+								"classPattern": ".rf-section--{value}",
+								"dataAttribute": "data-align"
+							},
+							"media-position": {
+								"source": "meta",
+								"dataAttribute": "data-media-position"
+							},
+							"media-ratio": {
+								"source": "meta",
+								"dataAttribute": "data-media-ratio"
+							},
+							"valign": {
+								"source": "meta",
+								"dataAttribute": "data-valign"
+							},
+							"collapse": {
+								"source": "meta",
+								"dataAttribute": "data-collapse"
+							},
+							"content-place": {
+								"source": "meta",
+								"dataAttribute": "data-content-place"
+							},
+							"height": {
+								"source": "meta",
+								"dataAttribute": "data-height"
+							},
+							"aspect": {
+								"source": "meta",
+								"dataAttribute": "data-aspect"
+							}
+						},
+						"staticModifiers": [
+							{
+								"name": "cover",
+								"selector": ".rf-section--cover"
+							}
+						],
+						"universalAxes": {
+							"axes": {
+								"tint": {
+									"selectors": [
+										".rf-section--tinted"
+									]
+								},
+								"frame": {
+									"target": "[data-section=\"media\"]"
+								},
+								"bg": {
+									"selectors": [
+										".rf-section--has-bg"
+									]
+								}
+							}
+						},
+						"elements": {
+							"preamble": {
+								"tag": "header",
+								"selector": ".rf-section__preamble",
+								"source": "autoLabel"
+							},
+							"eyebrow": {
+								"tag": "eyebrow",
+								"selector": ".rf-section__eyebrow",
+								"source": "autoLabel"
+							},
+							"headline": {
+								"tag": "headline",
+								"selector": ".rf-section__headline",
+								"source": "autoLabel"
+							},
+							"blurb": {
+								"tag": "blurb",
+								"selector": ".rf-section__blurb",
+								"source": "autoLabel"
+							},
+							"image": {
+								"tag": "image",
+								"selector": ".rf-section__image",
+								"source": "autoLabel"
+							}
+						},
+						"inlineStyles": {
+							"valign": {
+								"prop": "--split-valign",
+								"transform": "align"
+							},
+							"aspect": "aspect-ratio"
+						}
+					}
+				}
 			}
 		},
 		"Juxtapose": {

package/index.css

@@ -38,6 +38,7 @@
 @import "./styles/dimensions/metadata.css";
 @import "./styles/dimensions/density.css";
 @import "./styles/dimensions/sections.css";
+@import "./styles/dimensions/link.css";
 @import "./styles/dimensions/reading.css";
 @import "./styles/dimensions/state.css";
 @import "./styles/dimensions/media.css";
@@ -57,6 +58,7 @@
 @import "./styles/runes/annotate.css";
 @import "./styles/runes/audio.css";
 @import "./styles/runes/api.css";
+@import "./styles/runes/actions.css";
 @import "./styles/runes/card.css";
 @import "./styles/runes/badge.css";
 @import "./styles/runes/bar.css";
@@ -105,7 +107,6 @@
 @import "./styles/runes/mockup.css";
 @import "./styles/runes/nav.css";
 @import "./styles/runes/organization.css";
-@import "./styles/runes/page-section.css";
 @import "./styles/runes/pagination.css";
 @import "./styles/runes/playlist.css";
 @import "./styles/runes/plot.css";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -86,10 +86,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.42.0",
-    "@refrakt-md/skeleton": "0.42.0",
-    "@refrakt-md/transform": "0.42.0",
-    "@refrakt-md/types": "0.42.0"
+    "@refrakt-md/runes": "0.43.0",
+    "@refrakt-md/skeleton": "0.43.0",
+    "@refrakt-md/transform": "0.43.0",
+    "@refrakt-md/types": "0.43.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/link.css

@@ -0,0 +1,21 @@
+@layer skin {
+	/* link — skin (SPEC-160 D8, WORK-655). A wrapped region reads as its content,
+ * not as link text; both forms show where focus is, since a stretched link is
+ * now reachable by keyboard. Positioning is structure, in @refrakt-md/skeleton
+ * (styles/dimensions/link.css). */
+	a[data-link="wrap"],
+	a[data-link="wrap"]:hover {
+		color: inherit;
+		text-decoration: none;
+	}
+	a[data-link]:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+		border-radius: inherit;
+	}
+	/* A stretched link fills its host, which may clip (`card`'s overflow), so its
+ * ring is drawn inside the box rather than around it. */
+	a[data-link="stretch"]:focus-visible {
+		outline-offset: -3px;
+	}
+}

package/styles/dimensions/sections.css

@@ -1,6 +1,6 @@
 @layer skin {
 	/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
- * Zone rhythm (margins, gaps, padding), typography, and borders for the 6
+ * Zone rhythm (margins, gaps, padding), typography, and borders for the
  * standard section roles. The flex zone *containers* (header / preamble /
  * footer) live in @refrakt-md/skeleton (dimensions/sections.css). Rhythm stays
  * here so rune zone overrides resolve against it by source order.
@@ -17,6 +17,39 @@
 		gap: 0.25rem;
 	}
 
+	/* ─── Eyebrow: a kicker above the title (WORK-656) ───────────────── */
+	/* Shared by every rune with an eyebrow; a rune sets only its spacing (and
+ * `card` a smaller size). An eyebrow holding a link is a pill whose link
+ * covers it; the stretched link itself is structure (skeleton). */
+	[data-section="eyebrow"] {
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-semibold);
+		letter-spacing: var(--rf-tracking-wider);
+		text-transform: uppercase;
+		color: var(--rf-color-primary);
+	}
+	[data-section="eyebrow"]:has(a) {
+		padding: 0.25rem 0.875rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-full);
+		color: var(--rf-color-text);
+		font-weight: var(--rf-weight-normal);
+		text-transform: none;
+		letter-spacing: var(--rf-tracking-normal);
+		transition: border-color 150ms ease;
+	}
+	[data-section="eyebrow"]:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	[data-section="eyebrow"]:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	[data-section="eyebrow"]:has(a) a::before {
+		border-radius: inherit;
+	}
+
 	/* ─── Title: primary heading ──────────────────────────────────────── */
 	/* Two inputs, in priority order:
  *   --rf-prominence-size  an explicit author `prominence=` (surfaces.css)

package/styles/runes/accordion.css

@@ -7,34 +7,8 @@
 		margin-bottom: 1.5rem;
 	}
 	.rf-accordion__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-accordion__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-accordion__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-accordion__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-accordion__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-accordion__headline {
 		margin-top: 0;
 	}

package/styles/runes/actions.css

@@ -0,0 +1,65 @@
+@layer skin {
+	/* actions — skin (SPEC-160 D6). Buttons styled by rank (`data-rank`), not by
+ * list position. Size comes from custom properties a host may set
+ * (`--action-padding`, `--action-font-size`); the defaults are cta's. The
+ * row, the button shape and the mobile stack are structure, in
+ * @refrakt-md/skeleton (styles/runes/actions.css). */
+	.rf-actions,
+	.rf-actions__list {
+		gap: 0.75rem;
+	}
+	.rf-actions__list {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-actions__action {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-actions__action > a {
+		padding: var(--action-padding, 0.625rem 1.5rem);
+		border-radius: var(--rf-radius-sm);
+		text-decoration: none;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--action-font-size, var(--rf-text-sm));
+		transition: all 200ms ease;
+	}
+	/* The primary action's text follows the colour scheme, so it stays legible in
+ * dark mode and over a cover scrim, where `--rf-color-primary` flips. */
+	.rf-actions__action[data-rank="primary"] > a {
+		background: var(--rf-color-primary);
+		color: var(--rf-color-on-primary);
+		box-shadow: var(--rf-shadow-sm);
+	}
+	.rf-actions__action[data-rank="primary"] > a:hover {
+		background: var(--rf-color-primary-hover);
+		box-shadow: var(--rf-shadow-md);
+		transform: translateY(-1px);
+		text-decoration: none;
+	}
+	.rf-actions__action[data-rank="secondary"] > a {
+		background: var(--rf-color-surface);
+		color: var(--rf-color-text);
+		border: 1px solid var(--rf-color-border);
+	}
+	.rf-actions__action[data-rank="secondary"] > a:hover {
+		background: var(--rf-color-surface-hover);
+		border-color: var(--rf-color-surface-active);
+		text-decoration: none;
+	}
+	/* A command line sits in the row at a button's height, without the margin a
+ * code block takes in prose. */
+	.rf-actions__command .rf-codeblock {
+		margin: 0;
+	}
+	.rf-actions__command pre {
+		margin: 0;
+		padding: var(--action-padding, 0.625rem 1.5rem);
+		font-size: var(--action-font-size, var(--rf-text-sm));
+		border-radius: var(--rf-radius-sm);
+		background: var(--rf-color-code-bg);
+		color: var(--rf-color-code-text);
+		border: 1px solid var(--rf-color-border);
+		white-space: nowrap;
+	}
+}

package/styles/runes/bento.css

@@ -1,8 +1,8 @@
 @layer skin {
 	/* Bento — skin. A grid of cells, each a card-in-a-grid-track (SPEC-085). The
  * container-query grid system, cell flex layout, media placement, sizing knobs,
- * collapse queries, and the stretched link live in @refrakt-md/skeleton
- * (styles/runes/bento.css). What remains here is skin: the grid gap, the cell
+ * and collapse queries live in @refrakt-md/skeleton (styles/runes/bento.css),
+ * and the stretched `href` link in its dimensions/link.css. What remains here is skin: the grid gap, the cell
  * surface chrome + spacing vars, the media-well chrome, type, and bleed resets. */
 
 	.rf-bento__grid {

package/styles/runes/card.css

@@ -66,14 +66,11 @@
 		margin-bottom: 0;
 	}
 
-	/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
- * treatment as page-section / recipe. */
+	/* Eyebrow — a leading paragraph immediately before a heading. Its type and its
+ * linked pill are the sections dimension's (`[data-section="eyebrow"]`); a card
+ * sets it one step smaller. */
 	.rf-card__eyebrow {
 		font-size: var(--rf-text-xs);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 var(--rf-spacing-xs);
 	}
 

package/styles/runes/cta.css

@@ -16,37 +16,13 @@
 		gap: 0.25rem;
 		margin-bottom: 1.5rem;
 	}
-	/* Higher specificity needed to override .rf-cta p (0,1,1) */
+	/* The eyebrow's type and its linked pill are the sections dimension's
+ * (`[data-section="eyebrow"]`); the cta sets only its spacing. */
 	.rf-cta .rf-cta__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.75rem;
 		max-width: none;
-	}
-	/* Pill-badge variant when eyebrow contains a link */
-	.rf-cta .rf-cta__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-cta .rf-cta__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-cta .rf-cta__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-cta .rf-cta__eyebrow:has(a) a::before {
-		border-radius: inherit;
+		/* What it inherited from `.rf-cta p` before it was excluded from it. */
+		line-height: var(--rf-leading-relaxed);
 	}
 	.rf-cta__image {
 		margin-bottom: 1.5rem;
@@ -70,7 +46,8 @@
 		background-clip: text;
 	}
 	/* Higher specificity needed to override .rf-cta p (0,1,1) */
-	.rf-cta p,
+	/* The eyebrow is a paragraph too; it is left to the sections dimension. */
+	.rf-cta p:not([data-section="eyebrow"]),
 	.rf-cta .rf-cta__blurb {
 		font-size: var(--rf-text-lg);
 		color: var(--rf-color-muted);
@@ -78,45 +55,8 @@
 		margin: 0 auto 2rem;
 		line-height: var(--rf-leading-relaxed);
 	}
-	.rf-cta ul {
-		gap: 0.75rem;
-		padding: 0;
-		margin: 0;
-	}
-	.rf-cta li {
-		padding: 0;
-		margin: 0;
-	}
-	.rf-cta li a,
-	.rf-cta nav a {
-		padding: 0.625rem 1.5rem;
-		border-radius: var(--rf-radius-sm);
-		text-decoration: none;
-		font-weight: var(--rf-weight-semibold);
-		font-size: var(--rf-text-sm);
-		transition: all 200ms ease;
-	}
-	.rf-cta li:first-child a {
-		background: var(--rf-color-primary);
-		color: white;
-		box-shadow: var(--rf-shadow-sm);
-	}
-	.rf-cta li:first-child a:hover {
-		background: var(--rf-color-primary-hover);
-		box-shadow: var(--rf-shadow-md);
-		transform: translateY(-1px);
-		text-decoration: none;
-	}
-	.rf-cta li:not(:first-child) a {
-		background: var(--rf-color-surface);
-		color: var(--rf-color-text);
-		border: 1px solid var(--rf-color-border);
-	}
-	.rf-cta li:not(:first-child) a:hover {
-		background: var(--rf-color-surface-hover);
-		border-color: var(--rf-color-surface-active);
-		text-decoration: none;
-	}
+	/* The actions row is the `actions` rune's (styles/runes/actions.css), whose
+ * default size is the cta's own. */
 
 	/* Context-aware: CTA inside a hero gets more vertical space */
 	.rf-cta--in-hero {

package/styles/runes/feature.css

@@ -10,34 +10,8 @@
 		margin-bottom: 1.5rem;
 	}
 	.rf-feature__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-feature__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-feature__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-feature__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-feature__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-feature__headline {
 		margin-top: 0;
 	}

package/styles/runes/hero.css

@@ -19,44 +19,23 @@
 		gap: 0.25rem;
 		margin-bottom: 2rem;
 	}
-	/* Higher specificity needed to override .rf-hero p (0,1,1) */
+	/* The eyebrow's type and its linked pill are the sections dimension's
+ * (`[data-section="eyebrow"]`); the hero sets only its spacing. */
 	.rf-hero .rf-hero__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 1rem;
 		max-width: none;
-	}
-	/* Pill-badge variant when eyebrow contains a link */
-	.rf-hero .rf-hero__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-hero .rf-hero__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-hero .rf-hero__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-hero .rf-hero__eyebrow:has(a) a::before {
-		border-radius: inherit;
+		/* What it inherited from `.rf-hero p` before it was excluded from it. */
+		line-height: var(--rf-leading-relaxed);
 	}
 	.rf-hero__image {
 		margin-bottom: 1.5rem;
 	}
+	/* The actions row is the `actions` rune's (styles/runes/actions.css); the hero
+ * sets only its width and the size of its buttons and command line. */
 	.rf-hero__actions {
+		--action-padding: 0.7rem 1.75rem;
+		--action-font-size: var(--rf-text);
 		max-width: 720px;
-		gap: 0.75rem;
 	}
 	.rf-hero[data-align="center"] .rf-hero__preamble,
 	.rf-hero[data-align="center"] > h1,
@@ -73,16 +52,6 @@
 	.rf-hero[data-align="right"] > p {
 		text-align: right;
 	}
-	.rf-hero__actions pre {
-		margin: 0;
-		padding: 0.7rem 1.75rem;
-		font-size: var(--rf-text);
-		border-radius: var(--rf-radius-sm);
-		background: var(--rf-color-code-bg);
-		color: var(--rf-color-code-text);
-		border: 1px solid var(--rf-color-border);
-		white-space: nowrap;
-	}
 	.rf-hero h1,
 	.rf-hero__headline {
 		/* WORK-538 — read the prominence override first; the fallback is this rune's
@@ -99,7 +68,8 @@
 		background-clip: text;
 	}
 	/* Higher specificity needed to override .rf-hero p (0,1,1) */
-	.rf-hero p,
+	/* The eyebrow is a paragraph too; it is left to the sections dimension. */
+	.rf-hero p:not([data-section="eyebrow"]),
 	.rf-hero .rf-hero__blurb {
 		font-size: var(--rf-text-xl);
 		line-height: var(--rf-leading-relaxed);
@@ -112,46 +82,6 @@
 		max-width: 560px;
 		margin-bottom: 2rem;
 	}
-	.rf-hero ul,
-	.rf-hero nav {
-		gap: 0.75rem;
-		padding: 0;
-		margin: 0;
-	}
-	.rf-hero li {
-		padding: 0;
-		margin: 0;
-	}
-	.rf-hero li a,
-	.rf-hero nav a {
-		padding: 0.7rem 1.75rem;
-		border-radius: var(--rf-radius-sm);
-		text-decoration: none;
-		font-weight: var(--rf-weight-semibold);
-		font-size: var(--rf-text);
-		transition: all 200ms ease;
-	}
-	.rf-hero li:first-child a {
-		background: var(--rf-color-primary);
-		color: white;
-		box-shadow: var(--rf-shadow-sm);
-	}
-	.rf-hero li:first-child a:hover {
-		background: var(--rf-color-primary-hover);
-		box-shadow: var(--rf-shadow-md);
-		transform: translateY(-1px);
-		text-decoration: none;
-	}
-	.rf-hero li:not(:first-child) a {
-		background: var(--rf-color-surface);
-		color: var(--rf-color-text);
-		border: 1px solid var(--rf-color-border);
-	}
-	.rf-hero li:not(:first-child) a:hover {
-		background: var(--rf-color-surface-hover);
-		border-color: var(--rf-color-surface-active);
-		text-decoration: none;
-	}
 	.rf-hero__media {
 		margin-top: 3rem;
 		border-radius: var(--rf-radius-lg);
@@ -190,13 +120,6 @@
 		border-radius: 0;
 	}
 
-	/* Legibility over the scrim: the primary action hard-codes white text above,
- * which inverts to white-on-near-white once the cover scheme flips
- * --rf-color-primary on the dark overlay. Use the scheme's tokens instead. */
-	.rf-hero--cover li:first-child a {
-		color: var(--rf-color-on-accent, var(--rf-color-bg));
-	}
-
 	/* The default cover scrim is edge-weighted (a caption-strip treatment); under
  * the centred band it would leave the headline on undarkened media. With no
  * explicit `content-place`, darken the well evenly (slightly bottom-weighted). */

package/styles/runes/pricing.css

@@ -15,34 +15,8 @@
 		margin-top: 0;
 	}
 	.rf-pricing__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-pricing__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-pricing__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-pricing__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-pricing__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-pricing__blurb {
 		color: var(--rf-color-muted);
 		margin-bottom: 0;

package/styles/runes/reveal.css

@@ -6,34 +6,8 @@
 		margin-bottom: 1.5rem;
 	}
 	.rf-reveal__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-reveal__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-reveal__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-reveal__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-reveal__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-reveal__headline {
 		margin-top: 0;
 	}

package/styles/runes/section.css

@@ -6,6 +6,23 @@
 		gap: 1.5rem;
 	}
 
+	/* With a split, the content column keeps the header-to-body rhythm. */
+	.rf-section__content {
+		gap: 1.5rem;
+	}
+	.rf-section__footer {
+		padding-top: var(--rf-spacing-sm);
+		border-top: 1px solid var(--rf-color-border);
+		font-size: 0.8125em;
+		color: var(--rf-color-muted);
+	}
+	.rf-section__footer > :first-child {
+		margin-top: 0;
+	}
+	.rf-section__footer > :last-child {
+		margin-bottom: 0;
+	}
+
 	/* Header */
 	.rf-section__preamble {
 		gap: 0.5rem;
@@ -13,34 +30,8 @@
 		margin: 0;
 	}
 	.rf-section__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0;
 	}
-	.rf-section__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-section__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-section__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-section__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-section__headline {
 		margin: 0;
 	}

package/styles/runes/steps.css

@@ -6,34 +6,8 @@
 		margin-bottom: 1.5rem;
 	}
 	.rf-steps__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-steps__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-steps__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-steps__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-steps__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-steps__headline {
 		margin-top: 0;
 	}

package/styles/runes/tabs.css

@@ -5,34 +5,8 @@
 		margin-bottom: 1.5rem;
 	}
 	.rf-tabs__eyebrow {
-		font-size: var(--rf-text-sm);
-		font-weight: var(--rf-weight-semibold);
-		letter-spacing: var(--rf-tracking-wider);
-		text-transform: uppercase;
-		color: var(--rf-color-primary);
 		margin: 0 0 0.5rem;
 	}
-	.rf-tabs__eyebrow:has(a) {
-		padding: 0.25rem 0.875rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-full);
-		color: var(--rf-color-text);
-		font-weight: var(--rf-weight-normal);
-		text-transform: none;
-		letter-spacing: var(--rf-tracking-normal);
-		transition: border-color 150ms ease;
-	}
-	.rf-tabs__eyebrow:has(a):hover {
-		border-color: var(--rf-color-muted);
-	}
-	.rf-tabs__eyebrow:has(a) a {
-		color: var(--rf-color-primary);
-		font-weight: var(--rf-weight-semibold);
-		text-decoration: none;
-	}
-	.rf-tabs__eyebrow:has(a) a::before {
-		border-radius: inherit;
-	}
 	.rf-tabs__headline {
 		margin-top: 0;
 	}

package/styles/runes/page-section.css

@@ -1,19 +0,0 @@
-@layer skin {
-	/* PageSection */
-	.rf-page-section {
-		padding: 3rem 0;
-	}
-	.rf-page-section > h1:first-child,
-	.rf-page-section > h2:first-child {
-		margin-top: 0;
-	}
-	.rf-page-section--split {
-		gap: 3rem;
-	}
-
-	@media (max-width: 768px) {
-		.rf-page-section--split {
-			gap: 1.5rem;
-		}
-	}
-}