@refrakt-md/lumina 0.8.1 → 0.8.3

package/styles/layouts/default.css

@@ -113,14 +113,20 @@
 	);
 }
 
-/* Section spacing — vertical rhythm between block runes
- * Symmetric margins collapse between plain sections (no visual change)
- * but ensure correct gaps at plain→tinted boundaries (where tinted
- * sections use padding instead of margin). */
-.rf-page-content > article > * + * {
+/* Section spacing — vertical rhythm around block runes.
+ * Rune blocks (elements with data-rune) get section-level margins.
+ * Prose elements (p, h2, pre, table, etc.) keep their natural flow
+ * spacing from global.css — only gaining section margins when
+ * immediately adjacent to a rune block. */
+.rf-page-content > article > * + [data-rune] {
 	margin-top: var(--rf-spacing-section, 4rem);
 	margin-bottom: var(--rf-spacing-section, 4rem);
 }
+/* Prose after a rune block: section gap above only.
+ * No margin-bottom so subsequent prose keeps natural flow spacing. */
+.rf-page-content > article > [data-rune] + :not([data-rune]) {
+	margin-top: var(--rf-spacing-section, 4rem);
+}
 .rf-page-content > article > [data-spacing="flush"] {
 	margin-top: 0;
 	margin-bottom: 0;

package/styles/layouts/search.css

@@ -200,7 +200,10 @@
 		bottom: 0;
 		transform: none;
 		width: 100%;
+		height: 100vh;
+		height: 100dvh;
 		max-height: 100vh;
+		max-height: 100dvh;
 		border-radius: 0;
 		border: none;
 	}

package/styles/runes/audio.css

@@ -1,9 +1,6 @@
 /* Audio */
 .rf-audio {
 	margin: 1.5rem 0;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 .rf-audio rf-audio {
 	display: block;
@@ -12,7 +9,6 @@
 	padding: 0.75rem 1rem;
 	font-size: 0.875rem;
 	color: var(--rf-color-muted);
-	border-top: 1px solid var(--rf-color-border);
 	line-height: 1.5;
 }
 .rf-audio__description p {
@@ -145,9 +141,8 @@
 .rf-audio-player__chapters {
 	list-style: none;
 	padding: 0;
-	margin: 0.5rem 0 0;
-	border-top: 1px solid var(--rf-color-border);
-	padding-top: 0.5rem;
+	margin: 0.75rem 0 0;
+	padding-top: 0;
 }
 .rf-audio-player__chapter {
 	display: flex;

package/styles/runes/bond.css

@@ -3,9 +3,6 @@
 	display: flex;
 	align-items: center;
 	gap: 1rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 1rem 1.5rem;
 	margin: 1rem 0;
 }
 .rf-bond > span[property="from"],

package/styles/runes/budget.css

@@ -1,14 +1,9 @@
 /* Budget */
 .rf-budget {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 2rem;
 	margin: 1.5rem 0;
 }
 .rf-budget__header {
 	margin-bottom: 1.5rem;
-	padding-bottom: 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-budget__title {
 	margin: 0 0 0.5rem;
@@ -16,44 +11,43 @@
 	font-weight: 700;
 	color: var(--rf-color-text);
 }
+
+/* Meta bar — single surface strip matching recipe pattern */
 .rf-budget__meta {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 1rem;
+	gap: 0.75rem 1.25rem;
 	align-items: center;
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: 0.625rem 1rem;
 }
 .rf-budget__meta-item {
 	font-size: 0.8125rem;
-	font-weight: 500;
+	font-weight: 400;
 	color: var(--rf-color-muted);
-	padding: 0.125rem 0.5rem;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-full);
 }
+
+/* Categories */
 .rf-budget__categories {
 	display: flex;
 	flex-direction: column;
-	gap: 1.25rem;
+	gap: 1.5rem;
 }
 
-/* Budget Category */
+/* Budget Category — no border box, spacing and typography create hierarchy */
 .rf-budget-category {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 1rem 1.25rem;
-	background: var(--rf-color-bg);
+	padding: 0;
 }
 .rf-budget-category--estimate {
-	border-style: dashed;
-	border-color: var(--rf-color-warning);
+	border-left: 2px dashed var(--rf-color-warning);
+	padding-left: 1rem;
 }
 .rf-budget-category__header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 0.75rem;
-	padding-bottom: 0.5rem;
-	border-bottom: 1px solid var(--rf-color-border);
+	margin-bottom: 0.5rem;
 }
 .rf-budget-category--estimate .rf-budget-category__header::after {
 	content: 'est.';
@@ -109,7 +103,7 @@
 	font-variant-numeric: tabular-nums;
 }
 
-/* Budget Footer (injected by postTransform) */
+/* Budget Footer — total line */
 .rf-budget__footer {
 	margin-top: 1.5rem;
 	padding-top: 1rem;
@@ -159,6 +153,4 @@
 }
 [data-variant="summary"] .rf-budget-category__header {
 	margin-bottom: 0;
-	padding-bottom: 0;
-	border-bottom: none;
 }

package/styles/runes/cast.css

@@ -2,50 +2,54 @@
 .rf-cast {
 	margin: 1.5rem 0;
 }
+
+/* Members list — base */
 .rf-cast__members {
-	display: contents;
+	list-style: none;
+	padding: 0;
+	margin: 0;
 }
-.rf-cast--grid ul {
+
+/* Grid layout (default) */
+.rf-cast--grid .rf-cast__members {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 	gap: 1rem;
-	list-style: none;
-	padding: 0;
 }
-.rf-cast--list ul {
+
+/* List layout */
+.rf-cast--list .rf-cast__members {
 	display: flex;
 	flex-direction: column;
 	gap: 0.75rem;
-	list-style: none;
-	padding: 0;
 }
+
+/* Member card — surface instead of border */
 .rf-cast-member {
-	border: 1px solid var(--rf-color-border);
+	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-md);
 	padding: 1.25rem;
 	text-align: center;
 }
-.rf-cast-member__info {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-}
 .rf-cast-member__name {
+	display: block;
 	font-weight: 600;
 	font-size: 1rem;
 	color: var(--rf-color-text);
 }
 .rf-cast-member__role {
+	display: block;
 	font-size: 0.875rem;
 	color: var(--rf-color-muted);
+	margin-top: 0.125rem;
 }
 .rf-cast-member__body {
 	margin-top: 0.75rem;
 	font-size: 0.875rem;
 	color: var(--rf-color-muted);
+	line-height: 1.5;
 }
 .rf-cast-member__body:empty { display: none; }
-.rf-cast-member__body > span[property] { display: none; }
 .rf-cast-member img {
 	width: 80px;
 	height: 80px;
@@ -54,3 +58,22 @@
 	margin: 0 auto 0.75rem;
 	display: block;
 }
+
+/* List layout — horizontal member cards */
+.rf-cast--list .rf-cast-member {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	text-align: left;
+	padding: 0.75rem 1rem;
+}
+.rf-cast--list .rf-cast-member img {
+	width: 48px;
+	height: 48px;
+	margin: 0;
+	flex-shrink: 0;
+}
+.rf-cast--list .rf-cast-member__body {
+	margin-top: 0;
+	flex: 1;
+}

package/styles/runes/character.css

@@ -1,38 +1,30 @@
 /* Character */
 .rf-character {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 2rem;
 	margin: 1.5rem 0;
 }
+
+/* Badge bar — surface strip */
 .rf-character__badge {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 0.5rem;
+	gap: 0.75rem 1.25rem;
+	align-items: center;
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: 0.625rem 1rem;
 	margin-bottom: 1rem;
 }
-.rf-character__role-badge {
-	display: inline-block;
-	padding: 0.25rem 0.75rem;
-	border-radius: var(--rf-radius-full);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	background: var(--rf-color-muted-bg);
-	color: var(--rf-color-muted);
-}
+.rf-character__role-badge,
 .rf-character__status-badge {
-	display: inline-block;
-	padding: 0.25rem 0.75rem;
-	border-radius: var(--rf-radius-full);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	background: var(--rf-color-muted-bg);
+	font-size: 0.8125rem;
+	font-weight: 500;
+	text-transform: capitalize;
 	color: var(--rf-color-muted);
 }
+.rf-character__role-badge::before { content: 'Role: '; font-weight: 400; opacity: 0.65; }
+.rf-character__status-badge::before { content: 'Status: '; font-weight: 400; opacity: 0.65; }
+
+/* Portrait */
 .rf-character__portrait {
 	float: right;
 	margin-left: 1.5rem;
@@ -47,6 +39,8 @@
 	height: 100%;
 	object-fit: cover;
 }
+
+/* Content */
 .rf-character__sections {
 	display: flex;
 	flex-direction: column;
@@ -67,23 +61,19 @@
 	color: var(--rf-color-heading);
 }
 
-/* Role variant colors */
+/* Role variant colors — text color only */
 .rf-character[data-role="protagonist"] .rf-character__role-badge {
-	background: var(--rf-color-success-bg);
 	color: var(--rf-color-success);
 }
 .rf-character[data-role="antagonist"] .rf-character__role-badge {
-	background: var(--rf-color-danger-bg);
 	color: var(--rf-color-danger);
 }
 
-/* Status indicators */
+/* Status indicators — text color only */
 .rf-character[data-status="dead"] .rf-character__status-badge {
-	background: var(--rf-color-danger-bg);
 	color: var(--rf-color-danger);
 }
 .rf-character[data-status="missing"] .rf-character__status-badge {
-	background: var(--rf-color-warning-bg);
 	color: var(--rf-color-warning);
 }
 

package/styles/runes/datatable.css

@@ -1,9 +1,6 @@
 /* DataTable */
 .rf-datatable {
 	margin: 1.5rem 0;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
 }
 .rf-datatable__toolbar {
 	display: flex;
@@ -58,8 +55,7 @@
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-hover);
-	border-bottom: 1px solid var(--rf-color-border);
+	background: var(--rf-color-surface);
 }
 .rf-datatable__content th[style*="cursor"]:hover {
 	color: var(--rf-color-text);
@@ -85,7 +81,7 @@
 	justify-content: flex-end;
 	gap: 0.75rem;
 	padding: 0.5rem 0.75rem;
-	border-top: 1px solid var(--rf-color-border);
+	background: var(--rf-color-surface);
 }
 .rf-datatable__page-btn {
 	padding: 0.25rem 0.5rem;

package/styles/runes/event.css

@@ -1,29 +1,28 @@
 /* Event */
 .rf-event {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 2rem;
 	margin: 1.5rem 0;
 }
 .rf-event__details {
 	display: flex;
 	flex-wrap: wrap;
+	align-items: center;
 	gap: 1.5rem;
-	padding-bottom: 1rem;
-	margin-bottom: 1.5rem;
-	border-bottom: 1px solid var(--rf-color-border);
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: 0.75rem 1rem;
 }
 .rf-event__detail {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
+	display: block;
 }
 .rf-event__label {
+	display: block;
+	margin-bottom: 0.125rem;
 	font-size: 0.75rem;
-	font-weight: 600;
+	font-weight: 400;
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 	color: var(--rf-color-muted);
+	opacity: 0.6;
 }
 .rf-event__value {
 	font-size: 0.9375rem;
@@ -39,11 +38,14 @@
 	font-weight: 500;
 	font-size: 0.875rem;
 	text-decoration: none;
-	margin-top: 0.25rem;
+	margin-left: auto;
 }
 .rf-event__register:hover {
 	background: var(--rf-color-primary-hover);
 }
+.rf-event__content {
+	margin-top: 1.5rem;
+}
 .rf-event__content ul,
 .rf-event__content ol {
 	padding-left: 1.5rem;

package/styles/runes/faction.css

@@ -1,57 +1,51 @@
 /* Faction */
 .rf-faction {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 2rem;
 	margin: 1.5rem 0;
+	display: flex;
+	flex-direction: column;
 }
+
+/* Badge bar — surface strip */
 .rf-faction__badge {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 0.5rem;
+	gap: 0.75rem 1.25rem;
+	align-items: center;
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: 0.625rem 1rem;
 	margin-bottom: 1rem;
 }
-.rf-faction__type-badge {
-	display: inline-block;
-	padding: 0.25rem 0.75rem;
-	border-radius: var(--rf-radius-full);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	background: var(--rf-color-muted-bg);
+.rf-faction__type-badge,
+.rf-faction__alignment-badge,
+.rf-faction__size-badge {
+	font-size: 0.8125rem;
+	font-weight: 500;
+	text-transform: capitalize;
 	color: var(--rf-color-muted);
 }
-.rf-faction__alignment-badge {
-	display: inline-block;
-	padding: 0.25rem 0.75rem;
-	border-radius: var(--rf-radius-full);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	background: var(--rf-color-muted-bg);
-	color: var(--rf-color-muted);
+.rf-faction__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
+.rf-faction__alignment-badge::before { content: 'Alignment: '; font-weight: 400; opacity: 0.65; }
+.rf-faction__size-badge::before { content: 'Size: '; font-weight: 400; opacity: 0.65; }
+
+/* Scene image */
+.rf-faction__scene {
+	border-radius: var(--rf-radius-lg);
+	overflow: hidden;
 }
-.rf-faction__size-badge {
-	display: inline-block;
-	padding: 0.25rem 0.75rem;
-	border-radius: var(--rf-radius-full);
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	background: var(--rf-color-muted-bg);
-	color: var(--rf-color-muted);
+.rf-faction__scene img {
+	display: block;
+	width: 100%;
+	height: auto;
+	border-radius: var(--rf-radius-lg);
 }
+
+/* Content */
 .rf-faction__sections {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 }
-.rf-faction__content {
-	/* content wrapper */
-}
 .rf-faction__content ul,
 .rf-faction__content ol {
 	padding-left: 1.5rem;
@@ -62,6 +56,7 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
+	order: -1;
 }
 
 /* Faction Section */
@@ -79,3 +74,51 @@
 .rf-faction-section__body ol {
 	padding-left: 1.5rem;
 }
+
+/* Split layout — shared */
+.rf-faction[data-layout="split"],
+.rf-faction[data-layout="split-reverse"] {
+	display: grid;
+	grid-template-columns: var(--split-ratio, 1fr 1fr);
+	gap: var(--split-gap, 2rem);
+	align-items: var(--split-valign, start);
+}
+/* Name and badge span full width at the top */
+.rf-faction[data-layout="split"] > span[property="name"],
+.rf-faction[data-layout="split-reverse"] > span[property="name"] {
+	grid-column: 1 / -1;
+	grid-row: 1;
+}
+.rf-faction[data-layout="split"] > .rf-faction__badge,
+.rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
+	grid-column: 1 / -1;
+	grid-row: 2;
+}
+/* Split: content left (col 1), scene right (col 2) */
+.rf-faction[data-layout="split"] > .rf-faction__content {
+	grid-column: 1;
+	grid-row: 3;
+}
+.rf-faction[data-layout="split"] > .rf-faction__scene {
+	grid-column: 2;
+	grid-row: 3;
+}
+/* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
+/* Collapse to single column on small screens */
+@media (max-width: 640px) {
+	.rf-faction[data-layout="split"],
+	.rf-faction[data-layout="split-reverse"] {
+		grid-template-columns: 1fr;
+	}
+	.rf-faction[data-layout="split"] > .rf-faction__content,
+	.rf-faction[data-layout="split"] > .rf-faction__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+}
+
+/* Split layout scene gets subtle depth */
+.rf-faction[data-layout="split"] .rf-faction__scene img,
+.rf-faction[data-layout="split-reverse"] .rf-faction__scene img {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}

package/styles/runes/howto.css

@@ -1,37 +1,89 @@
-/* HowTo */
+/* HowTo — matches recipe design */
+
+/* Root: no border box, just flow spacing */
 .rf-howto {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	padding: 2rem;
 	margin: 1.5rem 0;
 }
+
+/* Meta bar — soft surface strip */
 .rf-howto__meta {
 	display: flex;
-	gap: 1.5rem;
-	padding-bottom: 1rem;
+	flex-wrap: wrap;
+	gap: 0.75rem 1.25rem;
+	align-items: center;
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: 0.625rem 1rem;
 	margin-bottom: 1.5rem;
-	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-howto__meta-item {
-	font-size: 0.875rem;
+	font-size: 0.8125rem;
 	color: var(--rf-color-muted);
-	font-weight: 500;
+	font-weight: 400;
 }
+
+/* Tools/materials list — surfaced zone with primary markers */
 .rf-howto__content ul {
-	background: var(--rf-color-surface-hover);
+	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-md);
-	padding: 1rem 1rem 1rem 2.5rem;
-	margin-bottom: 1rem;
+	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
+	margin: 0 0 1.75rem;
 	list-style: disc;
 }
+.rf-howto__content ul li {
+	padding: 0.2rem 0;
+	line-height: 1.6;
+}
+.rf-howto__content ul li::marker {
+	color: var(--rf-color-primary);
+}
+
+/* Steps — numbered with styled counters */
 .rf-howto__content ol {
-	padding-left: 1.5rem;
-	counter-reset: step;
+	padding-left: 0;
+	margin: 0;
+	list-style: none;
+	counter-reset: howto-step;
 }
 .rf-howto__content ol > li {
-	padding: 0.5rem 0;
-	border-bottom: 1px solid var(--rf-color-border);
+	counter-increment: howto-step;
+	padding: 0.625rem 0;
+	padding-left: 2.25rem;
+	position: relative;
+	line-height: 1.65;
+}
+.rf-howto__content ol > li + li {
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-howto__content ol > li::before {
+	content: counter(howto-step);
+	position: absolute;
+	left: 0;
+	top: 0.625rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--rf-color-primary);
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-full);
+}
+
+/* Tips — callout accent like hint */
+.rf-howto__content blockquote {
+	border-left: 2px solid var(--rf-color-primary);
+	background: var(--rf-color-surface);
+	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
+	padding: 0.75rem 1.25rem;
+	margin: 1.75rem 0 0;
+	font-size: 0.9125rem;
+	font-style: italic;
+	color: var(--rf-color-muted);
+	line-height: 1.6;
 }
-.rf-howto__content ol > li:last-child {
-	border-bottom: none;
+.rf-howto__content blockquote p {
+	margin: 0;
 }