/* ── m3 08 Process (0.1 – 0.4) — maarch-3/sections/08-process/brief.md ──
   An art-directed composition: on desktop every element sits at its Figma coordinate on a 1920-wide stage
   (scaled by --u); ≤ 991.98px it becomes a simple stacked list.
   Figma 1:1360 watercolour (24%) · 1:1356 dotted path 1390×1451 @ (262,+147.5) · blobs 1:1371–1:1374 ·
   numbers 1:1395–1:1398 · headings 1:1380/1391/1393/1392 · texts 1:1402/1423/1425/1424
   (all y values below are relative to the section top = page y 4990) */

.m3-process { background: var(--skin-canvas); overflow: clip; }
.m3-process__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(37 * var(--u));
    height: calc(1658 * var(--u));
    overflow: hidden;
    opacity: .24;
}
.m3-process__stage {
    position: relative;
    width: calc(1920 * var(--u));
    height: calc(1695 * var(--u));
    margin-inline: auto;
}
.m3-process__path {
    position: absolute;
    left: calc(262.33 * var(--u));
    top: calc(147.5 * var(--u));
    width: calc(1391 * var(--u));
    height: auto;
}
.m3-process__list { margin: 0; padding: 0; list-style: none; }

.m3-step__blob, .m3-step__title, .m3-step__text { position: absolute; }
.m3-step__blob img { display: block; width: 100%; height: auto; }
.m3-step__blob b {
    position: absolute;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
}
.m3-step__title {
    font-size: calc(42 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.m3-step__text { font-size: calc(26 * var(--u)); line-height: calc(30 / 26); }

/* 0.1 */
.m3-step--1 .m3-step__blob  { left: calc(101.5 * var(--u)); top: calc(128 * var(--u)); width: calc(328 * var(--u)); }
.m3-step--1 .m3-step__blob b { left: calc(128.5 * var(--u)); top: calc(110 * var(--u)); width: calc(79 * var(--u)); font-size: calc(35 * var(--u)); }
.m3-step--1 .m3-step__title { left: calc(468 * var(--u)); top: calc(231.5 * var(--u)); }
.m3-step--1 .m3-step__text  { left: calc(510 * var(--u)); top: calc(299 * var(--u)); width: calc(881 * var(--u)); }
/* 0.2 */
.m3-step--2 .m3-step__blob  { left: calc(1493 * var(--u)); top: calc(491.5 * var(--u)); width: calc(328 * var(--u)); }
.m3-step--2 .m3-step__blob b { left: calc(142 * var(--u)); top: calc(103.5 * var(--u)); width: calc(73 * var(--u)); font-size: calc(38 * var(--u)); }
.m3-step--2 .m3-step__title { left: calc(719 * var(--u)); top: calc(552.5 * var(--u)); }
.m3-step--2 .m3-step__text  { left: calc(754 * var(--u)); top: calc(618 * var(--u)); width: calc(695 * var(--u)); }
/* 0.3 */
.m3-step--3 .m3-step__blob  { left: calc(90.32 * var(--u)); top: calc(912 * var(--u)); width: calc(329 * var(--u)); }
.m3-step--3 .m3-step__blob b { left: calc(146.7 * var(--u)); top: calc(105 * var(--u)); width: calc(66 * var(--u)); font-size: calc(33 * var(--u)); }
.m3-step--3 .m3-step__title { left: calc(468 * var(--u)); top: calc(998.5 * var(--u)); }
.m3-step--3 .m3-step__text  { left: calc(510 * var(--u)); top: calc(1068 * var(--u)); width: calc(975 * var(--u)); }
/* 0.4 */
.m3-step--4 .m3-step__blob  { left: calc(1502.5 * var(--u)); top: calc(1346.5 * var(--u)); width: calc(286.5 * var(--u)); }
.m3-step--4 .m3-step__blob b { left: calc(117.5 * var(--u)); top: calc(75.5 * var(--u)); width: calc(64 * var(--u)); font-size: calc(32 * var(--u)); }
.m3-step--4 .m3-step__title { left: calc(419 * var(--u)); top: calc(1342.5 * var(--u)); }
.m3-step--4 .m3-step__text  { left: calc(462 * var(--u)); top: calc(1410 * var(--u)); width: calc(997 * var(--u)); }

@media (max-width: 991.98px) {
    .m3-process__bg { top: 0; height: 100%; }
    .m3-process__stage { width: calc(100% - 2 * var(--skin-gutter)); height: auto; padding: 56px 0; }
    .m3-process__path { display: none; }
    .m3-step { display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; align-items: start; }
    .m3-step + .m3-step { margin-top: 44px; }
    .m3-step__blob, .m3-step__title, .m3-step__text { position: static; }
    .m3-step__blob { position: relative; left: auto !important; top: auto !important; grid-row: span 2; width: 96px !important; }
    .m3-step__blob b { left: 0 !important; right: 0; width: auto !important; top: 50% !important; translate: 0 -50%; font-size: 20px !important; }
    .m3-step__title { font-size: 24px; white-space: normal; line-height: 1.15; }
    .m3-step__text { width: auto !important; margin-top: 10px; font-size: 16px; line-height: 1.5; }
}
@media (max-width: 575.98px) {
    .m3-step { grid-template-columns: 64px 1fr; column-gap: 14px; }
    .m3-step__blob { width: 64px !important; }
    .m3-step__blob b { font-size: 15px !important; }
    .m3-step__title { font-size: 20px; }
}