/* Flat constellation hierarchy. No spheres, travel effects or continuous motion. */
.atlas-key{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:11px;color:var(--muted);margin-top:26px}
.atlas-key span:first-child::before{content:'+';margin-right:8px;color:var(--text);font-size:18px}
.atlas-key .satellite-key::before{content:'';display:inline-block;width:6px;height:6px;border:1px solid var(--amber);border-radius:50%;margin-right:9px}
#milestones .experience-map{position:relative;display:block;width:100%;height:auto;aspect-ratio:1000/570;max-width:none;margin:18px 0 40px;isolation:isolate}
#milestones .experience-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#milestones .experience-connections{stroke:#adbec6;stroke-width:1;stroke-dasharray:none;stroke-opacity:.28;fill:none}
#milestones .experience-orbit{stroke:#cfb58d;stroke-width:1;stroke-dasharray:3 6;stroke-opacity:.55;fill:none}
#milestones .satellite-connection{stroke:#cfb58d;stroke-width:1;stroke-dasharray:none;stroke-opacity:.3;fill:none}
.experience-family{position:absolute;inset:0;pointer-events:none}
#milestones .experience-map .experience-stop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:13px;background:none;border:0;color:var(--text);font:15px var(--f-body);padding:12px 8px;min-height:64px;min-width:64px;max-width:240px;width:max-content;cursor:pointer;pointer-events:auto}
.experience-star{position:relative;display:block;width:16px;height:16px;border:1px solid #d5e0e4;border-radius:50%;background:var(--navy)}
.experience-star::before,.experience-star::after{content:'';position:absolute;background:#d5e0e4}
.experience-star::before{width:28px;height:1px;left:-7px;top:7px}
.experience-star::after{width:1px;height:28px;left:7px;top:-7px}
.experience-stop[aria-pressed=true] .experience-star{outline:1px solid var(--amber);outline-offset:7px}
#milestones .experience-stop small{display:block;font-size:10px;line-height:1.6;margin:5px auto 0;color:var(--muted);opacity:1;max-width:27ch;white-space:normal}
.experience-cambridge{--x:26%;--y:22%}.experience-helia{--x:39%;--y:43%}
.experience-spacex{--x:76%;--y:24%}.experience-newyork{--x:76%;--y:76%}.experience-photography{--x:24%;--y:76%}
.experience-helia .experience-star{width:8px;height:8px;border-color:var(--amber);margin:4px}
.experience-helia .experience-star::before,.experience-helia .experience-star::after{display:none}
#milestones .experience-helia{font-size:13px;color:#dbc49f}
.experience-photography .experience-star{border-style:dashed}
.experience-stop:focus-visible,.state-transition-tools button:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
.state-transition-tools{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.state-transition-tools button{font:12px var(--f-body);color:var(--text);background:transparent;border:1px solid var(--line-hi);padding:10px 14px;cursor:pointer;min-height:44px}
.state-transition-tools p{font-size:12px;color:var(--muted);line-height:1.6;max-width:45ch;margin:0}
.state-transition-tools button:disabled{opacity:.5;cursor:default}
@media(max-width:760px){
 #milestones .experience-map{aspect-ratio:1/1.35;margin-bottom:35px}
 #milestones .experience-map .experience-stop{font-size:13px;max-width:140px;gap:12px}
 #milestones .experience-stop small{font-size:10px;max-width:17ch}
 .experience-cambridge{--x:24%;--y:20%}.experience-helia{--x:38%;--y:44%}
 .experience-spacex{--x:77%;--y:22%}.experience-newyork{--x:77%;--y:78%}.experience-photography{--x:24%;--y:78%}
 .atlas-key{font-size:10px;gap:6px 15px}
}
/* Hero-inspired light: luminous joints and delicate triangulated constellations. */
#milestones .experience-map{aspect-ratio:1000/590;margin-top:35px}
.experience-map::before{content:'';position:absolute;inset:-8% -9%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 28% 32%,#93b3c00d,transparent 42%),radial-gradient(ellipse at 72% 68%,#c1ad820a,transparent 38%),radial-gradient(ellipse at 50% 48%,#10191d80,transparent 73%)}
#milestones .experience-connections{stroke:#a9c5d3;stroke-opacity:.24;stroke-width:.85}
#milestones .experience-orbit{stroke:#9ab3c2;stroke-opacity:.29;stroke-dasharray:none;stroke-width:.8}
#milestones .satellite-connection{stroke-opacity:.55;stroke:#d4bd8d}
.atlas-distant-stars{fill:#c1d7e1}
.atlas-wireframes .atlas-fine-link{stroke:#a8c2d1;stroke-width:1;opacity:.44}
.atlas-wireframes .atlas-warm-link{stroke:#e0c493;stroke-width:1.4;opacity:.8}
.atlas-secondary-star{fill:#e6f0f2;filter:drop-shadow(0 0 4px #c5e1ec);opacity:.82}
.experience-star{width:8px;height:8px;background:#f1f5f1;border:0;border-radius:50%;box-shadow:0 0 6px 2px #edf7f489,0 0 18px 7px #bacbd72e,0 0 36px 13px #aab9c413}
.experience-star::before,.experience-star::after{display:none}
.experience-stop[aria-pressed=true] .experience-star{outline:0;background:#fff3d9;box-shadow:0 0 7px 3px #f7e7c09c,0 0 24px 10px #d9c39838,0 0 45px 18px #d8c29614}
#milestones .experience-map .experience-stop{gap:17px;font-size:16px;text-shadow:0 2px 12px #11191e}
#milestones .experience-stop small{font-size:11px;color:#a7b7c0;max-width:26ch}
.experience-cambridge{--x:28%;--y:27%}.experience-spacex{--x:76%;--y:20%}
.experience-newyork{--x:71%;--y:74%}.experience-photography{--x:22%;--y:72%}.experience-helia{--x:42%;--y:47%}
.experience-helia .experience-star{width:5px;height:5px;background:#ecd3a3;margin:1.5px;box-shadow:0 0 7px 2px #d0b27b60,0 0 18px 6px #d0b27b15}
.experience-photography .experience-star{border:0}
#milestones .experience-helia{font-size:13px}
.atlas-key{display:block;font-size:12px;line-height:1.6;color:#a7b7c0;max-width:60ch}
@media(max-width:760px){
 #milestones .experience-map{aspect-ratio:1/1.5;margin-top:20px}
 #milestones .experience-map .experience-stop{font-size:13px;gap:15px;max-width:135px}
 #milestones .experience-stop small{font-size:10px;max-width:17ch}
 .experience-cambridge{--x:25%;--y:25%}.experience-spacex{--x:77%;--y:21%}
 .experience-helia{--x:40%;--y:47%}.experience-photography{--x:24%;--y:77%}.experience-newyork{--x:76%;--y:78%}
 .atlas-key{font-size:11px}
}
/* One 9/B3-derived scaffold; named stars are actual joints in the illustration. */
#milestones .experience-map{aspect-ratio:1000/640}
#milestones .experience-map .experience-stop{transform:translate(-50%,-16px);gap:17px}
#milestones .experience-map .experience-star{width:10px;height:10px}
#milestones .experience-map .experience-helia .experience-star{width:5px;height:5px;margin:2.5px}
#milestones .experience-stop>span:last-child{background:radial-gradient(ellipse,#20282de6 30%,#20282d00 73%);padding:2px 9px 8px}
#milestones .experience-orbit{stroke-opacity:.18}
.atlas-wireframes .atlas-fine-link{opacity:.55;stroke-width:1.05}
.atlas-wireframes .atlas-warm-link{opacity:.85;stroke-width:1.3}
@media(max-width:760px){
 #milestones .experience-map{aspect-ratio:1/1.7}
 #milestones .experience-map .experience-stop{max-width:118px;font-size:12px}
 #milestones .experience-stop small{max-width:15ch;font-size:9px}
 #milestones .experience-map .experience-helia{font-size:11px}
}

/* A quiet dotted orbit makes Helia part of Cambridge’s satellite group. */
#milestones .experience-orbit{stroke-dasharray:1 5;stroke-linecap:round;stroke-opacity:.4}

/* A star chart, not a truss drawing. The joints are placed freely (personal-atlas.js), so each
   label sits on whichever side of its star is clear: data-side is n, s, e, w or a corner.
   The star stays centred on its joint, 13px in and 17px down from the button's own corner. */
#milestones .experience-map .experience-stop{transform:translate(-50%,-17px)}
#milestones .experience-map .experience-stop[data-side^=n]{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 17px))}
#milestones .experience-map .experience-stop[data-side=se],
#milestones .experience-map .experience-stop[data-side=ne]{align-items:flex-start;text-align:left}
#milestones .experience-map .experience-stop[data-side=sw],
#milestones .experience-map .experience-stop[data-side=nw]{align-items:flex-end;text-align:right}
#milestones .experience-map .experience-stop[data-side=se]{transform:translate(-13px,-17px)}
#milestones .experience-map .experience-stop[data-side=sw]{transform:translate(calc(-100% + 13px),-17px)}
#milestones .experience-map .experience-stop[data-side=ne]{transform:translate(-13px,calc(-100% + 17px))}
#milestones .experience-map .experience-stop[data-side=nw]{transform:translate(calc(-100% + 13px),calc(-100% + 17px))}
#milestones .experience-map .experience-stop[data-side=e]{flex-direction:row;text-align:left;transform:translate(-13px,-50%)}
#milestones .experience-map .experience-stop[data-side=w]{flex-direction:row-reverse;text-align:right;transform:translate(calc(-100% + 13px),-50%)}
#milestones .experience-stop:is([data-side=e],[data-side=se],[data-side=ne]) small{margin-left:0}
#milestones .experience-stop:is([data-side=w],[data-side=sw],[data-side=nw]) small{margin-right:0}
#milestones .experience-stop:is([data-side=e],[data-side=w])>span:last-child{padding:6px 4px}
/* Between tablet and desktop widths the map shrinks, so its labels shrink with it and the wide
   layout keeps its spacing. cqw is a percentage of the map's own width. */
#milestones .experience-map{container-type:inline-size}
@media(min-width:761px){
 #milestones .experience-map .experience-stop{font-size:clamp(12px,1.76cqw,16px)}
 #milestones .experience-map .experience-helia{font-size:clamp(10.5px,1.43cqw,13px)}
 #milestones .experience-stop small{font-size:clamp(9px,1.21cqw,11px)}
 @container (max-width:699px){#milestones .experience-helia small{max-width:17ch}}
}
/* The map's glow reaches past its edges; clip it at the section so the page cannot scroll sideways. */
#about{overflow-x:clip}