/* Horizontal Timeline core styles — scoped by .h-timeline */
.h-timeline{
  --accent:#e11d48; --card-bg:#fff; --card-br:#e5e7eb; --text:#0f172a; --muted:#64748b;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --axis:44px; --gap:34px; --date-gap:32px;
  --nub:10px; --nub-brd:1px; --nub-offset:10px;
  --date-size:14px; --date-weight:700; --date-color:var(--text); --date-ls:0px; --date-tt:none;
  --radius:14px;
  --card-max-w:420px;
  position:relative; color:var(--text); font-family:inherit; overflow:visible;
}
.h-timeline .viewport{
  position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:0;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab; user-select:none; touch-action: pan-x; /* prefer horizontal drag */
}
.h-timeline .track, .h-timeline .event, .h-timeline .event * { touch-action: pan-x; }
.h-timeline .viewport:active{ cursor:grabbing; }
.h-timeline .viewport::-webkit-scrollbar{ display:none; }
.h-timeline .track{
  position:relative; display:inline-flex; align-items:flex-start; gap:var(--hgap, 40px);
  padding-top:calc(var(--axis) + var(--gap)); padding-bottom:10px;
}
.h-timeline .axis{ position:absolute; left:0; top:var(--axis); height:2px; background:var(--accent); transform:translateY(-1px); pointer-events:none; }
.h-timeline .axis::before,.h-timeline .axis::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:var(--accent); }
.h-timeline .axis::before{ left:0; } .h-timeline .axis::after{ right:0; }

.h-timeline .event{
  position:relative; flex:0 0 auto;
  width:var(--card-w, auto); max-width:var(--card-max-w, 9999px);
  background:var(--card-bg); border:1px solid var(--card-br); border-radius:var(--radius,14px); box-shadow:var(--shadow);
  padding:14px 14px 16px; scroll-snap-align:start;
}
.h-timeline .event::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:calc(-1 * var(--gap) - 7px); width:14px; height:14px; border-radius:50%; background:var(--accent); z-index:2; }
.h-timeline .event .nub{ position:absolute; left:calc(50% - var(--nub-offset)); top:0; width:0; height:0; pointer-events:none; z-index:1; }
.h-timeline .event .nub::before{ content:""; position:absolute; left:0; top:calc(-1 * (var(--nub) + var(--nub-brd))); width:0; height:0; border-left:calc(var(--nub) + var(--nub-brd)) solid transparent; border-right:calc(var(--nub) + var(--nub-brd)) solid transparent; border-bottom:calc(var(--nub) + var(--nub-brd)) solid var(--card-br); }
.h-timeline .event .nub::after{ content:""; position:absolute; left:0; top:calc(-1 * var(--nub)); width:0; height:0; border-left:var(--nub) solid transparent; border-right:var(--nub) solid transparent; border-bottom:var(--nub) solid var(--card-bg); }
.h-timeline .event time{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(-1 * var(--gap) - var(--date-gap, 32px)); /* NEW */
  font-weight:var(--date-weight); font-size:var(--date-size); color:var(--date-color); letter-spacing:var(--date-ls); text-transform:var(--date-tt); white-space:nowrap;
}
.h-timeline .event h3{ font-size:17px; line-height:1.35; margin:0 0 6px; font-weight:700; color:var(--muted);}
.h-timeline .evt-body{ margin:0; color:var(--muted); line-height:1.55; font-size:13px;}
.h-timeline .event .media{ margin:10px 0 0; border-radius:var(--radius,14px); overflow:hidden; border:1px solid var(--card-br); }
.h-timeline .event .media img{ display:block; width:100%; height:auto; -webkit-user-drag:none; user-select:none; }
.h-timeline .arrow{ position:absolute; top:var(--axis); transform:translateY(-50%); z-index:5; height:24px; width:24px; border-radius:9999px; background:var(--accent); display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 2px var(--accent); transition:transform .12s ease, opacity .15s ease; outline:none; user-select:none; visibility:hidden; }
.h-timeline.ready .arrow{ visibility:visible; }
.h-timeline .arrow svg{ width:10px; height:10px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.h-timeline .arrow.left{ left:-12px; }
.h-timeline .arrow.right{ right:-12px; }
.h-timeline .arrow[hidden]{ display:none !important; }
.h-timeline .arrow:hover{ transform:translateY(-50%) scale(1.04); }
@media (max-width:640px){ .h-timeline .track{ gap:var(--hgap, 26px); } .h-timeline .arrow.left{ left:-8px; } .h-timeline .arrow.right{ right:-8px; } }