@refrakt-md/lumina 0.14.4 → 0.16.0

package/base.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 

package/contracts/structures.json

@@ -184,6 +184,85 @@
 				"{content}"
 			]
 		},
+		"Snippet": {
+			"block": "snippet",
+			"root": ".rf-snippet",
+			"dataRune": "snippet",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Expand": {
+			"block": "expand",
+			"root": ".rf-expand",
+			"dataRune": "expand",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Badge": {
+			"block": "badge",
+			"root": ".rf-badge",
+			"dataRune": "badge",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Collection": {
+			"block": "collection",
+			"root": ".rf-collection",
+			"dataRune": "collection",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Relationships": {
+			"block": "relationships",
+			"root": ".rf-relationships",
+			"dataRune": "relationships",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Aggregate": {
+			"block": "aggregate",
+			"root": ".rf-aggregate",
+			"dataRune": "aggregate",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Progress": {
+			"block": "progress",
+			"root": ".rf-progress",
+			"dataRune": "progress",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"sentiment": {
+					"source": "meta",
+					"classPattern": ".rf-progress--{value}",
+					"dataAttribute": "data-sentiment"
+				}
+			}
+		},
+		"Card": {
+			"block": "card",
+			"root": ".rf-card",
+			"dataRune": "card",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "stacked",
+					"classPattern": ".rf-card--{value}",
+					"dataAttribute": "data-layout"
+				}
+			}
+		},
 		"Embed": {
 			"block": "embed",
 			"root": ".rf-embed",
@@ -425,6 +504,32 @@
 				}
 			}
 		},
+		"Drawer": {
+			"block": "drawer",
+			"root": ".rf-drawer",
+			"dataRune": "drawer",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"side": {
+					"source": "meta",
+					"default": "right",
+					"classPattern": ".rf-drawer--{value}",
+					"dataAttribute": "data-side"
+				},
+				"size": {
+					"source": "meta",
+					"default": "md",
+					"classPattern": ".rf-drawer--{value}",
+					"dataAttribute": "data-size"
+				},
+				"shortcut": {
+					"source": "meta",
+					"dataAttribute": "data-shortcut"
+				}
+			}
+		},
 		"Figure": {
 			"block": "figure",
 			"root": ".rf-figure",

package/index.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 @import './styles/layouts/plan.css';
@@ -41,6 +42,7 @@
 @import './styles/runes/annotate.css';
 @import './styles/runes/audio.css';
 @import './styles/runes/api.css';
+@import './styles/runes/card.css';
 @import './styles/runes/badge.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
@@ -49,6 +51,10 @@
 @import './styles/runes/budget.css';
 @import './styles/runes/cast.css';
 @import './styles/runes/character.css';
+@import './styles/runes/collection.css';
+@import './styles/runes/relationships.css';
+@import './styles/runes/aggregate.css';
+@import './styles/runes/progress.css';
 @import './styles/runes/changelog.css';
 @import './styles/runes/chart.css';
 @import './styles/runes/compare.css';
@@ -57,10 +63,13 @@
 @import './styles/runes/cta.css';
 @import './styles/runes/datatable.css';
 @import './styles/runes/details.css';
+@import './styles/runes/drawer.css';
 @import './styles/runes/diagram.css';
 @import './styles/runes/diff.css';
 @import './styles/runes/codegroup.css';
+@import './styles/runes/snippet.css';
 @import './styles/runes/embed.css';
+@import './styles/runes/expand.css';
 @import './styles/runes/event.css';
 @import './styles/runes/faction.css';
 @import './styles/runes/feature.css';
@@ -114,11 +123,6 @@
 @import './styles/runes/bug.css';
 @import './styles/runes/decision.css';
 @import './styles/runes/milestone.css';
-@import './styles/runes/backlog.css';
-@import './styles/runes/decision-log.css';
 @import './styles/runes/plan-progress.css';
-@import './styles/runes/plan-activity.css';
 @import './styles/runes/plan-ref.css';
-@import './styles/runes/plan-relationships.css';
 @import './styles/runes/plan-history.css';
-@import './styles/runes/plan-entity-tabs.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.14.4",
+  "version": "0.16.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.14.4",
-    "@refrakt-md/transform": "0.14.4",
-    "@refrakt-md/types": "0.14.4"
+    "@refrakt-md/runes": "0.16.0",
+    "@refrakt-md/transform": "0.16.0",
+    "@refrakt-md/types": "0.16.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/layouts/docs.css

@@ -100,6 +100,15 @@
 	background: var(--rf-color-bg, #fff);
 	z-index: 5;
 }
+/* Match the sticky offset in the natural-flow position too. The fixed header
+ * is out of flow so `.rf-docs-body` starts at viewport top; without this
+ * margin, the sidebar's static position sits at Y=0 with its top 3.125rem
+ * hidden under the header — visible only when the page scrolls enough for
+ * sticky to activate. Scoped to `:has(.rf-docs-header)` so layouts without a
+ * header don't gain an unwanted top gap. */
+html:has(.rf-docs-header) .rf-docs-sidebar {
+	margin-top: 3.125rem;
+}
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
 }
@@ -190,6 +199,8 @@ html:has(.rf-docs-header) {
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg, #fff);
+	max-width: 100%;
+	overflow: hidden;
 }
 .rf-docs-toolbar__hamburger {
 	background: none;
@@ -206,6 +217,12 @@ html:has(.rf-docs-header) {
 .rf-docs-toolbar__breadcrumb {
 	font-size: 0.8rem;
 	color: var(--rf-color-muted);
+	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
+	 * the available space rather than starting at its full content width —
+	 * combined with `min-width: 0` this is what triggers ellipsis on long
+	 * titles. Without basis 0 a long page title overflows the toolbar and
+	 * forces horizontal page scroll on narrow viewports. */
+	flex: 1 1 0;
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/styles/layouts/theme-toggle.css

@@ -0,0 +1,67 @@
+/* Theme-mode toggle button (SPEC-073).
+ *
+ * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
+ * The `theme-toggle` behavior cycles auto → light → dark and reflects the
+ * current preference onto the button as `data-theme-pref`; the icon below
+ * tracks that. Ported verbatim from the former `ThemeToggle.svelte` so the
+ * look is unchanged, with the icon selector rekeyed from a swapped class to
+ * the `data-theme-pref` attribute. */
+.rf-theme-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: transparent;
+	color: var(--rf-color-text);
+	cursor: pointer;
+	transition: background-color 120ms ease, border-color 120ms ease;
+}
+.rf-theme-toggle:hover {
+	background: var(--rf-color-surface-hover);
+}
+.rf-theme-toggle:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+
+/* In the header chrome the brand/nav and the controls are flex siblings
+ * arranged by `order` (search is order 1, nav/menu order 3). Without this the
+ * toggle defaults to order 0 and groups with the brand on the left; order 2
+ * places it just after the right-aligned search trigger — matching the former
+ * component. The plan toolbar arranges by DOM order, so it isn't included. */
+.rf-header__inner .rf-theme-toggle,
+.rf-docs-header__inner .rf-theme-toggle,
+.rf-blog-header__inner .rf-theme-toggle {
+	order: 2;
+}
+
+/* Hidden on tint-locked pages: the saved preference is preserved but ignored
+ * while the lock is active (SPEC-052), so a toggle that does nothing would be
+ * confusing. Pure CSS — the lock lands on <html> at SSR and on client nav. */
+html[data-tint-lock="true"] .rf-theme-toggle {
+	display: none;
+}
+
+/* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
+ * button shows an icon before the behavior sets data-theme-pref; the light and
+ * dark glyphs swap in by state. */
+.rf-theme-toggle__icon {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	background: currentColor;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
+}

package/styles/runes/accordion.css

@@ -1,9 +1,6 @@
 /* Accordion */
-.rf-accordion {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	overflow: hidden;
-}
+/* No wrapping border / radius — the only chrome is the divider between items. */
+.rf-accordion {}
 .rf-accordion__preamble {
 	margin-bottom: 1.5rem;
 }
@@ -52,35 +49,69 @@
 .rf-accordion-item__header {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	padding: 0.875rem 1.25rem;
+	gap: 0.5rem;
+	padding: 0.875rem 0rem;
 	font-weight: 600;
 	font-size: 0.95rem;
 	cursor: pointer;
 	user-select: none;
-	transition: background-color 200ms ease;
 	list-style: none;
 }
 .rf-accordion-item__header::-webkit-details-marker { display: none; }
 .rf-accordion-item__header::marker { display: none; content: ''; }
-.rf-accordion-item__header:hover {
-	background: var(--rf-color-surface);
-}
-.rf-accordion-item__header::after {
-	content: '▾';
+/* Chevron in front of the label — points right when collapsed, rotates 90°
+ * to point down when expanded. SVG mask so the glyph is crisp at any size
+ * and tints with the muted text color. */
+.rf-accordion-item__header::before {
+	content: '';
 	flex-shrink: 0;
-	color: var(--rf-color-muted);
+	width: 0.75rem;
+	height: 0.75rem;
+	background: var(--rf-color-muted);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
 	transition: transform 200ms ease;
 }
-.rf-accordion-item[open] .rf-accordion-item__header::after {
-	transform: rotate(180deg);
+.rf-accordion-item[open] .rf-accordion-item__header::before {
+	transform: rotate(90deg);
 }
 .rf-accordion-item__title {
 	flex: 1;
 	min-width: 0;
 }
+/* Per-group count for collection/relationships group-display="accordion".
+ * Inherits the header's font (weight + color) so the count reads as part
+ * of the same label. The header's `gap` handles spacing — no margins needed. */
+.rf-accordion-item__count {
+	flex-shrink: 0;
+}
+/* Animate the panel's collapse / expand. `::details-content` (the auto-generated
+ * wrapper for non-summary content) + `interpolate-size: allow-keywords` lets the
+ * height transition between 0 and auto. `transition-behavior: allow-discrete`
+ * on `content-visibility` keeps the panel reachable during the open animation.
+ * Browsers without `::details-content` support fall back to the native snap. */
+.rf-accordion-item {
+	interpolate-size: allow-keywords;
+}
+.rf-accordion-item::details-content {
+	block-size: 0;
+	overflow: hidden;
+	transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
+}
+.rf-accordion-item[open]::details-content {
+	block-size: auto;
+}
 .rf-accordion-item__body {
 	padding: 0 1.25rem 1rem;
+}
+/* Prose styles for the standalone accordion rune's bodies (paragraphs,
+ * lists, etc.). Scoped to `:not(:has([data-block]))` so they don't bleed into
+ * block-content children like cards inside a collection/relationships
+ * `group-display="accordion"` panel, where the card's own typography
+ * should govern. */
+.rf-accordion-item__body:not(:has([data-block])) {
 	font-size: 0.925rem;
 	line-height: 1.65;
 	color: var(--rf-color-muted);
@@ -88,3 +119,12 @@
 .rf-accordion-item__body p:last-child {
 	margin-bottom: 0;
 }
+/* Block-content children — collection / relationships mark their body-template
+ * items `data-block`. A panel housing them (group-display="accordion") switches
+ * to a flex column with the small gap so cards get the same spacing they'd have
+ * under a heading-grouped layout. */
+.rf-accordion-item__body:has([data-block]) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}

package/styles/runes/aggregate.css

@@ -0,0 +1,75 @@
+/* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
+ *
+ * Two modes share the same block class. The no-body inline form is a `<span>`
+ * carrying the integer; the body-zoned form is a `<section>` rendering
+ * preamble / per-group template / fallback. Most of the visual weight inside
+ * the body comes from other runes (`progress`, `badge`, `humanize` text), so
+ * this stylesheet sticks to container chrome and the inline single-number
+ * form.
+ */
+
+/* Block container — vertical rhythm matches collection / relationships. The
+ * bare selector also matches the inline form's `<span>`, but vertical margin
+ * on an inline span has no effect so it's safe to share. */
+.rf-aggregate {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Inline single-number form — `<span class="rf-aggregate" data-aggregate="count">`.
+ * Tabular nums keep digits aligned when the count changes between renders;
+ * weight tuned to stand out modestly in prose. */
+.rf-aggregate[data-aggregate='count'] {
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+/* Preamble — totals chrome above the breakdown (e.g. a progress bar). Trim
+ * first/last-child block margins so the rune's outer rhythm wins over the
+ * template's inner block margins (same pattern collection uses). */
+.rf-aggregate__preamble > :first-child { margin-top: 0; }
+.rf-aggregate__preamble > :last-child { margin-bottom: 0; }
+
+/* Empty state — replaces the breakdown when the query yields nothing. */
+.rf-aggregate__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+.rf-aggregate__empty > :first-child { margin-top: 0; }
+.rf-aggregate__empty > :last-child { margin-bottom: 0; }
+
+/* Items — either the per-group breakdown row, or the ungrouped single-render
+ * slot. Default stack handles the ungrouped case (one block element from the
+ * body). With groups, switch to a wrapping inline row so per-group renders
+ * (badges, pills, …) flow across the page. */
+.rf-aggregate__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+	margin-top: var(--rf-spacing-sm);
+}
+.rf-aggregate__items:has(.rf-aggregate__group) {
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+}
+
+/* Direct children of __items (the ungrouped template render) — trim outer
+ * block margins so the rune's outer rhythm wins, same pattern as preamble /
+ * empty. */
+.rf-aggregate__items > :first-child { margin-top: 0; }
+.rf-aggregate__items > :last-child { margin-bottom: 0; }
+
+/* Per-group block — wraps one render of the template. `data-block` is set
+ * by the resolver so we trim its outer block margins (the items-row `gap`
+ * governs inter-group spacing) — same pattern collection / relationships
+ * use for `__item[data-block]`. */
+.rf-aggregate__group {
+	min-width: 0;
+}
+.rf-aggregate__group[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-aggregate__group[data-block] > :last-child {
+	margin-bottom: 0;
+}

package/styles/runes/badge.css

@@ -1,33 +1,37 @@
-/* Badge rune — standalone inline pill that visually stands out from prose.
+/* Badge rune — standalone inline chip.
  *
- * Unlike the metadata badges that appear inside card chrome (plan items,
- * recipe meta, work item headers), standalone {% badge %} runes are meant
- * to pop. They reuse the universal `--meta-color` set by
- * dimensions/metadata.css's sentiment rules, applied as a sentiment-tinted
- * border, a low-opacity sentiment-tinted background, and sentiment-coloured
- * text. The leading sentiment dot from metadata.css is dropped — the
- * background tint already carries the sentiment cue.
+ * Built atop the metadata pill base (`data-meta-type`), but reshaped to the
+ * compact chip look used by plan-progress status counts: **no border**,
+ * solid-ish sentiment-tinted background, smaller font + tighter padding, and
+ * a small corner radius. Tints come from the universal `--meta-color` set by
+ * `dimensions/metadata.css`'s sentiment rules (positive / caution / negative /
+ * neutral → success / warning / danger / muted). Background is a `color-mix`
+ * of that color, so the chip stays sentiment-flexible — any value the theme
+ * gives `--meta-color` works without per-status selectors.
  *
- * rank="primary" boosts emphasis with a heavier background tint and a
- * bolder weight, useful for "Popular" / "Featured" labels that should
- * dominate over their neighbours.
+ * `rank="primary"` boosts emphasis with a heavier tint and bolder weight,
+ * useful for labels that should dominate over neighbours.
  */
 
 .rf-badge {
 	vertical-align: baseline;
-	border-color: var(--meta-color, var(--rf-color-border));
-	background: color-mix(in srgb, var(--meta-color, transparent) 12%, transparent);
-	color: var(--meta-color, var(--rf-color-text));
+	border: none;
+	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 10%, transparent);
+	color: var(--meta-color, var(--rf-color-muted));
+	font-size: 0.75rem;
 	font-weight: 500;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
 }
 
 .rf-badge[data-meta-rank="primary"] {
-	background: color-mix(in srgb, var(--meta-color, transparent) 22%, transparent);
+	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 28%, transparent);
 	font-weight: 600;
 }
 
 /* Drop the sentiment dot — the background tint carries the cue for
- * standalone badges, and the dot competes visually with adjacent prose. */
+ * standalone chips, and the dot competes visually with adjacent prose. */
 .rf-badge::before {
 	display: none;
 }

package/styles/runes/card.css

@@ -0,0 +1,83 @@
+/* card — generic content card (SPEC-070).
+ *
+ * Borderless (no outline) but with a soft surface fill — the surface + the
+ * structure (media split, footer separator) carry the card, no border needed.
+ * The media|content split + responsive collapse + mobile full-bleed media
+ * header come from the shared layouts/split.css (keyed off data-layout /
+ * data-section="media" / data-name="content" / data-media-position).
+ */
+
+.rf-card {
+	position: relative; /* anchor for the stretched link + media bleed */
+	padding: var(--rune-padding, var(--rf-spacing-md));
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+
+.rf-card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-card__body > :first-child { margin-top: 0; }
+.rf-card__body > :last-child { margin-bottom: 0; }
+
+/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
+ * treatment as page-section / recipe. */
+.rf-card__eyebrow {
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.375rem;
+}
+
+/* The body's leading heading is the card title; drop its prose top margin so it
+ * hugs the eyebrow (or the top of the card) instead of opening a gap. */
+.rf-card__title {
+	margin-top: 0;
+}
+
+.rf-card__footer {
+	margin-top: var(--rf-spacing-sm);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-color-border);
+	font-size: 0.8125em;
+	color: var(--rf-color-muted);
+}
+
+/* In a collection grid, each row stretches its items to the tallest (see
+ * collection.css); these rules make a stacked card spend that height usefully:
+ * the card becomes a column, its content fills the leftover height, and the
+ * body grows so footers drop to a common baseline across the row. Scoped to
+ * stacked cards so a split card's grid (layouts/split.css) is left intact. */
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
+	display: flex;
+	flex-direction: column;
+	/* The grid/flex wrapper stretches the card, but a nested flex container
+	 * doesn't always pass that height to its own flex children; pin it so the
+	 * content/body flex:1 reliably fills. */
+	height: 100%;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content {
+	flex: 1;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body {
+	flex: 1;
+}
+
+/* Whole-card stretched link — covers the card; real links in body/footer
+ * sit above it via position:relative. */
+.rf-card__link {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+}
+.rf-card a:not(.rf-card__link) {
+	position: relative;
+	z-index: 1;
+}