--- a/mrjunejune/src/jrpg/jrpg.css	Wed Aug 05 20:38:32 2026 -0700
+++ b/mrjunejune/src/jrpg/jrpg.css	Thu Aug 06 04:08:45 2026 -0700
@@ -534,13 +534,13 @@
   margin-bottom: var(--zenbu-sys-space-content);
 }
 
-.jrpg-preview-dialog dialog.jrpg-resume-dialog {
+.jrpg-preview-dialog dialog.jrpg-detail-dialog {
   width: min(94vw, 72rem);
   max-height: calc(100dvh - var(--zenbu-sys-space-container));
   overflow: hidden;
 }
 
-.jrpg-preview-dialog dialog.jrpg-resume-dialog[open] {
+.jrpg-preview-dialog dialog.jrpg-detail-dialog[open] {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   gap: var(--zenbu-sys-space-group);
@@ -556,7 +556,9 @@
 }
 
 .jrpg-resume-dossier[hidden],
+.jrpg-blog-browser[hidden],
 [data-dialog-copy][hidden],
+[data-blog-status][hidden],
 [data-resume-status][hidden],
 [data-resume-download][hidden] {
   display: none;
@@ -657,6 +659,102 @@
   gap: var(--zenbu-sys-space-control);
 }
 
+.jrpg-blog-browser {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
+  gap: var(--zenbu-sys-space-group);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.jrpg-blog-browser > aside,
+.jrpg-blog-browser > article {
+  min-height: 0;
+  padding: var(--zenbu-sys-padding-md);
+  overflow: auto;
+  border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  background: var(--mjj-jrpg-surface-sunken);
+  scrollbar-color: var(--mjj-jrpg-frame) transparent;
+}
+
+.jrpg-blog-browser h3,
+.jrpg-blog-browser [data-blog-status] {
+  margin-top: 0;
+  color: var(--mjj-jrpg-highlight);
+}
+
+.jrpg-blog-browser [data-blog-list] {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.jrpg-blog-browser [data-blog-list] zen-button,
+.jrpg-blog-browser [data-blog-list] button {
+  width: 100%;
+}
+
+.jrpg-blog-browser [data-blog-list] button {
+  display: grid;
+  justify-items: start;
+  gap: var(--zenbu-sys-space-icon-label);
+  border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  border-radius: 0;
+  background: var(--mjj-jrpg-panel);
+  color: var(--mjj-jrpg-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.jrpg-blog-browser [data-blog-list] button:hover,
+.jrpg-blog-browser [data-blog-list] button[aria-pressed="true"] {
+  border-color: var(--mjj-jrpg-accent);
+  background: var(--mjj-jrpg-surface-raised);
+}
+
+.jrpg-blog-browser [data-blog-list] small {
+  color: var(--mjj-jrpg-text-muted);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+.jrpg-blog-browser [data-blog-content] {
+  color: var(--mjj-jrpg-text);
+  line-height: var(--zenbu-sys-line-height-lg);
+}
+
+.jrpg-blog-browser [data-blog-content] :where(h1, h2, h3, h4) {
+  color: var(--mjj-jrpg-primary);
+}
+
+.jrpg-blog-browser [data-blog-content] a {
+  color: var(--mjj-jrpg-primary);
+  text-decoration-color: var(--mjj-jrpg-accent);
+  text-underline-offset: var(--zenbu-sys-space-icon-label);
+}
+
+.jrpg-blog-browser [data-blog-content] :where(img, video) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+
+.jrpg-blog-browser [data-blog-content] :where(pre, blockquote) {
+  max-width: 100%;
+  padding: var(--zenbu-sys-padding-md);
+  overflow: auto;
+  border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
+  background: var(--mjj-jrpg-panel);
+}
+
+.jrpg-blog-browser [data-blog-content] code {
+  color: var(--mjj-jrpg-success);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 mjj-jrpg-composer {
   grid-area: composer;
   display: block;
@@ -948,6 +1046,15 @@
     width: 100%;
   }
 
+  .jrpg-blog-browser {
+    grid-template-columns: 1fr;
+    overflow: auto;
+  }
+
+  .jrpg-blog-browser > aside {
+    max-height: 16rem;
+  }
+
   mjj-jrpg-menu ul {
     grid-template-columns: 1fr;
   }