@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-button--dual{aspect-ratio:4 / 3;background:#eeebe6}.portfolio-shot{position:absolute;display:block;top:0;right:0;bottom:0;left:0}.portfolio-screenshot{display:block;width:100%;height:100%;object-fit:contain}.portfolio-shot--dual{box-sizing:border-box;padding:7% 17% 15% 5%;background:#eeebe6}.portfolio-browser{position:relative;display:block;overflow:hidden;border:1px solid #c9c4bd;border-radius:.55rem;background:#e5e1da;box-shadow:0 1rem 2rem -.75rem #231d1633,0 2px 5px #231d160d;transition:transform .3s ease}.portfolio-browser .portfolio-screenshot{height:auto}.portfolio-browser-bar{display:grid;height:clamp(18px,2vw,24px);grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding-inline:.65rem;border-bottom:1px solid #d3cec7}.portfolio-browser-address{color:#746e66;font-size:.5625rem;font-weight:500;line-height:1;letter-spacing:.02em}.portfolio-browser-tab{width:1.4rem;height:3px;border-radius:2px;background:#c7c0b6}.portfolio-browser-control{justify-self:end;width:6px;height:6px;border:1px solid #a9a197;border-radius:1px}.portfolio-phone{position:absolute;right:4%;bottom:5%;z-index:1;display:block;width:29%;box-sizing:border-box;padding:9px 3px 4px;overflow:hidden;border:1px solid #504b45;border-radius:clamp(.7rem,1.4vw,1.1rem);background:#242220;box-shadow:0 1.1rem 2rem -.65rem #1a151059,0 2px 5px #1a15102e;transition:transform .3s ease}.portfolio-phone img{display:block;width:100%;height:auto;border-radius:.5rem}.portfolio-phone-speaker{position:absolute;top:3px;left:50%;width:18%;height:2px;transform:translate(-50%);border-radius:2px;background:#625c55}.portfolio-shot--dual+.portfolio-zoom{right:auto;left:.75rem}.portfolio-zoom{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:.75rem;background:#fffffff0;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;min-height:1.625rem;box-sizing:border-box;align-items:center;padding:.25rem .625rem;border:1px solid #e5e1dc;border-radius:.375rem;background:#f7f6f3;color:#5d5750;font-size:.6875rem;font-weight:600;line-height:1.35;letter-spacing:.045em;text-transform:uppercase}.portfolio-card-title{margin-top:1rem;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:3;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:.5rem;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-view-switch{display:flex;width:fit-content;max-width:calc(100% - 2rem);gap:.25rem;margin:1rem auto;padding:.25rem;border:1px solid var(--color-border);border-radius:.75rem;background:#f7f6f3}.portfolio-view-switch button{min-width:0;min-height:2.75rem;padding:.5rem 1.125rem;border:1px solid transparent;border-radius:.5rem;color:#68615b;font-size:.875rem;font-weight:500;line-height:1.3;transition:background-color .15s,color .15s}.portfolio-view-switch button:hover{color:var(--color-foreground)}.portfolio-view-switch button[aria-pressed=true]{border-color:#292725;background:#292725;color:#fff}.portfolio-dialog-shot{position:relative;background:#eeebe6}.portfolio-dialog-shot--overview{width:min(100%,82vh);width:min(100%,82dvh);aspect-ratio:4 / 3;margin-inline:auto}.portfolio-dialog-shot--mobile{padding:1rem}.portfolio-dialog-image{display:block;width:100%;height:auto;max-height:70vh;max-height:70dvh;margin-inline:auto;object-fit:contain}.portfolio-dialog-image--mobile{width:auto;max-width:100%;max-height:62vh;max-height:62dvh;border-radius:.5rem;box-shadow:0 .5rem 1.5rem #1a15101f}.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))}.portfolio-grid--featured .portfolio-item--responsive{grid-column:1 / -1}}@media(min-width:1024px){.portfolio-grid--featured .portfolio-item--responsive .portfolio-card{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.portfolio-grid--featured .portfolio-item--responsive .portfolio-screenshot-button{align-self:center;border:0;border-radius:1rem 0 0 1rem}.portfolio-grid--featured .portfolio-item--responsive .portfolio-card-body{justify-content:center;padding:clamp(1.75rem,3vw,2.5rem)}.portfolio-grid--featured .portfolio-item--responsive .portfolio-card-title{font-size:2.25rem}.portfolio-grid--featured .portfolio-item--responsive .portfolio-link{margin-top:1.5rem}}@media(max-width:639px){.portfolio-screenshot-button--dual{aspect-ratio:1.08}.portfolio-shot--dual{padding:7% 4% 18% 17%}.portfolio-shot--dual+.portfolio-zoom{left:auto;right:.75rem}.portfolio-dialog-shot--overview{width:min(100%,64vh);width:min(100%,64dvh);aspect-ratio:1.08}.portfolio-view-switch button{padding-inline:.75rem}.portfolio-phone{right:auto;left:5%;width:34%}}@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(hover:hover)and (prefers-reduced-motion:no-preference){.portfolio-screenshot-button:hover .portfolio-browser{transform:translateY(-2px)}.portfolio-screenshot-button:hover .portfolio-phone{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){.portfolio-zoom,.portfolio-link,.portfolio-browser,.portfolio-phone,.portfolio-view-switch button{transition:none}}