/* journey-montage-modes.js (?m=1|2|3): the overlay of the montage's alternative presentations */
.mm-ui { position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: 0; transition: opacity 0.2s linear; }
.mm-rel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 0.2s linear; }
.mm-rel line { stroke: var(--mont-ink, #17140f); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
.mm-rel line.is-true { stroke-width: 1.5; stroke-dasharray: none; opacity: 0.9; }
.mm-rel text { font: 500 11px/1 'Geist', var(--nv-sans, sans-serif); letter-spacing: 0.04em; fill: var(--mont-ink, #17140f); paint-order: stroke; stroke: var(--mont-paper, #f4f0e8); stroke-width: 3px; text-anchor: middle; }
.mm-1 .mm-rel { display: none; }
.mm-cap {
    position: absolute; left: 0; top: 0; max-width: 280px; padding: 8px 11px 9px; border-radius: 4px;
    background: rgba(18, 16, 14, 0.86); color: #fbf6ec; opacity: 0; transition: opacity 0.18s linear;
    font: 500 12px/1.3 'Geist', var(--nv-sans, sans-serif); letter-spacing: 0.01em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mm-cap b { display: block; font-weight: 600; }
.mm-cap span { display: block; margin-top: 2px; color: rgba(251, 246, 236, 0.66); }
.mm-cap.is-on { opacity: 1; }
.mm-cur {
    position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    border: 1.5px solid var(--mont-ink, #17140f); box-shadow: 0 0 0 1px var(--mont-paper, #f4f0e8); opacity: 0;
    transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s linear, background 0.2s;
    display: grid; place-items: center;
}
.mm-cur i { font: 600 15px/1 'Geist', var(--nv-sans, sans-serif); font-style: normal; color: #fbf6ec; opacity: 0; transition: opacity 0.15s; }
.mm-cur.is-on { opacity: 1; }
.mm-cur.is-hov { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(18, 16, 14, 0.82); border-color: rgba(251, 246, 236, 0.9); box-shadow: none; }
.mm-cur.is-hov i { opacity: 1; }
.mm-1 .mm-cur:not(.is-hov) { opacity: 0; }
.mm-1 .mm-cur.is-hov { width: 26px; height: 26px; margin: 66px 0 0 66px; }
.mm-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: normal; }
.mm-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0;
    background: radial-gradient(ellipse 38% 24% at 50% 50%, var(--mm-scrim, rgba(10, 9, 8, 0.5)), transparent 100%); }
html[data-mont-m] .nv-stage.mm-live .nv-cursor { display: none !important; }
html[data-mont-m] .nv-stage.mm-live { cursor: none; }
@media (pointer: coarse) { .mm-cur, .mm-cap { display: none; } html[data-mont-m] .nv-stage.mm-live { cursor: auto; } }

/* the words come in fast: the line is up within ~0.3 s */
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m] .nv-art .nv-narrative .nv-q .wd {
    transition: opacity 0.22s ease, filter 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s linear;
}
/* over a picture (1 always, 2 while a cell blooms): warm white with a thin ink outline, tinted by the era's paper */
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m] .nv-stage.mm-over .nv-narrative .nv-q .wd,
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m] .nv-stage.mm-over .nv-narrative .nv-q .wd.is-ink {
    color: color-mix(in srgb, var(--mont-paper, #f4f0e8) 28%, #fffdf8);
    text-shadow: 1px 0 0 #14110d, -1px 0 0 #14110d, 0 1px 0 #14110d, 0 -1px 0 #14110d, 1px 1px 0 #14110d, -1px -1px 0 #14110d, 1px -1px 0 #14110d, -1px 1px 0 #14110d, 0 2px 14px rgba(0, 0, 0, 0.55);
}
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m] .nv-stage.mm-over .nv-narrative .nv-by,
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m] .nv-stage.mm-over .nv-narrative .nv-q + .nv-by {
    color: #fbf6ec; text-shadow: 1px 0 0 #14110d, -1px 0 0 #14110d, 0 1px 0 #14110d, 0 -1px 0 #14110d, 0 0 10px rgba(0, 0, 0, 0.7);
}
/* the site's own cursor gives way to the montage's ring while the montage is on */
html.mm-cursor .cursor-follower, html.mm-cursor .cursor-light, html.mm-cursor .cursor-outer-ring, html.mm-cursor .cursor-venture,
html.mm-cursor .cursor-venture-dot, html.mm-cursor .cursor-venture-label, html.mm-cursor .cursor-venture-ring, html.mm-cursor .cursor-vitruvian { opacity: 0 !important; visibility: hidden !important; }

/* journey-tune.js ?ts=: the words at a chosen size */
html[data-tune-ts] #journey .nv-narrative .nv-q, html[data-tune-ts] #journey .nv-narrative .nv-q-l,
html[data-tune-ts] #journey .nv-narrative .nv-q-m, html[data-tune-ts] #journey .nv-narrative .nv-q-s { font-size: var(--tune-ts) !important; max-width: 24ch; }

/* the Z-stream and the cards: the pictures may pass behind the words, so the words keep an outline and a cloud of the era's paper */
html[data-nv-chain="1"][data-pb-a="1"]:not([data-mont-m]) #journey .nv-narrative .nv-q .wd,
html[data-nv-chain="1"][data-pb-a="1"]:not([data-mont-m]) #journey .nv-narrative .nv-by,
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m="3"] #journey .nv-narrative .nv-q .wd,
html[data-nv-chain="1"][data-pb-a="1"][data-mont-m="3"] #journey .nv-narrative .nv-by {
    text-shadow: 2px 0px 0 var(--mont-paper, #f4f0e8), -2px 0px 0 var(--mont-paper, #f4f0e8), 0px 2px 0 var(--mont-paper, #f4f0e8), 0px -2px 0 var(--mont-paper, #f4f0e8), 1.5px 1.5px 0 var(--mont-paper, #f4f0e8), -1.5px -1.5px 0 var(--mont-paper, #f4f0e8), 1.5px -1.5px 0 var(--mont-paper, #f4f0e8), -1.5px 1.5px 0 var(--mont-paper, #f4f0e8), 0 0 6px var(--mont-paper, #f4f0e8), 0 0 12px var(--mont-paper, #f4f0e8), 0 0 20px var(--mont-paper, #f4f0e8), 0 0 32px var(--mont-paper, #f4f0e8), 0 0 32px var(--mont-paper, #f4f0e8) !important;
}