/* Founder (#who). Section-scoped styles; included from the Founder block in index.html.

   Decisions, for HANDOFF at merge (Samuel's briefs, 20 October):
   - Side by side: Samuel's portrait on the left and the copy on the right,
     from 1146px wide. A named exception to the no-columns rule in the design
     notes, for Founder only, signed off by Samuel with the section on
     20 October.
   - Removed: the A4 letter, its sheet (#F8F5EE, the paper texture and the
     sheet's shadow), the letterhead and its emerald rule, the tilted print
     in its white border, the paper clip, the print's settle and the mono
     sign-off. The clip read cheap, and the letter would not fit one screen.
     Their files stay in the history (8b72973).
   - The portrait: assets/founder/portrait-founder.jpg and .webp, 1206 by
     1045, from portrait.jpg at its full resolution (see the headroom crop
     below). A photograph on
     the page, not an object: no border, square corners, no shadow, no tilt,
     no filter. 460px wide at 1512, in proportion to the window (30.4vw),
     with a gap to the copy of 80px at 1512 (5.8vw less 7.65px, never under
     48px). The copy's measure is about 560px. The block starts at the page's
     left edge, the content edge of the shared .wrapper container (set by
     --shell-max and --shell-inset), so it moves with every other section
     when that edge moves; nothing in this file names the edge itself.
   - The photograph's height matches the copy. Side by side, its box
     stretches down the row from the heading's capitals to the baseline of
     the last line of copy, or to the foot of the signature once there is
     one; the image covers the box (object-fit: cover), cropped from the
     sides only and anchored at the top (centre top), so the face and the
     shoulders are never cut: the box is always taller than it is wide here.
     At 1512 the box is 460 by 591px and shows the image at 591px, 1182
     device pixels on a 2x screen for 1045 source pixels (1.13 of them).
   - The headroom crop: 161px off the top of the square portrait.jpg, so the
     top of the hair (row 255 of 1206) sits 9% of the photograph's height
     under its top edge (94 of 1045), side by side and stacked alike, as the
     image fills the box's height in both. That is the photograph 15.4%
     larger in the box than the whole square, the least that lifts the hair
     from 21% to 9% while the shoulders still reach the bottom edge (with
     the foot held, the hair lands at 1 - 0.789 x the scale; 8 to 10% would
     only bring it to 13 or 14%). The side crop then shows the middle 68% of
     the width at 1512 and 52% at 1146, and the head (ears and hair, columns
     417 to 788 of 1206) stays whole: 128 source pixels clear each side at
     1146. Ratio reached at 1512 on a 2x screen: 1.13 device pixels per
     source pixel (1.30 with a 160 by 50px signature).
   - The bottom-baseline shim, --fl-base: the box ends 0.425em of the copy's
     size above the foot of the last line box. Hanken Grotesk's ascent is
     1.0em and its descent 0.3em, so at line-height 1.55 the half-leading is
     (1.55 - 1.0 - 0.3) / 2 = 0.125em and the line's foot sits half-leading
     plus descent, 0.125 + 0.3 = 0.425em, under its baseline: 7.65px at 18px.
     Measured off the render with a probe on the last baseline: WebKit
     0.426em at every width, Chromium 0.41 to 0.44em (its baselines snap).
   - The stack point is 1146px, computed: the widest width at which the
     photograph's box (its width over the copy's height, capitals to last
     baseline) falls under 0.6 is 1145 in Chromium (0.5999) and 1143 in
     WebKit, swept 1px at a time from 960 to 1512 with no signature; 0.778 at
     1512. Under 1146px the portrait comes first, the width of the window
     less 16px each side and never over 460px, the whole 1206 by 1045
     photograph with the same 9% headroom, then about 32px, then the
     heading, the name line, the copy
     and the signature, on the copy's measure, from the same left edge. With
     a 160 by 50px
     signature the copy grows 82px and the same rule would put the stack
     point at 1336px.
   - The heading alignment shim: side by side, the top of the "Founder"
     heading's capitals lines up with the top of the photograph. The heading
     is pulled up by the space its line box keeps above the capitals,
     --fl-cap, 0.170em of the heading (10.2px at 60px, 9.7px at 57.3px),
     measured off the render: with no shim the capitals sat 10.0px under the
     box's top in Chromium and 10.9px in WebKit at 1512. Both engines draw
     the capitals on whole-pixel steps, each with its own rounding, while
     the photograph's edge follows the page's fractions of a pixel, so the
     offset moves in steps of about 1px as the content above Founder changes
     height: re-measure after such changes. Measured at the merge onto
     0d4d2f0 (21 October), photograph top less cap top: Chromium +0.19px at
     1512 and +0.23px at 1146, WebKit -0.67px and -0.67px (0.173em had put
     Chromium at 1146 at 1.41px there, 0.175em and above did the same).
     The gate for both edges, top against the capitals and bottom against
     the last baseline, is 1.5px in Chromium and WebKit at 1512 and 1146
     (Samuel, 21 October): the sub-pixel drift that upstream height changes
     cause cannot be seen, so it should not fail a merge.
   - Type: the heading as every section heading (.section-h); the name line
     in Fraunces, 26px at desktop and 22px on phones, about 12px under it;
     the five paragraphs in Hanken Grotesk, 18px at desktop and 17px on
     phones, line-height 1.55, ink #12140F, 20px apart, 32px under the name.
   - The signature slot: assets/marks/signature.png, an <img> that starts
     hidden and shows itself once the file loads, so with no file nothing is
     drawn and no space is kept; 160px wide and never over 72px tall, 32px
     under the last paragraph, on the copy's left edge. Without a script it
     stays hidden even once the file exists; a plain <img> with the file's
     own width and height is the better tag then.
   - Spacing: the standard section rhythm (--gap); Founder's 220 and 128px
     exception is gone.
   - Motion: none; the portrait and the copy are simply there (no
     entrance); founder.js has no logic left. */

#who {
  --fl-cap: 0.170em; /* the heading's shim, measured: see above */
  --fl-body: clamp(17px, calc(0.0891vw + 16.65px), 18px); /* the copy's size */
  --fl-base: calc(var(--fl-body) * 0.425); /* the last baseline's shim: see above */
}

/* the block: stacked, on the copy's measure, from the left edge of the
   shared .wrapper container, as every other section */
#who .fl { max-width: 560px; margin: 0; }

/* the portrait: the window's width less 16px each side, never over 460px,
   on the copy's left edge where it fits, and centred on the copy where it is
   wider than it (on phones) */
#who .fl-photo {
  --fl-pw: min(460px, calc(100vw - 32px));
  width: var(--fl-pw);
  margin: 0 0 32px min(0px, calc((100% - var(--fl-pw)) / 2));
}
/* stacked, the whole photograph (1206 by 1045, its hair 9% under the top),
   its shape set here as well as by the tag's width and height */
#who .fl-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1206 / 1045; object-fit: cover; object-position: center top;
}

#who .section-h { margin-bottom: 12px; }
#who .fl-name {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-variation-settings: 'opsz' 36;
  font-size: clamp(22px, calc(0.3565vw + 20.6px), 26px); line-height: 1.3;
  color: #12140F;
}
#who .fl-body {
  margin-top: 32px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 400;
  font-size: var(--fl-body); line-height: 1.55;
  color: #12140F;
}
#who .fl-body p { margin: 0; text-wrap: pretty; }
#who .fl-body p + p { margin-top: 20px; }

/* the signature, once its file exists */
#who .fl-sig { display: block; width: 160px; height: auto; max-height: 72px; object-fit: contain; object-position: left center; margin-top: 32px; }
#who .fl-sig[hidden] { display: none; }

/* side by side from 1146px: the portrait 460px wide at 1512, in proportion to
   the window down to 1146 (349px), the gap 80px to 59px, the copy's measure
   560px, the block from the .wrapper's left edge; the photograph from the
   heading's capitals to the
   last line's baseline */
@media (min-width: 1146px) {
  #who .fl {
    --fl-pw: min(460px, calc(100vw * 460 / 1512));
    max-width: none;
    display: grid;
    grid-template-columns: var(--fl-pw) minmax(0, 560px);
    column-gap: clamp(48px, calc(5.797vw - 7.65px), 80px);
    justify-content: start; align-items: start;
  }
  /* the photograph as tall as the copy: its box stretches down the row from
     the heading's capitals to the last line's baseline (or to the foot of
     the signature, when there is one), and the image covers it, cropped from
     the sides only and anchored at the top */
  #who .fl-photo { position: relative; align-self: stretch; width: auto; margin: 0 0 var(--fl-base); }
  #who .fl:has(.fl-sig:not([hidden])) .fl-photo { margin-bottom: 0; }
  #who .fl-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: center top;
  }
  #who .section-h { margin-top: calc(-1 * var(--fl-cap)); }
}

/* The phone modes (mobile build, 22 October): upright under 1024 wide, or a
   short landscape window. The heading and the name line come first, so the
   reader knows whose photograph it is, then the portrait as a wider, shorter
   crop across the column (3 by 2, rows 40 to 844 of the 1206 by 1045
   photograph: the hair 7% under the top, the head and shoulders whole, cut
   across the chest), then the paragraphs. In a short landscape window the
   portrait is no taller than the window under the bar. */
@media (orientation: portrait) and (max-width: 1023px), (orientation: landscape) and (max-height: 500px) {
  #who .fl { display: flex; flex-direction: column; }
  #who .fl-copy { display: contents; }
  #who .section-h { order: 1; }
  #who .fl-name { order: 2; }
  #who .fl-photo { order: 3; width: 100%; margin: 24px 0 0; }
  #who .fl-body { order: 4; margin-top: 28px; }
  #who .fl-sig { order: 5; }
  #who .fl-photo img { aspect-ratio: 3 / 2; object-position: 50% 16.6%; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #who .fl-photo { width: min(100%, calc((100svh - 104px) * 1.5)); }
}