/* fix714 — HIS TIMELINE polish (Ki 7:14 PM Oct 19): calm, consistent cards; glossy deep green dates, white titles; features play their real video. Scoped to #timeline. */
#timeline{--g1:#1f6d04;--g2:#3f9f0e;--gtx:var(--sl-text,linear-gradient(180deg,#f4ffdc 0%,#bdf466 16%,#78d426 36%,#3f9f0e 58%,#1f6d04 80%,#114e00 100%))}
#timeline .tl ol{padding-left:66px}
#timeline .tl-i{margin:0 0 16px}
#timeline .tl-s{display:none!important}
#timeline .tl-dot{top:24px;left:-42px;width:14px;height:14px;background:#0a0f0a;border:3px solid var(--g1);box-shadow:none}
#timeline .tl-i.on .tl-dot{background:radial-gradient(circle at 35% 30%,#b9f07a 0,#3f9f0e 45%,#1f6d04 100%);border-color:#0f3d02;transform:scale(1.2);box-shadow:0 0 0 3px rgba(31,109,4,.35),0 0 12px rgba(63,159,14,.45)}
#timeline .tl-c{display:flex;flex-direction:row;align-items:center;gap:14px;text-align:left;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(22,28,22,.94),rgba(7,10,7,.96));box-shadow:0 10px 24px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);color:#fff;text-decoration:none;min-height:100px;box-sizing:border-box;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .2s}
#timeline .tl-i.on .tl-c{border-color:#2a7d0b;box-shadow:0 10px 24px -14px rgba(0,0,0,.9),0 0 0 1px rgba(31,109,4,.35),0 0 18px -6px rgba(63,159,14,.5)}
#timeline a.tl-c:active{transform:scale(.985)}
#timeline .tl-c>span.tl-tx{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;flex:1 1 auto}
#timeline .tl-d{font:800 12.5px/1.15 var(--ui,system-ui),sans-serif;letter-spacing:2px;text-transform:uppercase;background-image:var(--gtx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#3f9f0e;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
#timeline .tl-t{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;line-height:1.1;letter-spacing:.6px;color:#fff;-webkit-text-fill-color:#fff}
#timeline .tl-t:empty{display:none}
#timeline .tl-c small{font-size:14px;line-height:1.4;color:#d4d8d4;overflow-wrap:break-word}
/* album covers: same square on every card */
#timeline .tl-c>span.tl-cv{position:relative;display:block;flex:none;width:76px;height:76px;border-radius:10px;overflow:hidden;background:#0b0f0b;box-shadow:0 6px 14px -6px #000,0 0 0 1px rgba(255,255,255,.08)}
#timeline .tl-c>span.tl-cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
/* feature cards: the real video thumbnail, the whole card plays it */
#timeline .tl-c.tl-ft{flex-direction:column;align-items:stretch;gap:10px}
#timeline .tl-c>span.tl-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#050805;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
#timeline .tl-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
#timeline .tl-yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
#timeline .tl-play{position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#9fe35a 0,#3f9f0e 42%,#1f6d04 78%,#114e00 100%);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 8px 18px -6px #000;transition:transform .2s}
#timeline .tl-play::before{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
@media (hover:hover){#timeline a.tl-ft:hover .tl-play{transform:scale(1.08)}#timeline .tl-i a.tl-c:hover{border-color:#2a7d0b}}
/* inline feature song in an album card: tap the song name to play it */
#timeline .tl-c small .tl-fs{display:inline;color:#fff;font-weight:700;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;padding:0 1px;border-bottom:2px solid #3f9f0e;text-decoration:none}
#timeline .tl-c small .tl-fs::after{content:"";display:inline-block;margin-left:5px;vertical-align:1px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #5fbf1c}
@media (hover:hover){#timeline .tl-c small .tl-fs:hover{background:rgba(63,159,14,.22);border-radius:3px}}
/* photo cards: one frame size, the whole photo shown (never cropped), its own blurred copy fills the frame */
#timeline .tl-ph .tl-c{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
#timeline figure.tl-fig{position:relative;width:100%!important;max-width:100%;aspect-ratio:4/3!important;margin:0;border-radius:11px;overflow:hidden;background:#070a07!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
#timeline figure.tl-fig::before{content:"";position:absolute;inset:-24px;background:var(--tlbg) center/cover no-repeat;filter:blur(20px) brightness(.42) saturate(1.1);transform:scale(1.1)}
#timeline figure.tl-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:50% 50%!important;z-index:1;transform:none}
#timeline .tl-ph .tl-c>span.tl-tx{margin-top:0;text-align:left;align-items:flex-start}
#timeline .ck-bd{z-index:2;background:rgba(0,0,0,.55)}
@media (hover:hover){#timeline .tl-ph a.tl-c.ck-a:hover .ck-bd{background:#2f8f12!important;color:#fff!important}}
/* small phones */
@media (max-width:380px){#timeline .tl ol{padding-left:58px}#timeline .tl-dot{left:-36px}#timeline .tl-t{font-size:20px}#timeline .tl-c>span.tl-cv{width:66px;height:66px}}
/* laptop: two calm columns along a centre rail, every card the same tile shape */
@media (min-width:900px){
 #timeline .tl{max-width:1080px;padding:6px 20px 10px}
 #timeline .tl-rail{left:calc(50% - 3px)}
 #timeline .tl-walk{left:calc(50% - 34px)}
 #timeline .tl ol{padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:96px;row-gap:22px;align-items:start}
 #timeline .tl-i{margin:0}
 #timeline .tl-i:nth-child(even){grid-column:1}
 #timeline .tl-i:nth-child(odd){grid-column:2;margin-top:70px}
 #timeline .tl-i:nth-child(even) .tl-dot{left:auto;right:-55px}
 #timeline .tl-i:nth-child(odd) .tl-dot{left:-55px}
 #timeline .tl-i.tl-noimg:first-child{grid-column:1/-1;justify-self:center;width:min(520px,100%);margin:0 0 6px;z-index:2}
 #timeline .tl-i.tl-noimg:first-child .tl-c{text-align:center;align-items:center}
 #timeline .tl-i.tl-noimg:first-child .tl-c>span.tl-tx{align-items:center}
 #timeline .tl-i.tl-noimg:first-child .tl-dot{display:none}
 #timeline .tl-d{font-size:13.5px}
 #timeline .tl-c{flex-direction:column;align-items:stretch;gap:12px;padding:14px;min-height:0}
 #timeline .tl-c>span.tl-cv{width:100%;height:auto;aspect-ratio:16/10;border-radius:11px}
 #timeline .tl-c>span.tl-cv::before{content:"";position:absolute;inset:-24px;background:var(--tlbg) center/cover no-repeat;filter:blur(20px) brightness(.4);transform:scale(1.1)}
 #timeline .tl-c>span.tl-cv img{object-fit:contain;z-index:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
 #timeline figure.tl-fig,#timeline .tl-c>span.tl-yt,#timeline .tl-c>span.tl-cv{aspect-ratio:16/9!important}
 #timeline .tl-t{font-size:26px}
 #timeline .tl-c small{font-size:15px}
}