/* ANNUAL FUNCTION timeline ([srs_annual_timeline]): a vertical line, one round year badge and one card per year. */
.srs-tl-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:40px; align-items:start; margin:6px 0 30px; }
.srs-tl{ position:relative; max-width:none; margin:0; padding-left:100px; }
.srs-tl::before{ content:""; position:absolute; left:41px; top:10px; bottom:10px; width:3px; background:#d9e2ef; }
.srs-tl-item{ position:relative; margin:0 0 42px; }
.srs-tl-item:last-child{ margin-bottom:0; }
.srs-tl-year{
  position:absolute; left:-100px; top:0; width:84px; height:84px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:21px; font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; border:5px solid #fff; box-shadow:0 0 0 3px var(--accent);
}
.srs-tl-card{ background:#fff; border:1px solid #e1e7f0; border-radius:14px; padding:24px 28px 26px; box-shadow:0 4px 18px rgba(26,60,110,.07); }
.srs-tl-card h3{ margin:0 0 14px; font-size:26px; font-weight:700; line-height:1.3; color:var(--navy); }
.srs-tl-pic{ margin:0 0 18px; text-align:center; }
.srs-tl-pic img{ max-width:100%; height:auto; max-height:520px; border-radius:10px; }
.srs-tl-text p{ margin:0 0 14px; font-size:18px; line-height:1.85; color:#333; text-align:justify; }
.srs-tl-text p:last-child{ margin-bottom:0; }
.srs-tl-text strong{ color:#111; }

.srs-tl-videos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.srs-tl-videos.one{ grid-template-columns:1fr; max-width:760px; margin-left:auto; margin-right:auto; }
.srs-tl-video{ position:relative; aspect-ratio:16/9; background:#0f2a52; border-radius:10px; overflow:hidden; }
.srs-tl-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:768px){
  .srs-tl{ padding-left:0; }
  .srs-tl::before{ display:none; }
  .srs-tl-year{ position:static; width:auto; height:auto; border-radius:30px; padding:6px 20px; margin:0 0 12px; font-size:18px; display:inline-flex; border:0; box-shadow:none; }
  .srs-tl-card{ padding:18px 16px 20px; }
  .srs-tl-card h3{ font-size:21px; }
  .srs-tl-text p{ font-size:17px; line-height:1.75; text-align:left; }
  .srs-tl-videos{ grid-template-columns:1fr; }
}

/* year list on the right, like the Blog Archive */
.srs-tl-nav{ position:sticky; top:110px; }
.srs-tl-nav h4{
  margin:0 0 14px; padding:18px 24px; background:var(--light); border-left:5px solid var(--accent);
  border-radius:6px; font-size:22px; font-weight:700; line-height:1.25; color:var(--navy);
}
.srs-tl-nav ul{ list-style:none; margin:0; padding:0 0 0 6px; }
.srs-tl-nav li{ position:relative; margin:0 0 6px; padding:8px 0 8px 36px; }
.srs-tl-nav li::before{
  content:"\203A"; position:absolute; left:0; top:50%; transform:translateY(-50%); width:21px; height:21px; border-radius:50%;
  background:#111; color:#fff; font-size:16px; line-height:20px; text-align:center;
}
.srs-tl-nav a{ font-size:19px; color:#333; text-decoration:none !important; }
.srs-tl-nav a:hover{ color:var(--navy); text-decoration:underline !important; }
.srs-tl-item{ scroll-margin-top:110px; }
html{ scroll-behavior:smooth; }

@media (max-width:1000px){
  .srs-tl-wrap{ grid-template-columns:1fr; gap:22px; }
  .srs-tl-nav{ position:static; order:-1; }
  .srs-tl-nav ul{ display:flex; flex-wrap:wrap; gap:8px; padding:0; }
  .srs-tl-nav li{ margin:0; padding:0; }
  .srs-tl-nav li::before{ display:none; }
  .srs-tl-nav a{ display:inline-block; padding:7px 18px; background:#fff; border:1px solid #c9d3e3; border-radius:30px; font-size:16px; font-weight:600; color:var(--navy); }
}