/* Story-order Timeline (story.js). Works in both looks: light (parchment) uses the base variables, dark (cinematic) overrides below. */
.sy-switch { display: inline-flex; margin: .2rem 0 .6rem; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; max-width: 100%; }
.sy-switch a { flex: 1 1 auto; text-decoration: none; font: 600 .9rem var(--sans); color: var(--accent); padding: .5rem .95rem; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.sy-switch a.on { background: var(--accent); color: #fff8ee; }
.sy-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .4rem; margin: .5rem 0 .8rem; }
.sy-parts a { display: flex; gap: .5rem; align-items: center; text-decoration: none; color: var(--ink); font: 500 .9rem var(--sans); padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 253, 248, .6); min-height: 44px; box-sizing: border-box; }
.sy-parts a b { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff8ee; font-size: .85rem; }
.sy-part > h3 .sy-num { display: block; font: 600 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.sy-part > h3 small { display: block; margin-top: .1rem; }
.sy-prefs { margin: -.2rem 0 .6rem; font-size: .85rem; }
.sy-undated { font-style: italic; }
li.sy-new { position: relative; }
li.sy-new::after { content: "New"; position: absolute; top: .55rem; right: .6rem; font: 600 .65rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem; }
li.sy-new h4 { padding-right: 3rem; }
html:not(.light) .sy-switch { border-color: rgba(217, 179, 106, .35); background: rgba(21, 16, 11, .55); }
html:not(.light) .sy-switch a { color: var(--gold2); }
html:not(.light) .sy-switch a.on { background: linear-gradient(180deg, #e6c47f, #c89d52); color: #1a130b; }
html:not(.light) .sy-parts a { background: var(--surface); color: var(--cream); border-color: var(--line); }
html:not(.light) .sy-parts a b { background: linear-gradient(180deg, #e6c47f, #c89d52); color: #1a130b; }
html:not(.light) .sy-part > h3 .sy-num { color: var(--gold); }
@media (max-width: 420px) { .sy-switch { display: flex; } .sy-switch a { padding: .5rem .6rem; font-size: .86rem; } }
.sy-bg { margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-soft); }
.sy-bg a { color: var(--accent); }
html:not(.light) .sy-bg a { color: var(--gold2); }