3 files changed, 74 insertions, 48 deletions

diff --git a/src/content/dependencies/generateArtistInfoPageArtworksChunkItem.js b/src/content/dependencies/generateArtistInfoPageArtworksChunkItem.js
index 2f2fe0c5..b4b9ed6e 100644
--- a/src/content/dependencies/generateArtistInfoPageArtworksChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageArtworksChunkItem.js
@@ -3,6 +3,7 @@ export default {
     'generateArtistInfoPageChunkItem',
     'generateArtistInfoPageOtherArtistLinks',
     'linkTrack',
+    'transformContent',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -29,6 +30,9 @@ export default {
 
     otherArtistLinks:
       relation('generateArtistInfoPageOtherArtistLinks', [contrib]),
+
+    extraDetails:
+      relation('transformContent', contrib.thing.extraDetails),
   }),
 
   data: (query, contrib) => ({
@@ -68,5 +72,8 @@ export default {
                  : data.kind === 'banner'
                     ? language.$(capsule, 'bannerArt')
                     : language.$(capsule, 'coverArt')))))),
+
+      extraDetails:
+        relations.extraDetails.slot('mode', 'inline'),
     }),
 };
diff --git a/src/content/dependencies/generateArtistInfoPageChunkItem.js b/src/content/dependencies/generateArtistInfoPageChunkItem.js
index 7987b642..6baf3c5a 100644
--- a/src/content/dependencies/generateArtistInfoPageChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageChunkItem.js
@@ -33,6 +33,11 @@ export default {
       type: 'html',
       mutable: false,
     },
+
+    extraDetails: {
+      type: 'html',
+      mutable: false,
+    },
   },
 
   generate: (relations, slots, {html, language}) =>
@@ -40,52 +45,59 @@ export default {
       html.tag('li',
         slots.rerelease && {class: 'rerelease'},
 
-        language.encapsulate(entryCapsule, workingCapsule => {
-          const workingOptions = {entry: slots.content};
-
-          if (!html.isBlank(slots.rereleaseTooltip)) {
-            workingCapsule += '.rerelease';
-            workingOptions.rerelease =
-              relations.textWithTooltip.slots({
-                attributes: {class: 'rerelease'},
-                text: language.$(entryCapsule, 'rerelease.term'),
-                tooltip: slots.rereleaseTooltip,
-              });
-
-            return language.$(workingCapsule, workingOptions);
-          }
-
-          if (!html.isBlank(slots.firstReleaseTooltip)) {
-            workingCapsule += '.firstRelease';
-            workingOptions.firstRelease =
-              relations.textWithTooltip.slots({
-                attributes: {class: 'first-release'},
-                text: language.$(entryCapsule, 'firstRelease.term'),
-                tooltip: slots.firstReleaseTooltip,
-              });
-
-            return language.$(workingCapsule, workingOptions);
-          }
-
-          let anyAccent = false;
-
-          if (!empty(slots.otherArtistLinks)) {
-            anyAccent = true;
-            workingCapsule += '.withArtists';
-            workingOptions.artists =
-              language.formatConjunctionList(slots.otherArtistLinks);
-          }
-
-          if (!html.isBlank(slots.annotation)) {
-            anyAccent = true;
-            workingCapsule += '.withAnnotation';
-            workingOptions.annotation = slots.annotation;
-          }
-
-          if (anyAccent) {
-            return language.$(workingCapsule, workingOptions);
-          } else {
-            return slots.content;
-          }
-        }))),
+        html.tags([
+          language.encapsulate(entryCapsule, workingCapsule => {
+            const workingOptions = {entry: slots.content};
+
+            if (!html.isBlank(slots.rereleaseTooltip)) {
+              workingCapsule += '.rerelease';
+              workingOptions.rerelease =
+                relations.textWithTooltip.slots({
+                  attributes: {class: 'rerelease'},
+                  text: language.$(entryCapsule, 'rerelease.term'),
+                  tooltip: slots.rereleaseTooltip,
+                });
+
+              return language.$(workingCapsule, workingOptions);
+            }
+
+            if (!html.isBlank(slots.firstReleaseTooltip)) {
+              workingCapsule += '.firstRelease';
+              workingOptions.firstRelease =
+                relations.textWithTooltip.slots({
+                  attributes: {class: 'first-release'},
+                  text: language.$(entryCapsule, 'firstRelease.term'),
+                  tooltip: slots.firstReleaseTooltip,
+                });
+
+              return language.$(workingCapsule, workingOptions);
+            }
+
+            let anyAccent = false;
+
+            if (!empty(slots.otherArtistLinks)) {
+              anyAccent = true;
+              workingCapsule += '.withArtists';
+              workingOptions.artists =
+                language.formatConjunctionList(slots.otherArtistLinks);
+            }
+
+            if (!html.isBlank(slots.annotation)) {
+              anyAccent = true;
+              workingCapsule += '.withAnnotation';
+              workingOptions.annotation = slots.annotation;
+            }
+
+            if (anyAccent) {
+              return language.$(workingCapsule, workingOptions);
+            } else {
+              return slots.content;
+            }
+          }),
+
+          html.tag('span', {class: 'extra-details'},
+            {[html.onlyIfContent]: true},
+
+            slots.extraDetails),
+        ]))),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 84a665f3..87e81605 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -2148,6 +2148,13 @@ ul > li.has-details {
   margin-left: -17px;
 }
 
+li .extra-details {
+  display: block;
+  margin-left: 2ch;
+  font-size: 0.9em;
+  font-style: oblique;
+}
+
 .album-group-list dt,
 .group-series-list dt {
   font-style: oblique;