.chronicle-page { padding: 4rem 0; background: #f7f8f2; min-height: 70vh; }
.chronicle-header { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.chronicle-kicker { color: #7a8c42; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.chronicle-header h1 { color: #2c3e50; font-size: clamp(2.2rem, 6vw, 3.8rem); margin: .3rem 0 .6rem; }
.chronicle-header p, .chronicle-empty { color: #6f7b76; text-align: center; }
.chronicle-years { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 3rem; }
.chronicle-years a { color: #53652c; background: #e8efd7; border-radius: 999px; padding: .45rem .9rem; text-decoration: none; font-weight: 700; }
.chronicle-timeline { max-width: 900px; margin: auto; position: relative; }
.chronicle-timeline::before { content: ''; position: absolute; left: 83px; top: 1rem; bottom: 0; width: 2px; background: #d7dfc5; }
.chronicle-year { position: relative; scroll-margin-top: 6rem; }
.chronicle-year > h2 { color: #53652c; width: 68px; text-align: right; font-size: 1.55rem; position: sticky; top: 5rem; float: left; }
.chronicle-entry { margin: 0 0 2rem 115px; position: relative; }
.chronicle-dot { position: absolute; left: -39px; top: 1.6rem; width: 14px; height: 14px; border-radius: 50%; background: #849c48; border: 3px solid #f7f8f2; box-shadow: 0 0 0 2px #849c48; }
.chronicle-card { background: #fff; border-radius: 16px; padding: 1.4rem; box-shadow: 0 8px 26px rgba(48, 63, 43, .08); overflow: hidden; }
.chronicle-meta { display: flex; justify-content: space-between; gap: 1rem; color: #7a8c42; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.chronicle-card h3 { color: #2c3e50; font-size: 1.55rem; margin: .45rem 0 .8rem; }
.chronicle-card p { color: #5f6b66; line-height: 1.65; }
.chronicle-image { width: 100%; max-height: 390px; object-fit: cover; border-radius: 10px; display: block; margin: .8rem 0 1rem; }
.chronicle-location, .chronicle-people { color: #6f7b76; font-size: .9rem; margin-top: .5rem; }
.chronicle-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.1rem; }
.chronicle-actions a { color: #607633; font-weight: 700; text-decoration: none; }
.chronicle-actions a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .chronicle-page { padding-top: 2.5rem; }
    .chronicle-timeline::before { left: 10px; }
    .chronicle-year > h2 { position: static; float: none; width: auto; text-align: left; margin: 2rem 0 1rem 30px; }
    .chronicle-entry { margin-left: 40px; }
    .chronicle-dot { left: -36px; }
    .chronicle-card { padding: 1.1rem; }
}