/* ── studio 02 Hero — studio/sections/02-hero/brief.md ──
   Figma (y relative to the hero top = page y 117): 1:1631 "studio" 80 @ (103,238) · 1:1632 coral rule 59×5 @ (101,339) ·
   1:1635 tagline 42/53 @ (103,425) fades in · art box @ (782,458) 1138×402: sun 324×261 @ (+198,+97) fades in after,
   building 778×402 @ (+360,0), drawing 443×251 @ (+0,+151) on top · 1:1673 asterisk outline 342×352, 46%, spinning,
   clipped right · 1:1638 coral band 17px at the bottom (page y 975) */

.st-hero {
    height: calc(875 * var(--u));
    overflow: hidden;
    background: var(--skin-header);
}
.st-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: max(8px, calc(17 * var(--u)));
    background: var(--st-coral);
}
.st-hero__title {
    position: absolute;
    left: calc(103 * var(--u));
    top: calc(238 * var(--u));
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1;
    color: var(--skin-white);
    text-transform: lowercase;
}
.st-hero__rule { position: absolute; left: calc(101 * var(--u)); top: calc(339 * var(--u)); height: max(3px, calc(5 * var(--u))); }
.st-hero__tagline {
    position: absolute;
    left: calc(103.23 * var(--u));
    top: calc(425 * var(--u));
    font-size: var(--fs-sub);
    line-height: calc(53 / 42);
    color: var(--skin-white);
    text-transform: lowercase;
    animation: st-fade 1.96s cubic-bezier(.5, 0, .5, 1) both;
}
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }

.st-hero__art {
    --c: var(--u);
    position: absolute;
    left: calc(782 * var(--u));
    top: calc(458 * var(--u));
    width: calc(1138 * var(--c));
    height: calc(402 * var(--c));
}
.st-hero__sun      { z-index: 1; left: calc(198 * var(--c)); top: calc(97 * var(--c));  width: calc(324 * var(--c)); animation: st-fade 2.42s cubic-bezier(.5, 0, .5, 1) 1.94s both; }
.st-hero__building { z-index: 2; left: calc(360 * var(--c)); top: 0;                     width: calc(778 * var(--c)); }
.st-hero__drawing  { z-index: 3; left: 0;                    top: calc(151 * var(--c)); width: calc(443 * var(--c)); }
.st-hero__asterisk { z-index: 2; left: calc(1699.4 * var(--u)); top: calc(151.1 * var(--u)); width: calc(342 * var(--u)); }

@media (max-width: 991.98px) {
    .st-hero { height: auto; }
    .st-hero__stage { position: relative; left: auto; translate: none; width: auto; padding: 72px var(--skin-gutter) 0; }
    .st-hero__title, .st-hero__rule, .st-hero__tagline { position: static; }
    .st-hero__title { font-size: 56px; }
    .st-hero__rule { width: 48px; margin: 20px 0 0; }
    .st-hero__tagline { margin-top: 32px; font-size: 28px; line-height: 1.3; }
    .st-hero__art { --c: calc((100vw - 2 * var(--skin-gutter)) / 1138); position: relative; left: auto; top: auto; margin-top: 40px; }
    .st-hero__asterisk { left: auto; right: -60px; top: 40px; width: 180px; }
}
@media (max-width: 575.98px) {
    .st-hero__title { font-size: 44px; }
    .st-hero__tagline { font-size: 22px; }
}