/* pinned-horizontal-rail
   The default is whatever vertical layout you already had. A rail only exists
   once JS adds .hsec-live, so a blocked or failed script leaves a working page.
   Drop this in and style your own cards. */

.hview { position: relative; }

/* --- the live rail --- */
.hsec-live .hview   { overflow: hidden; }
.hsec-live .htrack  { display: flex; width: max-content; will-change: transform; }
.hsec-live .htrack > * { flex: 0 0 auto; }
.hgut               { flex: 0 0 0px; align-self: stretch; }

/* GSAP pins the section, so it has to be a viewport-tall stage.
   --stageh is a pixel value set in JS: Safari does not always agree that
   100vh equals innerHeight, and on phones the URL bar moves vh mid-scroll. */
.hsec-live {
  min-height: 100vh;
  height: var(--stageh, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

/* The track's max-content width leaks into the flex item's min-content size and
   blows a max-width container out past the stage, cutting the heading off.
   Invisible above the container's max-width, so it only shows up on phones. */
.hsec-live > .wrap { min-width: 0; width: 100%; }

/* Phones: start content below a sticky header instead of centring it, or the
   heading ends up behind the nav. Match the padding to your own header height. */
@media (max-width: 640px) {
  .hsec-live { justify-content: flex-start; padding-top: 6rem; }
}

/* --- optional progress hint: "SCROLL [====----] 04 / 09" --- */
.hrail-hint {
  display: flex; align-items: center; gap: .6rem;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  margin: .2rem 0 1rem;
}
.hrail-hint .bar {
  flex: 1; height: 1px; background: currentColor; opacity: .25;
  position: relative; overflow: hidden;
}
.hrail-hint .bar i {
  position: absolute; inset: 0; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left; will-change: transform;
}