/* ---------- Four steps (#steps): real PERRLA Online screenshots ----------
   Each shot is a tight 4:5 crop of the app at 2x, so the app's own text reads at the column's width.
   Four across only from 1280px, where the container reaches 1200px and each column its full 282px;
   narrower four-across columns shrink the app text too far, so two across below that. The cap keeps a
   shot near its captured size when a column is wider than it needs (two across on a tablet, one
   across on a large phone). */
@media (max-width: 1279px) and (min-width: 601px) { #steps .c-where--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
#steps .screen img { max-width: 400px; }

/* ---------- What you turn in (#result): the paper as pages, offset and laid over each other (Oct 6) ----------
   Title page at the back, the body page over it, the references page on top, each stepped down and to the right so
   the title, the body's first paragraph and citation, and the whole references page all read. Type scales with the
   pile's width so every sheet wraps the same at any size. */
#result .pile { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.4; max-width: 560px; margin-inline: auto; }
#result .pile .paper { position: absolute; width: 62%; aspect-ratio: 8.5 / 11; font-size: min(9.5px, 1.62cqw); line-height: 2.1; padding: 7.5% 8%; overflow: hidden; }
#result .pile .paper .pnum { top: 3.6%; right: 8%; }
#result .pile__title { left: 0; top: 0; transform: rotate(-1.6deg); z-index: 1; }
#result .pile__body { left: 19%; top: 21.4%; transform: rotate(0.4deg); z-index: 2; }
#result .pile__refs { left: 38%; top: 42.8%; transform: rotate(1.4deg); z-index: 3; }