/* Scoped portfolio detail additions: no edits to JohnClore.com shared CSS. */
:root{--pc-blue:#22c8ff;--pc-navy:#071f38;--pc-orange:#ff9019;--pc-shadow:0 22px 58px rgba(7,22,36,.18)}
.project-detail-page{background:#f5f7f8;color:#10202f}.project-detail-page .site-header{background:rgba(8,17,25,.95)}
.project-detail-page .project-hero{min-height:0;display:block;padding:134px 0 60px;background:linear-gradient(115deg,#091927,#17344e);color:#fff}
.project-detail-page .project-hero .eyebrow{color:#87defa}.project-detail-page .project-hero h1{font-size:clamp(2.6rem,6vw,5.4rem);line-height:1.01;letter-spacing:-.05em;margin:.25em 0}.project-detail-page .project-hero p{max-width:700px;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.67;color:#e3ecf5}
.project-detail-page .project-hero .hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:45px;align-items:center}
.hero-art{overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.2);box-shadow:var(--pc-shadow);background:#071728}
.hero-art img{width:100%;height:100%;max-height:500px;object-fit:cover}
.hero-art figcaption{font-size:.74rem;color:#d7e3ed;background:#09253b;padding:7px 13px}
.project-detail-page .project-main{background:#fff;padding:66px 0}
.project-detail-page h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.16;letter-spacing:-.028em;margin:0 0 16px}
.project-detail-page h3{line-height:1.25}.project-detail-page p{line-height:1.75}
.project-detail-page .project-layout{grid-template-columns:minmax(0,1.4fr) minmax(270px,.7fr);gap:46px}
.project-detail-page .project-meta{position:static;top:auto;border-radius:12px;background:#f0f6fa;border:1px solid #d9e5ed;padding:24px}
.project-detail-page .project-meta h3{margin:0 0 9px}.project-detail-page .project-meta ul{margin:.3em 0 1.3em}
.section-label{color:#0d6eaa;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.73rem;margin:0 0 13px}
.project-detail-page .intro-text{font-size:1.13rem;color:#334b5d;max-width:70ch}
.project-detail-page .project-copy p,.project-detail-page .project-copy li{font-size:1.035rem;line-height:1.72}
.project-detail-page .button-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}
.project-detail-page .button-row a,.project-detail-page .btn-proj{padding:13px 19px;background:#16abdc;border-radius:7px;color:#052438;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.project-detail-page .button-row a.alt{background:transparent;border:1px solid rgba(255,255,255,.48);color:#fff}
.project-detail-page .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-detail-page .feature-card{padding:23px;background:white;border:1px solid #dce7ed;border-radius:12px;box-shadow:0 6px 22px rgba(14,41,59,.04)}
.project-detail-page .feature-card strong{display:block;font-size:1.2rem;color:#082c47}.project-detail-page .feature-card p{font-size:.95rem;color:#516578;margin:9px 0 0}
.project-detail-page .strip{padding:55px 0;background:#eef5fa}.project-detail-page .section-pad{padding:66px 0}
.project-detail-page .gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.project-detail-page figure{margin:0}
.project-detail-page .gallery-item{background:#fff;border:1px solid #deeaef;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(12,36,51,.08)}
.project-detail-page .gallery-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.project-detail-page .gallery-item figcaption{padding:16px 19px;color:#41566a;line-height:1.5;font-size:.94rem}
.project-detail-page .gallery-item figcaption strong{display:block;color:#072b45;font-size:1.06rem;margin-bottom:4px}
.project-detail-page .lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project-detail-page .lesson-card{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dbe8f1;box-shadow:0 9px 26px rgba(9,39,62,.08)}
.project-detail-page .lesson-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.project-detail-page .lesson-card-content{padding:17px 19px 23px}.project-detail-page .lesson-card-content .num{font-size:.73rem;color:#1977aa;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.project-detail-page .lesson-card-content h3{font-size:1.14rem;margin:6px 0}.project-detail-page .lesson-card-content p{font-size:.91rem;color:#586b7b;margin:6px 0 0}
.project-detail-page .story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.project-detail-page .story-steps>div{background:#eef5fa;border-top:4px solid #1b8dc5;border-radius:8px;padding:22px}
.project-detail-page .story-steps strong{display:block;font-size:1.1rem;color:#0a344f}.project-detail-page .story-steps p{color:#506578;margin:7px 0 0;font-size:.96rem}
.project-detail-page .note-box{padding:22px 25px;border-left:4px solid #1c9dc8;background:#e9f5fb;margin:26px 0;color:#234354}
.project-detail-page .project-quote{background:#eef5fa;border-left-color:#1a9ccc;border-radius:0 10px 10px 0}
.project-detail-page .source-links{padding:20px 25px;background:#f0f4f7;border-radius:9px;margin-top:26px;font-size:.88rem;color:#415567}
.project-detail-page .source-links a{color:#075f94;text-decoration:underline}.project-detail-page .source-links ul{margin:8px 0 0;padding-left:22px}
.project-detail-page .back-strip{background:#101a25}.project-detail-page .back-strip a{color:#f1fbff}
.project-detail-page .brand span{color:#24d5b4}.project-detail-page .project-main .project-actions{margin-top:25px}
.project-detail-page a:focus-visible,.project-detail-page button:focus-visible{outline:3px solid #ffc359;outline-offset:3px}
.mifa-page .project-hero{background:linear-gradient(120deg,#101e2d,#304257)}
.mifa-page .section-label,.mifa-page .project-hero .eyebrow{color:#d86b1d}.mifa-page .button-row a{background:#ff8529;color:#1c2430}.mifa-page .project-hero .eyebrow{color:#ffb17b}
.mifa-page .story-steps>div{border-color:#ec7f32}.mifa-page .note-box{border-color:#ec7f32;background:#fff6ef}
@media(max-width:900px){.project-detail-page .project-hero .hero-grid,.project-detail-page .project-layout{grid-template-columns:1fr}.project-detail-page .project-hero{padding:110px 0 46px}.project-detail-page .feature-grid,.project-detail-page .lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-detail-page .story-steps{grid-template-columns:1fr}.project-detail-page .project-hero h1{font-size:clamp(2.6rem,7vw,4.2rem)}}
@media(max-width:600px){.project-detail-page .gallery-grid,.project-detail-page .feature-grid,.project-detail-page .lesson-grid{grid-template-columns:1fr}.project-detail-page .section-pad,.project-detail-page .project-main{padding:46px 0}.project-detail-page .strip{padding:44px 0}.project-detail-page .project-hero{padding:98px 0 40px}.project-detail-page .project-hero .hero-grid{gap:23px}.project-detail-page .project-hero p{font-size:1rem}}