.architecture-journey{--journey-accent:var(--accent,#f04747);position:relative;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(24px,4vw,68px);width:min(1540px,calc(100% - 80px));margin:clamp(80px,11vw,170px) auto 80px;color:var(--ink,#f2f2f3)}
.journey-copy{min-width:0}.journey-intro{padding:clamp(20px,3vw,44px) 0 clamp(45px,7vw,100px)}
.journey-intro .eyebrow,.journey-step-index,.journey-scroll-hint,.journey-note,.journey-card-top,.journey-card-footer,.journey-readout,.journey-ruler{font-family:var(--font-mono,monospace);letter-spacing:.12em}
.journey-intro .eyebrow{color:var(--journey-accent);font-size:11px}.journey-intro h2{font-size:clamp(48px,5.7vw,92px);line-height:.95;letter-spacing:-.065em;max-width:8.5ch;margin:22px 0}.journey-intro h2 em{color:var(--journey-accent);font-style:normal}
.journey-intro>p:not(.eyebrow){max-width:52ch;color:var(--muted,#aab0bb);line-height:1.65;font-size:clamp(15px,1.15vw,19px)}.journey-scroll-hint{display:inline-block;color:var(--journey-accent);font-size:10px;margin-top:28px}
.journey-step{position:relative;min-height:clamp(350px,65vh,650px);padding:clamp(34px,7vh,75px) 0 30px 32px;border-left:1px solid color-mix(in srgb,var(--journey-accent) 22%,transparent);opacity:.45;transition:opacity .45s ease}
.journey-step:before{content:"";position:absolute;left:-3px;top:66px;width:5px;height:45px;background:var(--journey-accent);box-shadow:0 0 22px var(--journey-accent);opacity:0;transition:opacity .45s ease}.journey-step.is-active{opacity:1}.journey-step.is-active:before{opacity:1}
.journey-step-index{color:var(--journey-accent);font-size:11px}.journey-step h3{font-size:clamp(34px,3.4vw,54px);letter-spacing:-.045em;line-height:1.05;margin:22px 0}.journey-step h3 span{color:var(--journey-accent)}
.journey-step>p:not(.journey-step-index){color:var(--muted,#adb2bd);font-size:clamp(15px,1.05vw,18px);line-height:1.7;max-width:45ch}.journey-step ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0}.journey-step li{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.05em;border:1px solid color-mix(in srgb,var(--journey-accent) 25%,transparent);background:color-mix(in srgb,var(--journey-accent) 8%,transparent);padding:9px 11px}
.journey-note{color:var(--muted,#8d949f);font-size:10px;line-height:1.6;max-width:48ch;padding:0 0 25px 32px;letter-spacing:.02em}
.journey-sticky{position:sticky;top:clamp(70px,10vh,120px);align-self:start;height:min(78vh,720px);min-height:520px}.journey-card{position:relative;isolation:isolate;overflow:hidden;height:100%;border:1px solid color-mix(in srgb,var(--journey-accent) 35%,#30343b);background:radial-gradient(ellipse at 52% 64%,color-mix(in srgb,var(--journey-accent) 13%,transparent),transparent 48%),linear-gradient(140deg,#14171d,#08090d 62%,#151015);box-shadow:0 28px 80px #0008,inset 0 0 90px #0007}
.journey-card:before,.journey-card:after{content:"";position:absolute;z-index:4;width:28px;height:28px;border-color:var(--journey-accent);opacity:.8}.journey-card:before{top:10px;left:10px;border-top:2px solid;border-left:2px solid}.journey-card:after{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}
.journey-card-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--journey-accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--journey-accent) 9%,transparent) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)}
.journey-card-top,.journey-card-footer{position:absolute;z-index:3;left:clamp(18px,2.2vw,36px);right:clamp(18px,2.2vw,36px);display:flex;justify-content:space-between;align-items:center;color:#a9adb6;font-size:10px}.journey-card-top{top:26px}.journey-card-top b{color:var(--journey-accent)}.journey-card-footer{bottom:28px;color:#999faa}.journey-visual{position:absolute;inset:48px 75px 48px 0;display:grid;place-items:center}.journey-visual svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 20px 30px #0008)}
.journey-cage path{fill:none;stroke:color-mix(in srgb,var(--journey-accent) 34%,#848a94);stroke-width:1;stroke-dasharray:3 8;opacity:.3}.journey-layer{color:var(--journey-accent);opacity:.13;transform:translateY(12px);transform-box:fill-box;transform-origin:center;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.75,.2,1),filter .55s ease}.journey-layer.is-built{opacity:.48;transform:translateY(0)}.journey-layer.is-active{opacity:1;transform:translateY(-7px);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--journey-accent) 55%,transparent))}
.journey-plane{fill:url(#journey-plane);stroke:color-mix(in srgb,var(--journey-accent) 55%,#d5dde4);stroke-width:1.5}.journey-side{fill:#1c1d24;stroke:url(#journey-edge);stroke-width:1.4}.journey-points circle{fill:color-mix(in srgb,var(--journey-accent) 55%,#dbe2eb);opacity:.8}.journey-layer.is-active .journey-points circle:nth-child(13n){fill:#fff;filter:drop-shadow(0 0 4px var(--journey-accent))}.journey-beacon{fill:none;stroke:var(--journey-accent);stroke-width:2;opacity:.7}
.journey-readout{position:absolute;left:clamp(19px,2.2vw,36px);bottom:75px;z-index:2;display:flex;flex-direction:column;gap:7px;color:#9fa5ae;font-size:10px}.journey-readout strong{font-family:inherit;color:#f4f4f5;font-size:clamp(15px,1.6vw,23px);letter-spacing:.08em}.journey-readout span:last-child{color:var(--journey-accent)}
.journey-radar{fill:none;stroke:var(--journey-accent);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}.journey-layer:not(.is-active):not(.is-built) .journey-points circle{opacity:0}.journey-layer.is-active .journey-radar{animation:journey-radar-wave 2.8s ease-out infinite}.journey-layer.is-active .journey-points circle.is-signal{animation:journey-dot-wave 2.8s ease-out var(--pulse-delay) infinite}.journey-layer.is-built .journey-points circle.is-signal{fill:var(--journey-accent);opacity:1;filter:drop-shadow(0 0 2px var(--journey-accent))}.journey-layer.is-transferring .journey-points circle.is-signal{animation:journey-dot-flow-up .85s ease-in var(--travel-delay) both}.journey-layer.is-returning .journey-points circle.is-signal{animation:journey-dot-flow-down .85s ease-in var(--travel-delay) both}.journey-layer.is-active.is-charging .journey-points circle{animation:journey-dot-arrive .85s ease-out both}
@keyframes journey-radar-wave{0%{opacity:.48;transform:scale(.08)}75%,100%{opacity:0;transform:scale(1)}}@keyframes journey-dot-wave{0%,16%,100%{opacity:.65;transform:scale(1)}27%{opacity:1;transform:scale(2)}42%{opacity:.8;transform:scale(1)}}@keyframes journey-dot-flow-up{0%{opacity:1;transform:translateY(0)}70%{opacity:.95}100%{opacity:0;transform:translateY(calc(-1 * var(--journey-travel)))}}@keyframes journey-dot-flow-down{0%{opacity:1;transform:translateY(0)}70%{opacity:.95}100%{opacity:0;transform:translateY(var(--journey-travel))}}@keyframes journey-dot-arrive{0%{opacity:0;transform:translateY(var(--journey-arrival))}65%{opacity:.7}100%{opacity:.8;transform:translateY(0)}}
.journey-ruler{position:absolute;z-index:3;top:23%;bottom:19%;right:clamp(16px,2vw,32px);width:92px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #7777;font-size:9px}.journey-ruler a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;color:#989da6;text-decoration:none;transform:translateX(5px);transition:color .3s ease}.journey-ruler a i{display:block;width:9px;height:9px;border:1px solid currentColor;border-radius:50%;background:#101116;transition:box-shadow .3s ease,background .3s ease}.journey-ruler a[aria-current=step]{color:var(--journey-accent)}.journey-ruler a[aria-current=step] i{background:var(--journey-accent);box-shadow:0 0 14px var(--journey-accent)}.journey-ruler a:hover{color:#fff}
@media(max-width:900px){.architecture-journey{width:min(720px,calc(100% - 32px));display:flex;flex-direction:column;gap:0}.journey-copy{display:contents}.journey-intro{order:0;padding-bottom:35px}.journey-sticky{order:1;position:sticky;top:66px;z-index:5;height:min(49vh,420px);min-height:300px;background:#090a0e}.journey-step{order:2;min-height:62vh;padding-top:34vh}.journey-note{order:3}.journey-visual{inset:24px 74px 30px 0}.journey-card-top{top:18px}.journey-card-footer{bottom:18px}.journey-readout{bottom:48px}.journey-ruler{top:23%;bottom:20%}}
@media(max-width:530px){.architecture-journey{margin-top:65px}.journey-intro h2{font-size:clamp(45px,12vw,66px)}.journey-sticky{height:340px;top:62px;min-height:0}.journey-visual{inset:28px 48px 22px -30px}.journey-ruler{right:12px;width:66px;font-size:7px}.journey-readout{left:16px;bottom:42px;font-size:8px}.journey-readout strong{font-size:12px}.journey-card-top,.journey-card-footer{left:15px;right:15px;font-size:8px}.journey-step{min-height:70vh;padding-left:21px;padding-top:40vh}.journey-step h3{font-size:36px}.journey-step:before{top:40vh}}
@media(prefers-reduced-motion:reduce){.journey-step,.journey-step:before,.journey-layer,.journey-ruler a,.journey-ruler a i{transition:none!important}.journey-layer.is-active{transform:none}.journey-radar,.journey-points circle{animation:none!important}}
@media(max-width:900px){.journey-sticky{align-self:stretch;width:100%}}
@media(max-width:530px){.journey-readout{left:46px}}

/* Reading annotations stay in the text flow and follow the guide's read words. */
.journey-emphasis{color:#ff4545;font-weight:750}
.journey-emphasis .guide-reading-word{--ink:#ff4545}
.journey-cue{--cue-red:#ff4545;position:relative}
.guide-reading-architecture .journey-sticky{z-index:111}
.guide-reading-architecture .journey-card{box-shadow:none}
.journey-terraform{--ink:#c6afff;--accent:#b594ff;display:inline-flex;align-items:center;gap:.12em;margin-inline-end:.24em;white-space:nowrap;vertical-align:baseline;color:var(--ink);font-weight:700;line-height:1.2;text-shadow:0 0 .45em rgb(175 132 255 / .32)}
.journey-terraform img{flex:none;align-self:center;width:1em;height:1em;object-fit:contain}
.journey-ansible{--ink:#ff5a5a;--accent:#fff;display:inline-flex;align-items:center;gap:.12em;color:var(--ink);text-shadow:0 0 .4em rgb(238 0 0 / .3)}
.journey-tool-divider{margin-inline:.12em;opacity:.55;font-weight:400}
.journey-terraform:has(.guide-reading-word):not(:has(.is-read)){opacity:0}
.journey-terraform:has(.is-read){animation:journey-badge-enter .65s cubic-bezier(.16,1,.3,1) both}
.journey-group{border-radius:3px;transition:background .35s,box-shadow .35s}
.journey-group:has(.is-read){background:color-mix(in srgb,var(--cue-red) 17%,transparent);box-shadow:0 2px var(--cue-red)}
.journey-underline{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:6px;background-image:linear-gradient(var(--cue-red),var(--cue-red)),linear-gradient(176deg,transparent 36%,var(--cue-red) 42% 54%,transparent 60%);background-repeat:no-repeat;background-position:left calc(100% - 4px),left bottom;background-size:0 2px,0 5px;transition:background-size .7s cubic-bezier(.2,.7,.2,1)}
.journey-underline:has(.is-read){background-size:100% 2px,100% 5px}
.journey-boundary,.journey-remove,.journey-incoming{display:inline-block}
.journey-boundary{padding:.02em .28em;margin-inline:.12em}
.journey-boundary:after{content:"";position:absolute;inset:.12em 0;border:1px solid var(--cue-red);border-radius:2px;opacity:0;transform:scaleX(.65);pointer-events:none}
.journey-boundary:has(.is-read):after{animation:journey-boundary-draw .55s ease-out both}
.journey-remove:has(.is-read) .guide-reading-word{animation:journey-word-remove 1.5s .22s ease-in-out both}
.journey-remove:after{content:"";position:absolute;top:55%;left:0;width:100%;height:2px;background:var(--cue-red);opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none}
.journey-remove:has(.is-read):after{animation:journey-strike 1.5s .22s ease-in-out both}
.journey-incoming:before,.journey-incoming:after{content:"";position:absolute;top:50%;left:20%;width:22px;height:22px;border:1px solid var(--cue-red);border-radius:50%;opacity:0;pointer-events:none}
.journey-incoming:after{left:75%}
.journey-incoming:has(.is-read):before{animation:journey-signal-arrive 1s ease-out both}
.journey-incoming:has(.is-read):after{animation:journey-signal-arrive 1s .12s ease-out both}
@keyframes journey-badge-enter{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
@keyframes journey-boundary-draw{to{opacity:1;transform:scaleX(1)}}
@keyframes journey-word-remove{0%,10%,100%{opacity:1}20%,85%{opacity:0}}
@keyframes journey-strike{0%,85%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes journey-signal-arrive{0%{opacity:0;transform:translate(-50%,-50%) scale(4)}25%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}}
/* Manual reading scrubs these same cues in either direction without a clock. */
.guide-reading-manual .journey-cue,.guide-reading-manual .journey-cue:before,.guide-reading-manual .journey-cue:after,.guide-reading-manual .journey-cue .guide-reading-word{animation:none;transition:none}
.guide-reading-manual .journey-terraform.journey-cue{opacity:var(--cue-progress,0);transform:translateX(calc(-22px * (1 - var(--cue-progress,0))))}
.guide-reading-manual .journey-group{background:rgb(255 69 69 / calc(var(--cue-progress,0) * .17));box-shadow:0 2px rgb(255 69 69 / var(--cue-progress,0))}
.guide-reading-manual .journey-underline{background-size:calc(var(--cue-progress,0) * 100%) 2px,calc(var(--cue-progress,0) * 100%) 5px}
.guide-reading-manual .journey-boundary:after{opacity:var(--cue-progress,0);transform:scaleX(calc(.65 + .35 * var(--cue-progress,0)))}
.guide-reading-manual .journey-remove{--remove-hidden:calc(clamp(0,(var(--cue-progress,0) - .12) * 6.667,1) * clamp(0,(1 - var(--cue-progress,0)) * 4.545,1));--remove-strike:clamp(0,(var(--cue-progress,0) - .78) * 4.545,1)}
.guide-reading-manual .journey-remove .guide-reading-word{opacity:calc((.38 + .62 * var(--word-progress,0)) * (1 - var(--remove-hidden)))}
.guide-reading-manual .journey-remove:after{opacity:var(--remove-strike);transform:scaleX(var(--remove-strike))}
.guide-reading-manual .journey-incoming:before,.guide-reading-manual .journey-incoming:after{opacity:calc(var(--cue-flash,0) * .65);transform:translate(-50%,-50%) scale(calc(4 - 3.75 * var(--cue-progress,0)))}
@media(prefers-reduced-motion:reduce){.journey-cue,.journey-cue:before,.journey-cue:after,.journey-cue .guide-reading-word{animation:none!important;transition:none!important}.journey-boundary:has(.is-read):after{opacity:1;transform:none}}