/* =========================================================
   Project page template (project-*.html). Sits on top of main.css.
   One layout for every smaller project: hero, device stage, at a glance,
   the brief, how it works, features, stack, next project.
   Each page sets its own accent with --pc on <body> (used sparingly: one glow, a few marks).
   ========================================================= */
.pj{--pc:#d8ff36;}
.hdr nav a[aria-current="page"]{color:var(--acid);opacity:1;}

/* ---------- hero ---------- */
.pj-hero{padding-top:clamp(110px,13vh,150px);}
.pj-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--dim);transition:color .3s;}
.pj-back b{font-weight:400;transition:transform .3s var(--ease);}
.pj-back:hover{color:var(--acid);}
.pj-back:hover b{transform:translateX(-4px);}
.pj-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(28px,4vw,52px);}
.pj-kick{display:flex;align-items:center;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--acid);margin-bottom:clamp(16px,2vw,24px);}
.pj-kick i{width:8px;height:8px;background:var(--pc);display:block;}
.pj-h1{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.88;font-size:clamp(40px,5.4vw,90px);text-wrap:balance;}
.pj-h1 em{font-style:normal;color:var(--acid);}
.pj-h1 .ln{display:block;animation:pjLn .9s var(--ease) both .3s;}
.pj-h1 .ln + .ln{animation-delay:.42s;}
@keyframes pjLn{from{transform:translateX(-30px);clip-path:inset(0 100% 0 0);}to{transform:none;clip-path:inset(0 0 0 0);}}
.pj-dek{color:#c9c9d1;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;max-width:48ch;}
.pj-dek b{color:var(--ink);font-weight:600;}
.pj-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pj-meta div{padding:14px 16px 14px 0;}
.pj-meta div + div{padding-left:16px;border-left:1px solid var(--line);}
.pj-meta dt{font-family:var(--fm);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;}
.pj-meta dd{font-size:15px;font-weight:600;color:var(--ink);}
.pj-meta a{color:var(--acid);}
.pj-meta a:hover{text-decoration:underline;}

/* ---------- device stage: desktop + phone ---------- */
.pj-stage{position:relative;margin-top:clamp(20px,2.6vw,36px);aspect-ratio:16/8.2;border:1px solid var(--line);overflow:hidden;isolation:isolate;
  background:radial-gradient(55% 70% at 38% 55%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%),
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/22px 22px,#0c0c0f;}
.pj-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(0deg,rgba(8,8,10,.6),transparent);z-index:-1;}
.pj-desk{position:absolute;left:7%;top:12%;width:58%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));animation:pjUp 1.1s var(--ease) both .5s;}
.pj-phone{position:absolute;right:7%;bottom:7%;height:80%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:pjUp 1.1s var(--ease) both .75s;}
@keyframes pjUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
.pj-tag{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,22px);z-index:2;font-family:var(--fm);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:#fff;background:rgba(8,8,10,.86);padding:8px 12px;}

/* ---------- section frame ---------- */
.pj-sec{padding-top:clamp(80px,10vw,150px);}
.pj-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(16px,2.6vw,36px);align-items:end;border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(28px,3.6vw,52px);}
.pj-n{font-weight:900;font-size:clamp(52px,7vw,120px);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line-2);}
.pj-k{font-family:var(--fm);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--acid);margin-bottom:12px;}
.pj-head h2{font-weight:900;font-size:clamp(30px,4.2vw,68px);line-height:.95;letter-spacing:-.04em;text-wrap:balance;}

/* at a glance */
.pj-glance{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,5vw,70px);}
.pj-glance li{background:var(--bg-2);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;}
.pj-ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(216,255,54,.35);background:rgba(216,255,54,.06);margin-bottom:8px;}
.pj-ic svg{width:21px;height:21px;fill:none;stroke:var(--acid);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.pj-glance b{font-weight:800;font-size:19px;letter-spacing:-.02em;}
.pj-glance span{color:var(--dim);font-size:14.5px;line-height:1.55;}

/* the brief: copy + picture */
.pj-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(30px,6vw,100px);align-items:center;}
.pj-prose p{color:#d4d4dc;font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;max-width:58ch;}
.pj-prose p + p{margin-top:1em;}
.pj-prose b{color:var(--ink);font-weight:600;}
.pj-pic{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;background:#111;}
.pj-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.pj-pic figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--fm);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;background:rgba(8,8,10,.86);padding:7px 10px;}

/* how it works: sticky picture + steps */
.pj-how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);align-items:start;}
.pj-how-vis{position:sticky;top:110px;border:1px solid var(--line);aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(60% 60% at 50% 55%,color-mix(in srgb,var(--pc) 20%,transparent),transparent 70%),#0c0c0f;}
.pj-how-vis img{width:76%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));}
.pj-steps{list-style:none;counter-reset:st;border-top:1px solid var(--line);}
.pj-steps li{counter-increment:st;display:grid;grid-template-columns:54px 1fr;gap:4px 16px;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);}
.pj-steps li::before{content:"0" counter(st);grid-row:1/3;font-family:var(--fm);font-size:12px;color:var(--acid);padding-top:6px;}
.pj-steps h3{font-weight:800;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.025em;}
.pj-steps p{color:var(--dim);font-size:15.5px;line-height:1.6;max-width:56ch;}

/* features */
.pj-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.pj-feat{border:1px solid var(--line);background:var(--bg-2);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;transition:border-color .4s var(--ease),transform .4s var(--ease);}
.pj-feat:hover{border-color:var(--acid);transform:translateY(-4px);}
.pj-feat h3{font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.15;}
.pj-feat p{color:var(--dim);font-size:14.5px;line-height:1.55;}
.pj-note{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 18px;border:1px solid rgba(216,255,54,.4);background:rgba(216,255,54,.05);color:var(--dim);font-size:15px;}
.pj-note b{color:var(--ink);font-weight:700;}
.pj-note i{width:20px;height:20px;border-radius:50%;background:var(--acid);flex:none;position:relative;}
.pj-note i::after{content:"";position:absolute;left:5.5px;top:6px;width:8px;height:4.5px;border-left:2px solid #08080a;border-bottom:2px solid #08080a;transform:rotate(-45deg);}

/* stack */
.pj-stack{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);}
.pj-stack li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.pj-stack li:not(:nth-child(3n+1)){padding-left:20px;}
.pj-stack li:not(:nth-child(3n)){padding-right:20px;border-right:1px solid var(--line);}
.pj-stack span{font-family:var(--fm);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mid);}
.pj-stack b{font-weight:700;font-size:15.5px;text-align:right;}

/* next project */
.pj-next{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-top:clamp(90px,11vw,160px);padding-top:28px;padding-bottom:clamp(80px,9vw,130px);border-top:1px solid var(--line);}
.pj-next span{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;}
.pj-next a.nx{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(36px,6vw,96px);transition:color .3s;}
.pj-next a.nx b{font-weight:400;display:inline-block;transition:transform .3s var(--ease);}
.pj-next a.nx:hover{color:var(--acid);}
.pj-next a.nx:hover b{transform:translate(6px,-6px);}
.pj-next .all{font-family:var(--fm);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--dim);}
.pj-next .all:hover{color:var(--acid);}

/* ---------- responsive ---------- */
@media(max-width:1100px){.pj-feats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:980px){
  .pj-top,.pj-split,.pj-how{grid-template-columns:minmax(0,1fr);}
  .pj-glance{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pj-how-vis{position:relative;top:0;aspect-ratio:16/10;}
  .pj-how-vis img{width:auto;height:84%;}
  .pj-pic{aspect-ratio:16/11;}
  .pj-stack{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pj-stack li{padding-left:0 !important;padding-right:0 !important;border-right:0 !important;}
  .pj-stack li:nth-child(odd){padding-right:16px !important;border-right:1px solid var(--line) !important;}
  .pj-stack li:nth-child(even){padding-left:16px !important;}
}
@media(max-width:620px){
  .pj-meta{grid-template-columns:1fr 1fr;}
  .pj-meta div:nth-child(3){padding-left:0;border-left:0;}
  .pj-meta div:nth-child(n+3){border-top:1px solid var(--line);}
  .pj-stage{aspect-ratio:1/1.12;}
  .pj-desk{left:4%;top:6%;width:92%;}
  .pj-phone{right:6%;bottom:4%;height:50%;}
  .pj-tag{display:none;}
  .pj-glance,.pj-feats,.pj-stack{grid-template-columns:1fr;}
  .pj-stack li:nth-child(n){border-right:0 !important;padding:14px 0 !important;}
  .pj-next{grid-template-columns:1fr;}
  .pj-n{font-size:48px;}
}
@media (prefers-reduced-motion:reduce){.pj-h1 .ln,.pj-desk,.pj-phone{animation:none;}}
/* how it works: optional sticky lead line instead of a picture */
.pj-lead{position:sticky;top:110px;font-weight:900;font-size:clamp(28px,3.4vw,54px);line-height:.98;letter-spacing:-.04em;text-transform:uppercase;}
.pj-lead em{font-style:normal;color:var(--acid);}
.pj-lead small{display:block;margin-top:18px;font-family:var(--fd);font-weight:400;font-size:15.5px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--dim);max-width:36ch;}
@media(max-width:980px){.pj-lead{position:relative;top:0;}}
/* stage variant: a wide two-phone picture (Aussie Domains, Outfyd) */
.pj-stage.pw .pj-desk{left:4%;top:10%;width:56%;}
.pj-stage.pw .pj-phone{height:auto;width:42%;right:2%;bottom:8%;}
.pj-feat a{color:var(--acid);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:620px){
  .pj-stage.pw .pj-desk{left:4%;top:6%;width:92%;}
  .pj-stage.pw .pj-phone{width:78%;right:4%;bottom:3%;}
}

/* =========================================================
   App variant (Baby Log; reusable for the other app pages).
   .pj-ph is a phone frame drawn in CSS around a real screenshot,
   so the screens stay sharp and any screenshot can drop straight in.
   ========================================================= */
.pj-ph{position:relative;container-type:inline-size;aspect-ratio:48/100;border-radius:13%/6.24%;
  background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.35),transparent 55%),
    linear-gradient(155deg,var(--case-hi,#2a2a31),var(--case,#121216) 45%,var(--case-lo,#0b0b0e));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -6px 14px rgba(0,0,0,.18),0 30px 50px -18px rgba(0,0,0,.75);}
.pj-ph img{position:absolute;inset:6.2cqw;width:calc(100% - 12.4cqw);height:calc(100% - 12.4cqw);object-fit:cover;object-position:top;
  border-radius:7.4cqw;display:block;background:#f7f5fa;box-shadow:0 0 0 1.7cqw #0b0b0e,0 0 0 1.9cqw rgba(0,0,0,.18);}
.pj-ph::before{content:"";position:absolute;z-index:1;top:9cqw;left:50%;width:4.2cqw;aspect-ratio:1;margin-left:-2.1cqw;border-radius:50%;
  background:#0b0b0e;box-shadow:0 0 0 .8cqw rgba(0,0,0,.25);}
/* page sets the case colour, e.g. style="--case-hi:#ffd3e4;--case:#f59cc2;--case-lo:#e07aa8" */

/* hero stage: a fan of five phones */
.pj-stage.app{aspect-ratio:16/8.6;}
.pj-stage.app .pj-ph{position:absolute;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:pjRise 1.1s var(--ease) both;}
.pj-stage.app .p1{width:13.5%;left:calc(16% - 6.75%);top:31%;rotate:-7deg;animation-delay:.95s;}
.pj-stage.app .p2{width:16%;left:calc(32.5% - 8%);top:18%;rotate:-3.5deg;z-index:2;animation-delay:.75s;}
.pj-stage.app .p3{width:19%;left:calc(50% - 9.5%);top:9%;z-index:3;animation-delay:.55s;}
.pj-stage.app .p4{width:16%;left:calc(67.5% - 8%);top:18%;rotate:3.5deg;z-index:2;animation-delay:.75s;}
.pj-stage.app .p5{width:13.5%;left:calc(84% - 6.75%);top:31%;rotate:7deg;animation-delay:.95s;}
.pj-stage.app::after{height:34%;background:linear-gradient(0deg,rgba(8,8,10,.92),transparent);z-index:4;}
.pj-stage.app .pj-tag{z-index:5;}
@keyframes pjRise{from{opacity:0;translate:0 50px;}to{opacity:1;translate:0 0;}}
.pj-appicon{position:absolute;z-index:5;top:clamp(14px,2vw,24px);left:clamp(14px,2vw,24px);display:flex;align-items:center;gap:12px;
  font-family:var(--fm);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);line-height:1.5;}
.pj-appicon img{width:44px;height:44px;border-radius:22%;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.5);}
.pj-appicon b{display:block;font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);}

/* screen rail */
.pj-head-ctl{grid-template-columns:auto minmax(0,1fr) auto;}
.pj-railbtns{display:flex;gap:8px;align-self:end;}
.pj-railbtns button{width:46px;height:46px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-family:var(--fm);font-size:15px;cursor:pointer;
  transition:.3s var(--ease);}
.pj-railbtns button:hover{background:var(--acid);border-color:var(--acid);color:#08080a;}
.pj-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,18vw,262px);column-gap:clamp(18px,2.4vw,34px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:6px 2px 26px;outline:none;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;}
.pj-rail::-webkit-scrollbar{height:4px;}
.pj-rail::-webkit-scrollbar-thumb{background:var(--line-2);}
.pj-rail:focus-visible{outline:1px solid var(--acid);outline-offset:6px;}
.pj-scr{scroll-snap-align:start;margin:0;}
.pj-scr .pj-ph{width:100%;transition:transform .5s var(--ease);}
.pj-scr:hover .pj-ph{transform:translateY(-6px);}
.pj-scr figcaption{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:14px;line-height:1.55;}
.pj-scr figcaption span{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:2px;color:var(--acid);margin-bottom:8px;}
.pj-scr figcaption b{display:block;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.02em;margin-bottom:4px;}
.pj-note a{color:var(--acid);}
.pj-note a b{color:inherit;}
.pj-note a:hover{text-decoration:underline;text-underline-offset:3px;}

@media(max-width:620px){
  .pj-stage.app{aspect-ratio:1/1.05;}
  .pj-stage.app .p1,.pj-stage.app .p5{display:none;}
  .pj-stage.app .p2{width:31%;left:3%;top:30%;}
  .pj-stage.app .p3{width:38%;left:31%;top:17%;}
  .pj-stage.app .p4{width:31%;left:66%;top:30%;}
  .pj-appicon span{display:none;}
  .pj-head-ctl{grid-template-columns:auto minmax(0,1fr);}
  .pj-railbtns{display:none;}
  .pj-rail{grid-auto-columns:62vw;}
}
@media (prefers-reduced-motion:reduce){.pj-stage.app .pj-ph{animation:none;}}