/* A continuous sequence: sources > Bronze > Silver > Gold > semantics > uses. */
.arch-journey { --journey-gap:28px; }
.arch-journey-source { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; border:1px solid var(--line); border-radius:10px; background:var(--tint); }
.arch-journey-source h3 { margin:6px 0 0; font-size:1.25rem; line-height:1.4; }
.arch-journey-source ul { display:flex; flex-wrap:wrap; gap:18px 28px; margin:0; padding:0; list-style:none; }
.arch-journey-source li { display:flex; align-items:center; gap:9px; font-size:.8rem; line-height:1.5; color:var(--theme-accent,var(--forest)); }
.arch-journey-source .arch-icon { width:25px; height:25px; }
/* The source rail feeds Bronze only; the remaining stages receive its output. */
.arch-journey-source::after { content:""; position:absolute; top:100%; left:calc((100% - 2 * var(--journey-gap)) / 6); height:var(--journey-gap); border-left:1px solid var(--arch-connector); }
.arch-journey-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--journey-gap); margin:var(--journey-gap) 0 0; padding:0; list-style:none; }
.arch-journey-stages > li { position:relative; min-width:0; }
.arch-journey-stages > li:not(:last-child)::after { content:""; position:absolute; top:50%; left:100%; width:var(--journey-gap); border-top:1px solid var(--arch-connector); }
.arch-journey-stages > li:not(:last-child)::before { content:""; position:absolute; top:calc(50% - 3px); left:calc(100% + var(--journey-gap) - 7px); width:6px; height:6px; border-top:1px solid var(--arch-connector); border-right:1px solid var(--arch-connector); transform:rotate(45deg); }
.arch-journey-stage { display:flex; flex-direction:column; min-width:0; height:100%; padding:22px; border:1px solid var(--line); border-top:3px solid var(--layer-color); border-radius:10px; color:var(--ink); text-decoration:none; }
.arch-journey-stage h3 { margin:13px 0 10px; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.3; text-wrap:initial; }
.arch-journey-stage > p { flex:1; margin:0; font-size:.84rem; line-height:1.7; }
.arch-journey-example { margin-top:24px; text-align:center; }
.arch-journey-art { display:block; width:260px; max-width:100%; height:auto; margin:auto; fill:none; stroke:var(--layer-color); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.arch-journey-art-detail { stroke:var(--arch-connector); }
.arch-journey-art-fill { fill:var(--tint); }
.arch-journey-example > span { display:block; margin-top:12px; color:var(--muted); font-size:.72rem; line-height:1.5; }
.arch-journey-detail { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:.8rem; font-weight:600; line-height:1.5; color:var(--layer-color); }
.arch-journey-transfer { position:relative; height:40px; }
.arch-journey-transfer::before { content:""; position:absolute; top:0; left:50%; right:calc((100% - 2 * var(--journey-gap)) / 6); height:20px; border-right:1px solid var(--arch-connector); border-bottom:1px solid var(--arch-connector); }
.arch-journey-transfer::after { content:""; position:absolute; top:20px; left:50%; height:20px; border-left:1px solid var(--arch-connector); }
.arch-journey-semantic { position:relative; display:block; padding:26px 30px; border:1px solid var(--forest); border-radius:10px; background:var(--forest); color:#f8f8f3; text-decoration:none; }
.arch-journey-semantic-heading { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:20px; align-items:center; }
.arch-journey-semantic-heading > .arch-icon { width:48px; height:48px; color:var(--lime); }
.arch-journey-semantic .model-node-kind { color:var(--lime); }
.arch-journey-semantic h3 { margin:9px 0 6px; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.3; text-wrap:initial; }
.arch-journey-semantic p { max-width:600px; margin:0; color:#d8e5d9; font-size:.86rem; line-height:1.7; }
.arch-journey-semantic-link { display:flex; align-items:center; gap:14px; color:var(--lime); font-size:.8rem; font-weight:600; line-height:1.5; }
.arch-journey-semantic ul { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin:22px 0 0; padding:18px 0 0; border-top:1px solid #577568; list-style:none; color:var(--lime); font-size:.8rem; line-height:1.5; }
.arch-journey-semantic::after { content:""; position:absolute; top:100%; left:50%; height:22px; border-left:1px solid var(--arch-connector); }
.arch-journey-consumers { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--journey-gap); margin-top:44px; }
.arch-journey-consumers::before { content:""; position:absolute; top:-22px; left:calc((100% - var(--journey-gap)) / 4); right:calc((100% - var(--journey-gap)) / 4); border-top:1px solid var(--arch-connector); }
.arch-journey-consumer { position:relative; display:grid; grid-template-columns:140px minmax(0,1fr); gap:20px; align-items:center; min-width:0; padding:24px; border:1px solid var(--line); border-top:3px solid var(--diagram-semantic); border-radius:10px; color:var(--ink); text-decoration:none; }
.arch-journey-consumer::before { content:""; position:absolute; bottom:100%; left:50%; height:22px; border-left:1px solid var(--arch-connector); }
.arch-journey-outcome-art { display:block; width:100%; max-width:240px; height:auto; margin:auto; fill:none; stroke:var(--theme-accent,var(--forest)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.arch-journey-art-bars { stroke-width:12px; stroke-linecap:butt; }
.arch-journey-consumer .model-node-kind { color:var(--theme-accent,var(--forest)); }
.arch-journey-consumer h3 { margin:8px 0 10px; font-size:1.2rem; line-height:1.35; text-wrap:initial; }
.arch-journey-consumer p { margin:0; font-size:.82rem; line-height:1.7; }
.arch-journey-payoff { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line); color:var(--theme-accent,var(--forest)); font-size:.79rem; font-weight:600; line-height:1.6; }
.arch-journey a:hover { outline:1px solid var(--layer-color,var(--theme-accent,var(--forest))); outline-offset:3px; }
.arch-journey a:focus-visible { outline:2px solid var(--theme-accent,var(--forest)); outline-offset:4px; }
.arch-journey-context { margin:22px 0 0; color:var(--muted); font-size:.82rem; line-height:1.75; max-width:900px; }

@media(max-width:1100px) {
    .arch-journey-source { align-items:flex-start; flex-direction:column; gap:16px; }
    .arch-journey-stage { padding:18px; }
    .arch-journey-semantic-heading { grid-template-columns:42px minmax(0,1fr); gap:16px; }
    .arch-journey-semantic-link { grid-column:2; }
    .arch-journey-consumer { grid-template-columns:1fr; gap:18px; }
    .arch-journey-outcome-art { width:210px; }
}
@media(max-width:800px) {
    .arch-journey-source::after { left:50%; }
    .arch-journey-stages { grid-template-columns:1fr; }
    .arch-journey-stages > li:not(:last-child)::after { top:100%; left:50%; width:0; height:var(--journey-gap); border-top:0; border-left:1px solid var(--arch-connector); }
    .arch-journey-stages > li:not(:last-child)::before { top:calc(100% + var(--journey-gap) - 7px); left:calc(50% - 3px); border-top:0; border-bottom:1px solid var(--arch-connector); }
    .arch-journey-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); column-gap:24px; }
    .arch-journey-stage > .model-node-kind,.arch-journey-stage > h3,.arch-journey-stage > p { grid-column:1; }
    .arch-journey-example { grid-column:2; grid-row:1 / 5; align-self:center; margin:0; }
    .arch-journey-detail { grid-column:1; }
    .arch-journey-transfer::before { left:50%; right:auto; height:40px; border-right:0; border-bottom:0; border-left:1px solid var(--arch-connector); }
    .arch-journey-transfer::after { content:none; }
}
@media(max-width:550px) {
    .arch-journey { padding:18px; }
    .arch-journey-source { padding:18px; }
    .arch-journey-source h3 { font-size:1.15rem; }
    .arch-journey-source ul { gap:12px 18px; }
    .arch-journey-source li { font-size:.75rem; }
    .arch-journey-stage { display:flex; padding:20px; }
    .arch-journey-stage h3 { font-size:1.3rem; }
    .arch-journey-example { width:100%; margin-top:20px; }
    .arch-journey-art { width:230px; }
    .arch-journey-semantic { padding:22px 18px; }
    .arch-journey-semantic-heading { grid-template-columns:1fr; gap:16px; }
    .arch-journey-semantic-heading > .arch-icon { width:36px; height:36px; }
    .arch-journey-semantic-link { grid-column:1; }
    .arch-journey-semantic ul { justify-content:flex-start; gap:10px 20px; font-size:.75rem; }
    .arch-journey-semantic::after { left:12px; height:24px; }
    .arch-journey-consumers { grid-template-columns:1fr; gap:18px; margin:24px 0 0 12px; padding-left:16px; border-left:1px solid var(--arch-connector); }
    .arch-journey-consumers::before { content:none; }
    .arch-journey-consumer { padding:20px 16px; }
    .arch-journey-consumer::before { top:50%; bottom:auto; left:-17px; width:16px; height:0; border-left:0; border-top:1px solid var(--arch-connector); }
}
@media print {
    .arch-journey { break-inside:auto; }
    .arch-journey-stage,.arch-journey-semantic,.arch-journey-consumer { break-inside:avoid; }
    .arch-journey-semantic { background:#fff; color:var(--ink); }
    .arch-journey-semantic :is(p,span,ul),.arch-journey-semantic .arch-icon { color:var(--ink); }
}