/* The Zelda Timeline page. Theme-aware. Branch colours: trunk gold, fallen hero red, child green, adult blue, future teal. */
.tl-intro{margin:0 0 14px}
.tl-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.tl-k{font-size:12px;font-weight:700;border-radius:12px;padding:3px 10px;color:#fff}
.tl-k.trunk{background:#9c7424}.tl-k.fallen{background:#b5453a}.tl-k.child{background:#2b7a4b}.tl-k.adult{background:#2f6fb0}.tl-k.future{background:#2a8a86}
.tl-h{margin:26px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--zx-line)}
.tl-card{position:relative;border:1px solid var(--zx-line);border-left:5px solid var(--tl,#9c7424);border-radius:10px;background:var(--zx-card);padding:10px 12px 11px;margin:0 0 10px;color:var(--zx-ink)}
.tl-card b{display:block;font-size:16px;line-height:1.3;padding-right:52px}.tl-card b a{color:inherit!important}
.tl-card p{margin:4px 0 0;font-size:13px;line-height:1.45;opacity:.85}
.tl-year{position:absolute;top:9px;right:10px;font-size:11px;font-weight:800;border-radius:7px;padding:1px 7px;background:color-mix(in srgb,var(--tl,#9c7424) 18%,transparent);color:var(--tl,#9c7424)}
.tl-also{display:block;margin-top:6px;font-size:12px;opacity:.85}
.tl-card.trunk{--tl:#b38a2e}.tl-card.fallen{--tl:#c0544a}.tl-card.child{--tl:#3a9a62}.tl-card.adult{--tl:#3f82c7}.tl-card.future{--tl:#2a9a95}.tl-card.out{--tl:#8a8f99}
.tl-trunk{position:relative;max-width:560px;margin:0 auto;padding-left:22px}
.tl-trunk:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:3px;border-radius:2px;background:linear-gradient(var(--tl-c,#b38a2e),var(--tl-c,#b38a2e))}
.tl-trunk .tl-card:before{content:"";position:absolute;left:-20px;top:16px;width:11px;height:11px;border-radius:50%;background:var(--zx-card);border:3px solid var(--tl,#b38a2e)}
.tl-split{display:grid;grid-template-columns:repeat(3,1fr);height:34px;max-width:100%;margin:-2px 0 0;position:relative}
.tl-split:before{content:"";position:absolute;left:16.6%;right:16.6%;top:16px;height:3px;background:linear-gradient(90deg,#c0544a,#3a9a62,#3f82c7);border-radius:2px}
.tl-split:after{content:"";position:absolute;left:calc(50% - 1.5px);top:0;height:18px;width:3px;background:#b38a2e}
.tl-split span{position:relative}.tl-split span:after{content:"";position:absolute;left:calc(50% - 1.5px);top:16px;height:18px;width:3px}
.tl-split span:nth-child(1):after{background:#c0544a}.tl-split span:nth-child(2):after{background:#3a9a62}.tl-split span:nth-child(3):after{background:#3f82c7}
.tl-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.tl-branch{border-radius:12px;padding:10px;background:color-mix(in srgb,var(--tl) 6%,transparent);border:1px solid color-mix(in srgb,var(--tl) 30%,transparent)}
.tl-branch.fallen{--tl:#c0544a}.tl-branch.child{--tl:#3a9a62}.tl-branch.adult{--tl:#3f82c7}
.tl-branch h3{margin:0 0 4px;font-size:16px;color:var(--tl)!important}
.tl-why{font-size:12px;line-height:1.45;margin:0 0 10px;opacity:.85}
.tl-branch .tl-card b{font-size:15px}
.tl-note{font-size:14px;opacity:.85;margin:0 0 12px}
.tl-outside{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 26px}
@media (max-width:800px){.tl-branches{grid-template-columns:1fr}.tl-split{display:none}.tl-outside{grid-template-columns:1fr}}
.tl-fut:before{background:#2a9a95!important}
