:root{
  --a4-rail-w: 240px;
}

.a4-rail{width: var(--a4-rail-w);}
.a4-logo{font-weight:800;font-size: 1.05rem;padding: .75rem 0;}
.a4-logo a{text-decoration:none;}
.a4-tagline{color: rgba(255,255,255,.75);max-width: 56ch;display:inline-block;}

.a4-timeline{padding: 1rem 0 2rem;}
.a4-item{display:grid;grid-template-columns: 18px 1fr;gap: 14px;align-items:start;margin: 0 0 16px;}
.a4-dot{width:12px;height:12px;border-radius: 50%;background: rgba(255,255,255,.28);margin-top: 16px;}
.a4-item.is-current .a4-dot{background: rgba(255,255,255,.7);}
.a4-item.is-active .a4-dot{background: rgba(99,102,241,.9);}

.a4-card{
  display:block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1rem;
}
.a4-link{text-decoration:none;color: inherit;}
.a4-link:hover{border-color: rgba(99,102,241,.4);background: rgba(99,102,241,.10);}
.a4-card-title{font-weight:800;margin-bottom:.25rem;}
.a4-card-sub{color: rgba(255,255,255,.7);font-size: .9rem;}

.a4-content{opacity: .98;}

#footer{padding: 1.25rem 0 2rem;}
#footer p{margin:.75rem 0 0;color: rgba(255,255,255,.75);}