/* ── studio 04 Mark Aronson — studio/sections/04-mark/brief.md ──
   Figma (y relative to page y 1851): 1:1626 grey rule 59×7 @ (847,145) · 1:1641 name 80 #fe4243 @ (851,171) ·
   1:1642 role 26 @ 270 · 1:1617 bio 26/1.42 #4b4949 w878 @ 370 (full text shown — Figma box clipped it) ·
   collage: dots 653×511 @ (55,375) · house 552×414 @ (−6,472) · Mark 1049×701 @ (−231,518) · coral band 751×17 @ (54,1218) ·
   bracket 75×74 @ (1685,1142) · 1:1611 asterisk outline 255×263 straddling the purpose section (centre x 16, y 72) */

.st-founder {
    z-index: 2;   /* the asterisk paints over the purpose band above */
    min-height: calc(1307 * var(--u));
    padding: calc(145 * var(--u)) 0 calc(120 * var(--u));
    background: var(--skin-white);
    overflow-x: clip;
}
.st-founder__asterisk { position: absolute; z-index: 1; left: calc(-111.45 * var(--u)); top: calc(-59.3 * var(--u)); width: calc(255 * var(--u)); height: auto; }

.st-founder__dots   { left: calc(55 * var(--u));   top: calc(375 * var(--u));  width: calc(653 * var(--u)); }
.st-founder__house  { left: calc(-6 * var(--u));   top: calc(472 * var(--u));  width: calc(552 * var(--u)); }
.st-founder__photo  { left: calc(-231 * var(--u)); top: calc(518 * var(--u));  width: calc(1049 * var(--u)); }
.st-founder__band   { position: absolute; left: calc(54 * var(--u)); top: calc(1218 * var(--u)); width: calc(751 * var(--u)); height: max(8px, calc(17 * var(--u))); background: var(--st-coral); }
.st-founder__bracket{ left: calc(1685 * var(--u)); top: calc(1142 * var(--u)); width: calc(75 * var(--u)); }

.st-founder__text { padding-left: calc(751 / 1720 * 100%); }
.st-founder__text .st-rule { margin-left: calc(-4 * var(--u)); }
.st-founder__name {
    margin-top: calc(19 * var(--u));
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1;
    color: var(--st-red);
    text-transform: lowercase;
}
.st-founder__role { margin-top: calc(19 * var(--u)); font-size: var(--fs-body); line-height: 1; }
.st-founder__bio {
    max-width: calc(878 * var(--u));
    margin-top: calc(74 * var(--u));
    font-size: var(--fs-body);
    line-height: 1.42;
    color: var(--st-text);
    text-transform: lowercase;
}
.st-founder__bio p + p { margin-top: 1.42em; }

@media (max-width: 991.98px) {
    .st-founder { display: flex; flex-direction: column; min-height: 0; padding: 64px 0 0; }
    .st-founder__asterisk { width: 150px; left: -70px; top: -60px; }
    .st-founder__text { padding-left: 0; }
    .st-founder__text .st-rule { margin-left: 0; width: 48px; }
    .st-founder__name { margin-top: 16px; font-size: 44px; }
    .st-founder__role { margin-top: 10px; font-size: 17px; }
    .st-founder__bio { max-width: 680px; margin-top: 28px; font-size: 17px; line-height: 1.55; }
    .st-founder__art { position: relative; left: auto; translate: none; order: 2; width: 100%; height: 72vw; margin-top: 32px; overflow: hidden; }
    .st-founder__dots { left: 6%; top: 0; width: 62%; }
    .st-founder__house { left: 0; top: 12%; width: 52%; }
    .st-founder__photo { left: -10%; top: 16%; width: 100%; }
    .st-founder__band { left: 4%; top: auto; bottom: 0; width: 70%; }
    .st-founder__bracket { display: none; }
}