/* ===== case-study elevation (this page only; extends pages.css, never fights it) ===== */

/* the zone wash: the project's own ink tints the masthead, then fades back to paper */
#proj{position:relative;}
.pxtint{position:absolute;top:0;left:0;right:0;height:min(92vh,780px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--zone-rgb),0.11) 0%,rgba(var(--zone-rgb),0.05) 46%,rgba(var(--zone-rgb),0) 100%);
  opacity:0;animation:pxin 1.6s var(--e-quart) .2s forwards;}
@keyframes pxin{to{opacity:1;}}

/* masthead: case number on the eyebrow, edition line under the chips */
.peyebrow .pxed{margin-left:auto;font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--zone);}
.proj-hero .ptag{max-width:30ch;}
.proj-hero .pxedition{margin-top:28px;padding-top:14px;border-top:1px solid rgba(20,18,31,0.14);
  font-size:0.625rem;letter-spacing:0.2em;color:var(--warm-gray);
  opacity:0;animation:pgin .9s var(--e-expo) .95s forwards;}

/* the banner reads as a printed plate: figure + caption line */
.pxcap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:12px;padding:0 2px;}
.pxcap .mono{font-size:0.6rem;letter-spacing:0.16em;}
.pxcap .pxfig{color:var(--zone);}

/* numbered section heads: № in the zone ink, a quiet mono count on the right */
.pxsec .sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.pxsec .sechead .pxno{color:var(--zone);margin-right:14px;}
.pxsec .sechead .pxlab{color:var(--soft-ink);}
.pxsec .sechead .pxcnt{color:var(--warm-gray);letter-spacing:0.14em;}

/* № 01 the brief: sticky meta column beside the prose */
.pxcols{display:grid;grid-template-columns:minmax(212px,0.34fr) 1fr;gap:clamp(28px,5vw,84px);align-items:start;}
.pxmeta{position:sticky;top:104px;border-top:2px solid var(--zone);}
.pxm{display:flex;flex-direction:column;gap:5px;padding:13px 0 12px;border-bottom:1px solid rgba(20,18,31,0.1);}
.pxm-lab{font-size:0.58rem;letter-spacing:0.2em;color:var(--warm-gray);}
.pxm-val{font-size:1.04rem;line-height:1.5;color:var(--ink);}
.pxm-svc{display:block;}
.pxm-inks{display:flex;gap:7px;padding-top:3px;}
.pxm-inks i{width:17px;height:17px;border-radius:50%;border:1px solid rgba(20,18,31,0.14);transition:transform .5s var(--e-expo);}
.pxm-inks i:hover{transform:translateY(-2px);}
.pxprose{max-width:62ch;}
.pxquote{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;font-variation-settings:var(--fx-d);
  font-size:clamp(1.55rem,2.9vw,2.3rem);line-height:1.28;letter-spacing:-0.02em;color:var(--ink);margin-bottom:24px;}
.pxquote::before{content:'';display:block;width:44px;height:2px;background:var(--zone);margin-bottom:20px;}
@media(max-width:880px){
  .pxcols{grid-template-columns:1fr;gap:34px;}
  .pxmeta{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:26px;}
}

/* № 02 the palette: a full row of inks, indexed */
.pxpal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,1.8vw,24px);}
.pxpal .swatch{width:auto;}
.pxpal .schip{height:clamp(88px,11vw,132px);margin-bottom:10px;}
.pxsw-no{display:block;font-size:0.6rem;color:var(--zone);margin-bottom:8px;}

/* № 03 the work: every plate shown whole.
   The span grid this replaced forced each image into a fixed-aspect box and
   cropped it with object-fit:cover — a 4:3 plate dropped in a 3/4 slot lost
   nearly half its width (the mockups are composed edge to edge, so that ate
   real artwork). Plates now flow in columns at their true proportions: the
   image sets the height, nothing is cropped, and mixed 4:3 / 4:5 kits pack
   tightly. */
.pxgal{display:block;columns:3 300px;column-gap:clamp(14px,1.8vw,24px);}
.pxgal figure{margin:0 0 clamp(14px,1.8vw,24px);}
.pxgal img{width:100%;height:auto;object-fit:contain;margin-bottom:0;
  filter:sepia(0.22) saturate(0.92) contrast(1.05);}
@media(max-width:640px){.pxgal{columns:2 150px;column-gap:12px;}}

/* № 04 more work: each card wears its destination's own ink, plus its tagline */
.pnav-tag{font-family:var(--ff-body);font-style:italic;font-size:1.02rem;color:var(--warm-gray);margin-top:-6px;}

@media (prefers-reduced-motion: reduce){
  .pxtint,.proj-hero .pxedition{animation:none;opacity:1;}
}