/* Static timeline rail (right edge), shared by updates.html and media.html.
   Hairline + small hollow dots; the date label shows only on hover, focus, or for the active entry. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.entry { scroll-margin-top: 48px; }
.rail {
  position: fixed; top: 50%; transform: translateY(-50%);
  right: max(24px, calc((100vw - 1200px) / 2 + 24px));
  display: flex; flex-direction: column; align-items: flex-end; gap: clamp(0px, 1vh, 10px);
  z-index: 5;
}
.rail::before {
  content: ''; position: absolute; top: 7px; bottom: 7px; right: 3px; width: 1px;
  background: var(--border);
}
/* Each dot is a 16px-tall hit target; the visible mark stays 7px. */
.rail-dot {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  height: 16px; padding-left: 8px; text-decoration: none; cursor: pointer;
}
.rail-dot::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--dim);
  transition: background 0.15s, border-color 0.15s;
}
.rail-label {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  padding: 2px 6px; background: var(--bg);   /* keeps the label legible if it ever overlaps text */
  opacity: 0; transform: translateX(4px); transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label, .rail-dot.active .rail-label { opacity: 1; transform: none; }
.rail-dot:hover::after, .rail-dot:focus-visible::after { border-color: var(--gold); }
.rail-dot.active::after { background: var(--gold); border-color: var(--gold); }
.rail-dot.active .rail-label { color: var(--gold); }
.rail-dot:hover .rail-label { color: var(--text); }
.rail-dot:focus-visible { outline: none; }
.rail-dot:focus-visible::after { outline: 1px solid var(--gold); outline-offset: 2px; }
/* Hide the rail when the page is too narrow to hold it beside the entries. */
@media (max-width: 1000px) { .rail { display: none; } }
.rail:hover .rail-dot.active:not(:hover) .rail-label { opacity: 0; }