/* Pinned sequence (desktop): the intro line writes itself, dissolves, then the map draws in (home-motion.js) */
.project-map{position:relative;height:320vh;border-top:1px solid rgba(35,35,33,.12)}
.pm-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:96px 6% 34px;overflow:hidden}
.pm-intro{position:absolute;inset:0;display:grid;place-items:center;padding:0 8%;z-index:2;pointer-events:none}
.pm-big{font-size:clamp(40px,6.2vw,104px);line-height:.95;font-weight:500;letter-spacing:-.035em;text-transform:uppercase;text-align:center;max-width:16ch;margin:0;will-change:transform,opacity,filter}
.pm-w{display:inline-block;will-change:transform,opacity,filter}
.pm-num{font-variant-numeric:tabular-nums;min-width:.6ch}
.pm-top{display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-bottom:18px;opacity:var(--ui,1)}
.pm-top .eyebrow{font-size:10px;letter-spacing:1.2px;margin:0}
.pm-hint{max-width:340px;font-size:12px;line-height:1.6;color:#6b6a66;margin:0;text-align:right}
.pm-stage{position:relative;flex:1;min-height:0;cursor:none}
.pm-stage::before{content:"";position:absolute;inset:0;opacity:var(--grid,1);background-image:linear-gradient(to right,rgba(35,35,33,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(35,35,33,.05) 1px,transparent 1px);background-size:12.5% 100%,100% 20%;pointer-events:none}
.pm-lines .pm-g line{stroke-dasharray:1;stroke-dashoffset:var(--d,0)}
.pm-lines .pm-g circle{transform-box:fill-box;transform-origin:center;transform:scale(var(--c,1))}
.pm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pm-lines line{stroke:rgba(35,35,33,.38);stroke-width:1}
.pm-lines circle{fill:var(--ink)}
.pm-label{position:absolute;left:0;top:0;padding:0 2px;border:0;background:none;color:var(--ink);font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;cursor:none;transition:opacity .25s,color .25s}
.pm-label sup{font-size:max(9px,.38em);font-weight:400;margin-left:3px;color:#8a8984;vertical-align:top;position:relative;top:-.1em}
.pm-stage.has-active .pm-label:not(.is-active){opacity:.28}
.pm-label:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.pm-cursor{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid rgba(35,35,33,.7);border-radius:50%;pointer-events:none;opacity:0;transition:width .3s,height .3s,margin .3s,opacity .3s,background .3s;z-index:3}
.pm-stage:hover .pm-cursor{opacity:1}
.pm-cursor.is-big{width:96px;height:96px;margin:-48px 0 0 -48px;background:rgba(35,35,33,.06)}
.pm-card{position:absolute;z-index:4;width:340px;background:#f7f7f5;border:1px solid rgba(35,35,33,.14);box-shadow:0 24px 60px rgba(35,35,33,.14);cursor:auto;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.pm-card.is-open{opacity:1;transform:none;pointer-events:auto}
.pm-card figure{margin:0;aspect-ratio:16/9;background:#dcdbd6;overflow:hidden}
.pm-card figure img{width:100%;height:100%;object-fit:cover;display:block}
.pm-card-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px 10px;border-bottom:1px solid rgba(35,35,33,.1)}
.pm-card-head strong{font-size:20px;font-weight:500}
.pm-card-head span{font-size:10px;letter-spacing:1px;color:#77766f}
.pm-card ul{list-style:none;margin:0;padding:6px 0;max-height:290px;overflow:auto}
.pm-card li a{display:grid;grid-template-columns:1fr auto;gap:12px;padding:8px 18px;font-size:13px;line-height:1.35;color:var(--ink);text-decoration:none}
.pm-card li a:hover,.pm-card li a:focus-visible{background:rgba(35,35,33,.06)}
.pm-card li small{font-size:9px;letter-spacing:.8px;color:#8a8984;text-transform:uppercase;align-self:center}
.pm-card li.is-case small{color:#9c2a1f}
.pm-close{display:none}
.pm-foot{display:flex;justify-content:center;margin-top:22px;opacity:var(--ui,1)}
@media(hover:none),(pointer:coarse){.pm-stage,.pm-label{cursor:pointer}.pm-cursor{display:none}}
@media(max-width:760px){
 .pm-stage{height:720px;flex:none}
 .pm-stage::before{background-size:25% 100%,100% 20%}
 .pm-top{flex-direction:column;gap:10px}.pm-hint{text-align:left}
 .pm-card{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;max-height:72vh;display:flex;flex-direction:column}
 .pm-card ul{max-height:none;flex:1}
 .pm-card figure{aspect-ratio:21/9}
 .pm-close{display:block;position:absolute;right:10px;top:10px;z-index:2;border:0;border-radius:20px;padding:6px 12px;background:rgba(247,247,245,.92);font-size:11px}
}
@media(max-width:900px){
 .project-map{height:auto}
 .pm-pin{position:relative;height:auto;padding:80px 18px 70px;overflow:visible}
 .pm-intro{position:relative;inset:auto;padding:0 0 46px;display:block}
 .pm-big{font-size:clamp(34px,9.5vw,60px);text-align:left}
 .pm-stage{height:620px;flex:none}
}
@media(prefers-reduced-motion:reduce){
 .project-map{height:auto}.pm-pin{position:relative;height:auto}.pm-intro{position:relative;inset:auto;padding-bottom:40px}.pm-stage{height:clamp(460px,52vw,760px);flex:none}
}