/* Four independent layers, with a separate composition for narrow screens. */
.architecture-diagram {--architecture-gap:clamp(2rem,5vw,5rem);margin:3.5rem 0 0}
.architecture-layers {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--architecture-gap);list-style:none;margin:0;padding:0}
.architecture-layer {position:relative;min-width:0}
.architecture-layer-heading {border-top:1px solid var(--line);padding-top:.875rem;min-height:6.125rem}
.architecture-layer-index {display:block;font-size:.6875rem;color:var(--home-tan-ink);margin-bottom:.75rem}
.technology-page .architecture-layer h3 {font-size:.8125rem;font-weight:400;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.architecture-layer-art {height:250px;display:flex;align-items:center}
.architecture-layer-art svg {display:block;width:100%;height:auto;max-height:250px;overflow:visible}
.architecture-layer-art .architecture-art-mobile {display:none}
.technology-page .architecture-layer-note {font-size:.75rem;line-height:1.55;color:var(--muted);margin-top:1rem}
.architecture-layer-connection {position:absolute;left:100%;top:6.125rem;width:var(--architecture-gap);height:250px;pointer-events:none}
.architecture-layer-connection svg {display:block;width:100%;height:100%;fill:none;stroke:var(--warm-tan);stroke-width:1}
.architecture-layer-connection .architecture-connector-mobile {display:none}
.architecture-diagram svg {fill:var(--warm-tan)}
.architecture-source-lines {fill:none;stroke:var(--warm-tan);stroke-width:4}
.architecture-source-rules {fill:none;stroke:var(--line);stroke-width:1}
.architecture-diagram .architecture-charcoal {fill:var(--ink)}
.architecture-diagram .architecture-espresso {fill:var(--espresso)}
.architecture-diagram .architecture-neutral {fill:var(--line)}
.architecture-module-grid {fill:none;stroke:var(--warm-tan);stroke-width:1;opacity:.5}
.architecture-module-axis {fill:none;stroke:var(--warm-tan);stroke-width:1}
.architecture-diagram .architecture-accent {fill:var(--tangerine)}
.architecture-journey-line {fill:none;stroke:var(--warm-tan);stroke-width:1.25}
.architecture-application {fill:none;stroke:var(--warm-tan);stroke-width:1}
.architecture-diagram text {font-family:var(--font-display);font-size:11px;fill:var(--muted)}
@media(max-width:60rem) {
 .architecture-diagram {--architecture-gap:2rem}
 .architecture-layer-heading {min-height:7.125rem}
 .architecture-layer-connection {top:7.125rem}
}
@media(max-width:60rem) {
 .architecture-diagram {margin-top:2.5rem}
 .architecture-layers {grid-template-columns:minmax(0,1fr);gap:3.5rem}
 .architecture-layer-heading {min-height:0;display:flex;align-items:baseline;gap:1rem;padding-top:.75rem}
 .architecture-layer-index {margin:0}
 .technology-page .architecture-layer h3 {font-size:.8125rem}
 .architecture-layer-art {height:auto;min-height:0;max-width:320px;width:100%;margin:1rem auto 0}
 .architecture-layer-art .architecture-art-desktop {display:none}
 .architecture-layer-art .architecture-art-mobile {display:block;max-height:202px}
 .technology-page .architecture-layer-note {margin-top:.5rem;text-align:center}
 .architecture-layer-connection {left:calc(50% - 20px);top:auto;bottom:-3rem;width:40px;height:40px}
 .architecture-layer-connection .architecture-connector-desktop {display:none}
 .architecture-layer-connection .architecture-connector-mobile {display:block}
}
@media(prefers-reduced-motion:reduce) {
 .architecture-diagram [data-architecture-phase],.architecture-diagram path {animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

.architecture-layer-connection path {fill:none}
/* Join the independent studies across their shared architectural boundaries. */
@media(min-width:60.001rem) {
 .architecture-layer-art {justify-content:center}
 .architecture-layer-art svg {width:220px;max-width:100%;height:250px}
 .architecture-layer:nth-child(1) .architecture-layer-connection {left:calc(50% + 34px);width:calc(100% + var(--architecture-gap) - 116px)}
 .architecture-layer:nth-child(2) .architecture-layer-connection {left:calc(50% + 82px);width:calc(100% + var(--architecture-gap) - 177px)}
 .architecture-layer:nth-child(3) .architecture-layer-connection {left:calc(50% + 102px);width:calc(100% + var(--architecture-gap) - 180px)}
}

.architecture-armed [data-architecture-phase],.architecture-phase-armed {opacity:0}
@media(prefers-reduced-motion:reduce) {
 .architecture-armed [data-architecture-phase],.architecture-phase-armed {opacity:1}
}