@refrakt-md/lumina 0.44.0 → 0.45.0

package/contracts/structures.json

@@ -160,7 +160,8 @@
 				"quiet",
 				"normal",
 				"prominent",
-				"display"
+				"display",
+				"marquee"
 			],
 			"dataAttributes": [
 				"data-prominence"
@@ -7671,7 +7672,7 @@
 						"scope": "child"
 					},
 					{
-						"source": "track-artist",
+						"source": "artist",
 						"property": "byArtist",
 						"kind": "property",
 						"entity": "track",
@@ -7685,7 +7686,7 @@
 						"scope": "child"
 					},
 					{
-						"source": "track-meta",
+						"source": "date",
 						"property": "datePublished",
 						"kind": "property",
 						"entity": "track",
@@ -7725,8 +7726,30 @@
 			"dataRune": "track",
 			"parent": "Playlist",
 			"childOrder": [
+				"ordinal",
+				"track-name",
+				"details",
 				"{content}"
 			],
+			"modifiers": {
+				"meta": {
+					"source": "meta",
+					"default": "row",
+					"dataAttribute": "data-meta"
+				},
+				"artist": {
+					"source": "meta",
+					"dataAttribute": "data-artist"
+				},
+				"duration": {
+					"source": "meta",
+					"dataAttribute": "data-duration"
+				},
+				"date": {
+					"source": "meta",
+					"dataAttribute": "data-date"
+				}
+			},
 			"universalAxes": {
 				"axes": {
 					"tint": {
@@ -7752,6 +7775,100 @@
 					"frame": "this rune declares neither a `frameTarget` nor a media section"
 				}
 			},
+			"elements": {
+				"details": {
+					"tag": "div",
+					"selector": ".rf-track__details",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"artist",
+						"duration",
+						"date"
+					]
+				}
+			},
+			"variants": {
+				"meta": {
+					"byline": {
+						"block": "track",
+						"root": ".rf-track",
+						"dataRune": "track",
+						"parent": "Playlist",
+						"childOrder": [
+							"ordinal",
+							"heading",
+							"{content}"
+						],
+						"modifiers": {
+							"meta": {
+								"source": "meta",
+								"default": "row",
+								"dataAttribute": "data-meta"
+							},
+							"artist": {
+								"source": "meta",
+								"dataAttribute": "data-artist"
+							},
+							"duration": {
+								"source": "meta",
+								"dataAttribute": "data-duration"
+							},
+							"date": {
+								"source": "meta",
+								"dataAttribute": "data-date"
+							}
+						},
+						"universalAxes": {
+							"axes": {
+								"tint": {
+									"selectors": [
+										".rf-track--tinted"
+									]
+								},
+								"elevation": {
+									"default": "flat"
+								},
+								"bg": {
+									"selectors": [
+										".rf-track--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"
+							}
+						},
+						"elements": {
+							"details": {
+								"tag": "div",
+								"selector": ".rf-track__details",
+								"source": "block",
+								"layout": "bar",
+								"fields": [
+									"artist",
+									"date",
+									"duration"
+								]
+							},
+							"heading": {
+								"tag": "div",
+								"selector": ".rf-track__heading",
+								"source": "layout",
+								"children": [
+									"track-name",
+									"details"
+								]
+							}
+						}
+					}
+				}
+			},
 			"schemaOrg": {
 				"type": "MusicRecording",
 				"by": "type",
@@ -7777,7 +7894,7 @@
 						"kind": "property"
 					},
 					{
-						"source": "datePublished",
+						"source": "date",
 						"property": "datePublished",
 						"kind": "property"
 					},

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.44.0",
+  "version": "0.45.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -86,10 +86,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.44.0",
-    "@refrakt-md/skeleton": "0.44.0",
-    "@refrakt-md/transform": "0.44.0",
-    "@refrakt-md/types": "0.44.0"
+    "@refrakt-md/runes": "0.45.0",
+    "@refrakt-md/skeleton": "0.45.0",
+    "@refrakt-md/transform": "0.45.0",
+    "@refrakt-md/types": "0.45.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/density.css

@@ -45,6 +45,12 @@
  * `data-density` and `data-prominence` still keeps its own. */
 	[data-density] {
 		--rf-prominence-size: initial;
+		--rf-prominence-blurb-size: initial;
+		--rf-prominence-header-scale: initial;
+		--rf-prominence-band-padding: initial;
+		--rf-prominence-title-gradient: initial;
+		--rf-prominence-header-measure: initial;
+		--rf-prominence-blurb-measure: initial;
 	}
 
 	[data-density="minimal"] [data-section="description"] {

package/styles/dimensions/metadata.css

@@ -90,8 +90,11 @@
 	/* ─── Layout: lead — emphasis ──────────────────────────────────────── */
 	/* The column is structure (skeleton); the lead's weight and the secondary
 	 * values' size and colour are skin. */
+	/* A byline is fine print: the whole block is set small, the lead
+	 * distinguished by weight and colour, as a testimonial's always was. */
 	[data-zone-layout="lead"] {
 		gap: 0.125rem;
+		font-size: var(--rf-text-sm);
 	}
 
 	/* Emphasised by weight alone: a lead is often a `<cite>`, whose italic would
@@ -103,7 +106,6 @@
 	}
 
 	[data-zone-layout="lead"] > :not([data-lead]) {
-		font-size: var(--rf-text-sm);
 		color: var(--rf-color-muted);
 	}
 

package/styles/dimensions/sections.css

@@ -65,11 +65,28 @@
 		line-height: var(--rf-leading-tight);
 		color: var(--rf-color-text);
 		margin: 0;
+		/* SPEC-183 D4 — a step that turns the gradient on sets
+	 * --rf-prominence-title-gradient to nothing, so these read as written;
+	 * unset (or cleared at a rune root), the var() is invalid and each property
+	 * falls back to its initial value: no image, no clip, the title's colour.
+	 * Built here, from the title's own colours. */
+		background-image: var(--rf-prominence-title-gradient)
+			linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
+		-webkit-background-clip: var(--rf-prominence-title-gradient) text;
+		background-clip: var(--rf-prominence-title-gradient) text;
+		-webkit-text-fill-color: var(--rf-prominence-title-gradient) transparent;
+	}
+	@media (forced-colors: active) {
+		[data-section="title"] {
+			background-image: none;
+			-webkit-text-fill-color: currentColor;
+		}
 	}
 
 	/* ─── Description: secondary text ─────────────────────────────────── */
 	[data-section="description"] {
-		font-size: var(--rf-text);
+		font-size: var(--rf-prominence-blurb-size, var(--rf-text));
+		max-width: var(--rf-prominence-blurb-measure, none);
 		line-height: var(--rf-leading-normal);
 		color: var(--rf-color-muted);
 		margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);

package/styles/dimensions/sequence.css

@@ -1,12 +1,12 @@
 @layer skin {
 	/* === Sequential Items — skin ===
  * The connector lines (borders), the marker chrome (fill, radius, shadow), the
- * counter type, and the layout gaps. The counter mechanism, list resets, item
+ * ordinal's type, and the layout gaps. The list resets, item
  * geometry, and marker box placement live in @refrakt-md/skeleton
  * (dimensions/sequence.css). */
 
-	/* Numbered — counter circle chrome + type. */
-	[data-sequence="numbered"] > li::before {
+	/* Numbered — the ordinal's circle chrome + type (WORK-583). */
+	[data-sequence="numbered"] > li > [data-name="ordinal"] {
 		font-size: var(--rf-text-xs);
 		font-weight: var(--rf-weight-bold);
 		font-variant-numeric: tabular-nums;
@@ -19,6 +19,24 @@
 		border-top: 1px solid var(--rf-color-border);
 	}
 
+	/* A numbered ladder's step (SPEC-156 D3): a composition's steps take the
+	 * rhythm the native howto, recipe and steps give theirs — the item padded,
+	 * its title flush with the ordinal, its text set small. */
+	[data-zone-layout="ladder"][data-sequence="numbered"] {
+		margin: 0;
+	}
+	[data-zone-layout="ladder"][data-sequence="numbered"] > li {
+		padding-block: 0.625rem;
+	}
+	[data-zone-layout="ladder"][data-sequence="numbered"] > li > :is(h1, h2, h3, h4, h5, h6) {
+		margin-top: 0;
+		margin-bottom: 0.375rem;
+	}
+	[data-zone-layout="ladder"][data-sequence="numbered"] > li p {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+
 	/* Connected vertical — the line is a left border; the dot is the marker. */
 	[data-sequence="connected"] > li {
 		border-left: 2px solid var(--rf-color-border);
@@ -52,7 +70,7 @@
 	/* === Density interaction === */
 
 	/* Compact: smaller circle keeps the same type scale. */
-	[data-density="compact"] [data-sequence="numbered"] > li::before {
+	[data-density="compact"] [data-sequence="numbered"] > li > [data-name="ordinal"] {
 		font-size: var(--rf-text-xs);
 	}
 

package/styles/dimensions/surfaces.css

@@ -83,7 +83,7 @@
  * --rune-padding). Replaces the old inline/banner padding buckets; banner runes
  * that want a more generous band declare their own `padding-block`. */
 	[data-elevation="flush"] {
-		padding-block: var(--rune-padding, var(--rf-spacing-sm));
+		padding-block: var(--rf-prominence-band-padding, var(--rune-padding, var(--rf-spacing-sm)));
 	}
 
 	/* ─── Prominence: page-section-header type register ───────────────────
@@ -116,6 +116,99 @@
 	[data-prominence="display"] {
 		--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 3);
 	}
+	/* SPEC-183 D1 — a landing page's opening band: 3.25rem from the 1.5rem default. */
+	[data-prominence="marquee"] {
+		--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 13 / 6);
+	}
+	/* On a phone the loud steps ramp smaller, so a long word fits the line:
+ * marquee 2.5rem, display 2rem from the default (WORK-690). */
+	@container (max-width: 640px) {
+		[data-prominence="display"] {
+			--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 4 / 3);
+		}
+		[data-prominence="marquee"] {
+			--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 3);
+		}
+	}
+
+	/* ─── Prominence: the rest of the header, and the band (SPEC-183 D2–D4) ──
+ * A step sizes the whole header, not just its title. Each value is a custom
+ * property, cleared at every rune root in density.css with
+ * --rf-prominence-size, so a card nested in a marquee band keeps its own.
+ * `normal` and `quiet` set nothing: a section at rest looks as it did.
+ *
+ *   --rf-prominence-blurb-size    the description's type size
+ *   --rf-prominence-header-scale  multiplies the header's gaps (title → blurb,
+ *                                 header → what follows)
+ *   --rf-prominence-band-padding  a flush band's block padding (D3)
+ *   --rf-prominence-header-measure,  the header's and the blurb's max-width
+ *   --rf-prominence-blurb-measure
+ *   --rf-prominence-title-gradient  a switch (empty when on, unset when off):
+ *                                   the title draws Lumina's gradient (D4) */
+	[data-prominence="prominent"] {
+		--rf-prominence-blurb-size: var(--rf-text-lg);
+		--rf-prominence-header-scale: 1.25;
+	}
+	[data-prominence="display"] {
+		--rf-prominence-blurb-size: var(--rf-text-lg);
+		--rf-prominence-header-scale: 2;
+		--rf-prominence-band-padding: 3.5rem 3rem;
+	}
+	[data-prominence="marquee"] {
+		--rf-prominence-blurb-size: var(--rf-text-xl);
+		--rf-prominence-header-scale: 2;
+		--rf-prominence-band-padding: 7rem 6.5rem;
+	}
+	/* A loud title is set wider than the reading measure (it would wrap at 65ch
+ * of body type), and its blurb carries the measure instead: the plugin hero's
+ * and cta's 40rem. */
+	:is([data-prominence="display"], [data-prominence="marquee"]) {
+		--rf-prominence-header-measure: 100%;
+		--rf-prominence-blurb-measure: 40rem;
+	}
+	/* The loud steps' titles are Lumina's gradient, as the plugin hero's and
+ * cta's were. A switch, not the gradient itself: a custom property's var()s
+ * resolve where it is declared, so a gradient built here would keep this
+ * band's colours on a title whose own differ (a cover band's light-on-dark
+ * content). The title builds it from its own colours. */
+	:is([data-prominence="display"], [data-prominence="marquee"]) {
+		--rf-prominence-title-gradient: ;
+	}
+	/* The band's inline padding, the plugin hero's and cta's 2rem. A page that
+ * bleeds the band full width replaces it with its gutter (layouts/default.css). */
+	[data-elevation="flush"]:is([data-prominence="display"], [data-prominence="marquee"]) {
+		padding-inline: 2rem;
+	}
+	/* A cover band keeps its media well flush: the padding moves onto the
+ * overlaid content (D3). */
+	[data-elevation="flush"][data-media-position="cover"]:is(
+		[data-prominence="display"],
+		[data-prominence="marquee"]
+	) {
+		padding: 0;
+	}
+	[data-elevation="flush"][data-media-position="cover"]:is(
+			[data-prominence="display"],
+			[data-prominence="marquee"]
+		)
+		> [data-name="content"] {
+		padding-block: var(--rf-prominence-band-padding);
+		padding-inline: 2rem;
+	}
+	/* On a phone the overlay's band padding would eat most of the well, so a cover
+ * band tightens it, as the plugin hero's did. An uncovered band keeps it. */
+	@media (max-width: 640px) {
+		[data-elevation="flush"][data-media-position="cover"][data-prominence="display"]
+			> [data-name="content"] {
+			padding-block: 2.5rem 2rem;
+			padding-inline: 1.25rem;
+		}
+		[data-elevation="flush"][data-media-position="cover"][data-prominence="marquee"]
+			> [data-name="content"] {
+			padding-block: 3.5rem 3rem;
+			padding-inline: 1.25rem;
+		}
+	}
 
 	/* ─── Media slot shares the surface chrome ───────────────────────────
  * When a `flat` surface wraps a cover `[data-section="media"]` slot, the slot

package/styles/layouts/default.css

@@ -64,6 +64,19 @@
 			calc((100% - var(--rf-content-max, 80rem)) / 2)
 		);
 	}
+	/* A composed rune's root is an empty, block-less wrapper (no class, SPEC-145
+ * D2) around the runes it places; its paint carrier is the band a reader sees,
+ * whose background, cover well and surface fill the bleed. So the gutter moves
+ * inside it. */
+	.rf-page-content > article > [data-width="full"][data-rune]:not([class]) {
+		padding-inline: 0;
+	}
+	.rf-page-content > article > [data-width="full"][data-rune]:not([class]) > [data-rune] {
+		padding-inline: max(
+			var(--rf-content-gutter, 1.5rem),
+			calc((100% - var(--rf-content-max, 80rem)) / 2)
+		);
+	}
 	/* Page sections (data-content-measure="anchored") keep their content at the
  * text measure when bled to the wide track — only the surface/background
  * widens, matching how `full` reads as a band. The absolutely-positioned bg

package/styles/runes/actions.css

@@ -1,9 +1,9 @@
 @layer skin {
-	/* Button size by the enclosing rune's prominence (SPEC-160 D7): `display` and
- * `prominent` give the large size, today's hero buttons; anything else falls
+	/* Button size by the enclosing rune's prominence (SPEC-160 D7, SPEC-183 D5):
+ * `marquee` gives the large size, today's hero buttons; anything else falls
  * back to the defaults below, today's cta buttons. The skeleton clears these at
  * every other rune root, so they never reach an `actions` inside a nested rune. */
-	:is([data-prominence="display"], [data-prominence="prominent"]) {
+	[data-prominence="marquee"] {
 		--action-padding: 0.7rem 1.75rem;
 		--action-font-size: var(--rf-text);
 	}

package/styles/runes/cta.css

@@ -5,6 +5,12 @@
 		--rf-title-size: var(--rf-text-4xl);
 		padding: 3.5rem 2rem 3rem;
 	}
+	/* On a phone the headline steps down, as a composed cta's display does. */
+	@container (max-width: 640px) {
+		.rf-cta {
+			--rf-title-size: 2rem;
+		}
+	}
 	.rf-cta .rf-cta__preamble,
 	.rf-cta > h1,
 	.rf-cta > h2,

package/styles/runes/hero.css

@@ -15,6 +15,12 @@
 		background-size: cover;
 		background-position: center;
 	}
+	/* On a phone the headline steps down, as a composed hero's marquee does. */
+	@container (max-width: 640px) {
+		.rf-hero {
+			--rf-title-size: 2.5rem;
+		}
+	}
 	.rf-hero__preamble {
 		gap: 0.25rem;
 		margin-bottom: 2rem;

package/styles/runes/howto.css

@@ -18,26 +18,16 @@
 		color: var(--rf-color-primary);
 	}
 
-	/* Steps — numbered with styled counters */
+	/* Steps — the number, its circle and the rule between steps are the
+	 * sequence dimension's ([data-sequence="numbered"], BUG-024); the rune sets
+	 * only the rows' spacing. */
 	.rf-howto__content ol {
-		padding-left: 0;
 		margin: 0;
 	}
 	.rf-howto__content ol > li {
-		padding: 0.625rem 0;
-		padding-left: 2.25rem;
+		padding-block: 0.625rem;
 		line-height: var(--rf-leading-relaxed);
 	}
-	.rf-howto__content ol > li + li {
-		border-top: 1px solid var(--rf-color-border);
-	}
-	.rf-howto__content ol > li::before {
-		font-size: var(--rf-text-xs);
-		font-weight: var(--rf-weight-bold);
-		color: var(--rf-color-primary);
-		background: var(--rf-color-surface);
-		border-radius: var(--rf-radius-full);
-	}
 
 	.rf-howto__content ol > li > p,
 	.rf-howto__content ul > li > p {

package/styles/runes/playlist.css

@@ -69,7 +69,7 @@
 	.rf-playlist__tracks > li:hover {
 		background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
 	}
-	.rf-playlist__tracks > li::before {
+	.rf-playlist__tracks > li > [data-name="ordinal"] {
 		font-size: var(--rf-text-xs);
 		font-variant-numeric: tabular-nums;
 		color: var(--rf-color-muted);
@@ -87,35 +87,8 @@
 		white-space: nowrap;
 	}
 
-	/* Track artist */
-	.rf-playlist__tracks [data-name="track-artist"] {
-		font-size: var(--rf-text-sm);
-		color: var(--rf-color-muted);
-	}
-	.rf-playlist__tracks [data-name="track-artist"]::before {
-		content: "\00b7";
-		margin-right: 0.5rem;
-		opacity: 0.5;
-	}
-
-	/* Track duration — pushed right */
-	.rf-playlist__tracks [data-name="track-duration"] {
-		font-size: var(--rf-text-sm);
-		color: var(--rf-color-muted);
-		font-variant-numeric: tabular-nums;
-		text-align: right;
-	}
-
-	/* Track meta (date etc.) */
-	.rf-playlist__tracks [data-name="track-meta"] {
-		font-size: var(--rf-text-xs);
-		color: var(--rf-color-muted);
-	}
-	.rf-playlist__tracks [data-name="track-meta"]::before {
-		content: "\00b7";
-		margin-right: 0.5rem;
-		opacity: 0.5;
-	}
+	/* The artist, running time and date are every track's details block
+	 * (WORK-679), styled once in track.css for both track forms. */
 
 	/* Player area */
 	.rf-playlist__player {

package/styles/runes/pullquote.css

@@ -73,19 +73,6 @@
 		letter-spacing: var(--rf-tracking-normal);
 	}
 
-	/* Reset inner blockquote — global blockquote styles shouldn't apply here */
-	.rf-pullquote blockquote {
-		border: none;
-		background: none;
-		padding: 0;
-		margin: 0;
-		border-radius: 0;
-		color: inherit;
-	}
-	.rf-pullquote blockquote::before {
-		display: none;
-	}
-
 	/* Responsive — floated quotes become full-width on mobile */
 	@media (max-width: 768px) {
 		.rf-pullquote[data-align="left"],

package/styles/runes/recipe.css

@@ -78,26 +78,16 @@
 		color: var(--rf-color-primary);
 	}
 
-	/* Steps — numbered with styled counters */
+	/* Steps — the number, its circle and the rule between steps are the
+	 * sequence dimension's ([data-sequence="numbered"], BUG-024); the rune sets
+	 * only the rows' spacing. */
 	.rf-recipe__content ol {
-		padding-left: 0;
 		margin: 0;
 	}
 	.rf-recipe__content ol > li {
-		padding: 0.625rem 0;
-		padding-left: 2.25rem;
+		padding-block: 0.625rem;
 		line-height: var(--rf-leading-relaxed);
 	}
-	.rf-recipe__content ol > li + li {
-		border-top: 1px solid var(--rf-color-border);
-	}
-	.rf-recipe__content ol > li::before {
-		font-size: var(--rf-text-xs);
-		font-weight: var(--rf-weight-bold);
-		color: var(--rf-color-primary);
-		background: var(--rf-color-surface);
-		border-radius: var(--rf-radius-full);
-	}
 
 	.rf-recipe__content ol > li > p,
 	.rf-recipe__content ul > li > p {

package/styles/runes/section.css

@@ -2,13 +2,14 @@
 	/* Section — a generic page section: an eyebrow/headline/blurb header above
    arbitrary body content. Header styling mirrors the shared page-section look
    (reveal/feature); the body is content-agnostic and full width. */
+	/* The header-to-body rhythm widens with the prominence step (SPEC-183 D2). */
 	.rf-section {
-		gap: 1.5rem;
+		gap: calc(1.5rem * var(--rf-prominence-header-scale, 1));
 	}
 
 	/* With a split, the content column keeps the header-to-body rhythm. */
 	.rf-section__content {
-		gap: 1.5rem;
+		gap: calc(1.5rem * var(--rf-prominence-header-scale, 1));
 	}
 	.rf-section__footer {
 		padding-top: var(--rf-spacing-sm);
@@ -27,8 +28,10 @@
 	/* Block margins only: the skeleton's inline auto-margins centre or end-align
 	 * the header, and a `margin: 0` here would cancel them. */
 	.rf-section__preamble {
-		gap: 0.5rem;
-		max-width: var(--rf-measure, 65ch);
+		gap: calc(0.5rem * var(--rf-prominence-header-scale, 1));
+		/* Never wider than the column: a word longer than the line then overflows
+		 * evenly around a centred header rather than pushing it off the end. */
+		max-width: min(var(--rf-prominence-header-measure, var(--rf-measure, 65ch)), 100%);
 		margin-block: 0;
 	}
 	.rf-section__eyebrow {

package/styles/runes/steps.css

@@ -1,6 +1,6 @@
 @layer skin {
-	/* Steps — skin. The counter mechanism, step item layout, badge box placement, and
- * media-position flip live in @refrakt-md/skeleton (styles/runes/steps.css). */
+	/* Steps — skin. The step numbers, their circle and the rule between steps are
+ * the sequence dimension's (BUG-024); the media-position flip is skeleton's. */
 	.rf-steps__preamble {
 		gap: 0.25rem;
 		margin-bottom: 1.5rem;
@@ -18,25 +18,14 @@
 	.rf-steps__image {
 		margin-bottom: 1rem;
 	}
-	.rf-steps ol {
+	.rf-steps__steps {
 		padding-left: 0;
 		margin: 0;
 	}
 
 	/* Individual step — borderless, matching recipe */
 	.rf-step {
-		padding: 0.625rem 0 0.625rem 2.25rem;
-	}
-	.rf-step + .rf-step {
-		border-top: 1px solid var(--rf-color-border);
-	}
-	.rf-step::before {
-		background: var(--rf-color-surface);
-		color: var(--rf-color-primary);
-		border-radius: var(--rf-radius-full);
-		font-weight: var(--rf-weight-bold);
-		font-size: var(--rf-text-xs);
-		font-variant-numeric: tabular-nums;
+		padding-block: 0.625rem;
 	}
 	.rf-step h1,
 	.rf-step h2,

package/styles/runes/track.css

@@ -5,17 +5,9 @@
 		padding: 0.75rem 1.25rem;
 		transition: background 0.15s ease;
 	}
-	.rf-track + .rf-track {
-		border-top: 1px solid var(--rf-color-border);
-	}
 	.rf-track:hover {
 		background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
 	}
-	.rf-track::before {
-		font-size: var(--rf-text-xs);
-		color: var(--rf-color-primary);
-		text-align: right;
-	}
 
 	/* Track name — primary text, takes remaining space */
 	.rf-track__track-name {
@@ -26,36 +18,45 @@
 		white-space: nowrap;
 	}
 
-	/* Artist — secondary text with dot separator */
-	.rf-track__track-artist {
+	/* Details (WORK-679) — the artist, running time and date. */
+	.rf-track__details > [data-field] {
 		font-size: var(--rf-text-sm);
 		color: var(--rf-color-muted);
 	}
-	.rf-track__track-artist::before {
-		content: "\00b7";
-		margin-right: 0.5rem;
-		opacity: 0.5;
-	}
-
-	/* Duration — pushed right, tabular nums */
-	.rf-track__track-duration {
-		font-size: var(--rf-text-sm);
-		color: var(--rf-color-muted);
+	.rf-track__details > [data-field="duration"] {
 		font-variant-numeric: tabular-nums;
+	}
+	.rf-track[data-meta="row"] > .rf-track__details > [data-field="duration"] {
 		text-align: right;
 	}
-
-	/* Meta (date etc.) — dot separator */
-	.rf-track__track-meta {
+	/* In the row the artist and date open with a dot; the duration, pushed to
+	 * the end, needs none. */
+	.rf-track[data-meta="row"] > .rf-track__details > [data-field="date"] {
 		font-size: var(--rf-text-xs);
-		color: var(--rf-color-muted);
 	}
-	.rf-track__track-meta::before {
+	.rf-track[data-meta="row"]
+		> .rf-track__details
+		> :is([data-field="artist"], [data-field="date"])::before,
+	/* As a byline, a dot between each value and the one before it. */
+		.rf-track[data-meta="byline"]
+		.rf-track__details
+		> [data-field]
+		+ [data-field]::before {
 		content: "\00b7";
 		margin-right: 0.5rem;
 		opacity: 0.5;
 	}
 
+	/* Byline — the details sit beneath the name, which has the line to itself
+	 * and so may wrap rather than be cut short. */
+	.rf-track[data-meta="byline"] .rf-track__heading > .rf-track__track-name {
+		white-space: normal;
+	}
+	.rf-track__heading > .rf-track__details {
+		gap: 0 0.5rem;
+		margin-top: 0.125rem;
+	}
+
 	/* Description — full width below the row */
 	.rf-track__track-description {
 		font-size: var(--rf-text-sm);