:root{
    --circle-size: 30px;
    --year-font: 14pt;
    --gap: 20px;
    --line-height: 80px;              /* vertical dashed line length */
    --line-width: 2px;
    --line-color: #22a3e6;             /* dashed line color */
    --anim: 0.15s;

    --accent: #111;                    /* circle color */
    --text-color: #424242;

    /* Flag defaults (override per node if needed) */
    --flag-bg: transparent;
    --flag-text: #424242;
    --flag-radius: 0 8px 8px 0;
    --flag-width: auto;
    --flag-pad-block: 8px;
    --flag-pad-inline: 12px;
    --flag-gap: -1px;                   /* distance from the line to the flag */
  }

  .gridholder{
    margin: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--text-color);
	min-height:200px; position:relative;
  }
  .timeline-line {
    position: absolute;
    top: 80%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333; /* Horizontal line */
    z-index: 1;
}

  .timeline{
    display: grid;
    gap: 36px;
    padding: 24px;
    justify-items: center;
  }

  .node{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
	height:250px; bottom:44px;
	justify-content:flex-end;

    /* per-node scope */
    --_accent: var(--accent);
    --_flag-bg: var(--flag-bg);
    --_flag-text: var(--flag-text);
    --_flag-radius: var(--flag-radius);
    --_flag-width: var(--flag-width);
    --_flag-pad-block: var(--flag-pad-block);
    --_flag-pad-inline: var(--flag-pad-inline);
    --_flag-gap: var(--flag-gap);
  }

  /* CIRCLE (anchor for both line and flag) */
  .circle{
    position: relative; /* <-- anchor! */
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background: var(--_accent);
    cursor: pointer;
    outline: none;
	z-index:99;
	top:21%
  }

  /* Dashed line grows upward from circle’s top */
.circle::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  height: var(--line-height);
  border-left: var(--line-width) dashed var(--line-color);
  transition: transform var(--anim) linear;
}

  /* FLAG — positioned relative to the circle so its TOP = line’s TOP */
.circle .flag{
  position: absolute;
  z-index: 1;

  /* bottom edge exactly at the dashed line’s top  */
  bottom: calc(100% + var(--line-height));
  left: 50%;
  transform: translateX(-50%) scaleY(0); /* collapsed */
  transform-origin: bottom center;       /* grow upward */
  opacity: 0;

  width: var(--_flag-width);
  white-space:pre;
  background: var(--_flag-bg);
  color: var(--_flag-text);
  border-radius: var(--_flag-radius);
  padding: var(--_flag-pad-block) var(--_flag-pad-inline);

  display: flex;
  flex-direction: column;
  align-items: center;   /* left-align your h5/h2/p */
  justify-content: center;
  line-height: 1.2;
  pointer-events: none;
  overflow: hidden;

  /* start after the line grows */
  transition:
    transform var(--anim) ease-out var(--anim),
    opacity   var(--anim) linear   var(--anim);
}

/* Add left padding inside for all text elements */
.circle .flag h5,
.circle .flag h2,
.circle .flag p {
  padding-left: 0px;
}

  /* YEAR with directional in/out */
  .year{
    position: relative;
    margin-top: var(--gap);
    height: 1.2em;
    font-size: var(--year-font);
    text-align: center;
    width: max-content;
  }
  .year .txt{
    position: absolute;
    left: 50%;
    top: 230%;
    transform: translate(-50%,-50%);
    opacity: 0;
    font-weight: 500;
    will-change: transform, opacity;
    pointer-events: none;
  }
  .year .txt.show{ opacity: 1; }
  .year .txt.bold{ font-weight: 700; }

  @keyframes inFromBottom {
    from { transform: translate(-50%, calc(-50% + 20px)); opacity: 0; }
    to   { transform: translate(-50%, -50%);              opacity: 1; }
  }
  @keyframes outToTop {
    from { transform: translate(-50%, -50%);              opacity: 1; }
    to   { transform: translate(-50%, calc(-50% - 20px)); opacity: 0; }
  }

  /* Active states */
.node.active .circle::before{ transform: translateX(-50%) scaleY(1); }
.node.active .flag{ transform: translateX(-50%) scaleY(1); opacity: 1; }

  .circle:focus-visible{
    outline: 2px solid #4c9ffe;
    outline-offset: 3px;
  }

  /* <=1024px: show everything, no hover */
  @media (max-width: 1023px) {
    .node{ --anim: 0s; }
  .circle::before{ transform: translateX(-50%) scaleY(1) !important; transition: none !important; }
  .flag{ transform: translateX(-50%) scaleY(1) !important; opacity: 1 !important; transition: none !important; }
    .year .txt{ opacity: 0 !important; }
    .year .txtB{
      opacity: 1 !important;
      font-weight: 700;
      transform: translate(-50%,-50%) !important;
      animation: none !important;
    }
  }