/* ── 08 Studio — see sections/08-studio/brief.md ──
   Figma collage (back → front): 1:1018 long ramp · 1:1029 building · 1:1068 small ramp · 1:1071 birds · 1:1075 team
   Text right-aligned to x1800 · 1:1084 coral 20px bar closes the section.
   Collage geometry uses --c (design px → screen px) so it scales as one composition. */

.studio {
    --c: var(--u);
    background: var(--skin-canvas);
    isolation: isolate;
    min-height: calc(621 * var(--u));
    overflow: clip;
}

.studio__collage {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(1189 * var(--c));
    height: calc(611 * var(--c));
}
.studio__collage img { position: absolute; height: auto; }
.studio__ramp-long  { left: calc(699 * var(--c)); top: calc(535 * var(--c)); width: calc(593 * var(--c)); mix-blend-mode: multiply; opacity: .34; }
.studio__building   { left: 0;                   top: calc(190 * var(--c)); width: calc(721 * var(--c)); }
.studio__ramp-small { left: calc(5 * var(--c));   top: calc(389 * var(--c)); width: calc(151 * var(--c)); }
.studio__birds      { left: calc(351 * var(--c)); top: calc(28 * var(--c));  width: calc(70 * var(--c)); }
.studio__team       { left: calc(291 * var(--c)); top: calc(50 * var(--c));  width: calc(898 * var(--c)); }

.studio__inner {
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: calc(143 * var(--u)) 0 calc(60 * var(--u));
}
.studio__text {
    width: calc(642 / 1684 * 100%);
    text-align: right;
}
.studio__title {
    line-height: .8875;            /* 71 / 80 */
    letter-spacing: -0.03em;       /* −2.4px @ 80 */
    white-space: nowrap;
}
.studio__body {
    margin-top: calc(53 * var(--u));
    line-height: 1.154;            /* 30 / 26 */
    color: var(--skin-text-body);
}
.studio__more { display: inline-block; margin-top: calc(17 * var(--u)); }

.studio__bar {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(8px, calc(20 * var(--u)));
    background: var(--skin-coral);
}