/* FORSPEC projects: /projects/ and /projects/<key>/. Owned by chat 09. Phone first.
   Look A "photo tiles" (two across on phone). Look B "rows" (.pjList.b: small photo left, one per row) is kept for James's options page. */
.pj{padding-top:73px;--edge:var(--line);--edge2:rgba(255,255,255,.34);--mono:"JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace}
.pj .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pj p{margin:0}
.pj h1.cond span,.pj h2.cond span{color:var(--redT)}
.pj h2.cond{font-size:clamp(28px,3.6vw,48px);margin:0 0 14px}
.pj :is(button,a):focus-visible{outline:2px solid var(--redT);outline-offset:2px}
.pjCrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:14px 0;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pjCrumbs a{padding:6px 0}.pjCrumbs a:hover{color:var(--text)}.pjCrumbs b{color:var(--text)}

/* ---------- index: top */
.pjTop{padding-block:16px 18px;background:radial-gradient(ellipse at 90% -40%,rgba(221,36,43,.26),transparent 55%)}
.pjTop h1{font-size:clamp(38px,6vw,88px);margin:10px 0 12px;max-width:16ch}
.pjTop .lead{max-width:640px}

/* ---------- index: filter + cards */
.pjFind{padding-block:14px 36px;border-top:1px solid var(--line)}
.pjChips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.pjChips::-webkit-scrollbar{display:none}
.pjChip{flex:none;min-height:44px;padding:0 12px;border:1.5px solid var(--edge2);background:none;color:var(--text);font:600 14px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;cursor:pointer;white-space:nowrap}
.pjChip i{font:700 12px var(--mono);font-style:normal;color:var(--dim);margin-left:4px}
.pjChip.on{background:var(--text);color:#000;border-color:var(--text)}.pjChip.on i{color:#333}
.pjCount{font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:12px 0 8px !important}
.pjList{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pjCard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--edge);color:var(--text);min-width:0}
.pjCard[hidden]{display:none}
.pjCard:hover{border-color:var(--text)}
.pjPic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#000}
.pjPic img{display:block;width:100%;height:100%;object-fit:cover}
.pjVid{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--red);color:#fff;font:700 12px/1 var(--mono);font-style:normal}
.pjTxt{display:flex;flex-direction:column;gap:2px;padding:9px 10px 10px;min-width:0}
.pjTxt b{font:800 17px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:68%;overflow-wrap:anywhere}
.pjTxt small{font:400 13px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.pjTxt em{font:700 12px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--redT);margin-top:3px}
.pjjs .pjList.cut .pjCard.more{display:none}
.pjMore{display:none;width:100%;max-width:420px;min-height:50px;margin-top:10px;border:1.5px solid var(--text);background:none;color:var(--text);font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pjjs .pjMore{display:block}.pjjs .pjMore[hidden]{display:none}
.pjMore:hover{background:var(--text);color:#000}
/* look B: rows */
.pjList.b{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--edge2)}
.pjList.b .pjCard{flex-direction:row;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid var(--edge);padding:8px 0;min-height:76px}
.pjList.b .pjPic{flex:none;width:84px;aspect-ratio:4/3}
.pjList.b .pjVid{width:22px;height:22px;left:4px;bottom:4px}
.pjList.b .pjTxt{flex:1;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.pjList.b .pjTxt b{grid-column:1}.pjList.b .pjTxt small{grid-column:1}
.pjList.b .pjTxt em{grid-column:2;grid-row:1/3;margin:0;text-align:right;max-width:92px}

/* ---------- project page: first screen */
.pjHero{display:grid;gap:12px;padding-block:12px 22px}
.pjHero h1{font-size:clamp(34px,5vw,76px);margin:8px 0 10px}
.pjHero h1 span{display:block}
.pjHero .lead{font-size:16px}
.pjM{position:relative;display:block;overflow:hidden;background:#000;border:1px solid var(--edge)}
.pjM img{display:block;width:100%;height:100%;object-fit:cover}
.pjM:hover{border-color:var(--text)}
.pjPlay{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;background:var(--red);color:#fff;font:700 12px/1 var(--mono);letter-spacing:.04em}
.pjPlay i{font-style:normal}
.pjHero.wide .pjLead .pjM{aspect-ratio:16/9}
.pjHero.tall{grid-template-columns:128px minmax(0,1fr);grid-template-areas:"head head" "lead facts" "btns btns" "built built";align-items:start}
.pjHero.tall .pjBuilt{grid-area:built}
.pjBuilt{margin-top:14px;padding-top:24px;border-top:1px solid var(--line)}
.pjHero.tall .pjHead{grid-area:head}.pjHero.tall .pjLead{grid-area:lead}.pjHero.tall .pjFacts{grid-area:facts}.pjHero.tall .pjBtns{grid-area:btns}
.pjHero.tall .pjLead .pjM{aspect-ratio:9/16}
.pjFacts{display:grid;gap:0;margin:0;border-top:1px solid var(--edge2)}
.pjFacts div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid var(--edge);align-items:baseline}
.pjFacts dt{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pjFacts dd{margin:0;font:600 15px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow-wrap:anywhere}
.pjFacts a{text-decoration:underline;text-decoration-color:var(--redT);text-underline-offset:3px}
.pjHero.tall .pjFacts div{grid-template-columns:minmax(0,1fr);gap:1px}
.pjBtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-content:start}
.pjBtns .btn{padding-inline:6px;font-size:13px;letter-spacing:0;gap:6px;white-space:nowrap}

/* ---------- project page: sections */
.pjSec{padding-block:26px 28px;border-top:1px solid var(--line)}
.pjTicks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pjTicks li{position:relative;padding-left:28px;font-size:16px;line-height:1.4;max-width:70ch}
.pjTicks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--redT);font-weight:800}
.pjResult{margin-top:14px !important;padding:12px 14px;border-left:3px solid var(--red);background:var(--panel);font-size:16px;color:var(--text)}
.pjResult b{font-stretch:68%;text-transform:uppercase;letter-spacing:.02em;margin-right:4px}
.pjGal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pjGal.wide .pjM{aspect-ratio:4/3}.pjGal.tall .pjM{aspect-ratio:3/4}
.pjClipSec{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center}
.pjClipSec .pjM{aspect-ratio:9/16}
.pjClipSec p{color:var(--dim);font-size:15px;max-width:60ch}
.pjRows{display:grid;gap:6px}
.pjRow{display:grid;grid-template-columns:64px minmax(0,1fr) 18px;gap:10px;align-items:center;min-height:60px;padding:8px 10px 8px 8px;border:1px solid var(--edge);background:var(--panel)}
.pjRow:hover{border-color:var(--text)}
.pjRow .k{display:flex;align-items:center;justify-content:center;height:36px;font:700 12px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;border:1px solid var(--edge2)}
.pjRow b{display:block;font:700 16px/1.2 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow-wrap:anywhere}
.pjRow small{display:block;margin-top:2px;font:400 13px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.pjRow i{font-style:normal;color:var(--redT)}
.pjLinks{display:flex;gap:6px;margin-top:8px}
.pjLinks a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 4px;border:1.5px solid var(--edge2);font:600 13px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;text-align:center;white-space:nowrap}
.pjLinks a:hover{background:var(--text);color:#000;border-color:var(--text)}
.pjLinks a.buy{border-color:var(--text)}
.pjAll{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:10px;border:1.5px solid var(--text);font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pjAll:hover{background:var(--text);color:#000}

/* ---------- job band */
.pjJob{display:grid;gap:16px;padding-block:30px 40px;border-top:1px solid var(--line);background:radial-gradient(ellipse at 100% 0,rgba(221,36,43,.2),transparent 60%)}
.pjJob p{margin-top:8px;color:var(--dim);max-width:60ch}

/* ---------- photo and clip viewer */
.pjBox{position:fixed;inset:0;z-index:80;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.94);color:var(--text)}
.pjBox::backdrop{background:rgba(0,0,0,.9)}
.pjBox .in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:60px 8px 16px}
.pjBox img,.pjBox video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#000}
.pjBoxX{position:absolute;right:8px;top:8px;z-index:2;width:48px;height:48px;background:var(--text);color:#000;border:0;font:700 22px/1 var(--mono);cursor:pointer}

@media (min-width:768px){
  .pjChips{flex-wrap:wrap;overflow:visible}
  .pjList{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pjList.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
  .pjList.b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
  .pjTxt b{font-size:20px}
  .pjGal{gap:12px}.pjGal.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.pjGal.n2{max-width:820px}
  .pjClipSec{grid-template-columns:200px minmax(0,1fr);gap:28px}
  .pjRows{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pjLinks{max-width:520px}
  .pjAll{max-width:300px}
  .pjJob{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .pjBtns{display:inline-grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);justify-self:start}.pjBtns .btn{padding-inline:22px;font-size:14px}
  .pjResult{max-width:76ch}
  .pjTicks li{font-size:17px}
}
@media (min-width:900px){
  .pjHero,.pjHero.tall{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head lead" "facts lead" "btns lead" "built built";grid-template-rows:auto auto 1fr auto;column-gap:40px;row-gap:16px;align-items:start;padding-block:20px 40px;max-width:1500px;margin-inline:auto}
  .pjHero .pjHead{grid-area:head}.pjHero .pjLead{grid-area:lead;align-self:stretch;position:relative;min-height:420px}.pjHero .pjFacts{grid-area:facts}.pjHero .pjBtns{grid-area:btns}.pjHero .pjBuilt{grid-area:built;margin-top:6px}
  .pjHero.tall{grid-template-columns:minmax(0,1fr) minmax(240px,340px);grid-template-areas:"head lead" "facts lead" "btns lead" "built lead";grid-template-rows:auto auto auto 1fr}
  .pjHero.wide .pjBuilt{margin-top:14px}.pjHero.wide .pjTicks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  .pjHero.wide .pjLead .pjM{position:absolute;inset:0;aspect-ratio:auto}
  .pjHero.tall .pjLead{min-height:0}
  .pjHero.tall .pjFacts div,.pjFacts div{grid-template-columns:96px minmax(0,1fr);gap:8px}
  .pjHero .lead{font-size:18px}
  .pjSec,.pjFind,.pjTop,.pjJob,.pjCrumbs{max-width:1500px;margin-inline:auto}
}
@media (min-width:1200px){.pjjs .pjList.cut .pjCard.more{display:flex}.pjjs .pjMore{display:none}.pjList{grid-template-columns:repeat(4,minmax(0,1fr))}.pjList.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the 20 completed buildings from the old site: one picture, credited to the builder */
.pjCredit{margin-top:4px !important;font:400 12px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.pjHero.tall .pjCredit{overflow-wrap:anywhere}
@media (min-width:900px){.pjHero.wide.pjBld .pjLead{min-height:0}.pjHero.wide.pjBld .pjLead .pjM{position:relative;inset:auto;aspect-ratio:4/3}}