/* Timeline owns its reading composition. Keeping this route out of the shared
   stylesheet prevents later wide-shell passes from widening the chronology a
   second time. */
main.timeline-page .hero-timeline{margin-bottom:10px}
main.timeline-page .timeline-card{
  width:100%;
  max-width:none;
  margin:0;
  padding:20px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
main.timeline-page .timeline{width:100%;max-width:1180px;margin:0 auto;padding-left:34px}
main.timeline-page .tl-item{max-width:none;margin-bottom:26px}
main.timeline-page .tl-desc{max-width:92ch}
main.timeline-page .tl-highlight{max-width:none}

.timeline-side{
  display:grid;
  align-self:start;
  align-content:start;
  gap:10px;
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
.timeline-side__eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:0;line-height:1.2;text-transform:none}
.timeline-side h2{margin:0;color:var(--text);font-size:16px;line-height:1.3;text-wrap:balance}
.timeline-side p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.timeline-side__links{display:grid;gap:6px;margin-top:2px}
.timeline-side__links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--accent);font-size:11.5px;font-weight:750;line-height:1.25;text-decoration:none;transition:border-color var(--transition),background var(--transition),transform var(--transition)}
.timeline-side__links a:hover,.timeline-side__links a:focus-visible{border-color:var(--accent-border);background:var(--accent-bg);transform:translateY(-1px)}

@media (min-width:981px){
  main.timeline-page .timeline-card{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:1480px;margin-inline:auto}
  main.timeline-page .timeline-side{position:static;grid-template-columns:minmax(170px,.65fr) minmax(220px,1fr) minmax(360px,1.45fr);align-items:center;gap:4px 18px;margin-top:0}
  main.timeline-page .timeline-side__eyebrow{grid-column:1;grid-row:1}
  main.timeline-page .timeline-side h2{grid-column:1;grid-row:2}
  main.timeline-page .timeline-side p{grid-column:2;grid-row:1 / span 2}
  main.timeline-page .timeline-side__links{grid-column:3;grid-row:1 / span 2;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
}

@media (min-width:768px) and (max-width:980px){.timeline-side{margin-top:12px}}

@media (max-width:767px){
  main.timeline-page .timeline-card{padding:8px 0 0}
  main.timeline-page .timeline{padding-left:22px}
  main.timeline-page .tl-item{margin-bottom:18px}
  .timeline-side{gap:8px;margin-top:10px;padding:12px;border-radius:11px}
  .timeline-side h2{font-size:14px}
  .timeline-side p{font-size:11.5px}
  .timeline-side__links{grid-template-columns:1fr;gap:5px}
}

/* The chronology owns its wide reading field.  It uses the spare desktop
   width for event descriptions while its optional reading aid stays below
   the sequence instead of becoming a competing rail. */
main.timeline-page .timeline-side{
  border-color:color-mix(in srgb,var(--line) 84%,var(--text) 7%);
}

@media (min-width:768px){
  main.timeline-page .timeline-side{box-shadow:var(--surface-elevation)}
}

@media (min-width:981px){
  body[data-page-layout="wide"] main.timeline-page .timeline{
    max-width:none;
    padding-right:clamp(0px,4vw,76px);
  }

  body[data-page-layout="wide"] main.timeline-page .tl-desc{max-width:104ch}
}