.portfolio-page{--portfolio-ease:cubic-bezier(.16,1,.3,1)}.portfolio-intro{grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem;padding-top:clamp(3rem,5vw,5rem);padding-bottom:clamp(3rem,5vw,5rem);display:grid}.portfolio-intro h1{letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:anywhere;grid-column:1/9;max-width:none;margin:0;font-size:clamp(3.5rem,9.8vw,9.5rem);font-weight:450;line-height:.92}.portfolio-intro h1>span{color:var(--gold)}.portfolio-intro>p{grid-column:9/-1;align-self:end;max-width:31ch;margin:0;font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.45}.portfolio-page .portfolio-controls{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin:0 0 clamp(4rem,8vw,8rem);display:flex}.portfolio-filters{flex-direction:column;align-items:flex-start;gap:0;display:flex}.portfolio-page .filter{color:var(--muted);text-transform:uppercase;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;gap:2rem;min-height:44px;padding:.4rem 0;font-size:1rem;font-weight:450;line-height:1.2;transition:color .3s;display:inline-flex}.portfolio-page .filter[aria-pressed=true],.portfolio-page .filter:hover{color:var(--ink);background:0 0;border:0}.portfolio-page .filter span{flex:none;width:10px;height:10px;position:relative}.portfolio-page .filter span:before,.portfolio-page .filter span:after{content:"";width:10px;height:1px;transition:transform .4s var(--portfolio-ease);background:currentColor;position:absolute;top:4px;left:0}.portfolio-page .filter span:after{transform:rotate(90deg)}.portfolio-page .filter[aria-pressed=true] span:after{transform:rotate(0)}.portfolio-page .filter[aria-pressed=true] span{color:var(--gold)}.portfolio-view-controls{align-items:center;gap:2rem;display:flex}.portfolio-page .gallery-count{width:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;font-size:.9rem}.portfolio-view-toggle{gap:6px;display:flex}.portfolio-view-toggle button{background:var(--soft);width:44px;height:44px;color:var(--muted);border:0;border-radius:0;justify-content:center;align-items:center;padding:0;transition:color .3s,background .3s;display:flex}.portfolio-view-toggle button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.portfolio-view-toggle button:hover{color:var(--gold)}.portfolio-view-toggle button[aria-pressed=true]:hover{color:var(--bg);background:var(--gold)}.portfolio-page .gallery{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:clamp(5rem,10vw,10rem) clamp(1rem,2vw,2rem);display:grid}.portfolio-page .gallery-item{grid-column:1/span 6;min-width:0;margin:0;padding:0}.portfolio-page .gallery-item.is-portrait{grid-column:2/span 4}.portfolio-page .gallery-item[data-slot="1"],.portfolio-page .gallery-item[data-slot="3"]{grid-column:7/span 6;margin-top:clamp(5rem,13vw,13rem)}.portfolio-page .gallery-item.is-portrait[data-slot="1"],.portfolio-page .gallery-item.is-portrait[data-slot="3"]{grid-column:8/span 4}.portfolio-page .gallery-item[data-slot="2"]{grid-column:1/span 6}.portfolio-page .gallery-item.is-portrait[data-slot="2"]{grid-column:1/span 4}.portfolio-page .gallery-item>a{display:block;position:relative;overflow:visible}.portfolio-photo-frame{position:relative;overflow:hidden}.portfolio-photo-overlay{z-index:2;color:var(--ink);pointer-events:none;justify-content:space-between;align-items:end;gap:1.5rem;padding:clamp(1rem,2.2vw,2rem);display:none;position:absolute;inset:auto 0 0}.portfolio-photo-overlay strong{font-size:clamp(1.1rem,1.7vw,1.75rem);font-weight:500;line-height:1.12;display:block}.portfolio-photo-overlay>span>span{margin-top:.5rem;font-size:.85rem;line-height:1.4;display:block}.portfolio-photo-overlay>svg{flex:none;width:25px;height:25px}.portfolio-page .gallery-item img{aspect-ratio:auto;object-fit:contain;width:100%;height:auto;transition:scale .6s var(--portfolio-ease);display:block;scale:1}.portfolio-page .gallery-item>a:hover img{transform:none}.portfolio-photo-frame:after{content:"";background:var(--bg);opacity:0;pointer-events:none;transition:opacity .6s var(--portfolio-ease);position:absolute;inset:0}.portfolio-page .gallery-item>a:hover .portfolio-photo-frame:after{opacity:.08}.portfolio-page .gallery-item figcaption{color:var(--ink);align-items:center;gap:.8rem;padding-top:1rem;font-size:.9rem;line-height:1.3;display:flex}.portfolio-caption-category{color:var(--muted);margin-left:auto;font-size:.8rem}.portfolio-caption-arrow{width:18px;transition:transform .5s var(--portfolio-ease);display:flex;overflow:hidden}.portfolio-caption-arrow svg{width:18px;height:18px}.portfolio-page .gallery-item:has(a:hover) .portfolio-caption-arrow{transform:translate(3px,-3px)}.portfolio-row-copy{display:none}.portfolio-page .gallery[data-view=list]{display:block}.portfolio-page .gallery[data-view=list] .gallery-item{border-top:1px solid var(--line);margin:0;padding:0}.portfolio-page .gallery[data-view=list] .gallery-item:last-child{border-bottom:1px solid var(--line)}.portfolio-page .gallery[data-view=list] .portfolio-photo-frame,.portfolio-page .gallery[data-view=list] figcaption{display:none}.portfolio-page .gallery[data-view=list] .gallery-item>a{padding:2.2rem 0;display:block;overflow:visible}.portfolio-page .gallery[data-view=list] .portfolio-row-copy{grid-template-columns:minmax(0,1fr) minmax(7rem,.35fr) 24px;align-items:center;gap:2rem;display:grid}.portfolio-row-title{text-transform:uppercase;transform-origin:0;transition:transform .6s var(--portfolio-ease),color .3s;font-size:clamp(1.5rem,2.8vw,2.7rem);line-height:1.05}.portfolio-row-category{text-transform:uppercase;color:var(--muted);transition:transform .6s var(--portfolio-ease);font-size:.9rem}.portfolio-row-action{transition:transform .5s var(--portfolio-ease);display:flex}.portfolio-page .gallery[data-view=list] a:hover .portfolio-row-title,.portfolio-page .gallery[data-view=list] a:focus-visible .portfolio-row-title{color:var(--gold);transform:translate(14px)scale(1.06)}.portfolio-page .gallery[data-view=list] a:is(:hover,:focus-visible) .portfolio-row-category{transform:translate(16px)}.portfolio-page .gallery[data-view=list] a:hover .portfolio-row-action{transform:translate(-8px)}.portfolio-preview{z-index:80;pointer-events:none;opacity:0;visibility:hidden;clip-path:inset(50% 0);width:clamp(180px,24vw,360px);height:clamp(200px,30vw,400px);transition:clip-path .55s var(--portfolio-ease),opacity .3s,visibility .55s;justify-content:center;align-items:center;display:flex;position:fixed;inset:0 auto auto 0}.portfolio-preview.is-visible{opacity:1;visibility:visible;clip-path:inset(0)}.portfolio-preview img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;transition:scale .7s var(--portfolio-ease);scale:1.16;box-shadow:0 20px 60px #0005}.portfolio-preview.is-visible img{scale:1}.portfolio-noscript{margin-top:2rem}@media (width<=1000px){.portfolio-intro>p{grid-column:9/-1}.portfolio-page .gallery-item[data-slot="1"],.portfolio-page .gallery-item[data-slot="3"]{margin-top:7rem}.portfolio-caption-category{display:none}}@media (width<=760px){.portfolio-intro{grid-template-columns:minmax(0,1fr);gap:0;padding-top:2.5rem;padding-bottom:2.5rem}.portfolio-intro h1{letter-spacing:-.035em;grid-column:1;font-size:clamp(2.8rem,11.6vw,5.5rem);line-height:1}.portfolio-intro>p{grid-column:1;max-width:30ch;margin-top:2rem;font-size:1.05rem}.portfolio-page .portfolio-controls{align-items:flex-end;gap:1rem;margin-bottom:3.5rem}.portfolio-page .filter{gap:1.3rem;font-size:.9rem}.portfolio-view-controls{flex-direction:column;align-items:flex-end;gap:1rem}.portfolio-page .gallery-count{font-size:.8rem}.portfolio-view-toggle button{width:44px;height:44px}.portfolio-page .gallery{flex-direction:column;gap:4.5rem;display:flex}.portfolio-page .gallery-item,.portfolio-page .gallery-item.is-portrait,.portfolio-page .gallery-item[data-slot="1"],.portfolio-page .gallery-item[data-slot="2"],.portfolio-page .gallery-item[data-slot="3"]{align-self:flex-start;width:92%;margin:0;padding:0}.portfolio-page .gallery-item.is-portrait{width:82%}.portfolio-page .gallery-item[data-slot="1"],.portfolio-page .gallery-item[data-slot="3"]{align-self:flex-end}.portfolio-page .gallery-item figcaption{justify-content:space-between;gap:.8rem;padding-top:.8rem;font-size:.9rem}.portfolio-caption-category{display:none}.portfolio-caption-arrow{flex:none;width:18px}.portfolio-page .gallery[data-view=list] .gallery-item{width:100%}.portfolio-page .gallery[data-view=list] .gallery-item>a{padding:1.6rem 0}.portfolio-page .gallery[data-view=list] .portfolio-row-copy{grid-template-columns:minmax(0,1fr) 20px;gap:.6rem 1rem}.portfolio-row-title{grid-column:1;font-size:clamp(1.4rem,5.6vw,2rem);line-height:1.15}.portfolio-row-category{grid-area:2/1;font-size:.8rem}.portfolio-row-action{grid-area:1/2/3}}.portfolio-photo-overlay strong,.gallery-item figcaption>span:first-child,.portfolio-row-title{display:none}.portfolio-page .gallery[data-view=list] .portfolio-row-copy{grid-template-columns:minmax(0,1fr) 24px}.portfolio-page .gallery[data-view=list] .portfolio-row-category{grid-area:1/1}.portfolio-page .gallery[data-view=list] .portfolio-row-action{grid-area:1/2}@media (hover:none){.portfolio-preview{display:none}}@media (width>=761px) and (hover:hover) and (pointer:fine){.portfolio-page .gallery-item>a:is(:hover,:focus-visible) img{scale:1.1}.portfolio-photo-frame:after{z-index:1;background:linear-gradient(#0000 45%,#000000a6)}.portfolio-page .gallery-item>a:is(:hover,:focus-visible) .portfolio-photo-frame:after{opacity:1}.portfolio-photo-overlay{transition:transform .6s var(--portfolio-ease);display:flex;transform:translateY(105%)}.portfolio-page .gallery-item>a:is(:hover,:focus-visible) .portfolio-photo-overlay{transform:translateY(0)}.portfolio-page .gallery[data-view=grid] .gallery-item figcaption{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}:where(html[data-motion=reduced]){& .portfolio-page *{transition:none!important}& .portfolio-preview{transition:none}& .portfolio-preview img{scale:1}& .portfolio-page .gallery-item img{scale:1!important}& .portfolio-page .gallery[data-view=list] a:is(:hover,:focus-visible) :is(.portfolio-row-title,.portfolio-row-category){transform:none}}@media (prefers-reduced-motion:reduce){:where(html:not([data-motion])){& .portfolio-page *{transition:none!important}& .portfolio-preview{transition:none}& .portfolio-preview img{scale:1}& .portfolio-page .gallery-item img{scale:1!important}& .portfolio-page .gallery[data-view=list] a:is(:hover,:focus-visible) :is(.portfolio-row-title,.portfolio-row-category){transform:none}}}
