/* PROJECT PAGES · the proof deck (14 Oct 2026).
   A sheet rises over the site on the night ground. Left: the story. Right: a deck of passes — the product on
   top with its claim stamped across, then one pass per published figure, then the numbers against myself.
   Same tokens, type and pass language as Record's hackathon board; nothing new invented for colour. */
#pj{position:fixed;inset:0;z-index:58;background:var(--night);color:var(--snow);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  transform:translate3d(0,102%,0);visibility:hidden;transition:transform .8s var(--ez),visibility 0s .8s}
#pj.open{transform:none;visibility:visible;transition:transform .8s var(--ez),visibility 0s}
#pj::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,rgba(242,243,245,.09) 1px,transparent 1.4px);background-size:22px 22px}   /* the board's dot grid */
#pj .in{position:relative;min-height:100%;padding:0 var(--m) 6vh;display:flex;flex-direction:column}
#pj .bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:2.6vh 64px 2vh 0;
  background:linear-gradient(var(--night) 70%,rgba(11,12,14,0));color:var(--mute-n)}
#pj .bar b{color:var(--snow);margin-right:.6em}
#pj .idx{display:flex;gap:6px}
#pj .idx button{width:30px;height:4px;border:0;padding:0;border-radius:2px;background:rgba(242,243,245,.18);cursor:pointer;transition:background .3s,width .4s var(--ez)}
#pj .idx button.on{background:var(--snow);width:44px}
#pj .idx button:hover{background:rgba(242,243,245,.5)}
#pj .x{display:inline-flex;align-items:center;gap:10px;border:0;background:none;color:var(--snow);cursor:pointer;font:500 var(--t-xs)/1 GM;letter-spacing:.14em;text-transform:uppercase;padding:6px 0}
#pj .x i{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair-n);transition:box-shadow .3s,transform .5s var(--ez)}
#pj .x i::before,#pj .x i::after{content:'';position:absolute;left:10px;right:10px;top:16px;height:1.5px;background:currentColor;rotate:45deg}
#pj .x i::after{rotate:-45deg}
#pj .x:hover i{box-shadow:inset 0 0 0 1px var(--snow);transform:rotate(90deg)}
#pj .x:focus{outline:none}#pj .x:focus-visible i{box-shadow:inset 0 0 0 2px var(--cob)}
#pj .dk:focus{outline:none}

#pj .body{flex:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;margin-top:3vh}
#pj .l{grid-column:1/span 5;padding-bottom:4vh}
#pj .k{color:var(--mute-n)}
#pj .nm{margin-top:1.6vh;font:800 var(--t-xl)/.86 G;letter-spacing:-.06em}
#pj .nm i{font-style:normal;color:var(--cob)}
#pj .st{display:inline-flex;align-items:center;gap:.6em;margin-top:2.4vh;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair-n);color:var(--snow)}
#pj .st::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc)}
#pj .cl{margin-top:3.4vh;font:300 var(--t-m)/1.08 G;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
#pj .tx{margin-top:4.4vh;display:grid;gap:3.4vh;max-width:48ch}
#pj .sc h3{display:flex;gap:.9em;margin-bottom:1.1vh;padding-top:1.4vh;border-top:1px solid var(--hair-n);color:var(--snow)}
#pj .sc h3 b{color:var(--cob)}
#pj .sc p{font:400 var(--t-b)/1.6 G;letter-spacing:-.01em;color:var(--mute-n)}
#pj .sc.lead p{font:400 clamp(17px,1.32vw,22px)/1.45 G;letter-spacing:-.02em;color:var(--snow)}
#pj .meta{margin-top:4vh;display:grid;gap:1.4vh;max-width:46ch}
#pj .meta div{display:grid;grid-template-columns:9em 1fr;gap:1em;padding-top:1.4vh;border-top:1px solid var(--hair-n);font:400 var(--t-s)/1.45 G;color:var(--snow)}
#pj .meta span{font:500 var(--t-xs)/1.6 GM;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-n)}
#pj .lk{display:flex;flex-wrap:wrap;gap:.4em 1.6em}
#pj .lk a{color:var(--snow);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ez)}
#pj .lk a:hover{background-size:100% 1px}
#pj .lk a::after{content:' ↗';color:var(--cob)}

/* the deck */
#pj .r{grid-column:6/span 7;position:sticky;top:11vh;height:min(70vh,680px);display:flex;flex-direction:column}
#pj .dk{position:relative;flex:1;touch-action:pan-y;outline:none}
#pj .cd{--w:clamp(260px,29vw,520px);position:absolute;left:50%;top:46%;width:var(--w);height:calc(var(--w) * .8);margin:calc(var(--w) * -.4) 0 0 calc(var(--w) * -.5);
  border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform}
#pj .cd.drag{cursor:grabbing}
#pj .cd .tp{display:flex;justify-content:space-between;gap:1em;padding:16px 18px 0;font:500 var(--t-xs)/1 GM;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-p)}
#pj .cd .tp b{color:var(--ink)}
#pj .cd .v{padding:0 18px;margin-top:auto;font:800 calc(var(--w) * .2)/.9 G;letter-spacing:-.06em;white-space:nowrap}
#pj .cd .v.sm{font-size:calc(var(--w) * .13)}
#pj .cd .lb{padding:10px 18px 0;font:400 var(--t-s)/1.4 G;color:var(--mute-p);max-width:34ch}
#pj .cd .cut{margin:16px 0 0;border-top:2px dashed rgba(13,15,20,.18)}
#pj .cd .ft{display:flex;justify-content:space-between;padding:12px 18px 15px;font:600 var(--t-xs)/1 GM;letter-spacing:.1em;text-transform:uppercase}
#pj .cd .ft a{color:var(--deep);text-decoration:none}
#pj .cd .ft a::after{content:' ↗'}
/* the product pass */
#pj .cd.shot{background:#FBFBFA}
#pj .cd.shot .im{position:relative;margin:7px 7px 0;flex:1;border-radius:11px;overflow:hidden;background:#ddd}
#pj .cd.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
#pj .cd.shot .ft{padding:11px 12px 12px;font-size:max(10px,.68vw)}
#pj .stamp{position:absolute;left:50%;top:50%;max-width:84%;padding:.55em .8em .5em;border:3px solid var(--deep);border-radius:10px;color:var(--deep);background:rgba(251,251,250,.86);
  font:800 clamp(15px,1.55vw,26px)/1 G;letter-spacing:-.03em;text-align:center;translate:-50% -50%;rotate:-7deg;scale:0;opacity:0;pointer-events:none}
#pj .stamp.on{animation:pj-stamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pj-stamp{0%{scale:1.9;opacity:0}60%{opacity:1}100%{scale:1;opacity:1}}
/* the numbers against myself */
#pj .cd.ag{background:var(--deep);color:var(--snow)}
#pj .cd.ag .tp,#pj .cd.ag .lb{color:rgba(242,243,245,.78)}
#pj .cd.ag .tp b{color:var(--snow)}
#pj .cd.ag .v{font-size:calc(var(--w) * .095);line-height:1;white-space:normal;letter-spacing:-.04em}
#pj .cd.ag .cut{border-color:rgba(242,243,245,.25)}
#pj .cd.ag .ft a{color:var(--snow)}
#pj .cd .stk{position:absolute;right:14px;top:40px;width:74px;height:74px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;text-align:center;
  font:700 9.5px/1.05 GM;letter-spacing:.08em;text-transform:uppercase;rotate:12deg}
#pj .dn{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-top:1.6vh;color:var(--mute-n)}
#pj .dn .ct b{color:var(--snow)}
#pj .dn button{width:42px;height:42px;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 1px var(--hair-n);color:var(--snow);cursor:pointer;font:500 15px/1 G;transition:box-shadow .3s}
#pj .dn button:hover{box-shadow:inset 0 0 0 1px var(--snow)}
#pj .hint{color:var(--mute-n)}

/* next project */
#pj .nx{display:flex;align-items:center;justify-content:space-between;gap:1.4em;margin-top:6vh;padding:3vh 0 1vh;border-top:1px solid var(--hair-n);
  color:var(--snow);text-decoration:none;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font:inherit}
#pj .nx span{color:var(--mute-n)}
#pj .nx strong{display:block;margin-top:1vh;font:800 var(--t-l)/.9 G;letter-spacing:-.06em;transition:translate .6s var(--ez)}
#pj .nx img{width:clamp(120px,13vw,220px);aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;transition:rotate .6s var(--ez),scale .6s var(--ez)}
#pj .nx:hover strong{translate:1.2vw 0}
#pj .nx:hover img{rotate:-4deg;scale:1.06}

/* text rises in on every open and every switch */
#pj .rv{opacity:0;translate:0 26px}
#pj.show .rv{opacity:1;translate:0 0;transition:opacity .7s var(--ez) var(--d,0s),translate .9s var(--ez) var(--d,0s)}

html.pj-lock,html.pj-lock body{overflow:hidden!important}

@media (max-width:700px){
  #pj .in{padding:0 20px 40px}
  #pj .bar{padding:16px 56px 12px 0}
  #pj .idx{display:none}
  #pj .x span{display:none}
  #pj .body{display:block;margin-top:8px}
  #pj .nm{font-size:16vw}
  #pj .cl{font-size:24px}
  #pj .r{position:relative;top:0;height:auto;margin:34px 0 10px}
  #pj .dk{flex:none;height:calc(min(80vw,340px) * .8 + 70px)}
  #pj .cd{--w:min(80vw,340px);top:50%}
  #pj .cd .lb{font-size:13px}
  #pj .hint{display:none}
  #pj .sc p{font-size:15px}
  #pj .sc.lead p{font-size:17px}
  #pj .meta div{grid-template-columns:7em 1fr;font-size:14px}
  #pj .nx strong{font-size:12vw}
  #pj .nx img{width:30vw}
}
@media (prefers-reduced-motion:reduce){
  #pj,#pj.open{transition:visibility 0s}
  #pj .rv{opacity:1;translate:none}
  #pj .stamp.on{animation:none;scale:1;opacity:1}
}