.portfolio{--portfolio-image-height:max(18rem,calc(100svh - 370px));--portfolio-card-width:min(40vw,max(min(32vw,34rem),calc(var(--portfolio-image-height) * .81)));--portfolio-overscan:1.06;padding:1.5rem 0 1rem;overflow:hidden}.portfolio-heading{margin:0 var(--bw-gutter) 1.25rem;justify-content:space-between;align-items:baseline;gap:1.5rem;display:flex}.portfolio-heading h1{font:400 var(--bw-type-label)/1.6 var(--bw-mono);letter-spacing:.035em;text-transform:uppercase}.portfolio-heading h1 span{color:var(--bw-muted);margin-left:.5rem}.portfolio-heading p{color:var(--bw-muted)}.portfolio-viewport{padding-top:1rem;position:relative}.portfolio-centre{background:var(--bw-marker);clip-path:polygon(0 0,100% 0,50% 100%);width:6px;height:8px;position:absolute;top:0;left:50%;transform:translate(-50%)}.portfolio-track{gap:var(--bw-column-gap);padding:0 calc((100% - var(--portfolio-card-width))/2) 1rem;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;touch-action:pan-x pan-y pinch-zoom;display:flex;overflow-x:auto}.portfolio-track::-webkit-scrollbar{display:none}.portfolio-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}.portfolio-track.is-moving{scroll-snap-type:none}.portfolio-track:focus-visible{outline:1px solid var(--bw-marker);outline-offset:-2px}.portfolio-card{flex:0 0 var(--portfolio-card-width);scroll-snap-align:center;scroll-snap-stop:normal;min-width:0}.portfolio-link{cursor:inherit;-webkit-user-drag:none;text-decoration:none;display:block}.portfolio-link:focus-visible{outline-offset:6px}.portfolio-image{height:var(--portfolio-image-height);background:var(--bw-panel);position:relative;overflow:hidden}.portfolio-image picture,.portfolio-image img{width:100%;height:100%;display:block}.portfolio-image img{object-fit:cover;-webkit-user-drag:none}.portfolio-open{color:#f5f5f5;opacity:0;background:#0c0c0ccc;place-items:center;width:44px;height:44px;transition:opacity .16s;display:grid;position:absolute;bottom:1rem;right:1rem}.portfolio-link:hover .portfolio-open,.portfolio-link:focus-visible .portfolio-open{opacity:1}.portfolio-caption{align-items:baseline;gap:1.5rem;padding-top:1.25rem;display:flex}.portfolio-number{color:var(--bw-muted)}.portfolio-caption>div{flex:1;min-width:0}.portfolio-title-line{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.portfolio-caption h2{font:500 var(--bw-type-subheading)/1.08 var(--bw-display);letter-spacing:-.025em;margin:0}.portfolio-caption p{color:var(--bw-muted);margin:.625rem 0 0}.portfolio-demo{color:var(--bw-muted)}.portfolio-controls{margin:1.5rem var(--bw-gutter) 0;border-top:1px solid var(--bw-line);align-items:center;gap:1.5rem;padding-top:1rem;display:flex}.portfolio-position{gap:1rem;display:flex}.portfolio-position>span:last-child{color:var(--bw-muted)}.portfolio-arrows{gap:.5rem;display:flex}.portfolio-arrows button{background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid}.portfolio-arrows button:disabled{opacity:.3;cursor:default}.portfolio-sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=700px){.portfolio{--portfolio-card-width:76vw;padding-top:1.75rem}.portfolio-heading{align-items:start;margin-bottom:1.5rem}.portfolio-heading p{text-align:right;max-width:13ch;font-size:.5625rem}.portfolio-image{height:clamp(16rem,46svh,32rem)}.portfolio-caption{gap:1rem}.portfolio-caption h2{font-size:var(--bw-type-subheading)}.portfolio-caption p,.portfolio-demo{font-size:.5625rem}.portfolio-controls{gap:1rem;margin-top:1rem}.portfolio-position{gap:.5rem}.portfolio-open{opacity:1;width:32px;height:32px;bottom:.75rem;right:.75rem}}@media (prefers-reduced-motion:reduce){.portfolio *{transition:none!important}}.portfolio-card .portfolio-image{opacity:.85;transition:opacity .32s}.portfolio-card.is-selected .portfolio-image,.portfolio-card:focus-within .portfolio-image{opacity:1}.portfolio-card:not(.is-selected) .portfolio-caption{opacity:.5}.portfolio-footer{margin:0 var(--bw-gutter);border-top:1px solid var(--bw-line);padding:1rem 0 max(1rem,env(safe-area-inset-bottom));color:var(--bw-muted);justify-content:space-between;align-items:center;gap:1rem;display:flex}.portfolio-footer nav{gap:var(--bw-column-gap);display:flex}.portfolio-footer a{min-height:44px;color:var(--bw-fg);align-items:center;gap:.5rem;display:inline-flex}@media (width<=700px){.portfolio-footer{flex-direction:column;align-items:flex-start;gap:.25rem;padding-top:1.25rem}.portfolio-footer nav{justify-content:space-between;width:100%}.portfolio-heading p{max-width:none;font-size:.5625rem}.portfolio-heading{gap:1rem}}.portfolio-views{justify-content:flex-start;gap:var(--bw-control-gap);margin:0 auto 0 0;display:flex}.portfolio-views button{align-items:center;gap:var(--bw-control-gap);min-height:44px;padding:var(--bw-control-padding-y) var(--bw-control-padding-x);color:var(--bw-muted);background:0 0;border:0;display:inline-flex}.portfolio-views button[aria-pressed=true]{color:var(--bw-fg)}.portfolio-views button:focus-visible,.portfolio-arrows button:focus-visible{outline:2px solid var(--bw-fg);outline-offset:4px}.portfolio[data-layout=grid] .portfolio-track{gap:var(--bw-column-gap) var(--bw-gallery-gap);padding:0 var(--bw-gutter) 1rem;scroll-snap-type:none;cursor:auto;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;overflow:visible}.portfolio[data-layout=grid] .portfolio-card[aria-hidden=true]{display:none}.portfolio[data-layout=grid] .portfolio-image{aspect-ratio:3/2;opacity:1;height:auto}.portfolio[data-layout=grid] .portfolio-caption{opacity:1}.portfolio[data-layout=grid] .portfolio-centre,.portfolio[data-layout=grid] .portfolio-arrows,.portfolio[data-layout=grid] .portfolio-position{display:none}.portfolio[data-layout=grid] .portfolio-link{cursor:pointer}.portfolio.is-layout-changing .portfolio-image{transition:none}@media (width>=701px) and (width<=1100px){.portfolio[data-layout=grid] .portfolio-track{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.portfolio[data-layout=grid] .portfolio-track{grid-template-columns:1fr}}.portfolio.is-layout-changing .portfolio-card[aria-hidden=true]{visibility:hidden}.portfolio-position{white-space:nowrap}@media (width<=700px){.portfolio-controls{flex-wrap:wrap;gap:.5rem}.portfolio-views{gap:.25rem}.portfolio-views button{padding-inline:.5rem}.portfolio-position{gap:.25rem}}@media (width<=380px){.portfolio-views{flex-basis:100%}.portfolio-position{margin-left:auto}}.portfolio-views button:hover,.portfolio-arrows button:hover{color:var(--bw-fg);background:var(--bw-panel)}.portfolio[data-physics=true][data-layout=slider] .portfolio-track{touch-action:pan-y pinch-zoom}.portfolio-mesh{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.portfolio-track{z-index:1;position:relative}.portfolio-centre{z-index:2}.portfolio-image.is-mesh-painted{background:0 0}.portfolio-image.is-mesh-painted picture{opacity:0}.portfolio[data-layout=slider] .portfolio-image img{object-position:var(--slider-focus,50% 50%)}.portfolio-description{margin:0 var(--bw-gutter) var(--bw-list-gap);max-width:var(--bw-measure);font-size:var(--bw-type-body);line-height:var(--bw-leading-body);color:var(--bw-muted)}