/**
 * The organise pile — homepage only.
 *
 * site.css already owns the box. This file only changes how the five cards
 * sit in the unsorted state: they were stacking in a neat column because
 * --mx/--mr on the markup never became CSS variables (and --mx is a registered
 * <length> used by the headline ink, so a percentage there would have been
 * dropped even if it had). --pile-x and --pile-r are unregistered and local.
 */
.org__stack {
  --pile-top: 22cqh;
  --pile-pitch: 2.4cqh;
}
.ocard {
  --slot-y: calc(var(--stack-top) + var(--i) * (var(--row) + var(--row-gap)));
  --mess-y: calc(var(--pile-top) + var(--i) * var(--pile-pitch) - var(--slot-y));
  transform: translate(var(--pile-x, 0px), calc(var(--slot-y) + var(--mess-y))) rotate(var(--pile-r, 0deg));
  z-index: calc(8 + var(--i));
  box-shadow: 0 2px 4px color-mix(in srgb, var(--c-ink) 6%, transparent),
    0 18px 40px color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.ocard:nth-child(1),
.ocard:nth-child(2),
.ocard:nth-child(3),
.ocard:nth-child(4),
.ocard:nth-child(5) { z-index: calc(8 + var(--i)); }

[data-sorter][data-sorted="true"] .ocard {
  transform: translate(0, var(--slot-y)) rotate(0deg);
  z-index: 1;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-ink) 4%, transparent),
    0 6px 16px color-mix(in srgb, var(--c-ink) 6%, transparent);
}