html{background:#171717}body{background:#171717;min-height:100vh}#logo-link,#main-nav{position:fixed}.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md);max-width:1200px;margin:0 auto;padding:calc(100px + var(--safe-top)) var(--space-lg) var(--space-xl)}.pg-card{display:block;text-decoration:none;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:background .3s ease,transform .25s ease,border-color .3s ease,box-shadow .3s ease;opacity:0;transform:translateY(16px)}.pg-card-enter{animation:cardReveal .5s ease forwards}.pg-card:hover{background:#00000059;border-color:#ffffff1a;transform:translateY(-4px);box-shadow:0 12px 40px #0000004d,inset 0 0 0 1px #00000026}.pg-card:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}.pg-card-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;display:block;transition:transform .4s ease,opacity .3s ease}.pg-card:hover .pg-card-img{transform:scale(1.03)}.pg-card-body{padding:.9rem 1rem 1rem}.pg-card-title{font-family:var(--font-sans);font-size:1rem;font-weight:600;letter-spacing:.02em;color:#e6e6e6e6;margin-bottom:.25rem;line-height:1.3;transition:color .25s ease}.pg-card:hover .pg-card-title{color:#fff}.pg-card-desc{font-family:var(--font-sans);font-size:.85rem;font-weight:400;letter-spacing:.01em;color:#c8c8c880;line-height:1.5;transition:color .25s ease}.pg-card:hover .pg-card-desc{color:#c8c8c8b3}@keyframes cardReveal{to{opacity:1;transform:translateY(0)}}.project-page{font-family:var(--font-sans);background:#171717;min-height:100vh;overflow-x:hidden}.pj-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.pj-intro,.pj-closing{padding:var(--space-xl) 0;max-width:680px;margin:0 auto;text-align:center}.pj-intro-text{font-family:var(--font-sans);font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:300;line-height:1.85;letter-spacing:.02em;color:#c8c8c8b3}.pj-intro-text em{font-style:italic;color:#e6e6e6e6;font-weight:400}.pj-heading{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);font-weight:400;letter-spacing:.01em;color:#e6e6e6e6;margin-bottom:1.25rem;line-height:1.15}.pj-text{font-family:var(--font-sans);font-size:clamp(.88rem,1.5vw,.95rem);font-weight:300;line-height:1.8;letter-spacing:.015em;color:#c8c8c8a6;margin-bottom:1rem}.pj-text:last-child{margin-bottom:0}.pj-quote{font-family:var(--font-display);font-size:clamp(1.3rem,3.5vw,2.2rem);font-weight:400;line-height:1.4;letter-spacing:.01em;color:#dcdcdc80;border:none;padding:0;margin:0}.pj-quote-author{font-family:var(--font-sans);font-size:.85rem;font-weight:300;letter-spacing:.1em;color:#c8c8c859;margin-top:1rem}.pj-nav-bottom{padding:var(--space-lg) 0 var(--space-xl);border-top:1px solid rgba(255,255,255,.06);max-width:680px;margin:0 auto}.pj-back{font-family:var(--font-sans);font-size:.85rem;font-weight:400;letter-spacing:.06em;color:#c8c8c873;text-decoration:none;transition:color .25s ease}.pj-back:hover{color:var(--accent-gold)}.pj-reveal{opacity:0;transform:translateY(20px)}.pj-reveal.is-visible{animation:fadeUp .7s ease forwards}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@media(max-width:599px){.pg-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm);padding-left:var(--space-sm);padding-right:var(--space-sm);padding-bottom:var(--space-lg)}.pg-card-body{padding:.55rem .65rem .7rem}.pg-card-title{font-size:.82rem}.pg-card-desc{font-size:.72rem;line-height:1.4}}@media(min-width:600px)and (max-width:767px){.pg-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:768px)and (max-width:1023px){.pg-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.pj-content{padding:0 var(--space-sm)}.pj-text{color:#d2d2d2eb}.pj-intro-text{color:#c8c8c8cc}.pj-quote{color:#dcdcdca6}.pj-quote-author{color:#c8c8c873}}@media(max-width:480px){.pj-intro,.pj-closing{padding:var(--space-lg) var(--space-sm)}}@media(prefers-reduced-motion:reduce){.pg-card,.pj-reveal{opacity:1;transform:none;animation:none!important}}@media(prefers-contrast:high){.pg-card:focus-visible{outline:2px solid var(--warm-white);outline-offset:2px}.pj-back:focus-visible{outline:2px solid var(--warm-white);outline-offset:2px}}