:root{
      /* fallback; real values set by JS after measuring navbar+timeline */
      --sticky-offset: 120px;
    }

    body{ background:#f8f9fa; }
    .navbar-brand .bi{ font-size:1.4rem; }

    /* Hero */
    .hero{
      background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
      border-bottom:1px solid #e5e7eb;
    }

    /* ===== Timeline ===== */
    #tl.sticky-top{
      top:0; z-index:1020; /* above content, below potential fixed headers if any */
      background:#fff; border-bottom:1px solid #e5e7eb;
    }
    #tl .container{ padding-top:1rem; padding-bottom:1rem; }

    /* Horizontal scroller (mobile) */
    #tl .tl-scroller{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x mandatory;
    }

    /* Grid: three rows (cards / line+dots / times) */
    #tl .tl-grid{
      display:grid;
      grid-template-rows:auto 56px auto;
      gap:.25rem 1rem;
      align-items:center;
      position:relative;
      width:max-content; /* so it can overflow horizontally on small screens */
    }

    /* Mobile & tablet: fixed column width to force horizontal scroll */
    @media (max-width: 991.98px){
      #tl .tl-grid{
        grid-template-columns:repeat(7,160px); /* tweak 140–180px to taste */
        gap:.25rem .75rem;
      }
    }
    /* Desktop: fill width with 7 equal columns, no horizontal scroll */
    @media (min-width: 992px){
      #tl .tl-grid{
        width:100%;
        grid-template-columns:repeat(7,1fr);
        gap:.25rem 1rem;
      }
    }

    /* Cards (top row) – also behave as nav links for ScrollSpy */
    #tl .tl-card{
      grid-row:1;
      display:flex; flex-direction:column; align-items:center; text-align:center;
      padding:.25rem .5rem;
      min-width:140px;
      color:#0d6efd; border-radius:.75rem; border:1px solid transparent;
      text-decoration:none; transition:.15s;
      scroll-snap-align:center;
    }
    #tl .tl-card:hover{ background:#f6f9ff; border-color:#d9e7ff; }
    /* Active (from ScrollSpy) */
    #tl .tl-card.active,
    #tl .tl-card[aria-current="true"]{
      background:#e7f1ff; border-color:#bee0ff; color:#0b5ed7;
    }
    /* Keyboard focus */
    #tl .tl-card:focus-visible{
      outline:2px solid #0d6efd; outline-offset:2px; border-radius:.75rem;
    }

    /* Line + progress (middle row) */
    #tl .tl-linewrap{ grid-row:2; grid-column:1/-1; position:relative; height:56px; }
    #tl .tl-line{
      position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
      height:6px; background:#e5e7eb; border-radius:3px; z-index:1;
    }
    #tl .tl-progress{
      position:absolute; left:0; top:50%; transform:translateY(-50%);
      height:6px; width:0; background:#0d6efd; border-radius:3px; z-index:2;
      transition:width .25s ease;
    }
    #tl .tl-dots{
      position:absolute; inset:0;
      display:grid; grid-template-columns:repeat(7,1fr);
      align-items:center; z-index:3; pointer-events:none;
    }
    #tl .tl-dot{
      justify-self:center; width:18px; height:18px; border-radius:50%;
      background:#cfd4da; border:3px solid #fff; box-shadow:0 0 0 1px #dee2e6;
      transition:.15s;
    }
    #tl .tl-dot.active{
      background:#0d6efd; transform:scale(1.1);
      box-shadow:0 0 0 4px rgba(13,110,253,.25);
    }

    /* Times (bottom row) */
    #tl .tl-times{
      grid-row:3; grid-column:1/-1;
      display:grid; grid-template-columns:repeat(7,1fr);
      text-align:center; font-size:.9rem; color:#6c757d;
    }
    #tl .tl-times span{ display:block; min-height:1.25rem; }

    /* Small shadow when the page scrolls down */
    #tl.shadowed{ box-shadow:0 1px 8px rgba(0,0,0,.06); }

    /* ===== Stage cards ===== */
    .stage-card{
      background:#fff; border:1px solid #e5e7eb; border-radius:.75rem;
      box-shadow:0 1px 8px rgba(0,0,0,.04);
    }
    .stage-card .card-header{
      background:#fff; border-bottom:1px solid #eef0f2;
    }
    .time-label{ font-size:.9rem; color:#6c757d; }
    .caption-blue{ color:#0d6efd; }
    .caption-orange{ color:#fd7e14; }
    .caption-red{ color:#dc3545; }

    /* Anchor offset so headers aren't hidden behind sticky timeline */
    section[id], #era{ scroll-margin-top:var(--sticky-offset); }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      #tl .tl-progress{ transition:none; }
      .accordion .collapse{ transition:none; }
    }