.work-portfolio{z-index:1;color:#ecf0e8;width:100%;min-width:0;max-width:740px;margin:0 auto;position:relative}.work-portfolio .portfolio-heading{margin:0 0 22px}.portfolio-heading>span{color:#bcc9c7;margin-bottom:10px;font-size:12px;display:block}.portfolio-heading>strong{letter-spacing:-.035em;font-size:clamp(25px,2.5vw,33px);font-weight:500;line-height:1.12;display:block}.portfolio-selector{border-bottom:1px solid #ffffff30;gap:4px;display:flex}.portfolio-selector>button{color:#b8c8c6;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:7px;min-height:48px;padding:10px 2px;font:12px/1.3 Arial,sans-serif;transition:color .18s,border-color .18s;display:flex}.portfolio-selector>button>span{color:#96aaa6;font-size:9px}.portfolio-selector>button[aria-pressed=true]{color:#d7eaa5;border-bottom-color:#d7eaa5}.portfolio-stage{isolation:isolate;padding:22px 0 16px;position:relative}.portfolio-project{color:#2a332b;background:#f4f1e8;border-radius:5px;text-decoration:none;transition:transform .28s;display:block;position:relative;box-shadow:0 15px 36px #0004}.portfolio-project:before{content:"";z-index:-1;background:#c1cbb9;border-radius:5px;position:absolute;inset:0;transform:rotate(2deg)translateY(3px)}.portfolio-browser{border-bottom:1px solid #0001;justify-content:space-between;align-items:center;gap:8px;height:32px;padding:0 10px;font:9px/1.2 Arial,sans-serif;display:flex}.portfolio-browser>span:first-child{color:#a8ada3;letter-spacing:2px;font-size:7px}.portfolio-browser>span:last-child{color:#65705e}.portfolio-capture{aspect-ratio:1;border-radius:0 0 5px 5px;display:block;overflow:hidden}.portfolio-capture img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.portfolio-capture.is-entering{animation:.22s both portfolio-preview-in}.portfolio-open{color:#fff;background:#10212bf2;border:1px solid #ffffff45;align-items:center;gap:26px;min-height:44px;padding:10px 16px;font:12px/1.3 Arial,sans-serif;display:flex;position:absolute;bottom:10px;right:10px}.portfolio-open>span{font-size:20px;transition:transform .18s}.work-portfolio .portfolio-description>strong{margin-top:5px;font-size:17px;font-weight:500;display:block}.work-portfolio .portfolio-description>p{color:#bccbc5;min-height:39px;margin:7px 0 0;font-size:13px;line-height:1.5}.portfolio-status{color:#9eafab;align-items:center;gap:10px;min-height:20px;margin-top:9px;font-size:11px;line-height:1.35;display:flex}.portfolio-status[data-state=loading]{color:#d7eaa5}.portfolio-status[data-state=error]{color:#efb29f}.portfolio-status button{min-height:44px;color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;border-bottom:1px solid;padding:5px 0}:is(.work-portfolio button:focus-visible,.work-portfolio a:focus-visible){outline-offset:4px;outline:3px solid #d7eaa5}.service-landing.melown-refined .service-hero-visual:has(.work-portfolio){align-items:center;min-height:0;padding:30px 20px;display:flex}.melown-personal .portfolio-home{color:#f2f5ec;background:#10212b;align-items:center;gap:26px;margin-bottom:48px;padding:28px 20px;display:grid}.melown-personal .portfolio-home-copy h3{letter-spacing:-.035em;margin:0 0 16px;font-size:clamp(28px,3.2vw,42px);font-weight:500;line-height:1.08}.melown-personal .portfolio-home-copy>p{color:#cad6cd;margin:0;font-size:16px;line-height:1.6}.melown-personal .portfolio-home .portfolio-heading{display:none}@media (min-width:681px){.portfolio-stage{padding:30px 10px 26px}.portfolio-project{transform:rotate(-1.5deg)}.portfolio-project:before{transform:rotate(4deg)translateY(4px)}.portfolio-selector>button{gap:9px;font-size:13px}.service-landing.melown-refined .service-hero-visual:has(.work-portfolio){padding:36px clamp(24px,3vw,44px)}.melown-personal .portfolio-home{padding:36px}}@media (min-width:981px){.melown-personal .portfolio-home{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:50px;padding:44px}.melown-personal .portfolio-home-copy{max-width:320px}}@media (hover:hover){.portfolio-project:hover{transform:translateY(-3px)}.portfolio-project:hover .portfolio-open>span{transform:translate(2px,-2px)}.portfolio-selector button:hover{color:#fff}}@keyframes portfolio-preview-in{0%{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.work-portfolio *,.work-portfolio :before{transition:none!important;animation:none!important}.portfolio-project{transform:none}}@media (max-width:480px){.portfolio-capture{aspect-ratio:390/600}.portfolio-selector{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;display:grid}.portfolio-selector>button{gap:0;min-width:0;font-size:11px}.portfolio-selector>button>span{display:none}}
