.header-ctas {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
}

.header-ctas a {
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  font-weight: 600;
}

.header-ctas a.primary {
  background: #5b8def;
  color: #fff;
  border-color: #5b8def;
}

.site-ctas{
  position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:8px;
  z-index:9999;
}
.site-ctas .cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid #ddd; background:#fff;
  text-decoration:none; font-weight:600; box-shadow:0 8px 24px #0001;
}
.site-ctas .cta.primary{ background:#5b8def; color:#fff; border-color:#5b8def; }
.site-ctas .icon{ height:16px; width:16px; display:inline-block; }
@media (max-width: 700px){
  .site-ctas{ left:12px; bottom:12px; }
}

/* Global font size */
html {
  font-size: 19px;
}

/* small extra spacing between the two CTAs */
.site-ctas .cta + .cta,
.sidebar-ctas .cta + .cta,
.home-ctas .cta + .cta { margin-left: 6px; margin-top: 6px; }

/* Stop uppercase on sidebar timeline links and headings */
.page__sidebar .nav__list .nav__items a,
.page__sidebar .nav__list .nav__items .nav__sub-title,
.nav__list .nav__items a,
.nav__list .nav__items .nav__sub-title {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Sidebar dynamic timeline styling */
.timeline-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.timeline-list li + li {
  margin-top: 6px;
}
.timeline-list a {
  text-decoration: none;
  display: inline-block;
}
.timeline-list .t-month {
  font-weight: 700;
  margin-right: 6px;
}
.timeline-list .t-title {
  font-weight: 400;
  margin-left: 6px;
}

/* Set site-wide background color
body {
  background-color: #f9f6f5;
}
*/

/* Responsive image: 100% by default; desktop width is overridable per-image */
.fluid-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Apply the optional desktop override at laptop/tablet landscape and up */
@media (min-width: 1024px) {
  .fluid-img {
    width: var(--desktop-width, 100%);     /* e.g., 70% or 800px */
    max-width: var(--desktop-max, none);   /* optional hard cap, e.g., 900px */
  }
}


