/* Illustration placement is independent of the prose reading measure. */
#main .dci-illustration { width:100%; max-width:69rem; margin:2rem auto 2.5rem; }
#main .dci-illustration img { display:block; width:100%; height:auto; }
#main .dci-illustration figcaption { max-width:42rem; margin:.8rem auto 0; font-size:13px; line-height:1.65; color:var(--faint,#5d6a5c); }
#main .dci-portrait { max-width:26rem; }
#main .dci-diagram { box-sizing:border-box; max-width:64rem; width:100%; margin:2rem auto 2.5rem; padding:clamp(1rem,3vw,2rem); border:1px solid var(--rule,#9fae9b); background:#e1e6d7; color:#283029; }
#main .dci-diagram h3 { max-width:none; margin:0 0 1.2rem; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.2; }
#main .dci-diagram p { margin:0; max-width:none; }
#main .dci-diagram figcaption { font-size:13px; line-height:1.65; margin:1.1rem 0 0; max-width:none; }
.dci-steps,.dci-branches,.dci-ticks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; padding:0; margin:0; }
.dci-branches { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dci-step,.dci-branch,.dci-tick { min-width:0; padding:1.1rem; border:1px solid #9fae9b; background:#f0f1e7; }
.dci-step b,.dci-branch b { display:block; font-family:'IBM Plex Sans Condensed',system-ui,sans-serif; font-size:1.35rem; margin-bottom:.5rem; }
.dci-step span,.dci-branch span { display:block; font-size:14px; line-height:1.6; }
.dci-step small { display:block; color:#52634e; font-size:13px; margin-bottom:.4rem; }
.dci-diagram .dci-origin { padding:1rem 1.2rem; margin:0 0 1rem!important; border-left:4px solid #576b50; background:#cdd7c1; font-size:15px; }
.dci-diagram .dci-ticks { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dci-tick strong { display:block; font-size:clamp(1.35rem,3.2vw,2rem); overflow-wrap:anywhere; margin:.5rem 0; }
.dci-tick time,.dci-tick span,.dci-tick small { display:block; font-size:14px; line-height:1.6; }
.dci-tick:last-child { border-top:4px solid #94683a; }
.dci-geometry { display:block; width:100%; height:auto; background:#101e25; }
@media(max-width:640px){
    #main .dci-diagram { padding:1rem; }
    .dci-steps,.dci-branches,.dci-diagram .dci-ticks { grid-template-columns:1fr; gap:.65rem; }
    .dci-step,.dci-branch,.dci-tick { padding:1rem; }
}