/* ============================================================
   PROJECTS TICKER — shared by the homepage (§3) and the four
   division pages. One markup, one stylesheet, one script
   (js/ticker.js); the lists themselves are generated by
   docs/make-division-pages.py.

   Colour comes from two custom properties so each page can ink it
   for its own ground: cream on the homepage sky (the default here),
   the page's --ink / --ink-soft on the division pages (division.css).

   Default state (no JS / reduced motion) = static centred lines that
   wrap. js/ticker.js adds .is-running, and only then does anything
   move.
   ============================================================ */
.proj-ticker{
  --proj-ink: rgba(247,250,246,0.92);
  --proj-sep: rgba(247,250,246,0.45);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.7vh, 18px);
}
.proj-lane{ position: relative; width: 100%; overflow: hidden; }
.proj-track{
  list-style: none;
  margin: 0;
  padding: 0 clamp(20px, 5vw, 84px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.5em;
}
.proj-track li{
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-weight: 300;
  font-size: clamp(12px, 1.33vw, 20px);   /* 2026-09-10: 30% under the first cut */
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--proj-ink);
}
/* each item owns its trailing separator, so the cloned set loops seamlessly */
.proj-track li::after{
  content: "·";
  margin: 0 0.9em;
  color: var(--proj-sep);
}
.proj-lane:not(.is-running) .proj-track li:last-child::after{ content: none; }
/* Static state: the one-line items would run off both edges, so they wrap.
   Not while measuring — the measurement must see one line. The base
   `flex: 0 0 auto` would pin an item to its one-line width, hence the
   shrink. */
.proj-lane:not(.is-running):not(.is-measuring) .proj-track li{
  flex-shrink: 1;
  max-width: 100%;
  white-space: normal;
  line-height: 1.5;
  text-align: center;
}

.proj-lane.is-measuring .proj-track,
.proj-lane.is-running .proj-track{
  flex-wrap: nowrap;
  width: max-content;
  padding: 0;
  justify-content: flex-start;
}
.proj-lane.is-running{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.proj-lane.is-running .proj-track{
  animation: proj-scroll var(--proj-dur, 120s) linear infinite;
  will-change: transform;
}
.proj-lane.is-running:nth-child(even) .proj-track{ animation-direction: reverse; }
.proj-lane:hover .proj-track,
.proj-ticker.is-offscreen .proj-track{ animation-play-state: paused; }
@keyframes proj-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .proj-lane.is-running .proj-track{ animation: none; }
}