/* Case-study styling is scoped; the live app retains its own styles inside the frame. */
.project-page--ngp-shed{--project-accent:#ffeb00;--project-wash:#faf9f2}
.project-page--ngp-shed .project-portrait img{object-fit:contain!important;background:#faf9f2}
.ngp-reference-grid{display:grid;grid-template-columns:minmax(200px,.65fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center;margin:32px 0 56px}
.ngp-reference-grid figure{margin:0;max-width:320px;transform:rotate(-2deg)}
.ngp-reference-grid img{display:block;width:100%;height:auto;border:5px solid #fff;box-shadow:5px 5px 0 #171714}
.ngp-reference-grid figcaption,.ngp-caption{font-size:.8rem;line-height:1.5;opacity:.75;margin-top:18px}
.ngp-direction-copy h3{font-size:clamp(1.8rem,3vw,3rem);margin-bottom:24px}
.ngp-direction-copy p{line-height:1.7;margin-bottom:18px}
.project-page--ngp-shed .showcase-placeholder{background:#faf9f2;color:#171714}
.project-page--ngp-shed .showcase-mark{border:2px solid #171714;border-radius:0;background:#ffeb00;font:40px/1 Arial;transform:rotate(-4deg)}
.project-page--ngp-shed .demo-toolbar{flex-wrap:wrap;gap:16px}
.project-page--ngp-shed .ngp-load{font-size:.8rem;min-height:44px;padding:12px 20px;background:#ffeb00;color:#171714;border:2px solid #171714;cursor:pointer}
.project-page--ngp-shed .ngp-load[aria-expanded="true"]{background:#faf9f2}
.ngp-demo-status{font-size:.75rem;line-height:1.4}
.ngp-guide{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid currentColor;margin-top:36px}
.ngp-guide h3{font-size:1.5rem;margin-bottom:8px}.ngp-guide p{line-height:1.5}
@media(max-width:720px){.ngp-reference-grid{grid-template-columns:1fr;gap:32px}.ngp-reference-grid figure{max-width:260px;margin:auto}.ngp-guide{align-items:flex-start;flex-direction:column}.project-page--ngp-shed .local-showcase-frame iframe{height:760px}.project-page--ngp-shed .showcase-placeholder{min-height:300px}}

/* Keep authorship and project status visible alongside the introduction. */
.ngp-concept-notice{margin:24px 0;padding:20px 22px;border:1px solid rgba(32,33,61,.2);border-left:6px solid #ffeb00;border-radius:16px;background:#faf9f2;max-width:68ch;color:#20213d;font-size:.95rem;line-height:1.65}
.ngp-concept-notice p{margin:0}.ngp-concept-notice p+p{margin-top:12px}
.project-page--ngp-shed .demo-note{margin-top:16px}
.ngp-reference-grid img{border-radius:4px}

/* Poster-inspired colour: lilac, leaf green and tomato. */
.ngp-concept-notice{background:#eef6dc;border-left-color:#6aa334}
.ngp-reference-grid{padding:clamp(20px,4vw,48px);background:#d9cfe6;border-radius:24px}
.ngp-reference-grid img{border-color:#ffeb00}
.ngp-direction-copy h3{color:#4a2c1a}
.project-page--ngp-shed .demo-label{color:#d93a2b}

.project-page--ngp-shed .demo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.project-page--ngp-shed .ngp-start{margin-top:8px;background:#ffeb00;color:#171714;border:2px solid #171714;cursor:pointer}