
/* PAGE-SPECIFIC: Projects
   1) Hero: an abstract outline of the United States draws in and yellow pins drop one by one on the
      project locations (12s loop).
   2) Project filter (buttons with aria-pressed, styled like the shared tabs) and project cards with a small
      line drawing per building type.
   3) Statement frame: six Mexico project types drawn one by one, a yellow tag marking the one drawing (12s loop).
   Base styles show the finished state, so the shared reduced-motion rule leaves complete drawings. */
.pj-hero{width:100%;height:auto;max-height:470px;margin-left:auto}
.pj-hero .pm-dots circle{fill:var(--ink-muted);opacity:.45}
.pj-hero .pm-out{fill:none;stroke:var(--art-on-light);stroke-width:1.2;stroke-linejoin:round}
.pj-hero .pm-grat{stroke:var(--line-light);stroke-width:.6;stroke-dasharray:2 4}
.pj-hero .pm-pin path{fill:var(--yellow);stroke:var(--black);stroke-width:.8}
.pj-hero .pm-pin circle{fill:var(--black)}
.pj-hero text{font-family:var(--font-mono);font-size:7.4px;font-weight:600;letter-spacing:.06em;fill:var(--black)}
.pj-hero .pm-cap{font-weight:500;font-size:7px}
.pm-pin{transform-box:fill-box;transform-origin:50% 100%}
.pm-out{stroke-dasharray:1;animation:pm-out 12s var(--ease-draw) infinite}.pm-pin.p0{animation:pm-p0 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p1{animation:pm-p1 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p2{animation:pm-p2 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p3{animation:pm-p3 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p4{animation:pm-p4 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p5{animation:pm-p5 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p6{animation:pm-p6 12s cubic-bezier(.3,1.4,.5,1) infinite}.pm-pin.p7{animation:pm-p7 12s cubic-bezier(.3,1.4,.5,1) infinite}@keyframes pm-out{0%{stroke-dashoffset:1}18%,100%{stroke-dashoffset:0}}@keyframes pm-p0{0%,18%{opacity:0;transform:translateY(-26px)}22%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p1{0%,24%{opacity:0;transform:translateY(-26px)}28%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p2{0%,30%{opacity:0;transform:translateY(-26px)}34%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p3{0%,36%{opacity:0;transform:translateY(-26px)}40%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p4{0%,42%{opacity:0;transform:translateY(-26px)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p5{0%,48%{opacity:0;transform:translateY(-26px)}52%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p6{0%,54%{opacity:0;transform:translateY(-26px)}58%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}@keyframes pm-p7{0%,60%{opacity:0;transform:translateY(-26px)}64%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.pj-filter .tab[aria-pressed="true"]{color:var(--black);border-bottom-color:var(--black)}
.pj-filter .tab[aria-pressed="true"]::before{background:var(--yellow);border-color:var(--black)}
.pj-status{margin:var(--space-5) 0 0;color:var(--ink-muted)}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-5)}
.pj-card{background:var(--black);color:var(--off-white);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.pj-card[hidden]{display:none}
.pj-art{width:100%;height:auto;border-bottom:1px solid var(--line-dark-strong);padding-bottom:var(--space-4);margin-bottom:var(--space-2)}
.pj-art path{fill:none;stroke:var(--art-on-dark);stroke-width:1.2;stroke-linejoin:round}
.pj-type{color:var(--text-on-dark-muted)}
.pj-loc{color:var(--yellow)}
.pj-card p{color:var(--text-on-dark-muted);font-size:var(--fs-body-sm)}
.pj-scope{list-style:none;margin:auto 0 0;padding:0;font-size:var(--fs-body-sm)}
.pj-scope li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--line-dark-strong)}
.pj-scope li::before{content:"";width:8px;height:8px;background:var(--yellow);flex:none}
@media (max-width:1080px){.pj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pj-grid{grid-template-columns:1fr}}
.pj-mx{width:100%;height:auto}
.pj-mx .mx-box{fill:var(--black-raised);stroke:var(--line-dark-strong);stroke-width:1}
.pj-mx path{fill:none;stroke:var(--art-on-dark);stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:1}
.pj-mx text{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;fill:var(--off-white)}
.pj-mx .art-label{font-weight:400;fill:var(--text-on-dark-muted)}
.pj-mx .mx-tag{fill:var(--yellow);opacity:0}
.mx-c.c0 path{animation:mx-d0 12s var(--ease-draw) infinite}.mx-c.c0 .mx-tag{animation:mx-t0 12s linear infinite}.mx-c.c1 path{animation:mx-d1 12s var(--ease-draw) infinite}.mx-c.c1 .mx-tag{animation:mx-t1 12s linear infinite}.mx-c.c2 path{animation:mx-d2 12s var(--ease-draw) infinite}.mx-c.c2 .mx-tag{animation:mx-t2 12s linear infinite}.mx-c.c3 path{animation:mx-d3 12s var(--ease-draw) infinite}.mx-c.c3 .mx-tag{animation:mx-t3 12s linear infinite}.mx-c.c4 path{animation:mx-d4 12s var(--ease-draw) infinite}.mx-c.c4 .mx-tag{animation:mx-t4 12s linear infinite}.mx-c.c5 path{animation:mx-d5 12s var(--ease-draw) infinite}.mx-c.c5 .mx-tag{animation:mx-t5 12s linear infinite}@keyframes mx-d0{0%,4%{stroke-dashoffset:1}13%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t0{0%,4%{opacity:0}6%,15%{opacity:1}17%,100%{opacity:0}}@keyframes mx-d1{0%,15%{stroke-dashoffset:1}24%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t1{0%,15%{opacity:0}17%,26%{opacity:1}28%,100%{opacity:0}}@keyframes mx-d2{0%,26%{stroke-dashoffset:1}35%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t2{0%,26%{opacity:0}28%,37%{opacity:1}39%,100%{opacity:0}}@keyframes mx-d3{0%,37%{stroke-dashoffset:1}46%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t3{0%,37%{opacity:0}39%,48%{opacity:1}50%,100%{opacity:0}}@keyframes mx-d4{0%,48%{stroke-dashoffset:1}57%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t4{0%,48%{opacity:0}50%,59%{opacity:1}61%,100%{opacity:0}}@keyframes mx-d5{0%,59%{stroke-dashoffset:1}68%,92%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}@keyframes mx-t5{0%,59%{opacity:0}61%,70%{opacity:1}72%,100%{opacity:0}}
