.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:40px}
.portfolio-filters{display:flex;gap:9px;flex-wrap:wrap}
.portfolio-filters[hidden]{display:none}
.portfolio-filters button{display:flex;align-items:center;gap:15px;border:1px solid var(--line);border-radius:30px;background:var(--paper);color:var(--ink);padding:12px 18px;font:inherit;font-size:14px;line-height:1.2;transition:background .25s,color .25s,border-color .25s}
.portfolio-filters button span{font:10px/1 Arial;opacity:.6}
.portfolio-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.portfolio-filters button:hover{border-color:var(--blue)}
.portfolio-count{font-size:13px;color:var(--muted);white-space:nowrap;margin:0}
.portfolio-grid{display:grid;grid-template-columns:1.08fr 1fr;column-gap:44px;row-gap:60px;align-items:start}
.portfolio-card{display:block;color:inherit;text-decoration:none;position:relative;min-width:0}
.portfolio-card[hidden]{display:none!important}
.portfolio-card:nth-child(even){margin-top:80px}
.portfolio-grid[data-filtered=true] .portfolio-card{margin-top:0}
.portfolio-card .portfolio-media{height:auto;aspect-ratio:808/632;background:#e9ebe3;border:1px solid #18231d0c;border-radius:9px;box-shadow:0 24px 50px -32px #18231d50;isolation:isolate}
.portfolio-media img{display:block;width:100%;height:100%;object-fit:contain;transition:scale .9s cubic-bezier(.2,.8,.2,1)}
.portfolio-index{position:absolute;inset-block-start:18px;inset-inline-end:18px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:10px/1 Arial;color:var(--ink);background:#f4f3edeb;backdrop-filter:blur(8px)}
.portfolio-card .work-arrow{width:45px;height:45px;inset-block-start:18px;inset-inline-start:18px;background:#f4f3edeb}
.portfolio-open{position:absolute;inset: auto 15px 15px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink);color:var(--paper);padding:15px 18px;border-radius:5px;font-size:13px;opacity:0;translate:0 12px;transition:opacity .3s,translate .3s}
.portfolio-open svg{width:19px;height:19px;flex-shrink:0}
.portfolio-card:is(:hover,:focus-visible) .portfolio-open{opacity:1;translate:0}
.motion-enabled .portfolio-card:is(:hover,:focus-visible) .portfolio-media img{scale:1.025}
.portfolio-caption{padding-top:22px}
.portfolio-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.portfolio-platform{font:700 16px/1 Arial;color:var(--blue)}
.portfolio-caption h3{font:700 clamp(30px,3vw,46px)/1.15 Arial;letter-spacing:-1.5px;text-align:start;margin:16px 0 11px;overflow-wrap:anywhere}
html[dir=rtl] .portfolio-caption h3{text-align:right}
.portfolio-subtitle{font-size:19px;font-weight:700;line-height:1.5;margin:0 0 7px}
.portfolio-description{font-size:15px;line-height:1.8;color:var(--muted);margin:0;max-width:95%}
.portfolio-kind{display:inline-block;margin-top:14px;border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:11px;color:var(--muted)}
.portfolio-source{display:flex;align-items:center;justify-content:space-between;gap:36px;border-top:1px solid var(--line);margin-top:55px;padding-top:26px}
.portfolio-source p{max-width:610px;margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.portfolio-source a{display:flex;align-items:center;gap:15px;font-size:14px;white-space:nowrap}
.portfolio-source a svg{width:23px;height:23px}
.portfolio-inquiry{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;margin-top:30px;border-radius:6px;background:var(--lime)}
.portfolio-inquiry p{margin:0;font-size:22px;font-weight:700}
.portfolio-inquiry .inline-link{white-space:nowrap;font-size:15px}
.motion-enabled .portfolio-card.filter-enter{animation:portfolio-arrive .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--portfolio-order,0)*45ms)}
@keyframes portfolio-arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.portfolio-all{display:flex;width:fit-content;margin:45px auto 0}
.work-page .portfolio{padding-top:45px}
.work-page .portfolio h1{font-size:clamp(50px,6vw,88px);line-height:1.2;letter-spacing:-2.5px;margin:0}
.work-page .portfolio h1 em{font-style:normal;color:var(--blue)}
.work-page .portfolio .section-description{max-width:360px}
.work-page .portfolio .section-head{gap:40px;align-items:center;margin-bottom:65px}
.work-page #navigation a[aria-current=page]{color:var(--blue)}
.work-breadcrumb{display:flex;align-items:center;gap:13px;padding-top:30px;color:var(--muted);font-size:13px}
.work-breadcrumb>a{color:var(--blue)}
.work-edition{margin-inline-start:auto;font:9px/1.5 Arial;letter-spacing:.16em}
.work-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.45}
.work-backdrop i{position:absolute;width:110vw;height:75vw;inset-inline-start:-30vw;top:15vh;border:1px solid #0069e51a;border-radius:50%;rotate:-25deg;box-shadow:0 0 0 24px #0069e506,0 0 0 48px #0069e506,0 0 0 72px #0069e506,0 0 0 96px #0069e506}
.work-backdrop i:nth-child(2){inset-inline-start:35vw;top:-20vh;width:70vw;height:90vw;rotate:30deg}
.work-backdrop i:nth-child(3){width:45vw;height:45vw;inset-inline-start:65vw;top:60vh;border-color:#0069e512}
.motion-enabled .work-backdrop i{animation:work-orbit 45s linear infinite}
.motion-enabled .work-backdrop i:nth-child(2){animation-duration:65s;animation-direction:reverse}
.page-away .work-backdrop i{animation-play-state:paused}
@keyframes work-orbit{to{rotate:335deg}}
@media(max-width:760px){.work-page .portfolio{padding-top:35px}.work-page .portfolio h1{font-size:43px;letter-spacing:-1.2px;line-height:1.2}.work-page .portfolio .section-head{margin-bottom:32px;gap:20px}.work-page .portfolio .section-description{max-width:none}.work-breadcrumb{font-size:12px;padding-top:22px}.work-edition{font-size:7px;letter-spacing:.08em}.portfolio-all{margin-top:30px}.work-backdrop i{height:150vw;width:160vw;top:40vh}.work-page .experience-dock{inset-inline-start:12px;bottom:12px}}
@media(max-width:370px){.work-page .portfolio h1{font-size:37px}.work-edition{display:none}}
@media(max-width:1100px){.portfolio-grid{column-gap:28px;row-gap:40px}.portfolio-toolbar{align-items:start;gap:18px}.portfolio-count{padding-top:12px}.portfolio-filters button{font-size:12px;padding:11px 14px;gap:10px}.portfolio-card:nth-child(even){margin-top:55px}.portfolio-source{gap:25px}}
@media(max-width:760px){.portfolio-toolbar{flex-direction:column;gap:15px;margin-bottom:28px;padding-top:20px}.portfolio-filters{gap:8px;width:100%}.portfolio-filters button{font-size:12px;padding:11px 14px;justify-content:space-between;flex:1 1 calc(50% - 8px);gap:8px}.portfolio-count{padding-top:0;font-size:12px}.portfolio-grid{grid-template-columns:1fr;gap:40px}.portfolio-card:nth-child(even){margin-top:0}.portfolio-card .portfolio-media{border-radius:6px}.portfolio-caption{padding-top:17px}.portfolio-caption h3{font-size:33px;margin-block:12px 8px}.portfolio-subtitle{font-size:18px}.portfolio-description{font-size:14px}.portfolio-card .work-arrow{height:37px;width:37px;inset-block-start:12px;inset-inline-start:12px}.portfolio-index{inset-block-start:12px;inset-inline-end:12px;width:28px;height:28px}.portfolio-source{flex-direction:column;align-items:start;gap:20px;margin-top:35px;padding-top:22px}.portfolio-inquiry{flex-direction:column;align-items:start;padding:24px;gap:12px}.portfolio-inquiry p{font-size:21px}.portfolio-open{display:none}}
.portfolio-card .website-media{aspect-ratio:2/1;background:#102235}
.website-media img{object-fit:cover;object-position:center top}
.portfolio-card[data-category=web] .portfolio-platform{font-size:11px;font-weight:400;overflow-wrap:anywhere;margin-inline-start:12px}
.portfolio-visit{display:flex;align-items:center;gap:12px;width:fit-content;margin-top:18px;font-size:14px;font-weight:700;color:var(--blue)}
.portfolio-visit svg{width:21px;height:21px}
@media(max-width:760px){.portfolio-filters button:first-child{flex-basis:100%}.portfolio-card[data-category=web] .portfolio-meta{font-size:11px}.portfolio-card[data-category=web] .portfolio-platform{font-size:9px}.portfolio-filters button[data-portfolio-filter=web]{line-height:1.5}}