.chronicle-banner{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--folio-edge);border-radius:10px;background:var(--folio-soft);margin:8px 0}.chronicle-banner>div{flex:1;min-width:0}.chronicle-banner strong,.chronicle-banner span{display:block}.chronicle-banner span{font-size:12px;color:var(--muted);line-height:1.5}.chronicle-banner button{flex:none}.chronicle-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.chronicle-title h1{margin:0}.chronicle-title>span{font-size:12px;color:var(--muted)}.chronicle-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.chronicle-tabs button{min-width:0;padding:6px;min-height:40px;font-size:13px}.chronicle-tabs button[aria-current=page]{background:var(--folio-selected);border-color:var(--folio-edge);color:var(--green)}.chronicle-story,.chronicle-forge{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:10px;margin:8px 0}.chronicle-story h2,.chronicle-forge h2{font-size:16px;margin:3px 0 8px}.chronicle-story .prose{font-size:14px;line-height:1.8;margin:8px 0 12px}.chronicle-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chronicle-choices>div{padding:8px;background:var(--folio-soft);border-radius:8px}.chronicle-choices button{min-height:40px;width:100%;padding:6px;font-size:13px}.chronicle-choices p{font-size:12px;line-height:1.55;margin:5px 0}.chronicle-panel .note{font-size:12px;line-height:1.6}.chronicle-panel details{border-top:1px solid var(--line);padding-top:6px;margin-top:8px}.chronicle-panel summary{color:var(--green);font-size:12px;min-height:32px}.chronicle-ranks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.chronicle-ranks button{font-size:12px;padding:5px;min-height:40px}.chronicle-run{border-left:3px solid var(--folio-edge);background:var(--folio-soft);padding:7px 10px;margin:8px 0}.chronicle-run p{margin:3px 0;font-size:12px;line-height:1.5}.chronicle-run strong{font-size:13px;color:var(--green)}

/* Keep the chapter heading and opening lines together in a narrow paged column. */
@media(max-width:900px){
 .screen-paper .chronicle-title h1{line-height:1.25}
 .screen-paper .chronicle-tabs{margin:6px 0}
 .screen-paper .chronicle-story{break-inside:auto}
 .screen-paper .chronicle-story>.kicker{float:right;margin:4px 0 0 8px}
}