/* Homepage About timeline. Shared section, palette and CTA remain the source of truth. */
.about-timeline .about-timeline-layout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px 24px;
}
.about-timeline .about-timeline-layout>h2{
  grid-column:1/-1;
  max-width:none;
  font-size:clamp(38px,4vw,54px);
  line-height:1.12;
  letter-spacing:-.04em;
}
.about-timeline .about-timeline-track{
  grid-column:1/-1;
  --timeline-line:var(--blue);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
  position:relative;
  list-style:none;
  /* Reserve clearance for the middle card's 22px lift and rotated layers. */
  padding:86px 7px 0;
  margin:0;
}
.about-timeline .about-timeline-track::before{
  content:"";
  position:absolute;
  height:1px;
  inset:44px 7px auto;
  background:color-mix(in srgb,var(--timeline-line) 70%,transparent);
}
.about-timeline .about-timeline-chapter{
  position:relative;
  min-width:0;
}
.about-timeline .about-timeline-chapter::before{
  content:"";
  position:absolute;
  z-index:1;
  width:9px;
  height:9px;
  top:-46px;
  left:0;
  background:var(--timeline-line);
}
.about-timeline .about-timeline-date{
  position:absolute;
  left:0;
  top:-81px;
  margin:0;
  color:var(--ink);
  font-size:clamp(22px,2vw,28px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.025em;
}
.about-timeline .about-timeline-card{
  --chapter-face:var(--card);
  --chapter-layer:var(--peach);
  --chapter-angle:-.5deg;
  position:relative;
  isolation:isolate;
  min-height:0;
  padding:26px 25px 29px;
  color:var(--ink);
}
.about-timeline .about-timeline-card::before,.about-timeline .about-timeline-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.about-timeline .about-timeline-card::before{
  z-index:-2;
  inset:4px -8px -8px 5px;
  background:var(--chapter-layer);
  transform:rotate(1deg);
}
.about-timeline .about-timeline-card::after{
  z-index:-1;
  inset:0;
  background:var(--chapter-face);
  border:1px solid var(--line);
  border-radius:3px;
  transform:rotate(var(--chapter-angle));
}
.about-timeline .about-timeline-chapter:first-child .about-timeline-card::before{transform:rotate(-1deg)}
.about-timeline .about-timeline-chapter:nth-child(2) .about-timeline-card{
  --chapter-face:color-mix(in srgb,var(--card) 50%,var(--mint));
  --chapter-angle:.7deg;
  transform:translateY(-22px);
}
.about-timeline .about-timeline-chapter:nth-child(2) .about-timeline-card::before{transform:rotate(-1deg)}
.about-timeline .about-timeline-chapter:nth-child(3) .about-timeline-card{
  --chapter-face:var(--action);
  --chapter-angle:-1deg;
  color:var(--action-ink);
}
.about-timeline .about-timeline-chapter:nth-child(3) .about-timeline-card::before{transform:rotate(1deg)}
.about-timeline .about-timeline-card h3{
  max-width:390px;
  margin:0 0 16px;
  font-family:Lora,Georgia,serif;
  font-size:clamp(24px,2.35vw,31px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.035em;
}
.about-timeline .about-timeline-card>p{
  max-width:430px;
  margin:0;
  font-size:18px;
  line-height:1.62;
}
.about-timeline .about-timeline-course{
  padding-inline:7px;
  margin-top:28px;
}
.about-timeline .about-timeline-course>p{
  max-width:430px;
  margin:0;
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
}
.about-timeline .about-timeline-course .button{margin-top:18px}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .about-timeline .about-timeline-card::before,.about-timeline .about-timeline-card::after{
    transition:transform .4s cubic-bezier(.2,.65,.3,1);
  }
  .about-timeline .about-timeline-chapter .about-timeline-card:hover::before,
  .about-timeline .about-timeline-chapter .about-timeline-card:hover::after{
    transform:rotate(0deg);
  }
}

@media(max-width:850px){
  .about-timeline .about-timeline-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .about-timeline .about-timeline-track{
    --chapter-gap:24px;
    grid-template-columns:minmax(0,1fr);
    gap:var(--chapter-gap);
    padding:0 0 0 35px;
  }
  .about-timeline .about-timeline-track::before{
    display:none;
  }
  .about-timeline .about-timeline-chapter::before{top:9px;left:-26px;width:9px;height:9px}
  .about-timeline .about-timeline-chapter:not(:last-child)::after{
    content:"";
    position:absolute;
    width:1px;
    top:13px;
    bottom:calc(-13px - var(--chapter-gap));
    left:-22px;
    background:color-mix(in srgb,var(--timeline-line) 70%,transparent);
    pointer-events:none;
  }
  .about-timeline .about-timeline-date{position:static;margin:0 0 11px;font-size:20px}
  .about-timeline .about-timeline-card{min-height:0;padding:24px 23px 26px}
  .about-timeline .about-timeline-chapter:nth-child(2) .about-timeline-card{transform:translateY(0)}
  .about-timeline .about-timeline-course{padding-inline:0;margin-top:24px}
}
@media(max-width:750px){
  .about-timeline .about-timeline-layout{gap:23px}
  .about-timeline .about-timeline-layout>h2{font-size:34px}
  .about-timeline .about-timeline-track{--chapter-gap:21px}
  .about-timeline .about-timeline-card{padding:22px 20px 24px}
  .about-timeline .about-timeline-card h3{font-size:25px;margin-bottom:12px}
  .about-timeline .about-timeline-card>p,.about-timeline .about-timeline-course>p{font-size:16px}
  .about-timeline .about-timeline-course .button{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
  .about-timeline .about-timeline-card,.about-timeline .about-timeline-card::before,.about-timeline .about-timeline-card::after{transition:none}
}