/* Journey 023 — a full-page landscape with deliberate, quiet wayfinding. */
body[data-page="journey"] { --atlas-white:#f4f0e7; background:#10181f; }
.journey-atlas { outline:none; }
.atlas-world { height:calc(100svh - 89px); min-height:640px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 50% 53%,#233e46 0%,#172b35 40%,#10181f 77%); }
.atlas-world::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(#10181ff0,transparent 24%,transparent 75%,#10181fc9); }
.atlas-world::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 130px #0b101c40; }
.atlas-title { position:absolute; z-index:4; left:var(--page-gutter); top:35px; pointer-events:none; }
.atlas-title .section-kicker { color:#94a5af; margin:0 0 18px; font-size:10px; letter-spacing:.6px; }
.atlas-title h1 { --block-height:clamp(36px,3.7vw,53px); margin:0 0 15px; }
.atlas-title h1 .block-type { filter:drop-shadow(0 5px 10px #0003); }
.atlas-title > p:last-child { margin:0; font-size:12px; line-height:1.7; color:#a9b7bf; }
.atlas-status { position:absolute; z-index:4; top:41px; right:var(--page-gutter); display:flex; gap:12px; align-items:center; color:#d5dce0; font-size:11px; }
.atlas-status small { display:block; margin-top:7px; color:#798e9c; font-size:9px; }
.status-orbit { width:8px; height:8px; border-radius:50%; background:#ea7f90; box-shadow:0 0 0 5px #ed768d0a,0 0 18px #e16b8733; }
.atlas-scene { position:absolute; inset:0; }
#journey-world { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
#journey-world:active { cursor:grabbing; }
.map-loading { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:#14212b; color:#a5b8c2; font-size:11px; transition:opacity 350ms; }
.map-loading img { width:55px; height:55px; }
.atlas-scene[data-ready="true"] .map-loading { opacity:0; visibility:hidden; pointer-events:none; }
.map-pins { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 400ms; }
.atlas-scene[data-ready="true"] .map-pins { opacity:1; }
.route-pin { position:absolute; left:var(--pin-x,50%); top:var(--pin-y,50%); transform:translate(-50%,0); pointer-events:auto; white-space:nowrap; text-align:left; min-height:56px; padding:12px 32px 10px 14px; border:1px solid #ffffffd9; border-radius:17px; background:linear-gradient(145deg,#fffefbf5,#edf2eff0); color:#263b40; box-shadow:0 7px 22px #03151d2e,inset 0 1px 0 #ffffff; backdrop-filter:blur(20px); cursor:pointer; transition:background 180ms,border-color 180ms,box-shadow 180ms; }
.route-pin::before { content:''; position:absolute; bottom:100%; left:50%; height:16px; width:1px; background:linear-gradient(#e2e7cb75,#a6d4d450); pointer-events:none; }
.route-pin::after { display:none; }
.pin-name { display:block; margin-bottom:5px; font-family:var(--soft-font); font-size:19px; font-weight:800; line-height:1.12; letter-spacing:-.035em; color:#283e42; }
.pin-status { display:block; margin:0; font-size:9px; font-weight:400; letter-spacing:.05px; color:#607477; line-height:1; }

.pin-open { position:absolute; right:10px; top:12px; bottom:auto; margin:0; width:auto; height:auto; border:0; background:none; border-radius:0; color:#728b8c; font-size:13px; line-height:1; transition:color 180ms,transform 180ms; }
.route-pin:hover,.route-pin:focus-visible { background:linear-gradient(145deg,#ffffff,#f6f9f4); border-color:#ffffff; box-shadow:0 10px 28px #02101b3b,inset 0 1px 0 #ffffff; outline:2px solid #f09aad88; outline-offset:4px; }
.route-pin:hover .pin-open,.route-pin:focus-visible .pin-open { background:none; color:#bc4966; transform:translate(1px,-1px); }
.route-pin[aria-current="step"] { border-color:#f4b3c1; background:linear-gradient(145deg,#fffdfb,#fff0f1); box-shadow:0 8px 24px #08122033,0 0 0 3px #ee93a51a; }
.atlas-bottom { position:absolute; z-index:4; bottom:30px; left:var(--page-gutter); right:var(--page-gutter); display:flex; align-items:end; justify-content:flex-end; gap:25px; }

.atlas-tools { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }.atlas-hint { font-size:9px; color:#8b9eaa; padding-right:4px; }
.atlas-controls { display:flex; align-items:center; gap:3px; padding:5px 7px; border:1px solid #d5e2ef12; border-radius:23px; background:#213440a3; backdrop-filter:blur(24px); box-shadow:inset 0 1px 0 #ffffff05,0 6px 24px #0001; }
.atlas-controls button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; color:#c5d3dc; background:none; font-family:inherit; font-size:20px; cursor:pointer; transition:color 180ms,background 180ms; }.atlas-controls button:hover { background:#ffffff0b; color:#fff; }.atlas-controls button:disabled { opacity:.25; cursor:default; }.atlas-controls button:focus-visible { outline:2px solid #ee9aae; outline-offset:2px; }
.atlas-controls #roadmap-reset { display:flex; gap:9px; width:auto; padding:0 12px; border-radius:18px; font-size:11px; }.atlas-controls svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }.atlas-controls .control-divider { width:1px; height:16px; margin:0 6px 0 3px; background:#aec9d51a; }.atlas-controls #roadmap-motion { font-size:11px; }
/* The selected landmark stays visible beside its plan. */
.journey-detail { position:fixed; inset:110px 22px 22px auto; display:none; flex-direction:column; width:410px; max-width:calc(100% - 36px); max-height:calc(100svh - 132px); margin:0; padding:0; overflow:hidden; border:1px solid #a5c7d62b; border-radius:29px; color:#e8efef; background:linear-gradient(140deg,#283b47f7,#172830fa); backdrop-filter:blur(30px); box-shadow:0 20px 80px #030c1859,inset 0 1px 0 #ffffff09; }
.journey-detail[open] { display:flex; animation:detail-enter 300ms cubic-bezier(.22,.8,.25,1); }.journey-detail::before { display:none; }.journey-detail::backdrop { background:#08131a15; backdrop-filter:none; animation:backdrop-enter 250ms ease; }.journey-detail.is-closing { animation:detail-exit 180ms ease-in forwards; }
.detail-eyebrow { display:flex; align-items:center; gap:10px; padding:27px 28px 23px; border-bottom:1px solid #a5c7d612; font-family:var(--soft-font); font-size:13px; font-weight:800; flex:none; }
.detail-waypoint { width:7px; height:7px; border-radius:50%; background:#f2879b; box-shadow:0 0 0 5px #ec819013; }.detail-chapter-label { font-family:inherit; font-size:9px; color:#88a0ac; font-weight:500; padding-left:5px; }
.journey-detail .detail-close { position:absolute; top:20px; right:18px; width:32px; height:32px; border:0; border-radius:50%; color:#b6cbd4; background:#a9c5d30a; font-size:24px; cursor:pointer; z-index:3; }.detail-close:hover { background:#afc7d31a; }
.journey-detail .detail-scroll { padding:27px 28px 23px; flex:1; min-height:0; max-height:none; overflow:auto; scrollbar-width:thin; scrollbar-color:#58717d transparent; overscroll-behavior:contain; }
.route-status { font-size:9px; letter-spacing:.1px; margin:0 0 16px; color:#f59bac; }
.route-chapter h2 { font-family:var(--soft-font); font-size:32px; font-weight:800; letter-spacing:-.04em; line-height:1.12; margin:0 0 16px; }
.route-lead { font-size:13px; line-height:1.75; color:#b9cbd1; margin:0 0 26px; }
.route-work { margin:0; }.route-work > div { padding:17px 0; border-top:1px solid #afc8d012; }.route-work > div:last-child { padding-bottom:0; }.route-work dt { font-size:12px; font-weight:600; color:#e4eeef; margin:0 0 7px; }.route-work dd { margin:0; color:#9fb6c1; font-size:11px; line-height:1.8; }
.route-gate { display:flex; gap:11px; margin-top:26px; border:1px solid #84abac1a; border-radius:17px; padding:15px; background:#8cbbc508; }.route-gate > span { color:#a9c6c9; font-size:19px; line-height:1.2; }.route-gate p { margin:0; color:#9cb7c1; font-size:10px; line-height:1.7; }.route-gate strong { display:block; color:#d4e2e4; font-size:11px; font-weight:600; margin-bottom:5px; }
.route-footnote { color:#6e8c9c; font-size:9px; line-height:1.75; margin:20px 0 0; }
.journey-detail .detail-navigation { display:flex; align-items:center; justify-content:space-between; flex:none; gap:12px; height:66px; padding:0 20px; margin:0; border-top:1px solid #aacada13; background:#0c202b28; }.journey-detail .detail-navigation button { width:36px; height:36px; border-radius:50%; background:#bfd7db07; color:#b4cbd3; font-size:21px; border:0; cursor:pointer; }.detail-navigation button:disabled { opacity:.2; cursor:default; }.detail-navigation button:hover { background:#c8dde216; }.journey-detail #detail-location { display:none; }.journey-detail #detail-next-label { font-size:11px; color:#b8cdd1; font-family:var(--soft-font); margin-left:auto; }
.journey-detail button:focus-visible { outline:2px solid #ec96a7; outline-offset:3px; }
.atlas-scene[data-failed="true"] .map-loading { display:none; }.atlas-scene[data-failed="true"] .map-pins { opacity:1; position:relative; padding:215px var(--page-gutter) 110px; display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }.atlas-scene[data-failed="true"] .route-pin { position:relative; left:auto; top:auto; transform:none; }.atlas-scene[data-failed="true"] .route-pin::before { display:none; }
.atlas-noscript { position:absolute; z-index:6; inset:230px 30px auto; padding:30px; border-radius:25px; background:#243b47; }
@keyframes detail-enter { from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none} }@keyframes detail-exit { to{opacity:0;transform:translateX(15px)} }@keyframes backdrop-enter { from{opacity:0}to{opacity:1} }
@media(max-width:1100px){.atlas-title h1{--block-height:37px}.pin-name{font-size:18px}.route-pin{padding:11px 29px 10px 13px;min-height:54px}.atlas-status small{display:none}.journey-detail{width:375px}}
@media(max-width:700px){
 .atlas-world{height:calc(100svh - 79px);min-height:570px}.atlas-title{top:26px}.atlas-title .section-kicker{font-size:9px;margin-bottom:15px}.atlas-title h1{--block-height:32px;margin-bottom:12px}.atlas-title>p:last-child{font-size:10px}.atlas-status{display:none}
 .route-pin{padding:10px 13px 9px;min-height:48px;border-radius:14px}.pin-name{font-size:16px;margin-bottom:5px}.pin-status{font-size:8px}.pin-open{display:none}.route-pin::before{height:10px}
 .atlas-bottom{bottom:17px;left:20px;right:20px;gap:12px;align-items:stretch;flex-direction:column}
 .atlas-tools{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.atlas-hint{font-size:8px;max-width:90px;line-height:1.65;padding:0}.atlas-controls{padding:3px 5px;gap:0;border-radius:20px}.atlas-controls button{width:40px;height:40px;font-size:18px}.atlas-controls #roadmap-reset{padding:0 8px;font-size:10px;gap:7px}.atlas-controls svg{width:13px;height:13px}.atlas-controls .control-divider{margin:0 4px;width:1px;height:13px}.atlas-controls #roadmap-motion{font-size:9px}
 .journey-detail{inset:auto 10px 10px;width:auto;max-width:none;max-height:calc(100svh - 103px);border-radius:27px}.journey-detail[open]{animation-name:sheet-enter}.journey-detail.is-closing{animation-name:sheet-exit}.journey-detail::backdrop{background:#06111b30;backdrop-filter:blur(4px)}.detail-eyebrow{padding:22px 23px 20px}.journey-detail .detail-close{top:16px;right:16px}.journey-detail .detail-scroll{padding:23px}.route-chapter h2{font-size:29px}.route-lead{font-size:12px}.journey-detail .detail-navigation{height:58px}
}
@media(max-width:380px){.atlas-title h1{--block-height:28px}.pin-name{font-size:14px}.route-pin{padding:9px 10px;min-height:44px}.pin-status{font-size:8px}.atlas-bottom{left:18px;right:18px}.atlas-controls #roadmap-reset span{display:none}.atlas-controls #roadmap-reset{width:40px;padding:0;justify-content:center}.atlas-hint{max-width:85px}.atlas-title>p:last-child{font-size:9px}.route-chapter h2{font-size:27px}}
@keyframes sheet-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes sheet-exit{to{opacity:0;transform:translateY(15px)}}
@media(prefers-reduced-motion:reduce){.journey-detail[open],.journey-detail.is-closing,.journey-detail::backdrop{animation:none}.map-pins,.map-loading,.route-pin,.pin-open{transition:none}}

/* Inspection removes competing labels while the camera approaches the chosen place. */
.atlas-title,.atlas-status,.atlas-bottom { transition:opacity 220ms ease; }
.route-pin { transition:opacity 220ms,background 180ms,border-color 180ms,box-shadow 180ms; }
.atlas-world[data-active-milestone] .route-pin:not([aria-current="step"]),.atlas-world[data-active-milestone] .atlas-title,.atlas-world[data-active-milestone] .atlas-status,.atlas-world[data-active-milestone] .atlas-bottom { opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce){.atlas-title,.atlas-status,.atlas-bottom,.route-pin { transition:none; }}

/* Milestone progress is part of each landmark. The current stage is not tied to an ID. */
.route-pin[data-milestone-state="built"] .pin-status,
.route-pin[data-milestone-state="complete"] .pin-status { color:#4c7666; }
.route-pin[data-milestone-state="built"] .pin-status::before,
.route-pin[data-milestone-state="complete"] .pin-status::before { content:''; display:inline-block; width:4px; height:7px; margin:0 6px 0 1px; background:none; border-radius:0; box-shadow:none; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-1px) rotate(45deg); }
.route-pin[data-milestone-state="current"] { border-color:#ffcad3; background:linear-gradient(145deg,#fffefb,#fff1f2); box-shadow:0 9px 28px #0619213d,inset 0 1px 0 #fff,0 0 0 4px #ed8ba21a; }
.route-pin[data-milestone-state="current"] .pin-status { color:#aa3754; font-weight:750; font-size:10px; }
.route-pin[data-milestone-state="current"] .pin-status::before { content:''; display:inline-block; width:5px; height:5px; margin:0 6px 1px 0; border-radius:50%; background:#d55473; box-shadow:0 0 0 3px #d5547314; }
.route-pin[data-milestone-state="current"] .pin-name { color:#52313a; }
.roadmap-preview-caption { max-width:470px; font-size:11px; line-height:1.65; color:#c5b4ba; }
.roadmap-preview-caption strong { color:#f0ced7; font-weight:700; }
@media(max-width:700px){
 .atlas-tools { width:100%; }
 .route-pin[data-milestone-state="current"] .pin-status { font-size:9px; }
 .atlas-title { right:20px; }
 .roadmap-preview-caption { max-width:300px; font-size:10px; }
}