#storyline-focus { max-width: 1224px; margin: 1.5rem auto; padding: 1.25rem 28px; border: 1px solid #746b85; border-radius: .45rem; background: #f5f2f8; color: #302b38; }
#storyline-focus[hidden], article.event[hidden] { display: none !important; }
#storyline-focus h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
.storyline-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.storyline-buttons button { font: inherit; font-weight: 650; line-height: 1.4; padding: .65rem .85rem; min-height: 44px; border: 1px solid #695879; border-radius: .3rem; background: white; color: #493561; cursor: pointer; }
.storyline-buttons button[aria-pressed="true"] { background: #58368a; color: white; border-color: #58368a; }
.storyline-buttons button:focus-visible { outline: 3px solid #9a4a00; outline-offset: 3px; }
#storyline-intro { max-width: 72ch; margin: 1rem 0 .5rem; }
#storyline-count { font-weight: 650; margin-bottom: 0; }
article.event.storyline-context { background: #f5f3f7; border-left-color: #746b85; }
.storyline-context-label { display: inline-block; padding: .2rem .55rem; margin: 0 0 .65rem; font-size: .9rem; font-weight: 700; color: #4b3b5c; background: #e9e2f0; border-radius: .2rem; }
@media(max-width:480px) { #storyline-focus { padding: .9rem; } .storyline-buttons { flex-direction: column; } .storyline-buttons button { width: 100%; text-align: left; } }
.timeline > .chapter[hidden], .timeline > .opening[hidden], .timeline > .platform-transition[hidden], .timeline > .year[hidden] { display: none !important; }