/* By Design | Ghost-editor-native three-stage timeline — October 2026.
   Overrides the existing timeline CSS, does not change theme embeds elsewhere. */
body:is(.post-template,.page-template) .gh-content .bd-timeline {
  /* Keep the timeline inside Ghost's normal article reading column.
     Also cap its width if an older embedded card wraps the timeline in
     a wide HTML card, rather than making it a direct gh-canvas child. */
  grid-column: main !important;
  justify-self: stretch;
  width: min(100%, var(--content-width, 720px));
  max-width: 100%; min-width: 0;
  margin: clamp(38px, 4vw, 52px) auto 56px;
  overflow-wrap: anywhere;
  --tl-ink:#142a49; --tl-muted:#4e677e; --tl-blue:#347695;
  --tl-pink:#b23869; --tl-line:#cbdbe3; --tl-panel:#edf3f6;
  font-family:var(--bd-sans, Arial, sans-serif) !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-intro {border-top:0; padding:0 0 17px;}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-label {
  font:800 14px/1.4 var(--bd-sans) !important;
  letter-spacing:.17em; margin-bottom:18px !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-label::after {
  height:4px; width:40px; margin-top:10px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-title {
  font:750 clamp(27px,2.7vw,35px)/1.2 var(--bd-sans) !important;
  letter-spacing:-.025em !important; max-width:1050px;
  margin:0 0 15px !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-dek {
  color:#455f77 !important;
  font:450 clamp(18px,1.7vw,21px)/1.49 var(--bd-sans) !important;
  max-width:1010px; margin:0 0 20px !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-guidance {
  font:500 13px/1.4 var(--bd-sans) !important;
  color:#61798d !important;
  border-top:1px solid var(--tl-line); padding:14px 0 2px;
  margin:0 !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-flow::before {
  left:19px; top:32px; bottom:34px; width:2px; background:#b9d0db;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter {
  padding-left:53px; margin:0 0 7px !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter::before {
  left:0; top:15px; width:40px; height:40px; font:750 18px/1 var(--bd-sans);
  border:0; background:#397d9b;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter-summary {
  grid-template-columns:minmax(0,1fr) 28px; gap:18px;
  padding:17px 0 20px; align-items:start;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-phase {
  font:750 clamp(20px,2.0vw,25px)/1.3 var(--bd-sans) !important;
  letter-spacing:-.02em !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-period {
  font:750 11px/1.4 var(--bd-sans) !important;
  letter-spacing:.105em; margin:0 0 8px;
}
/* Summary stays visible inside the clickable stage header even if closed. */
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-phase-dek {
  font:400 clamp(15px,1.4vw,17px)/1.5 var(--bd-sans) !important;
  color:#516b80 !important; margin:9px 0 0 !important; max-width:860px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter-toggle,
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-toggle {
  font:400 28px/1 var(--bd-sans) !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-list { margin:0 !important; padding:0 !important; }
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-entry { border-bottom:1px solid #d7e3e8; }
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-entry::before {
  left:-35px; top:26px; width:10px; height:10px; border:2px solid var(--tl-blue);
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-summary {
  padding:19px 0 19px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-summary-text {
  grid-template-columns:119px minmax(0,1fr); gap:15px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-date-day {
  font:750 15px/1.3 var(--bd-sans) !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-date-year {
  font:650 14px/1.3 var(--bd-sans) !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-entry-headline {
  font:750 clamp(16px,1.7vw,18px)/1.37 var(--bd-sans) !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-details-body {
  background:var(--tl-panel); padding:18px 21px;
  margin:0 0 17px 134px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-details-body p,
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-details-body li {
  font:400 clamp(15px,1.45vw,17px)/1.65 var(--bd-sans) !important;
  color:#283e53 !important;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-source {
  margin-top:12px !important; font-size:13px !important;
}
@media(max-width:767px) {
  body:is(.post-template,.page-template) .gh-content .bd-timeline {
    grid-column:main !important; width:100%; max-width:100%;
    margin:28px 0 39px;
  }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-title {
    font-size:clamp(27px,7.4vw,34px) !important; line-height:1.18 !important;
  }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-dek {
    font-size:18px !important; line-height:1.5 !important;
  }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-guidance { font-size:12px !important; }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-flow::before {left:17px;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter {padding-left:44px;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-chapter::before {
    width:35px; height:35px; top:17px; font-size:15px;
  }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-phase {font-size:21px !important;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-phase-dek {font-size:14px !important;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-entry::before {left:-31px;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-summary-text {
    grid-template-columns:minmax(0,1fr); gap:7px;
  }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-summary {padding:16px 0;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-date { flex-direction:row; gap:7px; }
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-entry-headline {font-size:16px !important;}
  body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-details-body {
    margin:0 0 13px; padding:15px 16px;
  }
}
@media(prefers-reduced-motion:reduce){
  body:is(.post-template,.page-template) .gh-content .bd-timeline * {scroll-behavior:auto !important;transition:none !important;}
}

/* Share controls follow, never interrupt, the connected three-part timeline. */
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-share {
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid #cbdbe3;
  margin:25px 0 0;padding:18px 0 0;font:500 13px/1.5 var(--bd-sans,Arial,sans-serif);
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-share-copy {
  cursor:pointer;border:1px solid #a6bbc6;border-radius:3px;padding:9px 14px;background:white;
  color:#173f58;font:700 13px/1.4 var(--bd-sans,Arial,sans-serif);
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-share-open {
  color:#1b666d;text-decoration:underline;text-underline-offset:3px;font-size:13px;
}
body:is(.post-template,.page-template) .gh-content .bd-timeline .bd-timeline-share-status {
  color:#496979;font-size:12px;
}