/* ═══════════════════════════════════════════════════════════════
   maarch³ (MAARCH 3 — special project unlock) · shared page styles
   Figma 1:1352 · resources/design/maarch-3/DESIGN-ANALYSIS.md
   ═══════════════════════════════════════════════════════════════ */

:root {
    --fs-38: clamp(22px, 1.979vw, 38px);
    --fs-22: clamp(16px, 1.146vw, 22px);
    --fs-20: clamp(15px, 1.042vw, 20px);
    --m3-text-dark:  #2d2d2d;
    --m3-text-stage: #3a3a3a;
    --m3-text-diag:  #323232;
}

/* The design renders every line lowercase; copy stays in natural case for the CMS. */
main [class^="m3-"],
main [class*=" m3-"] {
    text-transform: lowercase!important;
}

/* Most sections on this page align to x 142 → 1798 (1656 wide, sits 10px right of centre). */
main [class^="m3-"] .m3-box,
main [class*=" m3-"] .m3-box,
.m3-box {
    position: relative;
    display: block;
    width: min(1656px, calc(100% - 2 * var(--skin-gutter)));
    margin-inline: auto;
    left: calc(10 * var(--u));
}

main [class^="m3-"] .figma-crop,
main [class*=" m3-"] .figma-crop,
.figma-crop {
    position: absolute;
    left: var(--fx, 0%);
    top: var(--fy, 0%);
    width: var(--fw, 100%) !important;
    height: auto !important;
    max-width: none;
}

/* Brand marks after "maarch": superscript ³ and asterisk images (colour variants per background) */
/* Raised with relative offsets (not vertical-align) so the marks never grow the line box. */
main [class^="m3-"] .mk,
main [class*=" m3-"] .mk { display: inline-block; width: auto; max-width: none; margin-left: .05em; vertical-align: baseline; position: relative; }

main [class^="m3-"] .mk-sup,
main [class*=" m3-"] .mk-sup { height: .38em; bottom: .45em; }
main [class^="m3-"] .mk-star,
main [class*=" m3-"] .mk-star { height: .32em; bottom: .5em; }

@media (max-width: 991.98px) {
    main [class^="m3-"] .m3-box { left: 0; }
    /* Figma crops fall back to cover inside their (now fluid) boxes */
    main [class^="m3-"] .figma-crop { position: absolute; inset: 0; }
}