diff --git a/app/index.html b/app/index.html
index 30035d6..0c47c25 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1815,6 +1815,7 @@ function fmtDatetime(dtStr) {
   };
 
   function renderCalloutTag(container, tag) {
+    console.log('[mdcms callout] tag:', tag.tagName, '| options:', JSON.stringify(tag.options), '| body:', (tag.body || '').slice(0, 60));
     var typeMatch = tag.tagName.match(/^callout-(info|warning|success|error)$/);
     var calloutType = typeMatch ? typeMatch[1] : 'info';
 
@@ -1823,6 +1824,7 @@ function fmtDatetime(dtStr) {
     var title = opts.title || null;
     var iconName = opts.icon || null;
     var bodyMd = tag.body || '';
+    console.log('[mdcms callout] title =', JSON.stringify(title), '| msgKey =', msgKey);
 
     // Resolve message: key — config.yml callouts block
     if (msgKey) {
@@ -1861,13 +1863,17 @@ function fmtDatetime(dtStr) {
     container.style.setProperty('--callout-bg', hexToRgba(bgColour, 0.08));
 
     if (title) {
+      console.log('[mdcms callout] creating title row:', title);
       var titleRow = document.createElement('div');
       titleRow.className = 'mdcms-callout-title';
+      titleRow.style.color = primaryColour;  // bypass CSS var cascade
       titleRow.appendChild(iconEl(iconName));
       var titleText = document.createElement('span');
       titleText.textContent = title;
       titleRow.appendChild(titleText);
       container.appendChild(titleRow);
+    } else {
+      console.log('[mdcms callout] no title — skipping title row');
     }
 
     if (bodyMd) {