body{min-height:100vh}.detail-main{padding-top:90px;padding-bottom:90px;min-height:65vh}.detail-main h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.08;max-width:850px;margin:12px 0 20px}.detail-lead{font-size:1.22rem;line-height:1.75;max-width:780px;color:#c0d2e6}.back{display:inline-block;color:#76c7ff;text-decoration:none;margin-bottom:42px}.detail-panel{margin-top:38px;padding:clamp(20px,4vw,42px);border:1px solid #315070;border-radius:18px;background:#101d31;max-width:920px}.detail-panel h2{font-size:1.3rem;margin:18px 0 12px}.detail-panel p{line-height:1.8;color:#c7d5e8}.detail-panel .chips{margin:12px 0 25px}.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.detail-nav{display:flex!important;align-items:center;gap:20px}@media(max-width:600px){.detail-nav a:not(.nav-cta){display:none}.detail-main{padding-top:45px}}
/* Project directory and screenshot galleries */
.hub-main{padding-top:85px;padding-bottom:90px}.hub-main h1{font-size:clamp(40px,6vw,70px);margin:10px 0}.hub-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 38px}.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}.hub-card{display:block;padding:25px;border:1px solid #30415b;border-radius:16px;background:#121e30;color:#e8f2ff;text-decoration:none;transition:transform .2s,border-color .2s}.hub-card:hover,.hub-card:focus-visible{transform:translateY(-3px);border-color:#54adff}.hub-card h2{font-size:20px;line-height:1.3;margin:13px 0}.hub-card p{color:#b8cbe0;line-height:1.6}.hub-card span,.hub-number{color:#69baff;font-weight:700;font-size:13px}.hub-note{color:#b8cbe0;margin-top:28px}.screenshots{margin:35px 0 25px}.screenshots h2{font-size:25px}.screenshots>p{color:#b8cbe0}.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:18px}.screenshot-placeholder{min-height:160px;border:1px dashed #55708e;border-radius:12px;background:#12243b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;text-align:center;padding:18px}.screenshot-placeholder span{font-size:32px;color:#69baff}.screenshot-placeholder small{color:#a5b9ce}.portfolio-hub-link{margin:24px 0}

.live-project-links{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 28px}.live-project-links a{display:inline-flex;align-items:center;text-decoration:none}
.project-live-note{display:block;color:#91d6b4;margin-top:9px}

.screenshot-card{display:block;overflow:hidden;border:1px solid #315070;border-radius:13px;background:#101d31;color:#d8eaff;text-decoration:none;transition:transform .2s,border-color .2s}.screenshot-card:hover,.screenshot-card:focus-visible{transform:translateY(-3px);border-color:#6ac0ff}.screenshot-card img{width:100%;height:175px;object-fit:contain;display:block;background:#08121f}.screenshot-card span{display:block;padding:12px 14px;font-size:14px;line-height:1.4}.screenshot-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Responsive gallery override — 2026-11-09 */
.screenshots{width:100%;max-width:1100px;margin:36px auto 28px;min-width:0}
.screenshots .screenshot-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;width:100%;max-width:100%;align-items:stretch}
.screenshots .screenshot-card{display:flex!important;flex-direction:column;min-width:0!important;max-width:100%!important;width:auto!important;overflow:hidden;border-radius:13px}
.screenshots .screenshot-card img{display:block!important;width:100%!important;max-width:100%!important;height:190px!important;max-height:190px!important;min-height:0!important;object-fit:contain!important;object-position:center!important;background:#08121f}
.screenshots .screenshot-card span{flex:1;display:block;padding:11px 13px;font-size:14px;overflow-wrap:anywhere}
@media(max-width:850px){.screenshots .screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:540px){.screenshots .screenshot-grid{grid-template-columns:minmax(0,1fr)!important}.screenshots .screenshot-card img{height:210px!important;max-height:210px!important}}