/* The complete portfolio: quiet horizontal bands and generous building portraits. */
.all-projects-page .works-toolbar{padding-top:30px;padding-bottom:22px;flex-wrap:wrap}
.portfolio-list{padding-top:24px;padding-bottom:65px}
.portfolio-list .portfolio-work{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;column-gap:clamp(40px,6vw,100px);margin:64px 0 108px;padding:72px var(--gutter) 48px;border:0;min-height:610px}
.portfolio-work::before{content:"";position:absolute;z-index:-1;inset:136px 0 0;background:#eeefeb}
.portfolio-list .work-image{grid-column:2;grid-row:1;width:100%;align-self:start;border-radius:18px;background:transparent;box-shadow:none}
.portfolio-list .work-image img{display:block;width:100%;height:auto;aspect-ratio:1.08;object-fit:cover;object-position:50% 42%;border-radius:inherit;transition:transform .7s ease}
.portfolio-list .work-image:hover img{transform:scale(1.025)}
.portfolio-list .work-copy{grid-column:1;grid-row:1;padding-top:72px;padding-bottom:15px;max-width:490px}
.portfolio-index{font-size:10px;letter-spacing:.2em;color:#7a8279;margin:0 0 25px}
.portfolio-list .work-copy h2{font-size:clamp(32px,3.1vw,48px);line-height:1.5;letter-spacing:.12em;margin:0 0 20px}
.portfolio-list .work-caption{font-family:"Noto Serif TC","PMingLiU","Songti TC",serif;font-size:clamp(19px,1.8vw,27px);line-height:1.9;margin:0 0 30px;letter-spacing:.07em}
.portfolio-list .work-location{display:flex;flex-wrap:wrap;align-items:center;gap:12px 0;font-size:13px;line-height:1.8;letter-spacing:.1em;margin:0}
.portfolio-list .work-location span+span{border-left:1px solid #a8aea5;padding-left:18px;margin-left:18px}
.portfolio-list .work-highlights{margin-top:18px;gap:10px 16px;font-size:11px}
.portfolio-list .work-copy .line-link{margin-top:35px;min-width:150px}
.portfolio-year{position:absolute;top:0;right:var(--gutter);font-family:Arial,sans-serif;font-weight:300;font-size:clamp(48px,5.5vw,80px);line-height:1;letter-spacing:.065em;color:#a4aaa0;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:18px}
.portfolio-year span{font-family:"Microsoft JhengHei",sans-serif;font-size:10px;letter-spacing:.16em;color:#7c857b}
.portfolio-work{scroll-margin-top:20px}
.portfolio-work[hidden]{display:none}
@media(min-width:1500px){.portfolio-list .portfolio-work{padding-left:max(var(--gutter),calc((100vw - 1320px)/2));padding-right:max(var(--gutter),calc((100vw - 1320px)/2))}.portfolio-year{right:max(var(--gutter),calc((100vw - 1320px)/2))}}
@media(max-width:1000px) and (min-width:761px){.portfolio-list .portfolio-work{column-gap:35px;min-height:520px}.portfolio-list .work-copy{padding-top:65px}.portfolio-list .work-copy h2{font-size:32px}.portfolio-list .work-caption{font-size:19px}.portfolio-list .work-image img{aspect-ratio:.85}}
@media(max-width:760px){
 .all-projects-page .works-toolbar{padding:25px 24px 10px;gap:16px}
 .all-projects-page .project-filters{display:flex;flex-wrap:wrap;gap:8px 18px}
 .portfolio-list{padding-top:15px;padding-bottom:15px}
 .portfolio-list .portfolio-work{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;margin:35px 0 65px;padding:54px 24px 38px}
 .portfolio-work::before{inset:130px 0 0}
 .portfolio-year{top:0;right:24px;font-size:44px;gap:12px}
 .portfolio-year span{font-size:9px}
 .portfolio-list .work-image{border-radius:14px;align-self:stretch}
 .portfolio-list .work-image img{aspect-ratio:1.12;object-position:50% 38%}
 .portfolio-list .work-copy{padding:30px 0 0;max-width:none}
 .portfolio-index{font-size:9px;margin-bottom:16px}
 .portfolio-list .work-copy h2{font-size:31px;margin-bottom:14px}
 .portfolio-list .work-caption{font-size:21px;margin-bottom:23px}
 .portfolio-list .work-location{font-size:12px}
 .portfolio-list .work-highlights{font-size:11px}
 .portfolio-list .work-copy .line-link{margin-top:26px}
}
@media(prefers-reduced-motion:reduce){.portfolio-list .work-image img{transition:none}.portfolio-list .work-image:hover img{transform:none}}
/* Reveal only the building above the lower photographic frame. */
.portfolio-list .portfolio-work{overflow:clip}
.portfolio-work::before{display:none}
.portfolio-list .work-image{overflow:visible;border-radius:0}
.portfolio-list .work-image::before{content:"";position:absolute;z-index:-1;top:var(--portfolio-band,0px);bottom:-100vh;left:-100vw;right:-100vw;background:#eeefeb;pointer-events:none}
.portfolio-list .work-image img{height:auto;aspect-ratio:auto;object-fit:initial;border-radius:0;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;transition:none}
.portfolio-list .work-image:hover img{transform:none}
.portfolio-list #work-fu-gang-guanyin img{--portfolio-mask:url('assets/portfolio-masks/guanyin.svg')}
.portfolio-list #work-fu-gang-gelinyuan img{--portfolio-mask:url('assets/portfolio-masks/gelinyuan.svg')}
.portfolio-list #work-fu-gang-zheyue img{--portfolio-mask:url('assets/portfolio-masks/zheyue.svg')}
.portfolio-list #work-fu-gang-park img{--portfolio-mask:url('assets/portfolio-masks/park.svg')}
.portfolio-list #work-fu-gang-hefeng img{--portfolio-mask:url('assets/portfolio-masks/hefeng.svg')}
.portfolio-list .work-image img{mask-image:var(--portfolio-mask),linear-gradient(to bottom,transparent var(--portfolio-band,0px),#000 var(--portfolio-band,0px));-webkit-mask-image:var(--portfolio-mask),linear-gradient(to bottom,transparent var(--portfolio-band,0px),#000 var(--portfolio-band,0px));mask-size:100% 100%,100% 100%;-webkit-mask-size:100% 100%,100% 100%;mask-composite:add;-webkit-mask-composite:source-over}
.portfolio-list .work-copy{padding-top:150px}
@media(max-width:760px){.portfolio-list .work-copy{padding-top:30px}.portfolio-list .portfolio-work{padding-bottom:38px}}
/* The picture terminates exactly at the bottom edge of the project band. */
.portfolio-list .work-copy h2 a{display:inline-block;text-underline-offset:.24em;text-decoration-thickness:1px}
.portfolio-list .work-copy h2 a:hover,.portfolio-list .work-copy h2 a:focus-visible{text-decoration:underline}
@media(min-width:761px){
 .portfolio-list .portfolio-work{min-height:0;padding-bottom:0;align-items:end}
 .portfolio-list .work-image{align-self:end}
 .portfolio-list .work-image::before{bottom:0}
 .portfolio-list .work-copy{padding-top:0;padding-bottom:32px}
 .portfolio-list .portfolio-index{margin-bottom:14px}
 .portfolio-list .work-copy h2{margin-bottom:14px}
 .portfolio-list .work-caption{margin-bottom:22px}
 .portfolio-list .work-highlights{margin-top:14px}
}
/* Give tablet copy its own row before the two columns become cramped. */
@media(min-width:761px) and (max-width:1050px){
 .portfolio-list .portfolio-work{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:64px var(--gutter) 38px}
 .portfolio-list .work-image{width:100%;align-self:stretch}
 .portfolio-list .work-image::before{bottom:-100vh}
 .portfolio-list .work-copy{max-width:none;padding:32px 0 0}
}