.chronicle-page .page-hero { padding: 2rem 0; background: linear-gradient(120deg, var(--color-surface-alt), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.chronicle-page .page-hero h1 { letter-spacing: -.035em; overflow-wrap: anywhere; }
.chronicle-page .page-hero p { color: var(--color-muted); margin: 0; }
.chronicle-body { padding: 1.5rem 0; }
.chronicle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.chronicle-grid > .state-block { grid-column: 1 / -1; }
.chronicle-card { display: flex; flex-direction: column; align-items: flex-start; border-top: 3px solid var(--color-primary); }
.chronicle-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.chronicle-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--color-primary); background: var(--color-surface-alt); font-size: 1.8rem; margin-bottom: 1rem; }
.chronicle-date { color: var(--color-muted); font-size: .8rem; margin: 0 0 .5rem; }
.chronicle-card h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
.chronicle-link { color: var(--color-primary); font-size: .85rem; font-weight: 700; margin-top: auto; padding-top: .7rem; }
.chronicle-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
#cronicaActions { margin-top: 1rem; }
.chronicle-reading { max-width: 850px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 2rem; }
.chronicle-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; font-size: 1.05rem; }
@media (max-width: 900px) { .chronicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .chronicle-grid { grid-template-columns: minmax(0, 1fr); } .chronicle-reading { padding: 1.2rem; } .chronicle-page .page-hero { padding: 1.2rem 0; } }