/* Devlog: a vertical timeline. The rail runs between the date column and the cards; milestones get a brighter node. */
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:34px}
.timeline:before{content:'';position:absolute;left:150px;top:8px;bottom:0;width:1px;background:linear-gradient(180deg,var(--cyan),#516c8455 12%,#516c8455 88%,transparent)}
.log{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;position:relative;scroll-margin-top:30px}
.log[hidden]{display:none}
.log:before{content:'';position:absolute;left:146px;top:14px;width:9px;height:9px;background:#0c1926;border:1px solid var(--cyan);transform:rotate(45deg)}
.log:has(.is-milestone):before{background:var(--cyan);box-shadow:0 0 14px #8bdcffaa}
.log-date{padding:6px 34px 0 0;text-align:right;position:sticky;top:24px;align-self:start}
.log-date time{display:block;font:15px var(--label);letter-spacing:1.4px;color:#e3edf6}
.log-date span{font:10px var(--label);letter-spacing:1.6px;color:#6f8ba1}
.log-card{margin-left:38px;border:1px solid #7c9db844;background:#0c1b2a;padding:26px 28px;display:grid;gap:16px;position:relative}
.log-card.is-milestone{border-color:#7ccfff66;background:linear-gradient(160deg,#11283b,#0c1b2a 55%)}
.log-card.is-milestone:before{content:'';position:absolute;inset:-1px auto auto -1px;width:55px;height:2px;background:var(--cyan)}
.log-card h2{font-size:clamp(23px,2.2vw,30px);font-weight:300;line-height:1.2;letter-spacing:.6px;margin:0}
.log-card p{color:var(--muted);font-size:16px;line-height:1.8;margin:0;max-width:72ch}
.log-card .text-link{padding-top:4px}
.log-tags{display:flex;flex-wrap:wrap;gap:8px}
.log-tags span{font:10px var(--label);letter-spacing:1.4px;color:#9fc8df;border:1px solid #7ccfff33;padding:5px 8px}
.log-tags .state{border-color:transparent}
.state-milestone{background:#8bdcff22;color:var(--cyan)!important}
.state-new{background:#f0d33022;color:#f0d330!important}
.log-media{display:grid;gap:10px}
.log-media.two{grid-template-columns:1fr 1fr}
.log-media.three{grid-template-columns:repeat(3,1fr)}
.log-media a{display:block;overflow:hidden;border:1px solid #93b5d32e;background:#0b1724;aspect-ratio:16/9}
.log-media.three a{aspect-ratio:2}
.log-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:transform .45s,filter .3s}
.log-media a:hover{border-color:var(--cyan)}
.log-media a:hover img{transform:scale(1.03);filter:brightness(1)}
.log-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.log-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:#c2d3e1;font-size:15px;line-height:1.6}
.log-list li:before{font:11px var(--label);line-height:1.9;text-align:center}
.log-list li.done:before{content:'✓';color:#6fd99a}
.log-list li.progress:before{content:'◐';color:#f0d330;font-size:12px}
.timeline-end{display:flex;align-items:center;gap:12px;margin:46px 0 0 188px;font:11px var(--label);letter-spacing:1.5px;color:#8fa6ba}
.timeline-empty{margin:0 0 0 188px;color:var(--muted)}
#lightbox .lightbox-top{margin-bottom:12px}
@media(max-width:900px){.timeline:before{left:7px}.log{grid-template-columns:1fr}.log:before{left:3px;top:6px}.log-date{position:static;text-align:left;padding:0 0 12px 30px;display:flex;gap:10px;align-items:baseline}.log-card{margin-left:30px}.timeline-end,.timeline-empty{margin-left:30px}}
@media(max-width:760px){.log-card{padding:20px 18px;margin-left:24px}.log-date{padding-left:24px}.timeline-end,.timeline-empty{margin-left:24px}.log-media.two,.log-media.three{grid-template-columns:1fr}.log-media.three a{aspect-ratio:16/9}.log-card p{font-size:15px}}
.log-card p strong{color:#fff;font-weight:400}