/* ═══════════════════════════════════════════════════════════════
   maarch* studio page · shared styles — Figma 1:1574 · resources/design/studio/DESIGN-ANALYSIS.md
   ═══════════════════════════════════════════════════════════════ */

:root {
    --st-coral:  #fc898a;   /* accent rules, bands, brackets */
    --st-red:    #fe4243;   /* name, value titles */
    --st-text:   #4b4949;   /* body copy */
    --st-grey:   #e7e7e7;   /* purpose band, values panel */
}

.page-studio { background: var(--skin-white); }
/* Stages are sized from 100vw (which includes the scrollbar) — clip horizontally, keep vertical overflow */
.page-studio main > section { overflow-x: clip; }

/* Decorative collage layer: a 1920-wide stage (design px × --u) centred over its section */
.st-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(1920 * var(--u));
    translate: -50% 0;
}
.st-stage img { position: absolute; max-width: none; height: auto; }

/* Text box: x 100 → 1820 at 1920 */
.st-box {
    position: relative;
    z-index: 2;
    width: min(1720px, calc(1720 * var(--u)));
    margin-inline: auto;
}

.st-rule { display: block; width: calc(59 * var(--u)); height: max(3px, calc(7 * var(--u))); background: var(--st-coral); }
.st-rule--grey { background: #acacac; }

.st-eyebrow { font-size: var(--fs-sub); line-height: 1; color: #ff2325; text-transform: lowercase; }

/* Rotating brand asterisk (outline). Figma rotates 7.6° → 226.6° then snaps back; agreed: smooth continuous spin */
.st-spin { opacity: .46; animation: st-spin 14s linear infinite; }
@keyframes st-spin { from { rotate: 12.56deg; } to { rotate: 372.56deg; } }

@media (max-width: 991.98px) {
    .st-box { width: calc(100% - 2 * var(--skin-gutter)); }
}