@layer components{.portfolio-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem 1.5rem;margin:0;padding:0;list-style:none}.portfolio-item{min-width:0}.portfolio-card{display:flex;height:100%;min-width:0;flex-direction:column;border:1px solid var(--color-border);border-radius:1rem;background:var(--color-background)}.portfolio-screenshot-button{position:relative;display:block;width:100%;aspect-ratio:1.44;flex-shrink:0;overflow:hidden;padding:0;border:0;border-bottom:1px solid var(--color-border);border-radius:1rem 1rem 0 0;background:var(--color-secondary);cursor:zoom-in}.portfolio-screenshot{display:block;width:100%;height:100%;object-fit:contain}.portfolio-zoom{position:absolute;right:.75rem;bottom:.75rem;display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-background);color:var(--color-foreground);transition:color .2s,border-color .2s}.portfolio-screenshot-button:hover .portfolio-zoom,.portfolio-screenshot-button:focus-visible .portfolio-zoom{border-color:var(--color-primary);color:var(--color-primary)}.portfolio-screenshot-button:focus-visible{outline-offset:4px}.portfolio-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.5rem}.portfolio-status{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-muted);font-size:.75rem;font-weight:500;line-height:1.5}.portfolio-status:before{content:"";width:.4375rem;height:.4375rem;flex-shrink:0;border:1px solid currentColor;border-radius:50%}.portfolio-status--live:before{border-color:var(--color-primary);background:var(--color-primary)}.portfolio-status--concept:before{border-radius:1px;background:currentColor}.portfolio-card-title{margin-top:.75rem;font-size:clamp(1.375rem,2vw,1.625rem);line-height:1.25}.portfolio-description{margin-top:.75rem;margin-bottom:1rem;color:var(--color-muted);font-size:.9375rem;line-height:1.65}.portfolio-link{display:inline-flex;min-height:2.75rem;align-items:center;gap:.375rem;margin-top:auto;font-size:.875rem;font-weight:500;line-height:1.5;text-decoration:underline;text-decoration-color:#d1d1d1;text-underline-offset:5px;transition:color .2s}.portfolio-link:hover{color:var(--color-primary)}.portfolio-link svg{flex-shrink:0}.portfolio-dialog{width:min(74rem,calc(100% - 2rem));max-width:none;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);margin:auto;padding:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--color-border);border-radius:1rem;background:var(--color-background);color:var(--color-foreground)}.portfolio-dialog::backdrop{background:#1a1a1ac7;touch-action:none}.portfolio-dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);background:var(--color-background)}.portfolio-dialog-heading{min-width:0}.portfolio-dialog-title{margin-top:.375rem;font-size:1.25rem;line-height:1.3}.portfolio-dialog-close{display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-background);color:var(--color-foreground)}.portfolio-dialog-close:hover{border-color:var(--color-primary);color:var(--color-primary)}.portfolio-dialog-image{display:block;width:100%;height:auto;max-height:70vh;max-height:70dvh;object-fit:contain;background:var(--color-secondary)}.portfolio-dialog-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--color-border)}.portfolio-capture{color:var(--color-muted);font-size:.75rem;line-height:1.6}.portfolio-page-content{padding-bottom:clamp(4rem,7vw,6rem)}.portfolio-note{max-width:48rem;margin-top:2rem;color:var(--color-muted);font-size:.8125rem;line-height:1.75}}@media(min-width:768px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:479px){.portfolio-card-body{padding:1.25rem}.portfolio-dialog{width:calc(100% - 1rem)}.portfolio-dialog-header,.portfolio-dialog-footer{padding-inline:1rem}}@media(prefers-reduced-motion:reduce){.portfolio-zoom,.portfolio-link{transition:none}}