/* A contained time-stream; all existing site colours and type remain inherited. */
#journey {
    --journey-light: #c4b6f6;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--bg);
    scroll-margin-top: 110px;
}
#journey .section-head { margin-bottom: 12px; }
#journey .journey-intro { margin-top: 14px; color: #a6aebc; max-width: 540px; }
#journey .journey-flow { position: relative; }
#journey .journey-flow::before {
    content: "";
    position: absolute;
    inset: 10px -12% auto;
    height: 320px;
    background: radial-gradient(ellipse at 53% 55%, #7562ac18, transparent 64%);
    pointer-events: none;
}
#journey .journey-stream {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 340px;
    overflow: visible;
    pointer-events: none;
}
#journey .journey-stream-narrow { display: none; }
#journey .journey-haze {
    fill: none;
    stroke: #9380e4;
    stroke-width: 22;
    opacity: .13;
    filter: url(#journey-haze);
}
#journey .journey-current {
    fill: none;
    stroke: #d4c2ff;
    stroke-width: 1.5;
    stroke-dasharray: 55 945;
    opacity: 0;
}
#journey.journey-in-view .journey-current {
    animation: journey-drift 18s linear infinite;
}
#journey .journey-milestones {
    position: relative;
    list-style: none;
    padding: 340px 0 0;
    margin: 0;
}
#journey .journey-milestone summary {
    position: absolute;
    top: calc(var(--node-y) - 22px);
    left: var(--node-x);
    transform: translateX(-50%);
    width: min(190px, 23%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    list-style: none;
    cursor: pointer;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 240ms ease;
}
#journey summary::-webkit-details-marker { display: none; }
#journey li:nth-child(1) { --node-x: 12%; --node-y: 222.73px; }
#journey li:nth-child(2) { --node-x: 37%; --node-y: 140.28px; }
#journey li:nth-child(3) { --node-x: 63%; --node-y: 171.12px; }
#journey li:nth-child(4) { --node-x: 88%; --node-y: 66.56px; }
#journey .journey-node {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
#journey .journey-node::before, #journey .journey-node::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    transition: box-shadow 280ms ease, background 280ms ease, border-color 280ms ease;
}
#journey .journey-node::before {
    inset: 15px;
    background: #b8a8eb;
    border: 1px solid #e6dcff;
    box-shadow: 0 0 14px #ab8ce785, 0 0 35px #846bc740;
}
#journey .journey-node::after { inset: 7px; border: 1px solid #b7a0eb40; }
#journey summary time { font: 500 .875rem/1.7 'IBM Plex Mono', monospace; color: var(--journey-light); }
#journey .journey-label { font-size: .875rem; line-height: 1.5; color: #bdc3d0; max-width: 180px; margin-top: 4px; }
#journey .journey-cue::after { content: " +"; color: var(--journey-light); }
#journey details[open] .journey-cue::after { content: " −"; }
#journey summary:hover .journey-node::before,
#journey summary:focus-visible .journey-node::before,
#journey details[open] .journey-node::before {
    background: #eee7ff;
    box-shadow: 0 0 20px #c2a5eeb3, 0 0 48px #9776d766;
}
#journey summary:hover .journey-node::after,
#journey details[open] .journey-node::after { border-color: #d5c1ff99; }
#journey .journey-milestones:has(details[open]) details:not([open]) summary { opacity: .8; }
#journey .journey-milestones:has(details[open]) details:not([open]) .journey-node { opacity: .55; }
#journey .journey-milestones:has(details[open]) summary:hover,
#journey .journey-milestones:has(details[open]) summary:focus-visible { opacity: 1; }
#journey summary:focus-visible, #journey a:focus-visible, #journey button:focus-visible {
    outline: 2px solid var(--journey-light);
    outline-offset: 5px;
}
#journey .journey-memory {
    position: relative;
    margin: 8px auto 16px;
    padding: 30px 64px 32px 32px;
    max-width: 740px;
    background: linear-gradient(115deg, #8270b00e, #8270b003);
    border-top: 1px solid #b19bdf50;
    border-left: 1px solid #b19bdf24;
    border-radius: 0 0 0 8px;
}
#journey details[open] .journey-memory { animation: journey-reveal 360ms ease-out both; }
@supports (interpolate-size: allow-keywords) {
    #journey .journey-milestone { interpolate-size: allow-keywords; }
    #journey .journey-milestone::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size 360ms ease, content-visibility 360ms allow-discrete;
    }
    #journey .journey-milestone[open]::details-content { block-size: auto; }
}
#journey .journey-memory-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #b0a8c8; font: .875rem/1.7 'IBM Plex Mono', monospace; }
#journey .journey-memory-meta time { color: var(--journey-light); }
#journey .journey-memory h3 { font-size: 1.4rem; line-height: 1.35; margin: 12px 0; letter-spacing: -.01em; }
#journey .journey-memory p { color: #abb4c4; font-size: 1rem; max-width: 620px; }
#journey .journey-memory a { display: inline-block; margin-top: 20px; color: var(--accent); font-size: .875rem; text-decoration: none; }
#journey .journey-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
#journey .journey-memory a:hover { text-decoration: underline; text-underline-offset: 4px; }
#journey .journey-close { position: absolute; right: 8px; top: 14px; width: 44px; height: 44px; background: none; border: 0; color: #c3bad8; cursor: pointer; font-family: inherit; font-size: 1.5rem; line-height: 1; border-radius: 4px; }
#journey .journey-close[hidden] { display: none; }
#journey .journey-hint { text-align: center; font-size: .875rem; color: #a6aebc; margin-top: 24px; }
@keyframes journey-drift {
    0% { stroke-dashoffset: 80; opacity: 0; }
    12%, 80% { opacity: .42; }
    100% { stroke-dashoffset: -1000; opacity: 0; }
}
@keyframes journey-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
    #journey .section-head { margin-bottom: 32px; }
    #journey .journey-stream-wide { display: none; }
    #journey .journey-stream-narrow { display: block; width: 72px; height: 100%; }
    #journey .journey-flow::before { inset: 0 auto 0 -40px; width: 150px; height: auto; }
    #journey .journey-milestones { padding: 0; }
    #journey .journey-milestones li + li { margin-top: 24px; }
    #journey .journey-milestone summary {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        min-height: 76px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 18px;
        align-content: center;
        text-align: left;
    }
    #journey .journey-node { grid-row: 1 / 3; }
    #journey .journey-label { max-width: none; margin-top: 2px; font-size: 1rem; }
    #journey .journey-memory { margin: 16px 0 28px 22px; padding: 24px 22px 26px 24px; }
    #journey .journey-memory-meta { padding-right: 24px; }
    #journey .journey-memory h3 { font-size: 1.25rem; }
    #journey .journey-hint { text-align: left; margin-left: 62px; }
}
@media (prefers-reduced-motion: reduce) {
    #journey *, #journey *::before, #journey *::after { animation: none !important; transition: none !important; }
    #journey .journey-milestone::details-content { transition: none !important; }
    #journey .journey-current { display: none; }
}
@media print {
    #journey .journey-stream, #journey .journey-close, #journey .journey-hint { display: none; }
    #journey .journey-milestones { padding: 0; }
    #journey .journey-milestone summary { position: static; transform: none; width: auto; align-items: flex-start; }
    #journey details::details-content { display: block; content-visibility: visible; block-size: auto; }
    #journey .journey-memory { break-inside: avoid; }
}