/* Portfolio listing and detail layout, built on shared controls and site tokens. */
.portfolio-page{background:var(--color-night);color:var(--color-paper)}.portfolio-picture,.portfolio-picture img{display:block;width:100%}.portfolio-picture img{height:auto;object-fit:cover}.portfolio-list{padding-block:2rem 4rem}.portfolio-row{display:grid;gap:2rem;margin-bottom:0;padding-block:2rem}.portfolio-list>.portfolio-row:nth-of-type(odd){background:var(--color-night-soft)}.portfolio-copy{padding-inline:var(--gutter);gap:1.5rem;align-content:start}.portfolio-copy h2{font-size:var(--text-h3);max-width:12ch}.portfolio-copy>p{max-width:40ch}.project-location{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);line-height:1.4}.project-location .icon{color:var(--color-cyan);width:1.3rem;height:1.3rem;flex-shrink:0}.project-link{display:flex;align-items:center;gap:1.25rem;text-decoration:none;width:fit-content}.project-link>.button{flex-shrink:0}.project-link:hover .button{background:var(--color-cyan);color:var(--color-night)}.project-link .eyebrow{font-size:.7rem}.portfolio-cover{display:block;margin-inline:var(--gutter);overflow:hidden}.portfolio-cover img{aspect-ratio:3/2}.portfolio-page .nav [aria-current=page]{color:var(--color-cyan);text-decoration:underline;text-underline-offset:.75rem}
.project-detail{padding-block:2rem 3rem}.project-intro{display:grid;gap:1.5rem;margin-block:2rem}.project-intro h1{font-size:var(--text-h2)}.project-intro>.stack{gap:1.25rem}.project-description{max-width:70ch;line-height:1.5}.project-description::before{content:'';display:block;width:3rem;height:1px;background:var(--color-cyan);margin-bottom:1.25rem}.project-photo{display:block;width:100%;padding:0;background:transparent;border:0;cursor:zoom-in;overflow:hidden}.project-photo img{width:100%;transition:filter var(--duration)}.project-photo:hover img{filter:brightness(1.08)}.project-photo-hero{margin-bottom:1.5rem}.project-photo-hero img{aspect-ratio:3/2}.project-photo-grid{display:grid;gap:1.5rem}.project-photo-grid img{aspect-ratio:1.13;object-fit:cover}.project-photos+.project-back{margin-top:2rem}.project-lightbox{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;padding:clamp(1rem,2.5vw,2rem);background:var(--color-night);color:var(--color-paper);overflow:hidden}.project-lightbox[open]{display:flex;flex-direction:column}.project-lightbox::backdrop{background:#001524f2}.project-lightbox h2{font-size:var(--text-lead)}.project-lightbox .dialog-top{flex-shrink:0}.project-lightbox-image{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y}.project-lightbox-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain}.project-photo-controls{display:grid;grid-template-columns:auto minmax(3rem,1fr) auto auto;align-items:center;gap:clamp(.5rem,2vw,1rem);margin-top:1rem;flex-shrink:0}.project-photo-controls p{font-variant-numeric:tabular-nums;text-align:center}.project-lightbox .project-photo-controls .autoplay-toggle{position:static;right:auto;bottom:auto;z-index:auto}
@media(min-width:48rem){.portfolio-row{grid-template-columns:.7fr 1.4fr;gap:2rem}.portfolio-cover{margin:0}.portfolio-copy{padding-right:0}.project-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-intro{grid-template-columns:1.3fr 1fr;align-items:start}.project-intro>.project-location{border-left:1px solid var(--color-line);padding:1rem 1.5rem}.project-photo-hero img{aspect-ratio:2.6}}
@media(min-width:64rem){
.portfolio-page{--portfolio-unit:calc(100vw / 1693);--font-display:'Times New Roman',serif;--gutter:calc(65 * var(--portfolio-unit))}.portfolio-page .header{position:relative;padding-block:calc(30 * var(--portfolio-unit));min-height:calc(130 * var(--portfolio-unit));gap:1.25rem}.portfolio-page .header .asset-brand{width:calc(235 * var(--portfolio-unit));padding-right:calc(35 * var(--portfolio-unit));border-right:1px solid var(--color-line)}.portfolio-page .header .nav{gap:calc(35 * var(--portfolio-unit))}.portfolio-page .header .nav a{font-size:clamp(.625rem,.8vw,.875rem)}.portfolio-page .header-contact{font-size:var(--text-sm)}.portfolio-page .header-contact .eyebrow{font-size:.625rem}.portfolio-page .header>.button{padding:.7rem 1rem;white-space:nowrap}
.portfolio-list{padding-top:calc(40 * var(--portfolio-unit));padding-bottom:calc(100 * var(--portfolio-unit))}.portfolio-row{grid-template-columns:32.4% 67.6%;gap:0;margin-bottom:0;padding-block:calc(75 * var(--portfolio-unit))}.portfolio-copy{padding-top:calc(50 * var(--portfolio-unit));padding-left:calc(85 * var(--portfolio-unit));padding-right:calc(50 * var(--portfolio-unit));gap:calc(30 * var(--portfolio-unit))}.portfolio-copy h2{font-size:clamp(2rem,3.35vw,4rem);line-height:1}.portfolio-copy>p.muted{font-size:clamp(1rem,1.2vw,1.45rem);line-height:1.45}.portfolio-cover img{aspect-ratio:1.54}.project-location{font-size:clamp(.875rem,1vw,1.2rem)}.project-link>.button{width:calc(80 * var(--portfolio-unit));height:calc(80 * var(--portfolio-unit));min-width:2.75rem;min-height:2.75rem;font-size:1.5rem}.project-link .eyebrow{font-size:clamp(.625rem,.9vw,1rem)}
.project-detail{padding-top:calc(35 * var(--portfolio-unit))}.project-back>.button{width:3rem;height:3rem}.project-back .eyebrow{font-size:.65rem}.project-intro{margin-block:calc(40 * var(--portfolio-unit));grid-template-columns:1.25fr 1fr;gap:calc(65 * var(--portfolio-unit))}.project-intro h1{font-size:clamp(2.5rem,3.5vw,4.2rem)}.project-description{font-size:clamp(1rem,1.05vw,1.25rem)}.project-photo-grid{gap:calc(25 * var(--portfolio-unit))}.project-photo-hero{margin-bottom:calc(25 * var(--portfolio-unit))}
}
@media(max-width:47.999rem){.portfolio-cover{order:-1}.portfolio-copy h2{font-size:2.4rem}.portfolio-copy .project-location{margin-bottom:-.25rem}.project-intro h1{font-size:clamp(2rem,9vw,3rem)}}
.project-video{margin-bottom:2rem;display:grid;gap:1rem}.project-video iframe{width:100%;aspect-ratio:16/9;border:0}.project-video>.button{width:fit-content}.project-video p{font-size:var(--text-sm)}
@media(prefers-reduced-motion:no-preference){.portfolio-row.will-reveal .portfolio-cover{clip-path:inset(12% 0 0);transform:translateY(3rem);opacity:.3;transition:clip-path .8s ease,transform .8s ease,opacity .8s ease}.portfolio-row.will-reveal .portfolio-copy{transform:translateY(2rem);opacity:.3;transition:transform .7s ease .1s,opacity .7s ease .1s}.portfolio-row.is-visible .portfolio-cover,.portfolio-row.is-visible .portfolio-copy,.portfolio-row:focus-within .portfolio-cover,.portfolio-row:focus-within .portfolio-copy{clip-path:inset(0);transform:none;opacity:1}}

/* Progressive reveal for project detail pages and their Bitrix-managed galleries. */
.project-detail-page :is(.project-link,.project-photo,.project-video .button):focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
 .project-detail-page .project-detail-reveal-pending{opacity:0;transform:translate3d(0,26px,0)}
 .project-detail-page :is(.header>*,.project-back,.project-intro>*,.project-video,.project-photo){will-change:opacity,transform,clip-path}
}
@media(prefers-reduced-motion:reduce){
 html:has(body.project-detail-page){scroll-behavior:auto}
 .project-detail-page .project-detail-reveal-pending{opacity:1;transform:none}
}