.portfolio{--portfolio-card-width:min(32vw,34rem);padding:1.5rem 0;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{background:var(--bw-panel);height:clamp(18rem,100svh - 350px,42rem);position:relative;overflow:hidden}.portfolio-image picture,.portfolio-image img{width:100%;height:100%;display:block}.portfolio-image img{object-fit:cover;filter:grayscale();-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-hint{color:var(--bw-muted);margin-right:auto}.portfolio-position{gap:1rem;display:flex}.portfolio-position>span:last-child{color:var(--bw-muted)}.portfolio-arrows{gap:.5rem;display:flex}.portfolio-arrows button{border:1px solid var(--bw-line);background:0 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-hint{font-size:.5625rem}.portfolio-hint span{display:none}.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:.5;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}}