/* ── How an order works: slide 31 of the brand-guidelines reel (DfG2efsNelf, the
   "BODY" type page), cloned off refs/reel-DfG2efsNelf/slides/s31.png (1182 x 664).
   Every box is the slide's px / 11.82 in container units:
     corners   the shared .b-corner (cap 40-48)
     label     "BODY", centred on 591, cap 40-48 (9 px) in their small sans
     body      three paragraphs, justified, last line centred, 216-960 (745 wide);
               cap 10 px, line pitch 17.17, one empty line between paragraphs:
               caps at 231 248 | 283 300 | 334 351 369 (2 + 2 + 3 lines),
               baselines 240 258 | 292 309 | 344 361 378
     specs     three centred columns on x 463, 593, 710: a name (cap 545-553)
               over a value (cap 559-567) at about half the ink
     page      the shared .b-page, nearly the ground's colour on the slide
   EB Garamond's line box (typo 1.007 / .298, cap .65em): with line-height L the
   cap top sits ((L - 1.305) / 2 + .357) em under the box top.
     body  cap 10 -> 15.38 px (1.301cqw), L = 17.25 / 15.38 = 1.1216 (pitch
           read off the baselines, 240 -> 378 over 8) -> box top 228.46
     label cap 9 -> 13.85 px (1.1714cqw), L 1: box top 38.17
     specs cap 9 -> 13.85 px, L 1.047 (pitch 14.5): box top 542.84
     (the tops are the formula's, then +1 to +1.5 px read off the render)
   Their coral ground -> our oxblood #2a4254; their blush type -> cream #f7f3ee.
   Their sans -> EB Garamond. Words: the true order steps (choose, 25 photos and
   covers, name, birthday, words; preview to approve, photo once printed; 7-12
   days, 50% deposit, the rest before shipping; Instagram), the specs rewritten
   from Name / Weights / Specs to Time / Deposit / Preview. No pictures. */
.s31-label { left: 0; right: 0; top: 3.229cqw; text-align: center; font: 400 1.1714cqw / 1 var(--f-body); text-transform: uppercase; white-space: nowrap; }   /* cap 40-48 */

.s31-body { left: 18.274cqw; top: 19.328cqw; width: 63.03cqw; font: 400 1.301cqw / 1.1216 var(--f-body); text-align: justify; text-align-last: center; hyphens: none; }   /* 216,231 745 */
.s31-body p { margin: 0; }
.s31-body p + p { margin-top: 1.1216em; }                            /* one empty line */
.s31-body a { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .18em; }

.s31-spec { top: 45.926cqw; width: 13.536cqw; text-align: center; font: 400 1.1714cqw / 1.047 var(--f-body); white-space: nowrap; }   /* cap 545 */
.s31-spec p { margin: 0; }
.s31-v { opacity: .53; }
.s31-spec--1 { left: 32.403cqw; }                                    /* centre 463 */
.s31-spec--2 { left: 43.401cqw; }                                    /* centre 593 */
.s31-spec--3 { left: 53.299cqw; }                                    /* centre 710 */
.s31 .b-page { opacity: .35; }

/* phones: the words would be 5 px; the same parts stack, the specs stay a row */
@media (max-width: 749px) {
  .s31 .b-w { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2cqw; padding: 20cqw 7cqw 12cqw; }
  .s31 .b-w > :not(.b-corner) { grid-column: 1 / -1; }
  .s31 .b-w > :not(.b-corner):not(.b-page) { left: auto; right: auto; top: auto; }   /* undo the slide boxes */
  .s31-label { font-size: 3.4cqw; letter-spacing: .08em; white-space: normal; }
  .s31-body { width: auto; margin-top: 10cqw; font-size: max(4.3cqw, 15px); line-height: 1.45; text-align: center; text-align-last: center; }
  .s31-body p + p { margin-top: 1.2em; }
  .s31 .b-w > .s31-spec { grid-column: auto; width: auto; margin-top: 14cqw; font-size: max(3.6cqw, 12px); line-height: 1.35; white-space: normal; }
  .s31 .b-page { margin-top: 12cqw; }
}