/* Projects page — same tokens as site.css; only layout and components live here. */

.page-projects{overflow-x:hidden}
.chrome__nav{display:flex;gap:18px}
.chrome__link{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cloud);
  padding:10px 4px;border-bottom:1px solid transparent;transition:border-color .3s}
.chrome__link:hover{border-color:var(--ignite)}
@media (max-width:760px){.chrome__nav{display:flex}.chrome__link{font-size:10px}.chrome__rule{display:none}.chrome{gap:12px}.chrome__nav{margin-left:auto}}

.livedot{display:inline-flex;align-items:center;gap:8px;color:var(--cloud)}
.livedot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ignite);
  box-shadow:0 0 0 0 rgba(209,2,8,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,2,8,.65)}70%{box-shadow:0 0 0 10px rgba(209,2,8,0)}100%{box-shadow:0 0 0 0 rgba(209,2,8,0)}}

.backlink{display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cloud);padding:10px 14px 10px 10px;border:1px solid var(--rule);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:border-color .3s,background .3s}
.backlink:hover{border-color:var(--ignite);background:rgba(209,2,8,.1)}
.backlink svg,.panel__back svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.backlink:hover svg,.panel__back:hover svg{transform:translateX(-4px)}
.prow__try{font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ignite-lite);white-space:nowrap}

/* ── hero ── */
.phero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:3vw;
  padding:120px var(--gutter) 60px;position:relative}
.phero__title{font-size:clamp(46px,6.4vw,112px);letter-spacing:-.045em}
.pcount{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--rule);max-width:560px}
.pcount>div{padding:18px 16px 0 0}
.pcount>div+div{padding-left:18px;border-left:1px solid var(--rule)}
.pcount dt{font-family:var(--body);font-weight:300;font-size:clamp(34px,3.4vw,54px);line-height:1;letter-spacing:-.04em;color:var(--cloud)}
.pcount dd{font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);margin-top:10px}
.phero__map{position:relative;height:min(78vh,720px)}
.constellation{position:absolute;inset:0;width:100%;height:100%}
.constellation__mark{position:absolute;left:50%;top:50%;width:18%;transform:translate(-50%,-50%);fill:var(--ignite);
  filter:drop-shadow(0 0 24px rgba(209,2,8,.45));pointer-events:none}
.constellation__label{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);font-family:var(--display);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cloud);white-space:nowrap;min-height:1em;text-align:center}
@media (max-width:900px){.phero{grid-template-columns:1fr;padding-top:110px}.phero__map{height:62vw;min-height:320px;order:-1}}

/* ── filters ── */
.pfilter{position:sticky;top:72px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:16px var(--gutter);background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.8));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.chip{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  background:transparent;border:1px solid var(--rule);padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);transition:all .3s var(--ease)}
.chip:hover{color:#fff;border-color:rgba(242,242,242,.4)}
.chip.is-on{background:var(--cloud);color:#000;border-color:var(--cloud)}
.chip--live.is-on{background:var(--ignite);color:#fff;border-color:var(--ignite)}
.chip--live.is-on .livedot::before{background:#fff}
.chip:focus-visible{outline:1px solid var(--ignite-lite);outline-offset:2px}
.pfilter__count{margin-left:auto;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
@media (max-width:760px){.pfilter{top:60px;overflow-x:auto;flex-wrap:nowrap}.pfilter__count{display:none}}

/* ── list ── */
.plist{list-style:none;padding:0 var(--gutter) 16vh;--mx:-999px;--my:-999px}
.prow{border-bottom:1px solid var(--rule);transition:opacity .45s var(--ease)}
.prow.is-hidden{display:none}
.prow__btn{width:100%;display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,.7fr) 190px 100px 44px;align-items:center;gap:20px;
  padding:26px 18px 26px 12px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;position:relative;font:inherit;
  transition:background .4s var(--ease),padding .4s var(--ease)}
.prow__btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ignite);transform:scaleY(0);
  transform-origin:50% 100%;transition:transform .45s var(--ease)}
.prow__btn:hover,.prow__btn:focus-visible,.prow.is-hot .prow__btn{background:linear-gradient(90deg,rgba(209,2,8,.14),rgba(15,20,26,.5) 45%,transparent);
  padding-left:26px;outline:none}
.prow__btn:hover::before,.prow__btn:focus-visible::before,.prow.is-hot .prow__btn::before{transform:scaleY(1)}
.prow__n{font-family:var(--display);font-size:12px;letter-spacing:.12em;color:var(--grey-2)}
.prow__btn:hover .prow__n,.prow.is-hot .prow__n{color:var(--ignite-lite)}
.prow__main{display:flex;flex-direction:column;gap:6px;min-width:0}
.prow__title{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--cloud)}
.prow__who{font-size:14px;color:var(--grey-2)}
.prow__cat{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.prow__status{justify-self:start;font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cloud);
  padding:7px 10px;border:1px solid var(--rule);white-space:nowrap}
.prow__status.is-live{border-color:rgba(209,2,8,.6);display:inline-flex;align-items:center;gap:8px}
.prow__status.is-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ignite);animation:pulse 1.8s infinite}
.prow__arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);transition:all .4s var(--ease)}
.prow__arrow svg,.iconbtn svg{width:18px;fill:none;stroke:var(--cloud);stroke-width:1.6}
.prow__btn:hover .prow__arrow,.prow.is-hot .prow__arrow{background:var(--ignite);border-color:var(--ignite);transform:rotate(-45deg)}
@media (max-width:900px){
  .prow__btn{grid-template-columns:40px 1fr 40px;gap:12px;padding:22px 6px}
  .prow__cat{display:none}
  .prow__status{grid-column:2;grid-row:2}
  .prow__try{grid-column:2;grid-row:3}
  .prow__arrow{grid-column:3;grid-row:1/3;width:40px;height:40px}
}

/* ── cursor preview ── */
.peek{position:fixed;left:0;top:0;z-index:30;width:340px;aspect-ratio:16/10;pointer-events:none;opacity:0;
  transform:translate3d(-9999px,0,0) scale(.85);transition:opacity .3s var(--ease);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.peek.is-on{opacity:1}
.peek__inner{position:absolute;inset:0;background:var(--graphite);border:1px solid rgba(209,2,8,.5);overflow:hidden;display:grid;place-items:center}
.peek__inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.peek__vis{position:absolute;inset:0;display:grid;place-items:center}
.peek__vis .vis{width:44%}
.peek__inner .vis{width:44%}
@media (hover:none),(max-width:900px){.peek{display:none}}

/* ── panel ── */
.panel{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#000;color:var(--grey);overflow:hidden}
.panel::backdrop{background:rgba(0,0,0,.7)}
.panel[open]{display:flex;flex-direction:column}
.panel__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gutter);
  border-bottom:1px solid var(--rule);flex:0 0 auto}
.panel__back{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--rule);color:var(--cloud);
  font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px 12px 12px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:border-color .3s,background .3s;margin-right:auto}
.panel__back:hover,.panel__back:focus-visible{border-color:var(--ignite);background:rgba(209,2,8,.12);outline:none}
.panel__crumb{margin-right:16px;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.panel__nav{display:flex;gap:8px}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--rule);cursor:pointer;transition:all .3s}
.iconbtn:hover,.iconbtn:focus-visible{border-color:var(--cloud);outline:none}
.iconbtn--close:hover{background:var(--ignite);border-color:var(--ignite)}
.panel__body{flex:1;min-height:0;display:grid;grid-template-columns:1.6fr 1fr;overflow:hidden}
.panel__media{display:flex;flex-direction:column;gap:12px;padding:24px 0 24px var(--gutter);min-height:0}
.stage__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:0 0 auto}
.stage__label{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ignite-lite)}
.stage__full{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cloud);
  border-bottom:1px solid var(--ignite);padding:4px 0}
.stage__full[hidden]{display:none}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.stage__loading{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-2);pointer-events:none;transition:opacity .4s}
.stage.is-ready .stage__loading{opacity:0}
.stage{flex:1;min-height:0;position:relative;background:var(--graphite);border:1px solid rgba(242,242,242,.08);overflow:hidden;
  display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.stage img,.stage video{width:100%;height:100%;object-fit:contain;background:#050608}
.stage .vis{width:min(52%,340px)}
.stage.is-vis{background:radial-gradient(circle at 50% 50%,rgba(209,2,8,.12),var(--graphite) 60%)}
.stage__note{position:absolute;left:18px;bottom:16px;right:40px;font-size:13px;color:var(--grey-2)}
.thumbs{display:flex;gap:8px;flex:0 0 auto;overflow-x:auto;padding-bottom:2px}
.thumb{flex:0 0 112px;height:66px;border:1px solid var(--rule);background:var(--graphite) center/cover no-repeat;cursor:pointer;position:relative;
  opacity:.55;transition:opacity .3s,border-color .3s}
.thumb.is-on,.thumb:hover{opacity:1;border-color:var(--ignite)}
.thumb--video::after{content:"";position:absolute;left:50%;top:50%;border:8px solid transparent;border-left:13px solid #fff;
  transform:translate(-30%,-50%);filter:drop-shadow(0 0 4px #000)}
.panel__copy{overflow-y:auto;padding:34px var(--gutter) 60px 44px;overscroll-behavior:contain}
.panel__who{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ignite-lite)}
.panel__title{font-size:clamp(32px,3.4vw,58px);margin-top:14px}
.panel__lead{font-size:clamp(17px,1.3vw,21px);color:var(--cloud);margin-top:16px;max-width:40ch}
.panel__status{margin-top:22px}
.panel__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.panel__cta:empty{display:none}
.panel__offline{font-size:14px;color:var(--grey-2);max-width:44ch;padding-left:14px;border-left:2px solid var(--slate)}
.panel__h{font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);
  margin-top:34px;padding-top:16px;border-top:1px solid var(--rule)}
.panel__problem,.panel__changed{margin-top:10px;max-width:52ch;color:var(--grey)}
.panel__changed{color:var(--cloud)}
.panel__does{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:12px;max-width:54ch}
.panel__does li{display:flex;gap:14px;color:var(--grey)}
.panel__does li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:8px;background:var(--ignite);clip-path:polygon(0 0,100% 0,100% 100%)}
.panel__stack{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.panel__stack li{font-family:var(--display);font-size:10.5px;letter-spacing:.08em;color:var(--cloud);padding:7px 10px;border:1px solid var(--rule)}
@media (max-width:900px){
  .panel__body{grid-template-columns:1fr;overflow-y:auto}
  .panel__media{padding:16px var(--gutter) 0;min-height:auto}
  .stage{height:78vh;height:78svh;min-height:520px;flex:none;clip-path:none}
  .panel__bar{flex-wrap:wrap}
  .panel__crumb{display:none}
  .panel__copy{overflow:visible;padding:20px var(--gutter) 60px}
}

.close--projects{padding-top:14vh}
.close--projects .foot{margin-top:14vh}

/* ════════ PHONE PASS ════════ */
@media (max-width:760px){
  .phero{padding-top:78px;gap:8px;min-height:0}
  .phero__map{height:78vw;min-height:0}
  .backlink{margin-bottom:22px}
  .pcount{margin-top:30px}
  .pcount dt{font-size:34px}

  .pfilter{top:var(--chrome-h,58px);padding:10px 0 10px var(--gutter);gap:8px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .pfilter::-webkit-scrollbar{display:none}
  .pfilter::after{content:"";flex:0 0 40px}
  .chip{flex:none;white-space:nowrap;padding:9px 12px;font-size:10px}

  .plist{padding-bottom:6vh}
  .prow__btn{grid-template-columns:30px 1fr 22px;column-gap:10px;row-gap:10px;padding:20px 2px}
  .prow__n{font-size:11px;align-self:start;padding-top:6px}
  .prow__title{font-size:23px}
  .prow__who{font-size:13px}
  .prow__status{grid-column:2;grid-row:2;padding:6px 9px;font-size:9.5px}
  .prow__try{grid-column:2;grid-row:2;justify-self:end;align-self:center}
  .prow__try:empty{display:none}
  .prow__arrow{grid-column:3;grid-row:1;width:22px;height:22px;border:0;align-self:start;margin-top:4px}
  .prow__btn:hover .prow__arrow,.prow.is-hot .prow__arrow{background:none;transform:none}

  .close--projects{padding-top:8vh}
  .close--projects .foot{margin-top:8vh}
}