.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;padding:0 5%;max-width:none;margin:0;scroll-margin-top:28px}
.project{height:auto;min-height:0;max-height:none;border-radius:24px;background:#f5f5f7;color:#1d1d1f;isolation:isolate;border:1px solid rgba(0,0,0,.045);box-shadow:0 4px 16px rgba(0,0,0,.035);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.project:after{inset:0;background:linear-gradient(120deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%,rgba(255,255,255,.12));opacity:0;pointer-events:none;z-index:2;transition:opacity .4s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);border-radius:inherit}
.project-copy{height:auto;margin-top:235px;min-height:194px;padding:25px 28px 24px;background:rgba(250,250,252,.98);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);border-top:1px solid rgba(255,255,255,.5);transition:background .4s,backdrop-filter .4s;display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-content:start}
.project .number{grid-column:2;grid-row:1;margin:7px 0 0;font-size:12px;color:#86868b;opacity:1;letter-spacing:1px}
.project h2{grid-column:1;grid-row:1;font-size:30px;line-height:1.12;font-weight:500;letter-spacing:-1px;margin:0}
.project p{grid-column:1/-1;max-width:460px;font-size:16px;line-height:1.4;color:#646469;margin:0;min-height:45px}
.project .tags{grid-column:1/-1;font-size:13px;line-height:1.5;word-spacing:0;color:#77777d;margin-top:7px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .project:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.11)}
 .project:hover img{transform:scale(1.035)}
 .project:hover:after{opacity:1}
 .project:hover .project-copy{background:rgba(250,250,252,.78);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
}
.project:focus-visible{outline-offset:5px;outline:3px solid #2275e4}
@media(min-width:1500px){.project{min-height:0}}
@media(max-width:900px){.projects{gap:20px}.project-copy{padding:22px;margin-top:210px}.project h2{font-size:27px}}
@media(max-width:600px){.projects{grid-template-columns:1fr;gap:22px;padding:0 6%}.project{height:auto;border-radius:22px}.project-copy{margin-top:205px;min-height:0;padding:23px}.project h2{font-size:29px}.project p{min-height:0;font-size:16px}}
@media(prefers-reduced-motion:reduce){.project,.project img,.project:after,.project-copy{transition:none}}
.project{transition:opacity .75s ease,translate .75s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.project.reveal-pending{opacity:0;translate:0 22px}
.project.reveal-pending:focus{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.project{transition:none}.project.reveal-pending{opacity:1;translate:0 0}}

@media(hover:hover) and (pointer:fine){
 .project p,.project .tags{opacity:0;translate:0 6px;transition:opacity .25s ease,translate .25s ease}
 .project:hover p,.project:hover .tags,.project:focus-visible p,.project:focus-visible .tags{opacity:1;translate:0 0}
 .project:hover .tags{transition-delay:40ms}
}
@media(prefers-reduced-motion:reduce){.project p,.project .tags{transition:none;translate:none}}