.web-page{width:var(--page-width);min-height:100vh;margin:0 auto;padding:var(--portfolio-page-top) 0 var(--portfolio-page-bottom)}.web-projects{width:100%}.web-project{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);align-items:center;gap:clamp(4rem,8vw,10rem);width:100%;margin-bottom:clamp(12rem,22vh,20rem)}.web-project:last-child{margin-bottom:0}.web-project-reverse{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr)}.web-project-reverse .web-project-media{grid-column:2;grid-row:1}.web-project-reverse .web-project-content{grid-column:1;grid-row:1}.web-project-media{min-width:0;opacity:0;transform:translateY(80px);transition:opacity 1.3s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1)}.web-image-window{position:relative;width:100%;aspect-ratio:16 / 11;border-radius:6px;overflow:hidden;background:#151515}.web-project-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}.web-project-media:hover .web-project-image{transform:scale(1.06)}.web-project-content{width:100%;max-width:440px;opacity:0;transform:translateY(55px);transition:opacity 1.3s .18s cubic-bezier(.22,1,.36,1),transform 1.3s .18s cubic-bezier(.22,1,.36,1)}.web-project-reverse .web-project-content{justify-self:end}.web-project-line{width:100%;height:1px;margin:0 0 2rem;background:#ffffff26;transform:scaleX(0);transform-origin:left;transition:transform 1.2s .25s cubic-bezier(.22,1,.36,1)}.web-project-category{margin:0 0 1.5rem;color:#777;font-size:.7rem;line-height:1;letter-spacing:.16em;text-transform:uppercase}.web-project-content h2{margin:0;font-size:clamp(2rem,3.2vw,3.6rem);font-weight:400;line-height:1;letter-spacing:-.04em}.web-project-description{width:100%;max-width:none;min-height:5.4em;margin:2rem 0 0;color:#888;font-size:.9rem;line-height:1.8}.web-project-details{display:grid;width:100%;margin:2.5rem 0 0}.web-project-details>div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:1rem;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.1)}.web-project-details>div:last-child{border-bottom:1px solid rgba(255,255,255,.1)}.web-project-details dt{color:#666;font-size:.62rem;font-weight:400;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}.web-project-details dd{min-width:0;margin:0;color:#aaa;font-size:.75rem;line-height:1.5}.web-project-link{display:inline-flex;align-items:center;gap:2.5rem;margin-top:2.3rem;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font-size:.8rem;line-height:1;letter-spacing:.08em;transition:gap .35s ease,border-color .35s ease,color .35s ease}.web-project-link:hover{gap:3.2rem;border-color:#fff;color:#fff}.web-project.is-visible .web-project-media,.web-project.is-visible .web-project-content{opacity:1;transform:translateY(0)}.web-project.is-visible .web-project-line{transform:scaleX(1)}@media(max-width:1000px){.web-project,.web-project-reverse{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:3.5rem}.web-project-content h2{font-size:clamp(2rem,5vw,3.5rem)}}@media(max-width:700px){.web-page{width:var(--page-width-mobile);padding:var(--portfolio-page-top-mobile) 0 var(--portfolio-page-bottom-mobile)}.web-project,.web-project-reverse{display:flex;flex-direction:column;align-items:stretch;gap:2.5rem;margin-bottom:9rem}.web-project-reverse .web-project-media,.web-project-reverse .web-project-content{width:100%}.web-project-reverse .web-project-content{align-self:stretch}.web-image-window{aspect-ratio:4 / 3}.web-project-media{transform:translateY(50px)}.web-project-content{max-width:none;transform:translateY(35px)}.web-project-line{margin-bottom:1.8rem}.web-project-description{width:100%;max-width:none;min-height:0}.web-project-details{margin-top:2rem}.web-project-details>div{grid-template-columns:90px minmax(0,1fr)}.web-project-link{margin-top:2rem}}@media(prefers-reduced-motion:reduce){.web-project-media,.web-project-content{opacity:1;transform:none;transition:none}.web-project-line{transform:scaleX(1);transition:none}.web-project-image{transform:none;transition:none}}
