/* ═══════════════════════════════════════════
   TIMELINE SECTION PATCH
   WHERE / IT began: completely untouched
   Only .exp-entry positioning is fixed
   Auto-expands/shrinks with any number of entries
   ═══════════════════════════════════════════ */

/* Entry: keep right-side absolute positioning but remove
   the translateY(-42%) that caused the vertical gap.
   Top-align it so it starts at the same visual level as the headings. */
.exp-entry {
  position: absolute;
  right: 5%;
  top: 72px;
  transform: none;   /* was translateY(-42%) — this was the gap culprit */
  width: min(500px, 46%);
  z-index: 3;
  will-change: transform, opacity;
}

/* Section height: driven by JS (see script below) so it always
   fits however many entries exist. Fallback min keeps it sane. */
#six {
  min-height: 100svh;
  overflow: visible;
}

/* Quote stays pinned to bottom-left as original */
/* (no change needed — original style.css rule is fine) */

/* Ghost: hide to keep it clean */
.exp-ghost-yr,
.exp-ghost-mo { display: none; }

/* ≤1100px: let mobile-patch.css take over completely */
@media (max-width: 1100px) {
  #six        { min-height: unset !important; height: auto !important; overflow: visible !important; }
  .exp-entry  { position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 92% !important; margin: 24px auto 0 !important; }
  .exp-quote  { position: relative !important; left: auto !important; bottom: auto !important; padding: 40px 28px 0 !important; }
}