/* A motionless mosaic. Only the editorial cards take part in normal page scrolling. */
.fm-section{background:#faf9f6;color:#231d33;padding-block:90px 0;--fm-top:90px;--fm-room:700px}
.fm-heading{width:min(90%,1100px);margin:0 auto 65px;text-align:center}
.fm-kicker{font:11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#6442cd;margin:0 0 20px}
.fm-heading h2{font:500 clamp(40px,4.5vw,72px)/1.08 'Source Serif 4',Georgia,serif;letter-spacing:-.03em;text-wrap:balance;margin:0}
.fm-heading>p:last-child{font-size:17px;line-height:1.7;color:#746b80;max-width:650px;margin:26px auto 0}
.fm-story{display:grid;align-items:start;position:relative;isolation:isolate}
.fm-stage{grid-area:1/1;position:sticky;top:var(--fm-top);height:var(--fm-room);background:#faf9f6;display:grid;grid-template-rows:44px minmax(0,1fr);border-block:1px solid #e0d9e8}
.fm-bar{margin-inline:5%;display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px/1.5 'IBM Plex Mono',monospace;color:#746b80}
.fm-bar a{font:12px/1.4 Inter,Arial,sans-serif;color:#6442cd;text-decoration:none;padding-block:12px;white-space:nowrap}
.fm-stage canvas{display:block;width:100%;height:100%;min-height:0;mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.fm-flow{grid-area:1/1;position:relative;z-index:1;width:min(38%,530px);margin:0 0 0 4%;padding:calc(var(--fm-room)*.66) 0 calc(var(--fm-room)*.58);list-style:none;pointer-events:none}
.fm-card{background:#faf9f6;border:1px solid #d5cddd;border-radius:4px;padding:clamp(25px,2.8vw,44px);margin:0 0 calc(var(--fm-room)*.75);box-shadow:0 12px 42px #231d330a;pointer-events:auto}
.fm-card:last-child{margin-bottom:0}
.fm-card .fm-kicker{display:flex;align-items:center;gap:13px;margin-bottom:23px}
.fm-card .fm-kicker:before{content:'';display:block;width:11px;height:11px;background:#6442cd;flex-shrink:0}
.fm-card:nth-child(2) .fm-kicker:before{background:#b8a5e7}
.fm-card:nth-child(3) .fm-kicker:before{background:#b44e2b}
.fm-card h3{font:500 clamp(28px,2.7vw,43px)/1.12 'Source Serif 4',Georgia,serif;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.fm-card>p:not(.fm-kicker){font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#746b80;margin:0}
.fm-card>p.fm-detail{padding-top:20px;margin-top:24px;border-top:1px solid #e0d9e8;font-size:13px;line-height:1.6;color:#746b80}
.fm-section a:focus-visible{outline:3px solid #b44e2b;outline-offset:5px}
.fm-section.is-static .fm-stage{position:relative;height:350px;grid-area:auto}
.fm-section.is-static .fm-flow{grid-area:auto;padding:35px 0;width:min(90%,900px);margin:auto}
.fm-section.is-static .fm-card{margin-bottom:25px}
@media(max-width:800px){
 .fm-section{padding-top:65px}.fm-heading{margin-bottom:40px}.fm-heading>p:last-child{font-size:15px}
 .fm-flow{width:min(72%,440px);margin-left:4%;padding-top:calc(var(--fm-room)*.58)}
 .fm-card{padding:24px}.fm-card h3{font-size:29px;margin-bottom:16px}.fm-card>p:not(.fm-kicker){font-size:15px;line-height:1.55}.fm-card>p.fm-detail{font-size:12px;margin-top:18px;padding-top:16px}
 .fm-bar>span{max-width:48%;font-size:9px}.fm-bar a{font-size:11px}
}
@media(max-width:420px){.fm-flow{width:78%}.fm-card{padding:20px}.fm-card h3{font-size:26px}.fm-card .fm-kicker{font-size:9px;margin-bottom:16px}}
/* Alternate the project cards without changing the mosaic or reading order. */
#projet-visible .fm-flow{width:92%;margin-inline:auto}
#projet-visible .fm-card{width:min(44%,530px);margin-right:auto;margin-left:0}
#projet-visible .fm-card:nth-child(even){margin-left:auto;margin-right:0}
#projet-visible.is-static .fm-flow{width:min(92%,1100px)}
@media(max-width:800px){#projet-visible .fm-flow{width:92%}#projet-visible .fm-card,#projet-visible .fm-card:nth-child(even){width:100%;max-width:530px;margin-inline:auto}}
@keyframes fm-arrive-left{from{opacity:.45;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes fm-arrive-right{from{opacity:.45;transform:translateX(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference) and (min-width:801px){#projet-visible .fm-card.fm-arrived{animation:fm-arrive-left .55s ease-out both}#projet-visible .fm-card.fm-arrived:nth-child(even){animation-name:fm-arrive-right}}
