.portfolio{background:var(--color-bg)}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}.project-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.project-card:hover{transform:translateY(-6px);border-color:var(--color-lavender);box-shadow:var(--shadow-md)}.project-preview{background:var(--color-surface-alt);padding:1.1rem 1.1rem 0}.browser-mockup{background:var(--color-surface);border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 -4px 24px -10px #1d233a4d}.browser-header{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.browser-dot{width:8px;height:8px;border-radius:50%}.browser-dot.red{background:var(--color-accent)}.browser-dot.yellow{background:var(--color-brand)}.browser-dot.green{background:var(--color-lavender)}.browser-content{aspect-ratio:16 / 10;overflow:hidden}.project-info{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.5rem 1.6rem}.project-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}.tag{display:inline-flex;align-items:center;font-family:var(--font-heading);font-size:.72rem;font-weight:700;padding:.28rem .7rem;border-radius:999px}.tag.live{background:#e3f5ea;color:#116932}.tag.prototype{background:var(--color-ink);color:var(--color-on-ink)}.tag.type{background:var(--color-surface-alt);color:var(--color-text-main)}.tag.package{background:var(--color-accent-soft);color:var(--color-accent-dark)}.project-title{font-size:1.2rem;margin-bottom:.4rem}.project-desc{flex:1;font-size:.95rem;margin-bottom:1.1rem}.visit-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-heading);font-size:.9rem;font-weight:700;color:var(--color-accent);transition:gap .2s ease}.project-card:hover .visit-link{gap:.65rem}.portfolio-drawer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.portfolio-drawer.open{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .4s ease,opacity .3s ease .1s}.portfolio-drawer-inner{min-height:0;overflow:hidden}.portfolio-drawer .portfolio-grid{margin-top:1.75rem}.show-more-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:2.75rem auto 0;padding:.9rem 2rem;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-button);color:var(--color-ink);font-size:.95rem;font-weight:700;transition:border-color .2s ease,color .2s ease}.show-more-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.show-more-icon{transition:transform .3s ease}.show-more-icon.rotated{transform:rotate(180deg)}.portfolio-prototypes{margin-top:5rem;padding:3.5rem 2.5rem 3rem;background:var(--color-surface-alt);border-radius:var(--radius-xl)}.portfolio-prototypes-title{text-align:center;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:.6rem}.portfolio-prototypes-lead{text-align:center;max-width:560px;margin:0 auto 2.5rem}.portfolio-grid-prototypes{max-width:900px;margin:0 auto;grid-template-columns:repeat(2,1fr)}.portfolio-grid-prototypes .project-preview{background:var(--color-accent-soft)}@media(max-width:1024px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr}.portfolio-prototypes{padding:2.5rem 1.5rem 2rem;border-radius:var(--radius-lg)}}@media(max-width:640px){.portfolio-grid-main:not(.expanded) .project-card:nth-child(n+4){display:none}.portfolio-grid-prototypes{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.75rem;margin-inline:-1.5rem;padding-inline:1.5rem;scrollbar-width:none}.portfolio-grid-prototypes::-webkit-scrollbar{display:none}.portfolio-grid-prototypes .project-card{flex:0 0 82%;scroll-snap-align:start}}@media(prefers-reduced-motion:reduce){.portfolio-drawer,.portfolio-drawer.open,.show-more-icon,.project-card,.visit-link{transition:none}.project-card:hover{transform:none}}