@refrakt-md/lumina 0.22.0 → 0.23.0

package/styles/runes/diff.css

@@ -1,20 +1,9 @@
-/* Diff */
+@layer skin {
+/* Diff — skin. The scroll container, sticky header, split grid, rows grid, line
+ * flex + gutter sizing live in @refrakt-md/skeleton (styles/runes/diff.css). */
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	/* WORK-304 — horizontal scroll lives on `.rf-diff` itself, not on
-	 * `.rf-diff__split-container`. On mobile the split-container's
-	 * `min-width: 40rem` makes it wider than the viewport; previously
-	 * `.rf-diff { overflow: hidden }` clipped the right panel and the
-	 * touch scroll had nowhere to land. Moving the scroll affordance
-	 * up one level lets users swipe the entire diff sideways to
-	 * reveal the off-screen panel; the border-radius still clips the
-	 * children at the rounded corners because `overflow-x: auto` is
-	 * non-visible. `overflow-y: hidden` keeps the vertical clip for
-	 * the rounded top/bottom. */
-	overflow-x: auto;
-	overflow-y: hidden;
-	overscroll-behavior-x: contain;
 	font-size: var(--rf-text-sm);
 	background: var(--rf-color-code-bg);
 }
@@ -26,19 +15,6 @@
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
-	/* `.rf-diff` is the horizontal scroll container (so mobile users
-	 * can swipe to reveal the off-screen split panel). Without
-	 * sticky, the header would scroll horizontally along with the
-	 * content and the filename label would slide off-screen.
-	 * `position: sticky; left: 0` pins the header to the visible left
-	 * edge of the scroll viewport at all scroll positions. WORK-304. */
-	position: sticky;
-	left: 0;
-}
-.rf-diff__split-container {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	min-width: 40rem;
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
 	border-right: 1px solid var(--rf-color-border);
@@ -49,53 +25,11 @@
 	border: none;
 	border-radius: 0;
 	background: var(--rf-color-code-bg);
-	overflow-x: auto;
-	overscroll-behavior-x: contain;
 	font-family: var(--rf-font-mono);
 	font-size: var(--rf-text-sm);
 	line-height: var(--rf-leading-relaxed);
 }
-
-/* WORK-304 — inner rows wrapper, sized as `display: grid; min-width:
- * max-content` so every `.rf-diff__line` (grid item) spans the
- * widest line's intrinsic width. The pre is the scroll container
- * (`overflow-x: auto`); this wrapper is what actually expands past
- * the pre's visible width when a line overflows, triggering the
- * pre's scroll and keeping the row tint (+/-/highlight) contiguous
- * across the full scroll region. Mirrors the
- * `pre code { display: grid; min-width: max-content }` pattern in
- * the standalone codeblock at `elements/code.css`. */
-.rf-diff__rows {
-	display: grid;
-	min-width: max-content;
-}
-/* WORK-304 — annotated line primitive. Three states share one row
- * shape (`add`, `remove`, `highlight`); only the tint token and the
- * gutter rail colour change. The same selector form is reused by the
- * standalone code block for `data-line-status="highlight"` via the
- * `.rf-codeblock` rules below.
- *
- * `display: block` + inline-block children (not `display: flex`) for
- * the line container so the line's intrinsic max-content is the
- * unambiguous sum of children's intrinsic widths — flex container
- * max-content was being clipped by the flex-basis / flex-grow /
- * flex-shrink combination depending on browser, leaving the row
- * tint cut off at the text width when the user scrolled
- * horizontally. `white-space: nowrap` keeps the inline-block
- * children on a single row (the children themselves preserve their
- * own `white-space: pre` for the code). `min-width: max-content`
- * keeps the line at least as wide as its content (full row tint
- * when content overflows the visible viewport); default width =
- * 100% of pre keeps it filling the visible width on short rows. */
 .rf-diff__line {
-	/* `display: flex` for internal layout (gutters + content side
-	 * by side). The line's WIDTH is determined by the parent grid
-	 * track (`.rf-diff__code`'s `grid-template-columns:
-	 * minmax(100%, max-content)`), not by the flex sizing here —
-	 * so the row tint covers the full grid column regardless of
-	 * how flex sizing would have resolved. */
-	display: flex;
-	min-height: 1.6em;
 	border-left: 3px solid transparent;
 }
 .rf-diff__line[data-line-status="equal"]  { background: transparent; }
@@ -113,20 +47,13 @@
 }
 .rf-diff__line[data-line-status="empty"]  { background: transparent; }
 .rf-diff__gutter-num {
-	flex-shrink: 0;
 	padding: 0 0.5rem;
-	width: 2.5em;
-	min-height: 1.6em;
 	text-align: right;
 	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	user-select: none;
 	color: var(--rf-color-muted);
 }
-/* Change-type colour drives the directional cue — no more +/- prefix.
- * Remove lines colour the before-number; add lines colour the after-number.
- * The opposite side renders empty (no number) which itself signals "nothing
- * here on this side". */
 .rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
 	color: var(--rf-color-danger);
 }
@@ -137,18 +64,8 @@
 	margin: 0;
 }
 .rf-diff__line-content {
-	/* `flex: 1 0 auto` so line-content contributes its
-	 * `white-space: pre` text width to the line's intrinsic
-	 * max-content (which the parent grid track reads from); grow:1
-	 * lets it fill any free space in the row beyond the gutters
-	 * when the grid track is wider than the line's natural size
-	 * (short content / wide visible viewport). WORK-304. */
-	flex: 1 0 auto;
 	white-space: pre;
 	padding-right: 1rem;
-	/* Pin the row to 1.6em even when the text is empty — the highlighted
-	 * span for an empty input has no inline content to establish a line
-	 * box, so without this the flex item collapses below the parent's
-	 * min-height and rows visually drift in the split-mode grid. */
-	min-height: 1.6em;
+}
+
 }

package/styles/runes/drawer.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Drawer — addressable modal panel (SPEC-060).
  *
  * Two visual modes ride on the same `.rf-drawer` element:
@@ -19,9 +20,6 @@
  */
 
 .rf-drawer {
-	--rf-drawer-size-sm: 22rem;
-	--rf-drawer-size-md: 36rem;
-	--rf-drawer-size-lg: 52rem;
 	--rf-drawer-bg: var(--rf-color-surface);
 	--rf-drawer-fg: var(--rf-color-text);
 	--rf-drawer-border: var(--rf-color-border);
@@ -32,13 +30,6 @@
 	--rf-drawer-anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-/* ─── Body-scroll lock while any drawer is open ────────────────── */
-
-html.rf-drawer-open,
-html.rf-drawer-open body {
-	overflow: hidden;
-}
-
 /* ─── No-JS / in-flow mode ─────────────────────────────────────── */
 
 section.rf-drawer {
@@ -52,9 +43,6 @@ section.rf-drawer {
 }
 
 section.rf-drawer .rf-drawer__header {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
 	gap: var(--rf-spacing-sm);
 	margin-bottom: var(--rf-spacing-sm);
 }
@@ -73,7 +61,6 @@ section.rf-drawer .rf-drawer__body > :last-child { margin-bottom: 0; }
 /* In-flow footer — small text, top divider, mirrors the dialog-mode look so
  * authors get the same chrome whether JS is enhancing or not. */
 section.rf-drawer .rf-drawer__footer {
-	display: block;
 	margin-top: var(--rf-spacing-md);
 	padding-top: var(--rf-spacing-sm);
 	border-top: 1px solid var(--rf-drawer-border);
@@ -91,7 +78,6 @@ section.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
  * closed dialogs, so the closed dialog renders visibly as an empty box
  * positioned by the side `inset` rules. */
 dialog.rf-drawer {
-	box-sizing: border-box;
 	background: var(--rf-drawer-bg);
 	color: var(--rf-drawer-fg);
 	border: 1px solid var(--rf-drawer-border);
@@ -99,18 +85,6 @@ dialog.rf-drawer {
 	box-shadow: var(--rf-drawer-shadow);
 	padding: 0;
 	margin: 0;
-	overflow: hidden;
-	max-width: calc(100vw - 2 * var(--rf-drawer-gutter));
-	max-height: calc(100vh - 2 * var(--rf-drawer-gutter));
-}
-
-/* Flex column layout only when the dialog is actually open. The header
- * and footer pin via `flex: 0 0 auto`; the body scrolls via `flex: 1 1
- * auto; overflow-y: auto`. The dialog's `max-height` cap on the dialog
- * provides the scroll context. */
-dialog.rf-drawer[open] {
-	display: flex;
-	flex-direction: column;
 }
 
 dialog.rf-drawer::backdrop {
@@ -119,10 +93,6 @@ dialog.rf-drawer::backdrop {
 }
 
 dialog.rf-drawer .rf-drawer__header {
-	flex: 0 0 auto;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	gap: var(--rf-spacing-md);
 	/* Reset the generous `[data-section="header"]` bottom margin (3rem) — the
 	 * dialog chrome spaces the header from the body via the body's own
@@ -148,7 +118,6 @@ dialog.rf-drawer .rf-drawer__close {
 	font-size: var(--rf-text-xl);
 	line-height: 1;
 	border-radius: var(--rf-radius-sm);
-	flex-shrink: 0;
 }
 dialog.rf-drawer .rf-drawer__close:hover {
 	color: var(--rf-color-text);
@@ -156,17 +125,13 @@ dialog.rf-drawer .rf-drawer__close:hover {
 }
 
 dialog.rf-drawer .rf-drawer__body {
-	flex: 1 1 auto;
-	overflow-y: auto;
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
-	min-height: 0;
 }
 
 /* Dialog footer — small text, top divider, pinned at bottom via flex.
  * Stays visible regardless of body scroll depth so links like "View
  * source on GitHub →" (the SPEC-078 use case) are always one tap away. */
 dialog.rf-drawer .rf-drawer__footer {
-	flex: 0 0 auto;
 	padding: var(--rf-spacing-sm) var(--rf-spacing-lg);
 	border-top: 1px solid var(--rf-drawer-border);
 	background: var(--rf-drawer-bg);
@@ -191,67 +156,24 @@ dialog.rf-drawer .rf-drawer__body > :last-child,
 dialog.rf-drawer .rf-drawer__body > :last-child > :last-child {
 	margin-bottom: 0;
 }
-
-/* ─── Side modifiers ───────────────────────────────────────────────
- *
- * Each side anchors the dialog with `inset`. The slide-in animation is
- * a keyframes animation triggered by `[open]` — picked over
- * `@starting-style` because keyframes have broader browser support
- * (everywhere `<dialog>` works) and a clearer source-of-truth: the
- * starting/ending frames are spelled out, no cascade-interaction
- * footguns. The matching backdrop fade is a separate animation.
- */
-
-dialog.rf-drawer[data-side="right"] {
-	inset:
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		auto;
-	height: auto;
-}
 dialog.rf-drawer[data-side="right"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-right var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="right"][data-state="closing"] {
 	animation: rf-drawer-slide-out-right var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="left"] {
-	inset:
-		var(--rf-drawer-gutter)
-		auto
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter);
-	height: auto;
-}
 dialog.rf-drawer[data-side="left"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-left var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="left"][data-state="closing"] {
 	animation: rf-drawer-slide-out-left var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="top"] {
-	inset:
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		auto
-		var(--rf-drawer-gutter);
-	width: auto;
-}
 dialog.rf-drawer[data-side="top"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-top var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="top"][data-state="closing"] {
 	animation: rf-drawer-slide-out-top var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="bottom"] {
-	inset:
-		auto
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter);
-	width: auto;
-}
 dialog.rf-drawer[data-side="bottom"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-bottom var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
@@ -336,30 +258,4 @@ dialog.rf-drawer[data-state="closing"]::backdrop {
 	}
 }
 
-/* ─── Size modifiers (only meaningful in dialog mode) ─────────── */
-
-dialog.rf-drawer[data-side="right"][data-size="sm"],
-dialog.rf-drawer[data-side="left"][data-size="sm"] {
-	width: var(--rf-drawer-size-sm);
-}
-dialog.rf-drawer[data-side="right"][data-size="md"],
-dialog.rf-drawer[data-side="left"][data-size="md"] {
-	width: var(--rf-drawer-size-md);
-}
-dialog.rf-drawer[data-side="right"][data-size="lg"],
-dialog.rf-drawer[data-side="left"][data-size="lg"] {
-	width: var(--rf-drawer-size-lg);
-}
-
-dialog.rf-drawer[data-side="top"][data-size="sm"],
-dialog.rf-drawer[data-side="bottom"][data-size="sm"] {
-	height: var(--rf-drawer-size-sm);
-}
-dialog.rf-drawer[data-side="top"][data-size="md"],
-dialog.rf-drawer[data-side="bottom"][data-size="md"] {
-	height: var(--rf-drawer-size-md);
-}
-dialog.rf-drawer[data-side="top"][data-size="lg"],
-dialog.rf-drawer[data-side="bottom"][data-size="lg"] {
-	height: var(--rf-drawer-size-lg);
 }

package/styles/runes/embed.css

@@ -1,22 +1,15 @@
-/* Embed */
+@layer skin {
+/* Embed — skin. The responsive iframe wrapper + empty-fallback hide live in
+ * @refrakt-md/skeleton (styles/runes/embed.css). */
 .rf-embed {
 	margin: 0;
 	padding: 0;
 }
 .rf-embed__wrapper {
-	position: relative;
-	width: 100%;
-	height: 0;
-	overflow: hidden;
 	border-radius: var(--rf-radius-md);
 	background: var(--rf-color-surface);
 }
 .rf-embed__wrapper iframe {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
 	border: none;
 }
 .rf-embed__fallback {
@@ -27,6 +20,5 @@
 .rf-embed__fallback p:last-child {
 	margin-bottom: 0;
 }
-.rf-embed__fallback:empty {
-	display: none;
+
 }

package/styles/runes/event.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Event */
 
 /* When/where def-list — geometry from the shared `[data-zone-layout=
@@ -11,7 +12,6 @@
 	margin-top: 1.5rem;
 }
 .rf-event__register a {
-	display: inline-block;
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-primary);
 	color: var(--rf-color-on-primary);
@@ -37,3 +37,5 @@
 .rf-event__body a:hover {
 	color: var(--rf-color-primary-hover);
 }
+
+}

package/styles/runes/expand.css

@@ -1,53 +1,21 @@
-/* Expand — inline-substitution of a registered entity (SPEC-066).
- *
- * The wrapper is intentionally minimal — the embedded rune (plan rune,
- * character rune, etc.) renders itself standalone-style; expand just
- * provides the wrapper + canonical-link affordance. Themes that want
- * the embedded content visually distinguished from inline-authored
- * content target `.rf-expand .rf-spec`, `.rf-expand h1`, etc.
- *
- * Two visual treatments:
- *
- * 1. **Default (`level=` unset, peer-document mode)** — the embed reads
- *    like a quoted document. A subtle border + indent treatment marks
- *    it as set-aside material. Heading scale is dialed down slightly
- *    so an H1 inside the embed doesn't compete with the host's H1.
- * 2. **Sub-section mode (`level=` set)** — the embed merges into the
- *    host outline. The wrapper sheds the quoted treatment so it reads
- *    as authored sub-content. Authors opt into this by setting
- *    `level=`; CSS targets `.rf-expand:not([data-outline-scope])` to
- *    pick the right treatment automatically.
- */
-
+@layer skin {
+/* Expand — skin. The inline-block canonical-link box lives in @refrakt-md/skeleton
+ * (styles/runes/expand.css). */
 .rf-expand {
 	margin: var(--rf-spacing-md) 0;
 }
-
-/* Peer-document mode — no background, no rounded corners, no rules.
- * Reads as "set-aside material" through spacing alone, without competing
- * visually with the host content. Authors who want a stronger treatment
- * (rules, background, etc.) can override `.rf-expand[data-outline-scope]`
- * in their theme. */
 .rf-expand[data-outline-scope] {
 	padding: var(--rf-spacing-md) 0;
 }
-
-/* Tone down embedded headings so the host outline keeps visual primacy.
- * The semantic levels are preserved (H1 stays H1 etc.); only the visual
- * scale is adjusted in the peer-document treatment. Authors using
- * `level=` for sub-section mode get the normal heading scale. */
 .rf-expand[data-outline-scope] :is(h1, h2, h3, h4, h5, h6):first-child {
 	margin-top: 0;
 }
 .rf-expand[data-outline-scope] h1 { font-size: var(--rf-text-2xl); }
 .rf-expand[data-outline-scope] h2 { font-size: var(--rf-text-xl); }
 .rf-expand[data-outline-scope] h3 { font-size: var(--rf-text-lg); }
-
 .rf-expand > :first-child { margin-top: 0; }
 .rf-expand > :last-child { margin-bottom: 0; }
-
 .rf-expand__canonical-link {
-	display: inline-block;
 	margin-top: var(--rf-spacing-sm);
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-primary);
@@ -56,11 +24,6 @@
 .rf-expand__canonical-link:hover {
 	text-decoration: underline;
 }
-
-/* Error-state placeholder rendered when resolution fails. The build
- * also surfaces the error through `ctx.error`; this is the user-facing
- * affordance so the failure isn't silent. Keyed off `[data-expand-error]`
- * which the resolver sets on the error wrapper. */
 .rf-expand[data-expand-error] {
 	padding: var(--rf-spacing-sm) var(--rf-spacing-md);
 	border-left: 3px solid var(--rf-color-danger);
@@ -70,3 +33,5 @@
 	font-size: var(--rf-text-sm);
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
 }
+
+}

package/styles/runes/faction.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Faction — split/stacked geometry, the title, and the metadata def-list all
  * come from the shared layers: layouts/split.css ([data-layout] +
  * [data-section="media"]), dimensions/sections.css ([data-section="title"] /
@@ -28,12 +29,6 @@
 	row-gap: var(--rf-faction-media-gap);
 }
 
-/* Stacked layouts — beside layouts handled by shared split.css */
-.rf-faction[data-media-position="top"] {
-	display: flex;
-	flex-direction: column;
-}
-
 .rf-faction[data-media-position="top"] > .rf-faction__scene {
 	margin-bottom: var(--rf-faction-media-gap);
 }
@@ -43,8 +38,6 @@
 
 /* Content */
 .rf-faction__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-faction__content ul,
@@ -58,7 +51,6 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-faction-section__name {
-	display: block;
 	font-size: var(--rf-text-xl);
 	font-weight: var(--rf-weight-bold);
 	line-height: var(--rf-leading-snug);
@@ -69,3 +61,5 @@
 .rf-faction-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}

package/styles/runes/feature.css

@@ -1,10 +1,10 @@
-/* Feature */
+@layer skin {
+/* Feature — skin. The preamble/eyebrow/content/definitions-grid/icon layout and
+ * the media-position flip live in @refrakt-md/skeleton (styles/runes/feature.css). */
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
 .rf-feature__preamble {
-	flex-direction: column;
-	align-items: flex-start;
 	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
@@ -17,8 +17,6 @@
 	margin: 0 0 0.5rem;
 }
 .rf-feature__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
@@ -30,7 +28,7 @@
 }
 .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 { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-feature__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-feature__headline {
 	margin-top: 0;
 }
@@ -42,9 +40,6 @@
 .rf-feature__image {
 	margin-bottom: 1rem;
 }
-.rf-feature__content {
-	display: contents;
-}
 .rf-feature h2 {
 	margin-bottom: 2rem;
 }
@@ -63,20 +58,13 @@
 /* Definitions stack in a single column by default; the `--definitions-grid`
  * modifier (SPEC-091 media-position variant: top/bottom) tiles them as a grid. */
 .rf-feature__definitions {
-	display: block;
 	margin: 0;
 }
 .rf-feature--definitions-grid .rf-feature__definitions {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
 }
 /* Beside layouts (media on start/end): definitions stay stacked (no grid
  * modifier) inside the content track. */
-.rf-feature[data-media-position="start"] .rf-feature__content,
-.rf-feature[data-media-position="end"] .rf-feature__content {
-	display: block;
-}
 .rf-feature[data-media-position="start"] .rf-feature__preamble,
 .rf-feature[data-media-position="end"] .rf-feature__preamble,
 .rf-feature[data-media-position="start"] h2,
@@ -103,13 +91,7 @@
 	letter-spacing: var(--rf-tracking-tight);
 	color: var(--rf-color-text);
 }
-.rf-feature__feature-item dt:has(> .rf-icon) {
-	display: flex;
-	flex-direction: column;
-}
 .rf-feature__feature-item dt > .rf-icon {
-	width: 1.5rem;
-	height: 1.5rem;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-primary);
 }
@@ -133,14 +115,4 @@
 	padding: 0;
 }
 
-/* BUG-001 — content-first DOM inverts the shared media-first stacked contract
- * (layouts/split.css): counter it so the labels are truthful. `bottom` (the
- * default) is plain block flow — media after the content, the historical
- * look; an explicit `top` flips the visual order without touching the DOM. */
-.rf-feature[data-media-position="bottom"] {
-	display: block;
-}
-.rf-feature[data-media-position="top"] {
-	display: flex;
-	flex-direction: column-reverse;
 }

package/styles/runes/figure.css

@@ -1,23 +1,9 @@
-/* Figure */
+@layer skin {
+/* Figure — skin. The image box, frame-aspect fill, size max-widths, and alignment
+ * auto-margins live in @refrakt-md/skeleton (styles/runes/figure.css). */
 .rf-figure :is(img, .rf-placeholder) {
-	display: block;
-	max-width: 100%;
-	height: auto;
-	margin-inline: auto;
 	border-radius: var(--rf-radius-media);
 }
-
-/* When `frame-aspect` sets an explicit surface shape, the image fills the
- * shape rather than sitting at its natural size with whitespace on the
- * inline-end. `object-fit: cover` crops only if the natural aspect doesn't
- * match — and `frame-anchor` already picks the focal point of that crop
- * (the same contract as a card's media slot). */
-.rf-figure[style*="--frame-aspect"] :is(img, .rf-placeholder) {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	margin: 0;
-}
 .rf-figure figcaption {
 	margin-top: 0.625rem;
 	font-size: var(--rf-text-sm);
@@ -25,10 +11,5 @@
 	text-align: center;
 	font-style: italic;
 }
-.rf-figure--small { max-width: 320px; }
-.rf-figure--medium { max-width: 640px; }
-.rf-figure--large { max-width: 960px; }
-.rf-figure--full { max-width: 100%; }
-.rf-figure--left { margin-right: auto; }
-.rf-figure--center { margin-left: auto; margin-right: auto; }
-.rf-figure--right { margin-left: auto; }
+
+}

package/styles/runes/file-ref.css

@@ -1,21 +1,4 @@
-/* file-ref — path-based inline reference to a project file (SPEC-078).
- *
- * Renders as `<span class="rf-file-ref"><a>label</a></span>` in prose
- * (plus an invisible hoist sentinel `<meta>` when preview="drawer").
- * The span carries the data-rune class; the inner `<a>` is the click
- * target with its own visual treatment.
- *
- * Without preview, the link points at the canonical GitHub URL — give
- * it a small external-link affordance so readers know they're about to
- * leave the page. With preview, it points at the hoisted drawer's
- * fragment id; visually the same inline-link affordance — what makes
- * it a "preview link" rather than a "navigate-away link" is the drawer
- * that opens on click, not extra inline chrome.
- */
-
-.rf-file-ref {
-	display: inline;
-}
+@layer skin {
 
 .rf-file-ref > a {
 	color: var(--rf-color-primary);
@@ -29,3 +12,5 @@
 .rf-file-ref > a:hover {
 	text-decoration-thickness: 2px;
 }
+
+}