/* ── A letter over a full-bleed photo: slide 32 of the brand-guidelines reel
   (DfG2efsNelf, "HALF-WILD, DEEPLY LISTENING, EVER BECOMING." over a blurred
   poppy, signed "With love, Sarah"), cloned off the slide
   (refs/reel-DfG2efsNelf/slides/s32.png, 1182 x 664) for #words, page 11.
   Every box is the slide's px / 11.82 in container units:
     photo     edge to edge, 0,0 1182 x 664
     corners   the shared .b-corner pair, cap 40-48
     mark      63 high, 117-180, centred on 591 (their monogram in a ring ->
               our logo, the same height)
     title     two lines centred, cap 221 and 262 (cap 22.5 px, pitch 41):
               Herbik 32.9 px (cap renders 23 rows at .674em)
     words     three paragraphs 352-828 (477 wide), justified with the last line
               centred; caps 327 / 378 / 429, pitch 12.75 (a blank line between),
               cap 7.5 px: EB Garamond, cap .65em -> 11.5 px
     signature centred, ink 496-685 x 503-539
     page      "35" at the foot (the shared .b-page), ours "11"
   Herbik (typo .937/.263): cap top ((L - 1.2) / 2 + .263) em under the box top.
   EB Garamond (typo 1.007/.298, cap .65em): ((L - 1.305) / 2 + .357) em.
   Their blush-white type -> our cream #f7f3ee; their coral photo -> the stand-in
   under our oxblood #2a4254 veiled to the slide's mean luminance; their sans ->
   EB Garamond, their script -> 1871 Dreamer. "Sarah" -> "Sama"; the words are
   Sama's own account of the studio, the facts from the brief, no customer quote.
   Stand-in: her painted mirror (img/rk/mirror.webp), its smooth face behind the words. */
.s32-pic { left: 0; top: 0; width: 100%; height: 100%; }
.s32-pic img { object-position: 50% 45%; }
.s32-pic::after { content: ""; position: absolute; inset: 0; background: rgba(24, 24, 24, .38); }   /* the blinds photo keeps its own warm light; a soft dark veil for the cream words */
.js-reveal .s32-pic[data-in] { translate: none; }                 /* the full-bleed photo only fades and settles; rising would bare its top */

.s32-mark { left: 0; right: 0; top: 9.983cqw; width: 2.86cqw; height: 5.33cqw; margin: 0 auto; }   /* 117, 63 high */
.s32-title { left: 0; right: 0; top: 17.90cqw; text-align: center; font: 400 2.78cqw / 1.2477 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }   /* cap 221, pitch 41 */
.s32-title span { display: block; white-space: nowrap; }
.s32-text { left: 29.78cqw; top: 27.495cqw; width: 40.36cqw; font: 400 .976cqw / 1.105 var(--f-body); text-align: justify; text-align-last: center; hyphens: none; }   /* 352, cap 327, 477 wide */
.s32-text p { margin: 0; }
.s32-text p + p { margin-top: 1.079cqw; }                        /* one blank line: caps 378, 429 */
.s32-text a { text-decoration: none; }
.s32-text a:hover, .s32-text a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.s32-sign { left: 0; right: 0; top: 42.63cqw; text-align: center; font: 400 2.9cqw / 1 var(--f-script); white-space: nowrap; }   /* ink 503 */

/* phones: the photo stays behind; the mark, the line, the words and the
   signature stack centred over it at a readable size */
@media (max-width: 749px) {
  .s32 .b-w { padding-top: 22cqw; text-align: center; }
  .s32-pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .s32-pic::after { background: rgba(24, 24, 24, .45); }
  .s32-mark { left: auto; right: auto; top: auto; width: 9cqw; height: 16.8cqw; }
  .s32-title { left: auto; right: auto; top: auto; margin-top: 8cqw; font-size: 5.3cqw; line-height: 1.25; }
  .s32-title span { white-space: normal; }
  .s32-text { left: auto; top: auto; width: auto; margin-top: 8cqw; font-size: 4cqw; line-height: 1.45; text-align: center; }
  .s32-text p + p { margin-top: 1.4em; }
  .s32-sign { left: auto; right: auto; top: auto; margin-top: 9cqw; font-size: 9cqw; }
}