/* MAGNITUDE — scale annotations */

.card {
  position: absolute; width: min(380px, calc(100vw - 48px));
  padding: 4px 0 4px 20px;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 2px; height: 40px;
  background: linear-gradient(var(--c, var(--accent)), transparent);
}
.card .tag {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--c, var(--accent)); text-transform: uppercase; margin-bottom: 10px;
  text-shadow: 0 1px 10px rgb(0 0 0 / .95);
}
.card .tag .m { color: var(--dim); letter-spacing: .04em; text-transform: none; }
.card p {
  font-size: 14.5px; color: color-mix(in oklab, var(--ink) 92%, var(--dim));
  text-shadow: 0 1px 6px rgb(0 0 0 / .95), 0 0 22px rgb(0 0 0 / .85), 0 0 44px rgb(0 0 0 / .6);
}
.card p b { color: var(--ink); font-weight: 400; font-style: italic; }

/* each annotation rises as it enters, straight off the scroll timeline */
@supports (animation-timeline: view()) {
  .card {
    animation: card-in both linear;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes card-in { from { opacity: 0; transform: translateY(26px); } }
}