<style>
/* ----- Base ----- */
body{
  font-family:"Helvetica Neue",Arial,sans-serif;
  margin:0;
  background:#fafafa;
  color:#222;
  line-height:1.6;
}
main#timeline{
  max-width:900px;
  margin:0 auto;
  padding:2rem 1rem;
}

/* ----- Timeline entries ----- */
.entry{
  position:relative;
  margin-bottom:4rem;
  padding-left:1.25rem;
  border-left:4px solid #c0c0c0;
}
.entry::before{          /* little dot on the line */
  content:"";
  position:absolute;
  left:-10px;
  top:0.6rem;
  width:14px;
  height:14px;
  background:#fff;
  border:3px solid #ff5c5c;
  border-radius:50%;
}

h2{
  margin:0 0 0.5rem;
  font-size:1.5rem;
}

/* ----- Figures / images ----- */
figure{
  margin:1rem 0 0;
}
figure img{
  width:100%;
  height:auto;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
figcaption{
  margin-top:0.4rem;
  font-size:0.9rem;
  color:#666;
}

/* ----- Responsive tweak: text + photo side-by-side on wide screens ----- */
@media(min-width:700px){
  .entry{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:1.5rem;
  }
  .entry figure{
    margin:0;
  }
}
</style>
