/* ── #about (page 03): slide 3 of the brand-guidelines reel (DfG2efsNelf,
   "(02) ABOUT"), cloned off the slide itself (refs/reel-DfG2efsNelf/slides/s03.png,
   1182 x 664). Every box is the slide's px / 11.82 in container units:
     picture   the left half, edge to edge: 0,0 587 x 664
     corners   the shared two labels (base.css); the left one sits on the picture
     number    "(03)" (ours: the section's page), cap 25-34 as base.css
     title     one word, cap 48-73, centred on the slide (it crosses the picture's
               edge, as theirs): base.css's title, 5 px higher
     words     five centred paragraphs of 3, 2, 4, 4 and 2 lines in a 394 px column
               at 710-1103 (centre 907), first cap 200, 8 px cap (EB Garamond, cap
               .65em -> 12.3 px), pitch 14.3, one 14 px gap between paragraphs
   no page number (theirs would fall on the picture; none shows).
   EB Garamond (typo 1.007/.298, cap .65em): at line-height L the cap top sits
   ((L - 1.305) / 2 + .357) em under the box top; Chrome lands it 1 px lower.
   Their ivory #e5e4dc -> our cream (the default ground), their black -> navy.
   Their words about the brand -> ours about Samawyat, at the same lengths.
   The picture is a stand-in: one of Sama's painted wood-slice portraits (rk/tree). */
.s03-pic { left: 0; top: 0; width: 49.66cqw; height: 56.18cqw; }                    /* 0,0 587x664 */
.s03-title { top: 3.549cqw; }                                                        /* cap 48 */
.s03-text { left: 60.03cqw; top: 16.63cqw; width: 33.33cqw; text-align: center; font: 400 max(1.041cqw, 11px) / 1.21cqw var(--f-body); }   /* 710,200 394 wide */
.s03-text p { margin: 0 0 1.184cqw; }                                                /* 14 between paragraphs */

/* phones: number and title, the picture full width, the paragraphs under it */
@media (max-width: 749px) {
  .s03 .b-w > :not(.b-corner) { left: auto; right: auto; top: auto; }   /* static, as base.css means it */
  .s03-pic { width: auto; height: auto; aspect-ratio: 587 / 664; margin: 8cqw -5cqw 0; order: 3; }
  .s03 .b-w { display: flex; flex-direction: column; }
  .s03 .b-num { order: 1; } .s03-title { order: 2; } .s03-text { order: 4; }
  .s03-text { width: auto; margin-top: 10cqw; font-size: 4cqw; line-height: 1.45; padding: 0 3cqw; }
  .s03-text p { margin-bottom: 1.1em; }
}