/* ============================================================
   Project case-study pages (pg4). Loaded after card.css + blog.css.
   ============================================================ */
.pj-hero .post-standfirst{max-width:56ch}
.pj-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.pj-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.3rem}
.pj-stack span{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:.22rem .65rem;background:var(--paper)}
.pj-sec{padding-block:clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line-soft)}
.pj-sec--tint{background:var(--paper-2);border-block:1px solid var(--line-soft)}
.pj-k{display:flex;align-items:baseline;gap:.7rem;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pj-k i{font-style:normal;color:var(--ink-3)}
.pj-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.012em;margin-top:.7rem;max-width:26ch;text-wrap:balance;color:var(--ink)}
.pj-lead{margin-top:1rem;font-size:1.04rem;line-height:1.75;color:var(--ink-2);max-width:62ch}
.pj-lead b{color:var(--ink);font-weight:600}
.pj-story{display:grid;grid-template-columns:1fr;gap:1.6rem 3rem;margin-top:1.4rem}
@media (min-width:860px){.pj-story{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.pj-story p{font-size:1.04rem;line-height:1.8;color:var(--ink-2);margin:0 0 1rem}
.pj-story p:first-child{font-family:var(--serif);font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.6;color:var(--ink)}
.pj-sources{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:1.3rem 1.4rem;align-self:start}
.pj-sources h3{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pj-sources ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem}
.pj-sources li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:var(--ink);padding-bottom:.55rem;border-bottom:1px dashed var(--line)}
.pj-sources li:last-child{border-bottom:none;padding-bottom:0}
.pj-sources li b{font-weight:500}
.pj-sources li span{color:var(--ink-3);font-size:.82rem;text-align:right}
/* four stages */
.pj-flow{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.8rem;counter-reset:st}
@media (min-width:720px){.pj-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pj-flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pj-stage{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:1.25rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.pj-stage .n{font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--accent);line-height:1}
.pj-stage h3{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--ink)}
.pj-stage p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.pj-stage .opt{position:absolute;top:1.1rem;right:1.1rem;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem}
@media (min-width:1000px){.pj-stage:not(:last-child)::after{content:'→';position:absolute;right:-.85rem;top:1.15rem;font-family:var(--sans);color:var(--accent);font-weight:700;background:var(--paper-2);padding:0 .1rem}}
.pj-entries{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;font-size:.9rem;color:var(--ink-2)}
.pj-entries b{color:var(--ink);font-weight:600}
/* ladder */
.pj-ladder{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.6rem;max-width:860px}
.pj-ladder li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;align-items:start;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:1rem 1.2rem;transition:border-color .25s,transform .25s}
.pj-ladder li:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateX(4px)}
.pj-ladder li:nth-child(2){margin-left:clamp(0rem,2vw,1.2rem)}
.pj-ladder li:nth-child(3){margin-left:clamp(0rem,4vw,2.4rem)}
.pj-ladder li:nth-child(4){margin-left:clamp(0rem,6vw,3.6rem)}
.pj-ladder li:nth-child(5){margin-left:clamp(0rem,8vw,4.8rem)}
.pj-ladder .r{font-family:var(--serif);font-size:1.5rem;color:var(--accent);line-height:1}
.pj-ladder h3{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--ink)}
.pj-ladder p{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin-top:.25rem}
.pj-test{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.6rem;max-width:860px}
@media (min-width:720px){.pj-test{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pj-test div{border-radius:12px;padding:.85rem 1rem;font-size:.86rem;line-height:1.45;color:var(--ink);border:1px solid var(--line);background:var(--paper)}
.pj-test b{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.35rem}
.pj-test .ok b{color:var(--ok)}.pj-test .ok{background:var(--ok-bg);border-color:var(--ok-line)}
.pj-test .ko b{color:var(--ko)}.pj-test .ko{background:var(--ko-bg);border-color:var(--ko-line)}
/* quadrant */
.pj-judge{display:grid;grid-template-columns:1fr;gap:2rem 3rem;margin-top:1.8rem;align-items:start}
@media (min-width:900px){.pj-judge{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pj-quad{display:grid;grid-template-columns:1.6rem 1fr 1fr;grid-template-rows:1fr 1fr 1.6rem;gap:.5rem;aspect-ratio:1.1/1;max-width:480px}
.pj-quad .ax{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.pj-quad .ax-y{grid-row:1/3;grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg)}
.pj-quad .ax-x{grid-row:3;grid-column:2/4}
.pj-quad .c{border-radius:14px;border:1px solid var(--line);background:var(--paper);padding:.9rem 1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.4rem}
.pj-quad .c b{font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.25}
.pj-quad .c span{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.pj-quad .c.hot{background:var(--accent);border-color:var(--accent);box-shadow:0 22px 40px -26px rgba(var(--accent-rgb),.8)}
.pj-quad .c.hot b{color:var(--paper)}.pj-quad .c.hot span{color:var(--accent-tint)}
.pj-rules{display:grid;gap:.9rem}
.pj-rules p{font-size:.98rem;line-height:1.7;color:var(--ink-2)}
.pj-rules p b{color:var(--ink);font-weight:600}
.pj-levers{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.2rem}
.pj-levers span{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;background:var(--paper)}
.pj-levers i{font-style:normal;color:var(--accent)}
/* self-healing */
.pj-heal{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;max-width:760px;border-left:1px dashed rgba(var(--accent-rgb),.45);margin-left:.5rem}
.pj-heal li{position:relative;padding:0 0 1.3rem 1.6rem}
.pj-heal li::before{content:'';position:absolute;left:-6px;top:.35rem;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.pj-heal li:last-child{padding-bottom:0}
.pj-heal li:last-child::before{background:var(--accent)}
.pj-heal h3{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--ink)}
.pj-heal p{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin-top:.2rem}
/* guardrails */
.pj-guard{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.8rem}
@media (min-width:720px){.pj-guard{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pj-guard div{border-top:2px solid var(--ink);padding-top:.9rem}
.pj-guard h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink)}
.pj-guard p{font-size:.94rem;line-height:1.65;color:var(--ink-2);margin-top:.35rem}
/* usage */
.pj-use{display:grid;grid-template-columns:1fr;gap:1.6rem 3rem;margin-top:1.8rem}
@media (min-width:860px){.pj-use{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pj-use h3{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem}
.pj-dl{display:grid;gap:.7rem;margin:0}
.pj-dl div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.pj-dl dt{font-family:var(--serif);font-size:1rem;color:var(--ink)}
.pj-dl dd{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.pj-dl code,.pj-dl dt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--accent-deep);background:var(--paper-3);border-radius:6px;padding:.08rem .4rem}
/* diagrams */
.pj-diag{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.8rem}
.pj-diag a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
.pj-diag a:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(var(--ink-rgb),.4)}
.pj-diag img{display:block;width:100%;height:190px;object-fit:cover;object-position:top center;background:var(--paper-shot);border-bottom:1px solid var(--line-soft)}
.pj-diag a:first-child img{object-fit:cover;object-position:left center}
.pj-diag span{display:flex;justify-content:space-between;gap:.6rem;padding:.75rem .95rem;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink)}
.pj-diag span i{font-style:normal;color:var(--accent)}
.pj-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border:1px solid rgba(var(--accent-rgb),.35);border-radius:16px;background:var(--paper);box-shadow:0 16px 36px -26px rgba(var(--accent-rgb),.5);padding:clamp(1.4rem,3vw,2rem)}
.pj-end p{margin:0;font-family:var(--serif);font-size:1.2rem;color:var(--ink);max-width:36ch}
.pj-end div{display:flex;flex-wrap:wrap;gap:.6rem}
.pj-hero .post-art .ink{stroke:var(--accent)}
.pj-proof{padding-block:0 clamp(2.4rem,5vw,3.6rem)}
.pj-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem}
@media (min-width:860px){.pj-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pj-stats li{border-top:1px solid var(--line);padding-top:.8rem;display:flex;flex-direction:column;gap:.3rem}
.pj-stats b{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:500;line-height:1;color:var(--accent)}
.pj-stats span{font-size:.86rem;line-height:1.45;color:var(--ink-2);max-width:26ch}
.pj-shot{margin:clamp(1.8rem,4vw,2.6rem) 0 0}
.pj-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -40px rgba(var(--ink-rgb),.55)}
.pj-shot figcaption{margin-top:.7rem;font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--ink-3)}
.pj-code{margin:0;background:var(--ink);color:var(--paper-2);border-radius:14px;padding:1rem 1.2rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.65}
.pj-note{margin-top:1rem;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.pj-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--accent-deep);background:var(--paper-3);border-radius:6px;padding:.06rem .35rem}
.pj-shots2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.2rem}
.pj-shots2 a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);color:var(--ink);transition:border-color .25s}
.pj-shots2 a:hover{border-color:rgba(var(--accent-rgb),.45)}
.pj-shots2 img{display:block;width:100%;height:120px;object-fit:cover;object-position:top left}
.pj-shots2 span{padding:.55rem .75rem;font-family:var(--sans);font-size:.8rem;font-weight:600}
.pj-dl div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}