/* skiper44-derived word scroller — COMPACT variant (Mena 2026-07-14
   round 4: the 100vh pinned stage left ridiculous space above/below).
   No pinning: the section is a normal in-flow block; the subject list
   advances line-by-line past "We Dub" as the section crosses the
   middle band of the viewport, stopping on the last word. Background
   matches the page in both themes. Driven by scroll-blur.js. */

.sk44 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13vh 0;
  /* Placed directly above the footer (Mena 2026-08-18). A page-bottom
     completion blend in scroll-blur.js finishes the word cycle at max
     scroll on any viewport, so this margin is purely visual rhythm. */
  margin-bottom: clamp(3rem, 6vh, 5rem);
  overflow: clip; /* crops the faded neighbor lines at section bounds */
  background: var(--base--white);
  color: #000;
}

.sk44_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* matches the hero h1 ("World Class Human <morph word>"):
     Plus Jakarta Sans 500, -0.06em tracking, ~60px at desktop */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1.2;
}

.sk44_lead,
.sk44_list h2 {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}

/* one-line window; neighbors overflow it and fade by distance */
.sk44_window {
  height: 1.2em;
  overflow: visible;
}

.sk44_list {
  will-change: transform;
}

.sk44_list h2 {
  margin-bottom: 0.5rem;
  opacity: 0.05;
  /* Five lines, faded every frame while the section scrolls by; layers
     keep those fades off the raster path (2026-08-31 phone jitter fix). */
  will-change: opacity;
}

/* Theme: match the page background exactly */
html[data-theme="dark"] .sk44 {
  background: var(--grey--grey-900);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sk44_list {
    transform: none !important;
  }
  .sk44_list h2 {
    opacity: 1 !important;
  }
  .sk44_window {
    height: auto;
  }
}