/* ============================================================
   FRACS — THE TAPE
   A stock-exchange ticker of what's getting frac'd this month.
   Shared by index.html and lp/*.html. Layers on css/styles.css.
   Everything is prefixed .tape- and collides with nothing.

   Two-reds rule: --red-dark carries every small piece of text.
   Motion is gated on html.anim (js/main.js only sets it when the
   visitor has not asked for reduced motion); without it the tape is a
   still strip that can be scrolled sideways by hand.
   ============================================================ */
.tape{margin-top:72px;display:flex;align-items:stretch;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  background:var(--ink);color:var(--cream);height:54px;overflow:hidden;position:relative}
.tape-lab{flex:none;display:flex;align-items:center;gap:10px;padding:0 22px;background:var(--red-dark);
  font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  border-right:1.5px solid var(--ink);position:relative;z-index:2}
.tape-lab b{font-family:var(--bomb);font-weight:400;letter-spacing:.06em;font-size:var(--fs-fine)}
.tape-lab .dot{width:8px;height:8px;border-radius:50%;background:var(--cream);display:inline-block}
html.anim .tape-lab .dot{animation:tape-blink 1.4s steps(1) infinite}
@keyframes tape-blink{50%{opacity:.25}}
.tape-lab .sum{font-family:var(--sans);font-weight:600;letter-spacing:.14em;opacity:.85}
@media(max-width:640px){.tape-lab .sum{display:none}.tape-lab{padding:0 14px}}

.tape-track{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.tape-run{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;white-space:nowrap;will-change:transform}
html.anim .tape-run{animation:tape-roll var(--tape-dur,60s) linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
@keyframes tape-roll{to{transform:translateX(-50%)}}

.tape-run li{display:inline-flex;align-items:baseline;gap:12px;padding:0 28px;border-right:1px solid rgba(241,235,224,.18);
  font-size:var(--fs-fine);line-height:54px}
.tape-run .tk{font-family:var(--bomb);letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.tape-run .who{font-family:var(--serif);font-style:italic;color:#dcd5c8;font-size:var(--fs-small)}
.tape-run .cr{font-variant-numeric:tabular-nums;font-weight:700;color:#eeb8ab;letter-spacing:.04em}
.tape-run .st{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.tape-run .st-done{color:#9fd3b4}
.tape-run .st-live{color:#eeb8ab}
.tape-run .st-queued{color:#b9c9be}
.tape-run .st-free{color:#9fd3b4}