:root{--ink:#111;--paper:#f2f2f2;--line:#d6d6d6;--white:#fff;--muted:#686868}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.portfolio-header{height:88px;display:flex;align-items:center;gap:28px;padding:0 max(4vw,24px);position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.05rem;letter-spacing:.04em;margin-right:auto;white-space:nowrap}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;background:#111;color:#fff;font-size:1.35rem}
.brand small{display:block;font-size:.52rem;line-height:1.1;letter-spacing:.12em;font-weight:700}
.back-link,.book-link{font-size:.9rem;font-weight:700}
.back-link{border-bottom:1px solid}
.book-link{background:#111;color:#fff;padding:11px 20px}
.portfolio-intro{max-width:1260px;margin:auto;padding:70px 32px 42px;display:grid;grid-template-columns:1.2fr .8fr;gap:8%;align-items:end}
.eyebrow{margin:0 0 16px;font-size:.72rem;font-weight:800;letter-spacing:.23em;color:#666}
.portfolio-intro h1{font-size:clamp(3.2rem,7vw,7rem);line-height:.95;letter-spacing:-.065em;margin:0}
.portfolio-intro h1 span{display:block;color:#8a8a8a;font-size:.27em;letter-spacing:.2em;margin-top:20px}
.intro-copy{color:var(--muted);font-size:1.03rem}
.intro-copy p{margin:0}
.intro-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.intro-points span{border:1px solid var(--line);padding:7px 12px;font-size:.78rem;color:#333}
.gallery-wrap{background:#171717;color:#fff;padding:50px max(4vw,24px) 56px;overflow:hidden}
.gallery-top{max-width:1260px;margin:0 auto 24px;display:flex;align-items:end;gap:30px}
.gallery-top h2{font-size:clamp(1.8rem,3.5vw,3.2rem);line-height:1.1;margin:0}
.gallery-top p{margin:0 0 4px auto;color:#aaa;font-size:.85rem}
.gallery-controls{display:flex;gap:8px}
.gallery-controls button{width:48px;height:48px;border:1px solid #666;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer;transition:.2s}
.gallery-controls button:hover,.gallery-controls button:focus-visible{background:#fff;color:#111;outline:none}
.gallery-viewport{max-width:1260px;margin:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-track{display:flex;gap:18px}
.gallery-card{scroll-snap-align:start;flex:0 0 min(68vw,560px);margin:0;position:relative;background:#2a2a2a;overflow:hidden}
.gallery-card img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:none;transition:transform .55s}
.gallery-card:hover img{transform:scale(1.018)}
.gallery-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:80px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.78));display:flex;align-items:end;justify-content:space-between}
.gallery-card strong{font-size:1.12rem}
.gallery-card span{font-size:.75rem;color:#ccc;letter-spacing:.12em}
.gallery-note{max-width:1260px;margin:18px auto 0;color:#999;font-size:.78rem}
.details{max-width:1260px;margin:auto;padding:82px 32px;display:grid;grid-template-columns:.7fr 1.3fr;gap:8%}
.details h2{font-size:clamp(2rem,4vw,4rem);line-height:1.14;margin:0;letter-spacing:-.045em}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.detail-grid article{background:var(--paper);padding:28px}
.detail-grid b{font-size:.7rem;letter-spacing:.16em}
.detail-grid h3{font-size:1.05rem;margin:12px 0 6px}
.detail-grid p{margin:0;color:var(--muted);font-size:.9rem}
.portfolio-cta{background:#202020;color:#fff;padding:70px max(calc((100% - 1196px)/2),32px);display:flex;align-items:center;gap:40px}
.portfolio-cta h2{font-size:clamp(2rem,4vw,4rem);line-height:1.1;margin:0}
.portfolio-cta p{margin:12px 0 0;color:#bbb}
.portfolio-cta .btn{margin-left:auto;white-space:nowrap;background:#fff;color:#111;padding:14px 25px;font-weight:800}
.portfolio-footer{max-width:1260px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;color:#777;font-size:.78rem}
@media(max-width:760px){.portfolio-header{height:72px;padding:0 18px}
.back-link{display:none}
.book-link{padding:9px 14px}
.portfolio-intro{grid-template-columns:1fr;padding:48px 20px 30px;gap:30px}
.portfolio-intro h1{font-size:3.8rem}
.gallery-wrap{padding:38px 20px 44px}
.gallery-top{align-items:center;flex-wrap:wrap}
.gallery-top p{order:3;width:100%;margin:0}
.gallery-controls{margin-left:auto}
.gallery-card{flex-basis:82vw}
.details{grid-template-columns:1fr;padding:64px 20px;gap:34px}
.detail-grid{grid-template-columns:1fr}
.portfolio-cta{padding:58px 20px;display:block}
.portfolio-cta .btn{display:inline-block;margin:28px 0 0}
.portfolio-footer{padding:24px 20px;display:block}
.portfolio-footer p{margin:4px 0}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.gallery-card img{transition:none}
}

.brand-logo{width:39px;height:39px;object-fit:contain;flex:0 0 auto}

@media(max-width:760px){.brand-logo{width:34px;height:34px}
}

.portfolio-cta{background:#ededed;color:#111;border-top:1px solid #d3d3d3}

.portfolio-cta .eyebrow,.portfolio-cta p{color:#666}

.portfolio-cta .btn{background:#111;color:#fff}

.professional-page .portfolio-intro h1{font-size:clamp(3rem,6vw,6.2rem)}

@media(max-width:760px){.professional-page .portfolio-intro h1{font-size:3rem}
}