/* ───────────────────────────────────────────────────────────────
   The fan: the pack shown as a hand of cards

   Seven pages spread, the cover in front and whole, the sheets curving away
   behind it. Used twice and defined once: on the product page, and in the
   band at the foot of every checklist guide. It was written inside
   product.css first, which the guides do not load, and copying it would have
   been two arcs drifting apart.

   The curve is one pivot, not seven positions. Every page shares a
   transform-origin well below itself and is rotated a step further than the
   last, which puts them on an arc for free and keeps them on it at any size.
   Placing each one by hand would mean redoing the maths at every breakpoint.

   Size and angle come from --w and --step, so a surface can set how big its
   fan is without knowing how the arc works.
   ─────────────────────────────────────────────────────────────── */

.fan {
  --w: clamp(92px, 12vw, 176px);
  --step: 7deg;
  --overlap: -0.44;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* the arc throws the outer pages upward, so the row needs headroom the
     layout box knows nothing about */
  padding: clamp(26px, 4vw, 52px) 0 clamp(10px, 2vw, 24px);
}

.fan img {
  position: relative;
  display: block;
  width: var(--w);
  height: auto;
  margin-left: calc(var(--w) * var(--overlap));
  /* White pages on a dark ground, which the paper rule in visual_identity.md
     warns about: a cut-out photograph there loses its dark half and a shelf
     of them reads as a row of holes. A full white rectangle with a defined
     edge is the other case, and this hairline is what defines it. It also
     separates each page from the one behind. */
  border: 1px solid rgba(var(--rgb-void), 0.6);
  transform-origin: 50% 260%;
}

.fan img:first-child { margin-left: 0; }

/* The cover in front and each page a little further back, which is the
   opposite of what document order paints, plus its step along the arc.
   Written out rather than calculated: seven rules that say what they do are
   easier to change than one that has to be worked out. */
.fan img:nth-child(1) { z-index: 7; transform: rotate(calc(var(--step) * -3)); }
.fan img:nth-child(2) { z-index: 6; transform: rotate(calc(var(--step) * -2)); }
.fan img:nth-child(3) { z-index: 5; transform: rotate(calc(var(--step) * -1)); }
.fan img:nth-child(4) { z-index: 4; transform: rotate(0deg); }
.fan img:nth-child(5) { z-index: 3; transform: rotate(calc(var(--step) * 1)); }
.fan img:nth-child(6) { z-index: 2; transform: rotate(calc(var(--step) * 2)); }
.fan img:nth-child(7) { z-index: 1; transform: rotate(calc(var(--step) * 3)); }

/* On a red ground the hairline is doing less work, because white on signal
   red separates on its own. Kept anyway, so the pages behind still show an
   edge against the page in front. */
.fan--onred img { border-color: rgba(var(--rgb-void), 0.45); }

@media (max-width: 520px) {
  /* The arc costs width and a phone has none to spare: seven pages at the
     desktop size and angle measured 555px inside a 390px screen, so the
     outer two hung off both edges. Narrower pages, a shallower arc and more
     overlap, which is the one of the three nobody notices. */
  .fan { --w: 62px; --step: 4.5deg; --overlap: -0.5; }
}