/* ── studio 03 Our purpose — studio/sections/03-purpose/brief.md ──
   Figma (y relative to page y 992): 1:1620 eyebrow 42 #ff2325 @ (100,141) · 1:1621 h2 80/77 @ (102,247) ·
   1:1625 coral rule 59×7 @ (101,432) · 1:1616 body 26/1.4 #4b4949 w790 @ (101,513) ·
   1:1614 bird 64×46 @ (1205,360) · 1:1637 sketch 874×486 @ (989,372) · 1:1627 bracket 74×74 @ (1686,138) */

.st-purpose {
    min-height: calc(859 * var(--u));
    padding: calc(141 * var(--u)) 0 calc(80 * var(--u));
    background: var(--st-grey);
}
.st-purpose__title {
    margin: calc(64 * var(--u)) 0 0 calc(2 * var(--u));
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: calc(77 / 80);
    text-transform: lowercase;
}
.st-purpose__rule { margin: calc(31 * var(--u)) 0 0 calc(1 * var(--u)); }
.st-purpose__body {
    max-width: calc(790 * var(--u));
    margin: calc(74 * var(--u)) 0 0 calc(1.23 * var(--u));
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--st-text);
    text-transform: lowercase;
}
.st-purpose__bracket { left: calc(1686 * var(--u)); top: calc(138 * var(--u)); width: calc(74 * var(--u)); }
.st-purpose__bird    { left: calc(1205 * var(--u)); top: calc(360 * var(--u)); width: calc(64 * var(--u)); }
.st-purpose__sketch  { left: calc(989 * var(--u));  top: calc(372 * var(--u)); width: calc(874 * var(--u)); }

@media (max-width: 991.98px) {
    .st-purpose { display: flex; flex-direction: column-reverse; min-height: 0; padding: 64px 0 0; }
    .st-purpose__title { margin: 24px 0 0; font-size: 44px; line-height: 1.05; }
    .st-purpose__rule { width: 48px; margin: 20px 0 0; }
    .st-purpose__body { max-width: 640px; margin: 28px 0 0; font-size: 17px; line-height: 1.55; }
    .st-purpose__art { position: relative; left: auto; translate: none; width: 100%; height: 60vw; margin-top: 32px; }
    .st-purpose__bracket { display: none; }
    .st-purpose__bird { left: 50%; top: 4%; width: 48px; }
    .st-purpose__sketch { left: 4%; top: 10%; width: 92%; }
}