.portfolio-page{width:min(100% - 3rem,1400px);margin-inline:auto;padding-block:4rem 3rem}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 1.5rem;align-items:start}.portfolio-grid .portfolio-card .portfolio-detail{padding:2.5rem 1rem 1rem}.portfolio-grid .portfolio-detail p{font-size:.8rem;line-height:1.55}.portfolio-grid .portfolio-caption h3{font-size:clamp(1.3rem,1.6vw,1.6rem)}.portfolio-experiences{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:4rem;padding-block:2rem;border-top:1px solid hsl(var(--border))}.portfolio-experiences>p{color:hsl(var(--muted-foreground))}.portfolio-experiences>a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;font-weight:500}.portfolio-experiences>a:hover{text-decoration:underline;text-underline-offset:.3rem}.portfolio-experiences>a:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:4px}.portfolio-card{position:relative;min-width:0}.portfolio-primary{display:flex;flex-direction:column;color:hsl(var(--foreground))}.portfolio-stage{position:relative;width:100%;aspect-ratio:5 / 4;overflow:hidden;border-radius:4px;background:hsl(var(--card))}.portfolio-image{display:block;width:100%;height:100%;min-height:0;-o-object-fit:cover;object-fit:cover;-o-object-position:left top;object-position:left top;transition:transform .35s ease}.portfolio-visual{width:100%;height:100%;overflow:hidden}.portfolio-role{order:2;color:hsl(var(--muted-foreground));font-size:.875rem;line-height:1.6}.portfolio-card:hover .portfolio-image,.portfolio-card:focus-within .portfolio-image{transform:scale(1.025)}.portfolio-card .portfolio-detail{position:absolute;inset:auto 0 0;padding:4rem 1.5rem 1.5rem;color:#fff;background:linear-gradient(transparent,#09111beb 55%);pointer-events:none}.portfolio-detail p{max-width:50ch;font-size:.9rem;line-height:1.65}@media(min-width:768px)and (hover:hover){.portfolio-detail{opacity:0;transition:opacity .18s ease}.portfolio-card:hover .portfolio-detail,.portfolio-card:focus-within .portfolio-detail{opacity:1}}.portfolio-caption{display:flex;align-items:center;gap:1rem;min-height:4.25rem;padding-top:1rem}.portfolio-caption h3{flex:1;font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:600;line-height:1.2;letter-spacing:-.04em}.portfolio-arrow{width:1.25rem;height:1.25rem;flex-shrink:0;transition:transform .18s ease}.portfolio-card:hover .portfolio-arrow,.portfolio-card:focus-within .portfolio-arrow{transform:translate(2px,-2px)}.portfolio-github{position:absolute;top:.75rem;right:.75rem;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;color:#fff;background:#0a121cc2}.portfolio-github:hover{background:#0a121cf2}.portfolio-primary:focus-visible,.portfolio-github:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:4px}@media(max-width:1199px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.portfolio-page{width:calc(100% - 2.5rem);padding-block:2.5rem 1rem}.portfolio-grid{grid-template-columns:1fr;gap:2rem}.portfolio-grid .portfolio-card .portfolio-detail{padding:.4rem 0 0}.portfolio-grid .portfolio-detail p{font-size:.85rem;line-height:1.65}.portfolio-experiences{margin-top:2.5rem}.portfolio-stage{display:contents}.portfolio-visual{order:0;height:auto;aspect-ratio:5 / 4;border-radius:4px}.portfolio-image{height:100%}.portfolio-detail-long,.portfolio-detail:has(.portfolio-detail-long){display:none}.portfolio-detail-short{display:block}.portfolio-card:hover .portfolio-image,.portfolio-card:focus-within .portfolio-image{transform:none}.portfolio-card[data-project="016"] .portfolio-image{transform:scale(1.35);transform-origin:10% 30%}.portfolio-card[data-project="020"] .portfolio-image{transform:scale(1.3);transform-origin:0% 35%}.portfolio-card .portfolio-detail{order:2;position:relative;padding:.4rem 0 0;color:hsl(var(--muted-foreground));background:none}.portfolio-detail p{font-size:.85rem}.portfolio-caption{order:1;min-height:3.5rem}}@media(prefers-reduced-motion:reduce){.portfolio-image,.portfolio-arrow,.portfolio-detail{transition:none}}