/* A dark canvas, with the work doing the talking. */
html:has(.portfolio-page){background:#171717;scrollbar-color:#777 #171717}
.portfolio-page{--portfolio-gutter:clamp(24px,5vw,100px);--portfolio-width:80%;--portfolio-top:164px;background:#171717;color:#f7f7f7;overflow-anchor:none}
.portfolio-page .site-header{background:#171717;color:#f7f7f7;box-shadow:none}
.portfolio-page .logo img{filter:brightness(0) invert(1)}
.portfolio-page .site-header a[aria-current=page]{color:#78a4ff}
.portfolio-page .nav-contact{background:#f7f7f7;color:#171717}
.portfolio-page .nav-contact:hover{background:#0054f9;color:#fff}
.portfolio-page .site-header #mobile-nav{background:#171717;border-bottom:1px solid #ffffff22}
.portfolio-page .menu-toggle>span{background:#fff}
.portfolio-page .skip-link{color:#171717}
.portfolio-page :is(a,button):focus-visible{outline-color:#8ab1ff}
.portfolio-wrap{margin-inline:var(--portfolio-gutter)}
.portfolio-intro{padding-top:178px;padding-bottom:76px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.portfolio-eyebrow{font-size:11px;color:#aaa;line-height:1.5;margin-bottom:24px}
.portfolio-intro h1{font-size:clamp(86px,10.7vw,174px);font-weight:400;letter-spacing:-.065em;line-height:.94}
.portfolio-intro h1>span{color:#0054f9}
.portfolio-intro-copy{font-size:14px;line-height:1.7;color:#b7b7b7;padding-bottom:7px}
.portfolio-collection{position:relative;padding-bottom:64px}
.portfolio-toolbar{position:sticky;top:81px;z-index:50;background:#171717;padding:14px 0 18px}
.portfolio-toolbar-inner{width:var(--portfolio-width);max-width:1640px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.portfolio-browse{display:flex;align-items:center;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.portfolio-total{color:#8d8d8d;margin-left:6px}
.portfolio-hint{margin-left:32px;color:#999}
.portfolio-view{display:flex;border:1px solid #ffffff27;padding:4px;gap:3px}
.portfolio-view[hidden]{display:none}
.portfolio-view button{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#aaa;font-size:11px;transition:background .2s,color .2s}
.portfolio-view button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.3;fill:none}
.portfolio-view button[aria-pressed=true]{background:#f5f5f5;color:#171717}
.portfolio-view button:hover:not([aria-pressed=true]){color:white;background:#ffffff0c}
.project-list{width:var(--portfolio-width);max-width:1640px;margin:10px auto 0;isolation:isolate}
.project-card{position:sticky;top:var(--portfolio-top);margin-bottom:84px;z-index:calc(1 + var(--card-order));scroll-margin-top:var(--portfolio-top)}
.project-card:last-child{margin-bottom:0}
.project-surface{height:min(67vw,calc(100svh - 205px),850px);min-height:360px;background:#242424;border:1px solid #ffffff16;display:flex;flex-direction:column;transform-origin:50% 0;box-shadow:0 -15px 55px #00000030;will-change:transform;overflow:hidden}
.project-visual{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;padding:clamp(25px,3.5vw,65px) clamp(28px,4.5vw,80px) 20px}
.project-visual img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;user-select:none;filter:drop-shadow(0 20px 26px #00000025)}
.project-card:first-child .project-visual img{clip-path:inset(4% 0 0)}
.project-visual.object{padding-block:36px 20px}
.project-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:24px 34px 28px;flex-shrink:0}
.project-caption h2{font-size:clamp(23px,2.2vw,36px);font-weight:400;line-height:1.15;letter-spacing:-.03em}
.project-caption p{font-size:11px;color:#aaa;line-height:1.5;text-align:right}
.project-award{background:#a8ced1;color:#17343a}
.project-award .project-caption p{color:#32565c}
.project-award .project-visual img{filter:none}
.portfolio-screen-reader{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.portfolio-page[data-view=grid] .project-list{width:auto;max-width:none;margin-inline:var(--portfolio-gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 26px;align-items:start}
.portfolio-page[data-view=grid] .project-card{position:relative;top:auto;margin:0;min-width:0}
.portfolio-page[data-view=grid] .project-surface{height:auto;min-height:0;aspect-ratio:.98;box-shadow:none;transform:none!important;will-change:auto}
.portfolio-page[data-view=grid] .project-visual{padding:24px 22px 12px}
.portfolio-page[data-view=grid] .project-caption{display:block;padding:18px 20px 22px}
.portfolio-page[data-view=grid] .project-caption h2{font-size:22px}
.portfolio-page[data-view=grid] .project-caption p{font-size:10px;text-align:left;margin-top:8px}
.portfolio-page[data-view=grid] .portfolio-hint{display:none}
.portfolio-outro{padding:130px 0 155px;display:flex;justify-content:space-between;align-items:center;gap:80px}
.portfolio-mark{width:clamp(100px,16vw,250px);height:auto;color:#0054f9;flex-shrink:0}
.portfolio-outro>div{width:60%}
.portfolio-outro h2{font-size:clamp(48px,5.8vw,94px);font-weight:400;letter-spacing:-.055em;line-height:1.04}
.portfolio-outro .button{margin-top:38px;background:#f7f7f7;color:#171717}
.portfolio-outro .button:hover{background:#0054f9;color:#fff}
.portfolio-page .studio-footer{background:#171717;color:#f7f7f7}
.portfolio-page .final-invitation{background:#171717;margin-top:65px}
.portfolio-page .studio-footer::before{border-color:#ffffff22}
.portfolio-page .footer-brand img{filter:brightness(0) invert(1)}
.portfolio-page :is(.footer-brand>p,.footer-column h2,.footer-contact address,.footer-contact>p,.studio-footer-meta){color:#aaa}
.portfolio-page :is(.studio-footer-meta,.footer-contact){border-color:#ffffff22}
.portfolio-page .studio-footer a:hover{color:#8ab1ff}
@media(min-width:851px) and (max-height:690px){.portfolio-page{--portfolio-top:151px}.portfolio-toolbar{padding-block:8px 11px}.portfolio-view button{padding-block:7px}.project-surface{min-height:280px;height:calc(100svh - 180px)}.project-visual{padding-top:20px}.project-caption{padding-block:15px 20px}}
@media(max-width:850px){.portfolio-page{--portfolio-width:88%;--portfolio-top:153px}.portfolio-intro{padding-top:155px;padding-bottom:55px}.portfolio-intro-copy{font-size:12px}.portfolio-toolbar{top:74px}.project-surface{height:min(76vw,calc(100svh - 190px));min-height:330px}.project-caption{padding:22px 25px}.project-caption h2{font-size:25px}.portfolio-page[data-view=grid] .project-list{gap:16px}.portfolio-page[data-view=grid] .project-caption{padding:15px}.portfolio-page[data-view=grid] .project-caption h2{font-size:18px}.portfolio-page[data-view=grid] .project-visual{padding:18px 16px 8px}.portfolio-outro{gap:50px;padding-block:100px}}
@media(max-width:650px){.portfolio-page{--portfolio-width:calc(100% - 36px);--portfolio-top:142px}.portfolio-intro{padding-top:140px;padding-bottom:40px;display:block}.portfolio-intro h1{font-size:clamp(76px,18vw,116px)}.portfolio-eyebrow{font-size:10px;margin-bottom:20px}.portfolio-intro-copy{font-size:13px;margin-top:25px}.portfolio-toolbar{top:68px;padding-block:10px 14px}.portfolio-view button{padding:9px 12px;gap:7px}.portfolio-view button svg{width:15px;height:15px}.portfolio-browse{font-size:10px}.portfolio-hint{margin-left:14px;font-size:9px}.project-list{margin-top:8px}.project-card{margin-bottom:54px}.project-surface{height:min(125vw,calc(100svh - 175px));min-height:280px}.project-visual,.project-visual.object{padding:25px 18px 15px}.project-caption{display:block;padding:20px 22px 24px}.project-caption h2{font-size:24px}.project-caption p{text-align:left;margin-top:8px;font-size:10px}.portfolio-page[data-view=grid] .project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.portfolio-page[data-view=grid] .project-surface{aspect-ratio:.76}.portfolio-page[data-view=grid] .project-visual{padding:18px 12px 8px}.portfolio-page[data-view=grid] .project-caption{padding:14px 12px 18px}.portfolio-page[data-view=grid] .project-caption h2{font-size:17px}.portfolio-page[data-view=grid] .project-caption p{font-size:9px;margin-top:7px}.portfolio-outro{padding:60px 6px 85px;display:block}.portfolio-mark{width:76px;margin-bottom:40px}.portfolio-outro>div{width:100%}.portfolio-outro h2{font-size:clamp(44px,11vw,66px)}.portfolio-outro .button{font-size:12px;gap:24px;margin-top:30px}}
@media(prefers-reduced-motion:reduce){.project-card{position:relative;top:auto}.project-surface{transform:none!important;will-change:auto}.portfolio-mark{transform:none!important}}