/* The work has its own quiet, centered surface. Portrait atmosphere lives on the entrance. */
html:has(.portfolio-page),body.portfolio-page{background:#17140f}
.portfolio-page{--reading:rgba(244,241,234,.76);--rule:rgba(244,241,234,.17)}
.portfolio-page .nav,.portfolio-page .nav.is-scrolled{height:110px;padding:12px max(4vw,calc((100vw - 1280px)/2));background:#17140ff5;border-bottom:1px solid var(--rule);backdrop-filter:none;transition:background .25s}
.portfolio-page .nav__logo,.portfolio-page .nav.is-scrolled .nav__logo{width:88px;height:88px}
.portfolio-page :is(.work,.experience,.about,.sessions,.contact,.testimonials,.footer){width:calc(100% - 8vw);max-width:1200px;margin-inline:auto;padding:100px 0;background:transparent}
.portfolio-page #work{padding-top:178px;scroll-margin-top:0}
.portfolio-page #work>.section-head{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px 80px;margin-bottom:50px}
.portfolio-page #work>.section-head .section-title{font-size:clamp(64px,7.6vw,112px)}
.portfolio-page #work>.section-head .section-lead{font-size:16px;max-width:31ch;justify-self:end;padding-bottom:5px}
.portfolio-page #filters{gap:8px 30px;padding-bottom:18px;margin-bottom:18px}
.portfolio-page #filters .filter{font-size:12px}
.portfolio-page .gallery-meta{font-size:12px;margin-bottom:30px}
.portfolio-page .gallery-meta>p:last-child{max-width:none}
.portfolio-page .chapter-index{top:110px;padding:16px 0;background:#17140ffa;backdrop-filter:none;margin-bottom:52px}
.portfolio-page .chapter-index a{font-size:13px}.portfolio-page .chapter-index a>span:first-child{font-size:22px}
.portfolio-page #gallery{column-gap:48px;row-gap:90px}
.portfolio-page #gallery:not(.is-filtered) .plate-companion:not(.tile--wide){margin-top:130px}
.portfolio-page #gallery:not(.is-filtered) .plate-inset{padding:30px 0 0 45px}
.portfolio-page #gallery .portfolio-tile .tile__media img{opacity:1;filter:grayscale(1);transition:filter .6s ease}
.portfolio-page #gallery .portfolio-tile:focus-within .tile__media img{filter:none}
.portfolio-page .portfolio-caption__title{font-size:clamp(25px,2.6vw,37px)}
.portfolio-page .portfolio-caption__category,.portfolio-page .portfolio-session{font-size:12px}
.portfolio-page .gallery-chapter{margin-top:45px}.portfolio-page .gallery-chapter:first-child{margin-top:0}
.portfolio-page .gallery-chapter h2{font-size:clamp(42px,5vw,68px)}
.portfolio-page .experience,.portfolio-page .sessions,.portfolio-page .contact{border-top:1px solid var(--rule)}
.portfolio-page .experience>.section-head,.portfolio-page .sessions>.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 70px;align-items:end}
.portfolio-page :is(.experience,.sessions)>.section-head .kicker{grid-column:1/-1;margin:0}
.portfolio-page :is(.experience,.sessions)>.section-head .section-lead{margin:0;max-width:35ch;justify-self:end}
.portfolio-page .section-title{font-size:clamp(56px,6vw,88px)}
.portfolio-page .process{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:55px}
.portfolio-page .process__step{display:block;padding:28px 0;background:transparent}
.portfolio-page .step-number{display:block;font-size:36px;margin-bottom:26px}
.portfolio-page .process h3{font-size:32px;margin-bottom:20px}
.portfolio-page .process__label{display:block;margin-top:24px}
.portfolio-page .about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:90px;align-items:center}
.portfolio-page .about__media{order:0}.portfolio-page .about__brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;border:0;padding:30px}.portfolio-page .about__brand img{width:min(70%,260px)}.portfolio-page .about__brand p{text-align:center}.portfolio-page .about__caption{text-align:center}
.portfolio-page .about .section-title,.portfolio-page .contact .section-title{font-size:clamp(50px,5vw,78px)}
.portfolio-page .session-list,.portfolio-page .contact__form{background:transparent}
.portfolio-page .session-row{grid-template-columns:35px minmax(0,1fr) minmax(0,1fr) 95px 24px;gap:24px;align-items:center}
.portfolio-page .session-row h3{font-size:clamp(28px,3vw,40px)}
.portfolio-page .session-row p,.portfolio-page .session-price{grid-column:auto;grid-row:auto;margin:0}.portfolio-page .session-row>span:last-child{grid-column:5;grid-row:1}.portfolio-page .session-price{font-size:12px;text-align:right}
.portfolio-page .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px}
.portfolio-page .contact .preview-note{margin-top:24px}
.portfolio-page .footer{padding-top:65px;padding-bottom:45px}.portfolio-page .footer__invitation{font-size:clamp(64px,8vw,116px)}
.portfolio-page .footer__location{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;margin-bottom:28px}
.portfolio-page .grain{opacity:.035}
.portfolio-page :is(.section-head,.about__text,.contact__intro,.process__step,.session-row,.footer__invitation,.portfolio-caption){text-shadow:none}
.portfolio-page .portrait-viewer .lighting-look{display:none}
@media(hover:hover) and (pointer:fine){.portfolio-page #gallery .portfolio-tile:hover .tile__media img{filter:none}}
@media(max-width:900px),(max-aspect-ratio:3/4){
 .portfolio-page .nav,.portfolio-page .nav.is-scrolled{height:84px;padding:10px 4vw;gap:16px}.portfolio-page .nav__logo,.portfolio-page .nav.is-scrolled .nav__logo{width:128px;height:54px}
 .portfolio-page :is(.work,.experience,.about,.sessions,.contact,.testimonials,.footer){width:calc(100% - 8vw);padding-block:72px}
 .portfolio-page #work{padding-top:132px}.portfolio-page #work>.section-head{gap:20px 36px}.portfolio-page #work>.section-head .section-title{font-size:clamp(54px,9vw,85px)}
 .portfolio-page .chapter-index{top:84px}.portfolio-page #gallery{column-gap:24px;row-gap:65px}
 .portfolio-page .process{gap:25px}.portfolio-page .process h3{font-size:26px}
 .portfolio-page .about{gap:40px}.portfolio-page .contact{gap:40px}.portfolio-page .session-row{grid-template-columns:25px minmax(0,1fr) 90px 24px;gap:12px 20px}.portfolio-page .session-row h3{grid-column:2}.portfolio-page .session-row p{grid-column:2;grid-row:2}.portfolio-page .session-price{grid-column:3;grid-row:1/3}.portfolio-page .session-row>span:last-child{grid-column:4;grid-row:1/3}
 .portfolio-page .footer{padding-bottom:110px}
}
@media(max-width:600px){
 .portfolio-page :is(.work,.experience,.about,.sessions,.contact,.testimonials,.footer){width:calc(100% - 40px);padding-block:64px}
 .portfolio-page #work{padding-top:124px}.portfolio-page #work>.section-head{display:block;margin-bottom:30px}.portfolio-page #work>.section-head .section-title{font-size:clamp(48px,12vw,72px)}.portfolio-page #work>.section-head .section-lead{font-size:15px;margin-top:24px;padding:0}
 .portfolio-page #filters{gap:24px;padding-bottom:12px}.portfolio-page .chapter-index{gap:12px;margin-bottom:32px}.portfolio-page .chapter-index a{font-size:11px}
 .portfolio-page #gallery{row-gap:45px}.portfolio-page #gallery:not(.is-filtered) .plate-companion:not(.tile--wide){margin:0}.portfolio-page #gallery:not(.is-filtered) .plate-inset{padding:0 12px}
 .portfolio-page .portfolio-caption__title{font-size:28px}.portfolio-page .portfolio-caption__category{font-size:10px}
 .portfolio-page .experience>.section-head,.portfolio-page .sessions>.section-head{display:block}.portfolio-page :is(.experience,.sessions)>.section-head .kicker{margin-bottom:20px}.portfolio-page :is(.experience,.sessions)>.section-head .section-lead{margin-top:24px}
 .portfolio-page .process{grid-template-columns:1fr;gap:0;margin-top:35px}.portfolio-page .process__step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px 20px}.portfolio-page .step-number{grid-row:1/4;margin:0;font-size:30px}.portfolio-page .process h3{font-size:30px;margin:0}.portfolio-page .process__label{margin-top:8px}
 .portfolio-page .about{display:flex;flex-direction:column;gap:38px}.portfolio-page .about__media{order:2}.portfolio-page .about__brand{flex-direction:row;padding:20px 0}.portfolio-page .about__brand img{width:95px}.portfolio-page .about__brand p{text-align:left}
 .portfolio-page .contact{grid-template-columns:1fr;gap:40px}.portfolio-page .section-title,.portfolio-page .about .section-title,.portfolio-page .contact .section-title{font-size:clamp(46px,10vw,64px)}
 .portfolio-page .session-row{grid-template-columns:20px minmax(0,1fr) 20px;gap:10px 15px}.portfolio-page .session-row h3{font-size:30px}.portfolio-page .session-row p{grid-column:2}.portfolio-page .session-price{grid-column:2;grid-row:3;text-align:left}.portfolio-page .session-row>span:last-child{grid-column:3;grid-row:1}
 .portfolio-page .footer{padding-bottom:110px}.portfolio-page .footer__invitation{font-size:clamp(50px,11vw,70px)}
}
@media(prefers-reduced-motion:reduce){.portfolio-page #gallery .portfolio-tile .tile__media img{transition:none}}
