ml-card {
  /* derive this card's palette from its hue (set by JS) and the global theme tokens */
  --card-bg: hsl(var(--h) var(--card-s) var(--card-l));
  --ink: hsl(var(--h) var(--ink-s) var(--ink-l));
  --soft: hsl(var(--h) var(--soft-s) var(--soft-l));
  --acc: hsl(var(--h) var(--acc-s) var(--acc-l));
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--card-bg);
  color: var(--ink);
}

ml-card .ml-card__motif {
  position: absolute;
  right: -8%;
  top: 9%;
  width: min(78vw, 420px);
  color: var(--acc);
  opacity: .16;
  pointer-events: none;
}

ml-card .ml-card__motif svg { display: block; width: 100%; height: auto; }

ml-card .ml-card__inner {
  position: relative;
  height: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-block: 76px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

ml-card .ml-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--soft);
}

ml-card .ml-card__topic {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: var(--acc);
  font-weight: 500;
}

ml-card .ml-card__topic i {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--acc);
}

ml-card .ml-card__body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding-right: 72px;
}

ml-card .ml-card__fact {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 760;
  font-size: clamp(1.6rem, min(6.6vw, 6.2vh), 3.35rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

ml-card .ml-card__more {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1rem, min(3.5vw, 3.2vh), 1.2rem);
  line-height: 1.58;
  color: var(--ink);
}

ml-card .ml-card__src,
ml-card .ml-card__hint {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
}

ml-card .ml-card__hint { color: var(--acc); }

ml-card .ml-card__rail {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (max-width: 420px) {
  ml-card .ml-card__body { padding-right: 62px; }
}