/* An explanatory scheme with live, scalable text and explicit connections. */
.case-section{scroll-margin-top:118px}
.case-section .case-grid{grid-template-columns:1fr;gap:46px}
.case-section .case-diagram{border:0;padding:0;background:none}
.system-figure{margin:0;background:#f5f2e9;padding:28px 36px 25px;border-block:1px solid #bdc8b7}
.system-kicker{font:11px/1.5 'Manrope',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#64786a}
.system-scheme{position:relative;height:420px;width:100%;max-width:1080px;margin:auto}
.system-connectors{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#718877;stroke-width:1.5;overflow:visible}
.system-connectors path{vector-effect:non-scaling-stroke}
.system-ports{fill:#917746;stroke:none}
.system-connectors-mobile{display:none}
.system-node{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;width:28%;height:140px;padding:20px 18px;background:#f5f2e9;border:1px solid #9dad9c;z-index:1}
.system-name{font:600 clamp(28px,3vw,36px)/1.15 'Cormorant Garamond',Georgia,serif;color:#263b35;letter-spacing:-.01em}
.system-description{font:14px/1.6 'Manrope',sans-serif;color:#53665a;max-width:200px;margin-inline:auto}
.system-tasks{left:0;top:calc(27.38% - 70px)}
.system-roles{left:0;top:calc(72.62% - 70px)}
.system-links{right:0;top:calc(27.38% - 70px)}
.system-decisions{right:0;top:calc(72.62% - 70px)}
.system-people{left:36%;top:calc(50% - 80px);height:160px;background:#263b35;border-color:#263b35;gap:14px}
.system-people .system-name{font-size:48px;color:#f5f2e9;font-weight:600}
.system-people .system-description{font-size:14px;letter-spacing:0;color:#d9e0d0}
.system-figure figcaption{font:13px/1.8 'Manrope',sans-serif;color:#53665a;max-width:720px;padding-top:12px;border-top:1px solid #cbd1c3}
.case-section .case-story{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:9%;row-gap:20px}
.case-section .case-story h3{grid-column:1;grid-row:1/3;font-size:36px;line-height:1.25;margin:0}
.case-section .case-story p{grid-column:2;font-size:15px;line-height:1.9;margin:0;max-width:680px}
@media(max-width:850px){.system-figure{padding:24px 26px}.system-node{padding:16px 10px}.system-name{font-size:30px}.system-description{font-size:14px}.system-people .system-name{font-size:40px}.case-section .case-story{column-gap:6%}.case-section .case-story h3{font-size:30px}.case-section .case-story p{font-size:14px}}
@media(max-width:600px){
 .case-section{scroll-margin-top:102px}
 .system-figure{padding:22px 18px}
 .system-kicker{font-size:10px;letter-spacing:.1em}
 .system-scheme{height:470px;margin-top:24px}
 .system-connectors-desktop{display:none}.system-connectors-mobile{display:block}
 .system-node{width:44%;height:140px;padding:17px 10px;gap:10px}
 .system-name{font-size:28px}.system-description{font-size:14px;line-height:1.65}
 .system-people{left:20%;top:0;width:60%;height:128px;gap:12px}
 .system-people .system-name{font-size:42px}.system-people .system-description{font-size:12px;letter-spacing:0}
 .system-tasks,.system-links{top:170px}.system-roles,.system-decisions{top:330px}
 .system-figure figcaption{font-size:12px;margin-top:18px}
 .case-section .case-grid{gap:32px}.case-section .case-story{display:block}.case-section .case-story h3{font-size:30px;margin-bottom:22px}.case-section .case-story p{font-size:14px}.case-section .case-story p+p{margin-top:20px}
}
@media(max-width:360px){.system-figure{padding-inline:12px}.system-node{padding-inline:7px}.system-name{font-size:25px}.system-description{font-size:13px}.system-people .system-name{font-size:38px}}

@media(max-width:360px){html[lang="en"] .system-name{font-size:23px}}

/* Hide only after the supported script prepares its one-time reveal. */
.system-figure[data-system-state="pending"] .system-node,
.system-figure[data-system-state="running"] .system-node{opacity:0;transform:translateY(10px)}
.system-figure[data-system-state="pending"] [data-system-branch],
.system-figure[data-system-state="running"] [data-system-branch]{stroke-dasharray:1 1;stroke-dashoffset:1}
.system-figure[data-system-state="pending"] [data-system-port],
.system-figure[data-system-state="running"] [data-system-port],
.system-figure[data-system-state="pending"] figcaption,
.system-figure[data-system-state="running"] figcaption{opacity:0}
@media(prefers-reduced-motion:reduce){
 .system-figure[data-system-state] .system-node{opacity:1;transform:none}
 .system-figure[data-system-state] [data-system-branch]{stroke-dasharray:none;stroke-dashoffset:0}
 .system-figure[data-system-state] [data-system-port],.system-figure[data-system-state] figcaption{opacity:1}
}
@media print{
 .system-figure[data-system-state] .system-node{opacity:1;transform:none}
 .system-figure[data-system-state] [data-system-branch]{stroke-dasharray:none;stroke-dashoffset:0}
 .system-figure[data-system-state] [data-system-port],.system-figure[data-system-state] figcaption{opacity:1}
}