.progress-page{background:#f7f5f1;color:var(--green);--rail:20%;--progress-font:"Noto Sans TC",sans-serif;font-family:var(--progress-font)}
.progress-page [hidden]{display:none!important}
.progress-page button{font:inherit;color:inherit;cursor:pointer}
.progress-page button:focus-visible,.progress-page a:focus-visible{outline:1px solid var(--green);outline-offset:5px}
.progress-skip{position:fixed;top:10px;left:10px;z-index:150;background:white;padding:14px;transform:translateY(-160%)}
.progress-skip:focus{transform:none}
.progress-sidebar{position:fixed;inset:0 auto 0 0;width:var(--rail);padding:55px 2.7vw 30px;display:flex;flex-direction:column;overflow-y:auto}
.progress-title{display:flex;align-items:flex-start;gap:20px;margin-top:86px}
.progress-title h1{font:400 clamp(28px,2.2vw,40px)/1.5 var(--progress-font);letter-spacing:.22em;writing-mode:vertical-rl;padding:0}
.progress-title p{font:400 14px/1.6 var(--progress-font);letter-spacing:.03em;padding-top:5px;opacity:.6}
.progress-projects{margin-top:auto;padding-top:55px}
.progress-projects__label{font-size:10px;letter-spacing:.12em;opacity:.55;margin-bottom:20px}
.progress-projects__label span{display:block;font-size:9px;margin-top:6px}
.progress-projects button{width:100%;background:none;border:0;padding:12px 0;display:flex;justify-content:space-between;align-items:center;text-align:left;opacity:.55;transition:opacity .25s}
.progress-projects button>span:first-child{font:400 19px/1.5 var(--progress-font);letter-spacing:.06em}
.progress-projects button small{display:block;font:400 10px/1.8 "Noto Sans TC",sans-serif;letter-spacing:.06em}
.progress-projects button[aria-pressed=true],.progress-projects button:hover{opacity:1}
.progress-projects button[aria-pressed=true]>span:first-child{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.progress-projects__count{font:400 11px var(--progress-font)}
.progress-sidebar__foot{margin-top:40px;font-size:11px}
.progress-sidebar__foot a{display:flex;justify-content:space-between;max-width:150px}
.progress-sidebar__foot small{display:block;font-size:9px;letter-spacing:.09em;opacity:.45;margin-top:18px}
.progress-page .site-header{position:fixed}
.progress-page .site-header .brand{opacity:1;visibility:visible}
.progress-page .brand img{filter:brightness(0)}
.progress-page .site-header a:focus-visible{outline-color:var(--green)}
.progress-page .site-header .menu-toggle{width:44px;height:44px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.progress-page .site-header .menu-toggle:hover{background:rgba(255,255,255,.26)}
.progress-page .menu-toggle,.progress-page .menu-close{width:44px;height:44px;top:calc((100px - min(285px,55vw)*39/403 - 44px + 9px)/2)}
.progress-main{margin-left:var(--rail);min-height:100svh;padding:51px 4vw 45px 1.6vw}
.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.progress-heading h2{font:400 17px/1.5 var(--progress-font);letter-spacing:.1em;margin:0}
.progress-heading p{font-size:10px;letter-spacing:.08em;opacity:.6}
.progress-note{font-size:10px;line-height:1.9;letter-spacing:.025em;color:#7d8d84;margin-bottom:30px}
.progress-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:2.6vw;row-gap:35px;list-style:none;margin:0;padding:0}
.progress-card{min-width:0}
.progress-card a{display:block}
.progress-card figure{aspect-ratio:1;position:relative;overflow:hidden;background:#e6e5df}
.progress-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.3,1),filter .5s}
.progress-card a:hover img,.progress-card a:focus-visible img{transform:scale(1.045);filter:brightness(.88)}
.progress-card__open{position:absolute;right:14px;bottom:10px;color:white;font-size:26px;font-weight:300;opacity:0;transform:translate(-5px,5px);transition:opacity .3s,transform .3s}
.progress-card a:hover .progress-card__open,.progress-card a:focus-visible .progress-card__open{opacity:1;transform:none}
.progress-card__caption{position:relative;padding-top:13px}
.progress-card h3{margin:0;font-size:12px;font-weight:400;letter-spacing:.08em}
.progress-card small{display:block;font-size:14px;letter-spacing:.04em;opacity:.55;margin-top:7px}
.progress-card__project{display:block;font-size:10px;margin-top:6px;opacity:.7}
.progress-grid.is-filtered .progress-card__project{display:none}
.progress-end{border-top:1px solid #2f5d5025;margin-top:60px;padding:27px 0;display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.06em}
.progress-end a{white-space:nowrap}
body.progress-viewer-open{overflow:hidden}
@media(max-width:1500px){.progress-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.progress-title{gap:12px}.progress-title p{font-size:12px}}
@media(max-width:1100px) and (min-width:761px){.progress-page{--rail:24%}.progress-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.progress-sidebar{padding-left:25px;padding-right:25px}.progress-title{flex-direction:column;gap:15px}.progress-title p br{display:none}}
@media(max-height:850px) and (min-width:761px){.progress-sidebar{padding-top:35px;padding-bottom:20px}.progress-title{margin-top:62px}.progress-title h1{font-size:30px}.progress-projects{padding-top:30px}.progress-projects__label{margin-bottom:12px}.progress-projects button{padding:9px 0}.progress-sidebar__foot{margin-top:25px}}
@media(max-width:760px){
  .progress-sidebar{position:relative;inset:auto;width:100%;padding:32px 6% 0;overflow:visible}
  .progress-title{margin-top:74px;display:block}
  .progress-title h1{writing-mode:horizontal-tb;font-size:28px;letter-spacing:.13em}
  .progress-title p{font-size:13px;margin-top:10px;padding:0}.progress-title p br{display:none}.progress-title p br:after{content:' '}
  .progress-projects{padding-top:32px;margin:0;display:flex;gap:24px;overflow-x:auto;scrollbar-width:thin;align-items:center;padding-bottom:15px;border-bottom:1px solid #2f5d5020}
  .progress-projects__label,.progress-projects__count,.progress-sidebar__foot{display:none}
  .progress-projects button{flex:0 0 auto;width:auto;white-space:nowrap;padding:6px 0}.progress-projects button>span:first-child{font-size:16px}.progress-projects button small{font-size:9px;margin-top:4px}
  .progress-main{margin:0;padding:26px 6% 70px}
  .progress-note{margin-bottom:25px;max-width:330px;font-size:9px}
  .progress-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .progress-card h3{font-size:12px}.progress-card__caption{padding-top:11px}
  .progress-end{margin-top:40px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.progress-card img,.progress-card__open,.progress-projects button{transition:none}.progress-card a:hover img{transform:none}}

/* Full-screen record gallery with quiet vertical title and edge controls. */
.progress-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#f7f5f1;color:var(--green)}
.progress-viewer::backdrop{background:#f7f5f1}
.progress-viewer[open]{animation:progress-gallery-in .35s ease both}
.progress-viewer__rail{position:absolute;left:28px;top:32px;display:flex;gap:17px;z-index:2;max-height:calc(100% - 150px)}
.progress-viewer__rail h2{writing-mode:vertical-rl;text-orientation:mixed;font:400 18px/1.7 var(--progress-font);letter-spacing:.13em;margin:0}
.progress-viewer__rail p{writing-mode:vertical-rl;font:400 12px/1.8 var(--progress-font);letter-spacing:.06em;margin:0;opacity:.65}
.progress-viewer__close{position:absolute;right:28px;top:20px;z-index:3;width:68px;height:55px;border:0;background:none}
.progress-viewer__close span:before,.progress-viewer__close span:after{content:"";position:absolute;left:5px;top:27px;width:58px;height:1px;background:currentColor;transform:rotate(25deg)}
.progress-viewer__close span:after{transform:rotate(-25deg)}
.progress-viewer__content{position:absolute;inset:70px 18vw;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}
.progress-viewer__photo{width:100%;max-width:1050px;flex-shrink:0;margin:auto;text-align:center}
.progress-viewer__photo img{width:auto;height:auto;max-width:100%;max-height:60dvh;object-fit:contain;margin:0 auto}
.progress-viewer__photo figcaption{margin-top:25px;padding:0 12px;letter-spacing:.05em}
.progress-viewer__photo h3{font-size:14px;font-weight:400;margin:0 0 12px}
.progress-viewer__photo figcaption p{font-size:12px;line-height:2;white-space:pre-line}
.progress-viewer__photo figcaption small{display:block;font-size:9px;opacity:.5;margin-top:15px}
.progress-viewer__dots{position:absolute;right:41px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;max-height:calc(100% - 200px);overflow-y:auto;scrollbar-width:thin}
.progress-viewer__dots button{display:grid;place-items:center;width:40px;min-height:29px;flex-shrink:0;padding:0;border:0;background:none}
.progress-viewer__dots button:after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.22;transition:opacity .25s,transform .25s}
.progress-viewer__dots button[aria-pressed=true]:after{width:9px;height:9px;background:transparent;border:1px solid currentColor;opacity:1}
.progress-viewer__dots button:hover:after{opacity:1;transform:scale(1.15)}
.progress-viewer__navigation{position:absolute;right:28px;bottom:23px;display:flex;align-items:center;gap:22px}
.progress-viewer__navigation>div{display:flex;gap:8px}
.progress-viewer__navigation button{background:none;border:0;width:40px;height:44px;display:grid;place-items:center}
.progress-viewer__navigation button span{width:24px;height:24px;display:block;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.progress-viewer__navigation button[data-record=next] span{transform:rotate(225deg)}
.progress-viewer__navigation button:disabled{opacity:.2;cursor:default}
#progress-viewer-position{font:400 11px var(--progress-font);opacity:.6;letter-spacing:.09em}
@keyframes progress-gallery-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .progress-viewer__rail{left:22px;top:24px;display:block;max-width:calc(100% - 95px);max-height:none}
  .progress-viewer__rail h2{writing-mode:horizontal-tb;font-size:17px;letter-spacing:.04em}
  .progress-viewer__rail p{writing-mode:horizontal-tb;font-size:9px;letter-spacing:.02em;margin-top:10px}
  .progress-viewer__close{top:17px;right:12px;width:46px;height:44px}
  .progress-viewer__close span:before,.progress-viewer__close span:after{width:36px;top:21px}
  .progress-viewer__content{inset:145px 28px}
  .progress-viewer__photo img{max-height:40dvh}
  .progress-viewer__photo figcaption{margin-top:20px;padding:0}
  .progress-viewer__photo h3{font-size:13px;margin-bottom:8px}
  .progress-viewer__photo figcaption p{font-size:11px}
  .progress-viewer__dots{top:auto;bottom:100px;left:22px;right:22px;transform:none;flex-direction:row;justify-content:center;max-height:none;overflow-x:auto;overflow-y:hidden}
  .progress-viewer__dots button{width:21px;min-height:32px}
  .progress-viewer__navigation{right:18px;bottom:max(20px,env(safe-area-inset-bottom));gap:12px}.progress-viewer__navigation>div{gap:0}.progress-viewer__navigation button{width:32px}.progress-viewer__navigation button span{width:18px;height:18px}
}
@media(max-width:360px){.progress-viewer__dots button{width:18px}.progress-viewer__navigation{gap:5px}}
@media(prefers-reduced-motion:reduce){.progress-viewer[open]{animation:none}.progress-viewer__dots button:after{transition:none}}

/* Match the home header outer edges at every breakpoint. */
.progress-page{--page-edge:3%}
@media(min-width:761px) and (max-width:1100px){
  .progress-main{padding-top:100px}
}
@media(max-width:760px){
  .progress-page{--page-edge:5%}
  .progress-page .menu-toggle,.progress-page .menu-close{top:calc((84px - min(222px,68vw)*39/403 - 44px + 9px)/2)}
}

/* Choose a project before opening its construction records. */
.progress-main{padding-top:140px}
.progress-project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6vw;list-style:none;margin:0;padding:0}
.progress-project-choice{display:block;width:100%;padding:0;border:0;background:none;text-align:left}
.progress-project-choice__image{display:block;aspect-ratio:4/5;overflow:hidden;background:#e6e5df}
.progress-project-choice__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.3,1)}
.progress-project-choice:hover img,.progress-project-choice:focus-visible img{transform:scale(1.045)}
.progress-project-choice__caption{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid #2f5d5040;font-size:12px;letter-spacing:.06em}
.progress-project-choice__name{margin-right:auto;font-size:22px;font-weight:400}
.progress-project-choice svg,.progress-back svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1}
.progress-record-heading{margin-bottom:32px}
.progress-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;font-size:13px;letter-spacing:.06em}
.progress-back:hover{text-decoration:underline;text-underline-offset:5px}
.progress-record-heading h2{font-size:22px;font-weight:400;letter-spacing:.08em;margin:18px 0 0}
@media(max-width:1100px){.progress-project-list{gap:24px}.progress-project-choice__caption{gap:10px;flex-wrap:wrap}.progress-project-choice__name{width:100%;font-size:20px}.progress-project-choice__caption svg{margin-left:auto}}
@media(max-width:760px){.progress-main{padding-top:32px;scroll-margin-top:100px}.progress-project-list{grid-template-columns:1fr;gap:36px}.progress-project-choice__image{aspect-ratio:4/3}.progress-project-choice__caption{flex-wrap:nowrap;padding:18px 0}.progress-project-choice__name{width:auto}.progress-record-heading h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.progress-project-choice__image img{transition:none}.progress-project-choice:hover img,.progress-project-choice:focus-visible img{transform:none}}